added some docs

src/app/index.ts

@@ -110,29 +110,25 @@ class HLX {
   }
 
   private async beforeLoadEager(): Promise<void> {
-    const dummyDelay: Promise<void> = new Promise((resolve) => {
-      // Business Logic
-      // Resolve
-      setTimeout(() => {
-        console.log(new Date().getTime(), 'beforeLoadEager');
-        resolve();
-      }, 5000);
+    const beforeLoadEagerTask: Promise<void> = new Promise((resolve) => {
+      setupHlxObj();
+      decorateTemplateAndTheme();
+      setDocLanguage();
+      resolve();
     });
 
-    await Promise.all([...this.beforeEagerCallbacks.map((cb) => cb()), dummyDelay]);
+    await Promise.all([...this.beforeEagerCallbacks.map((cb) => cb()), beforeLoadEagerTask]);
   }
 
   private async loadEagerPromise(): Promise<void> {
     const loadEagerTask: Promise<void> = new Promise(async (resolve) => {
       const main = document.querySelector('main');
-      setupHlxObj();
-      decorateTemplateAndTheme();
-      setDocLanguage();
       decorateButtons(main);
       setTimeout(() => {
         document.body.classList.add('show');
         resolve();
       }, 100);
+
       await waitForLCP();
 
       try {
@@ -149,15 +145,9 @@ class HLX {
   }
 
   private async beforeLoadLazyPromise(): Promise<void> {
-    const defaultTask: Promise<void> = new Promise((resolve) => {
-      // Business Logic
-      // Resolve
-      setTimeout(() => {
-        resolve();
-      }, 4000);
-    });
+    const beforeLoadLazyTask: Promise<void> = new Promise((resolve) => resolve());
 
-    await Promise.all([...this.beforeLoadLazyCallbacks.map((cb) => cb()), defaultTask]);
+    await Promise.all([...this.beforeLoadLazyCallbacks.map((cb) => cb()), beforeLoadLazyTask]);
   }
 
   private async loadLazyPromise(): Promise<void> {

src/app/tasks/collectBlocks.ts

@@ -1,5 +1,14 @@
 import { BlockMapping } from '../app.types';
 
+/**
+ * Collect all blocks in a section.
+ * @param section - The section to collect the blocks from.
+ * @returns BlockMapping[]
+ * @example
+ * const blocks = collectBlocks(section);
+ * console.log(blocks);
+ * // Output: [{ name: 'block1', element: HTMLElement }, { name: 'block2', element: HTMLElement }]
+ */
 export function collectBlocks(section: HTMLElement): BlockMapping[] {
   const blockMap: BlockMapping[] = [];
   const blocksElements = section.querySelectorAll<HTMLDivElement>('[data-block-name]');

src/app/tasks/loadBlockModules.ts

@@ -2,7 +2,13 @@ import { DebuggerService } from '@kluntje/services';
 import { BlockMapping } from '../app.types';
 import { getUrlForEndpoint } from '../utils/getUrlForEndpoint';
 
-export async function loadBlockModules(block: BlockMapping) {
+/*
+ * Load the es module for the block. The module should be named as the block name.
+ * @param block - The block to load the module for.
+ * @returns Promise<void>
+ */
+
+export async function loadBlockModules(block: BlockMapping): Promise<void> {
   const status = block.element.dataset.blockStatus ?? 'unloaded';
 
   if (status === 'unloaded') {

src/app/tasks/loadBlockStyles.ts

@@ -1,6 +1,11 @@
 import { BlockMapping } from '../app.types';
 import { loadCSS } from './loadCSS';
 
+/**
+ * Load the block styles. The styles should be named as the block name.
+ * @param block - The block to load the styles for.
+ * @returns Promise<void>
+ */
 export async function loadBlockStyles(block: BlockMapping) {
   try {
     await loadCSS(`dist/${block.name}/${block.name}.css`);

src/app/tasks/loadCSS.ts

@@ -1,5 +1,10 @@
 import { getUrlForEndpoint } from '../utils/getUrlForEndpoint';
 
+/**
+ * Load a CSS file if it is not already loaded append it to the head.
+ * @param endpoint - The endpoint of the CSS file.
+ * @returns Promise<boolean>
+ */
 export async function loadCSS(endpoint: string) {
   return new Promise((resolve, reject) => {
     const { href } = getUrlForEndpoint(endpoint);

src/app/tasks/setDocLanguage.ts

@@ -2,7 +2,7 @@ import { getMetadata } from '../../utils/getMetadata';
 import { undefinedOnEmpty } from '../../utils/undefinedOnEmpty';
 
 /*
- * This function sets the language of the document
+ * This function sets the language of the document based on the language metadata.
  */
 export function setDocLanguage() {
   const lang = getMetadata('language');

src/app/tasks/showSection.ts

@@ -1,3 +1,7 @@
+/**
+ * Removes the display property from the section
+ * @param section - The section to show
+ */
 export function showSection(section: HTMLElement) {
   section.style.removeProperty('display');
 }

src/app/tasks/waitForLCP.ts

@@ -5,6 +5,11 @@ import { config } from '../../../config';
 import { showSection } from './showSection';
 import { LcpCandidate } from '../app.types';
 
+/**
+ * Wait for the Largest Contentful Paint (LCP) candidate to be loaded.
+ * This function will load the modules and styles for the first section after the LCP candidate.
+ * @returns Promise<void>
+ */
 export async function waitForLCP() {
   const firstSection: HTMLElement | null = document.querySelector('.section');
   const { lcpBlocks } = config;

src/components/sidebar/sidebar.init.ts

@@ -15,6 +15,6 @@ const addSidebarContainer = () => {
 
 HLX.addLoadEagerTask(() => {
   addSidebarContainer();
-  console.log('BEFORE EAGER SIDEBAR TS');
+  console.log('LOAD EAGER SIDEBAR TS');
   return Promise.resolve();
 });

types/src/app/tasks/collectBlocks.d.ts

@@ -1,2 +1,11 @@
 import { BlockMapping } from '../app.types';
+/**
+ * Collect all blocks in a section.
+ * @param section - The section to collect the blocks from.
+ * @returns BlockMapping[]
+ * @example
+ * const blocks = collectBlocks(section);
+ * console.log(blocks);
+ * // Output: [{ name: 'block1', element: HTMLElement }, { name: 'block2', element: HTMLElement }]
+ */
 export declare function collectBlocks(section: HTMLElement): BlockMapping[];

types/src/app/tasks/loadBlockStyles.d.ts

@@ -1,2 +1,7 @@
 import { BlockMapping } from '../app.types';
+/**
+ * Load the block styles. The styles should be named as the block name.
+ * @param block - The block to load the styles for.
+ * @returns Promise<void>
+ */
 export declare function loadBlockStyles(block: BlockMapping): Promise<void>;

types/src/app/tasks/loadCSS.d.ts

@@ -1 +1,6 @@
+/**
+ * Load a CSS file if it is not already loaded append it to the head.
+ * @param endpoint - The endpoint of the CSS file.
+ * @returns Promise<boolean>
+ */
 export declare function loadCSS(endpoint: string): Promise<unknown>;

types/src/app/tasks/showSection.d.ts

@@ -1 +1,5 @@
+/**
+ * Removes the display property from the section
+ * @param section - The section to show
+ */
 export declare function showSection(section: HTMLElement): void;

types/src/app/tasks/waitForLCP.d.ts

@@ -1 +1,6 @@
+/**
+ * Wait for the Largest Contentful Paint (LCP) candidate to be loaded.
+ * This function will load the modules and styles for the first section after the LCP candidate.
+ * @returns Promise<void>
+ */
 export declare function waitForLCP(): Promise<void>;