✨ Added lazier CSS loading - Closes #2

codewithkyle · codewithkyle · commit 5dac86bdcc55 · 2024-03-07T17:17:40.000-05:00
diff --git a/lazy-loader.d.ts b/lazy-loader.d.ts
@@ -4,6 +4,7 @@ export type LazyLoaderSettings = {
     cssDir?: string;
     jsDir?: string;
     default?: "eager" | "lazy";
+    lazierCSS?: boolean;
 };
 
 declare const configure: (settings?:Partial<LazyLoaderSettings>) => void;
diff --git a/src/lazy-loader.ts b/src/lazy-loader.ts
@@ -9,6 +9,7 @@ class LazyLoader {
             cssDir: "css",
             jsDir: "js",
             default: "lazy",
+            lazierCSS: false,
         };
         this.io = new IntersectionObserver(this.intersectionCallback);
     }
@@ -18,7 +19,7 @@ class LazyLoader {
         // @ts-ignore
         this.settings.cssDir = this.settings.cssDir.replace(/^\/|\/$/g, "").trim();
         // @ts-ignore
-        this.settings.jsDir = this.settings.jsDir.replace(/^\/|\/$/g, "").trim()
+        this.settings.jsDir = this.settings.jsDir.replace(/^\/|\/$/g, "").trim();
         this.main();
     }
 
@@ -160,10 +161,24 @@ class LazyLoader {
 
     private async upgrade(element:HTMLElement):Promise<void>{
         try{
+            const promises: Array<Promise<any>> = new Array(2);
             const tagName = element.tagName.toLowerCase().trim();
             const url = this.getModuleUrl(element, tagName);
-            const constructor = await this.loadModule(url);
-            this.mount(tagName, constructor);
+            promises[0] = this.loadModule(url);
+            if (this.settings.lazierCSS && element.hasAttribute("css")){
+                // @ts-ignore
+                const attrValue = element.getAttribute("css").trim().replace(/\s+/, " ");
+                const files = attrValue.split(" ");
+                element.removeAttribute("css");
+                if (files.length){
+                    promises[1] = this.css(files);
+                }
+            }
+            const results = await Promise.allSettled(promises);
+            if (results[0].status === "fulfilled"){
+                const constructor = results[0].value as CustomElementConstructor;
+                this.mount(tagName, constructor);
+            }
         } catch (e) {
             console.error(e);
         }
@@ -189,8 +204,10 @@ class LazyLoader {
     }
 
     private async main(){
-        const files = this.collectLazyCSS();
-        await this.css(files);
+        if (!this.settings.lazierCSS){
+            const files = this.collectLazyCSS();
+            await this.css(files);
+        }
         const elements = this.collectCustomElements();
         this.upgradeOrTrack(elements);
     }
diff --git a/test/index.html b/test/index.html
@@ -37,15 +37,19 @@
 </head>
 <body class="m-0 bg-grey-200 w-screen block">
     <main>
-        <example-component web-component loading="eager"></example-component>
+        <example-component css="test" web-component></example-component>
+        <div style="height:150vh;"></div>
+        <second-example-component css="test" web-component></second-example-component>
     </main>
 
 	<script type="module">
         import { configure, mount } from "/lazy-loader.min.mjs";
         configure({
             jsDir: "/",
             cssDir: "/",
+            //default: "eager",
+            lazierCSS: true,
         });
 	</script>
 </body>
-</html>
+</html>
diff --git a/test/second-example-component.js b/test/second-example-component.js
@@ -0,0 +1,6 @@
+export class SecodnExampleComponent extends HTMLElement{
+    constructor(){
+        super();
+        this.innerHTML = "Hello world 2";
+    }
+}
