✨ Added ability to set eager by default - Closes #1

Author: codewithkyle

lazy-loader.d.ts

@@ -3,9 +3,10 @@ export type Loading = "eager" | "lazy";
 export type LazyLoaderSettings = {
     cssDir?: string;
     jsDir?: string;
+    default?: "eager" | "lazy";
 };
 
 declare const configure: (settings?:Partial<LazyLoaderSettings>) => void;
 declare const update: () => void;
 declare const mount: (tagName:string, constructor?: CustomElementConstructor) => Promise<void>;
-declare const css: (files:string|string[]) => Promise<void>;
+declare const css: (files:string|string[]) => Promise<void>;

src/lazy-loader.ts

@@ -8,13 +8,16 @@ class LazyLoader {
         this.settings = {
             cssDir: "css",
             jsDir: "js",
+            default: "lazy",
         };
         this.io = new IntersectionObserver(this.intersectionCallback);
     }
 
     public configure(settings:Partial<LazyLoaderSettings> = {}){
         this.settings = Object.assign(this.settings, settings);
+        // @ts-ignore
         this.settings.cssDir = this.settings.cssDir.replace(/^\/|\/$/g, "").trim();
+        // @ts-ignore
         this.settings.jsDir = this.settings.jsDir.replace(/^\/|\/$/g, "").trim()
         this.main();
     }
@@ -42,8 +45,8 @@ class LazyLoader {
                 } else {
                     href = `${location.origin}/${this.settings.cssDir}/${file.replace(/\.css$/g, "").trim()}.css`;
                 }
-                let stylesheet:HTMLLinkElement = document.head.querySelector(`link[href="${href}"]`);
-                if (!stylesheet){
+                let stylesheet = document.head.querySelector(`link[href="${href}"]`) as HTMLLinkElement;
+                if (stylesheet === null){
                     new Promise<void>(resolve => {
                         stylesheet = document.createElement("link");
                         stylesheet.href = href;
@@ -72,7 +75,7 @@ class LazyLoader {
         });
     }
 
-    public async mount(tagName:string, constructor:CustomElementConstructor = null):Promise<void>{
+    public async mount(tagName:string, constructor:CustomElementConstructor|null = null):Promise<void>{
         if (!customElements.get(tagName)){
             if (constructor === null){
                 try{
@@ -107,6 +110,7 @@ class LazyLoader {
         let files:string[] = [];
         const elements = Array.from(document.body.querySelectorAll("[css]"));
         for (let i = 0; i < elements.length; i++){
+            // @ts-ignore
             const attrValue = elements[i].getAttribute("css").trim().replace(/\s+/, " ");
             const fileNames = attrValue.split(" ");
             files = [...files, ...fileNames];
@@ -141,7 +145,7 @@ class LazyLoader {
 
     private getModuleUrl(element:HTMLElement, tagName:string):string{
         let url = `${location.origin}/${this.settings.jsDir}/${tagName}.js`;
-        const attrValue = element.getAttribute("web-component");
+        const attrValue = element.getAttribute("web-component") || "";
         if (attrValue !== ""){
             if (attrValue.indexOf("https://") === 0 || attrValue.indexOf("http://") === 0){
                 url = attrValue;
@@ -168,7 +172,14 @@ class LazyLoader {
     private async upgradeOrTrack(elements:Array<HTMLElement>):Promise<void>{
         for (const element of elements) {
             const loadType = element.getAttribute("loading") as Loading;
-            if (loadType === "eager") {
+            if (loadType === null) {
+                if (this.settings.default === "eager"){
+                    await this.upgrade(element);
+                    element.setAttribute("web-component-state", "mounted");
+                } else {
+                    this.io.observe(element);
+                }
+            } else if (loadType === "eager") {
                 await this.upgrade(element);
                 element.setAttribute("web-component-state", "mounted");
             } else {
@@ -190,4 +201,4 @@ const configure = loader.configure.bind(loader);
 const update = loader.update.bind(loader);
 const mount = loader.mount.bind(loader);
 const css = loader.css.bind(loader);
-export { configure, update, mount, css };
+export { configure, update, mount, css };