Optimize

- loadComponents func - decorateImages
ifahrentholz · Feb 6, 2024 · c987bef · c987bef
1 parent b399fdd
commit c987bef
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 29 deletions.
diff --git a/dist/__chunks__/createOptimizedPicture.F94eikeI.js b/dist/__chunks__/createOptimizedPicture.F94eikeI.js
diff --git a/dist/__chunks__/createOptimizedPicture.F94eikeI.js.map b/dist/__chunks__/createOptimizedPicture.F94eikeI.js.map
diff --git a/dist/main/main.js b/dist/main/main.js
diff --git a/dist/main/main.js.map b/dist/main/main.js.map
diff --git a/src/main.ts b/src/main.ts
@@ -145,7 +145,10 @@ class SectionService {
   decorateImages() {
     const picture = document.querySelectorAll('.default-content-wrapper picture');
     picture.forEach((item) => {
-      item.parentElement?.classList.add('image', 'main');
+      const parentElement = item.parentElement;
+      if (parentElement) {
+        parentElement.classList.add('image', 'main');
+      }
     });
   }
 }
@@ -230,33 +233,47 @@ class Main {
 
   private loadComponents = async () => {
     const sections = document.querySelectorAll<HTMLElement>('.section');
-    sections.forEach((section) => {
-      const components: ComponentMapping[] = [];
-      const blocks = section.querySelectorAll<HTMLDivElement>('[data-block-name]');
-      if (!blocks.length) {
-        section.style.removeProperty('display');
+
+    sections.forEach(async (section) => {
+      const components: ComponentMapping[] = this.collectComponents(section);
+      if (!components.length) {
+        this.showSection(section);
         return;
       }
-      blocks.forEach((block: HTMLDivElement) => {
-        block.style.display = 'none';
-        components.push({
-          name: block.dataset['blockName'] as string,
-          element: block,
-        });
-      });
-      if (components.length) {
-        components.forEach(async (component) => {
-          const componentModule = await import(
-            `${window.hlx.codeBasePath}/dist/${component.name}/${component.name}.js`
-          );
-          if (componentModule.default) {
-            await componentModule.default(component.element);
-          }
-        });
-      }
-      section.style.removeProperty('display');
+
+      await this.loadComponentModules(components);
+      this.showSection(section);
     });
   };
+
+  private collectComponents(section: HTMLElement): ComponentMapping[] {
+    const components: ComponentMapping[] = [];
+    const blocks = section.querySelectorAll<HTMLDivElement>('[data-block-name]');
+
+    blocks.forEach((block: HTMLDivElement) => {
+      block.style.display = 'none';
+      components.push({
+        name: block.dataset['blockName'] as string,
+        element: block,
+      });
+    });
+
+    return components;
+  }
+
+  private async loadComponentModules(components: ComponentMapping[]) {
+    for (const component of components) {
+      const componentModule = await import(`${window.hlx.codeBasePath}/dist/${component.name}/${component.name}.js`);
+
+      if (componentModule.default) {
+        await componentModule.default(component.element);
+      }
+    }
+  }
+
+  private showSection(section: HTMLElement) {
+    section.style.removeProperty('display');
+  }
 }
 
 (async function () {

diff --git a/types/components/sidebar/sidebarPosts.d.ts b/types/components/sidebar/sidebarPosts.d.ts
@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class SidebarPosts extends LitElement {
+    private lastTreePosts;
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private getLastThreePosts;
+    private fetchSitemap;
+    private renderPost;
+    private getPosts;
+}