feat(service): preloading capability

Author: mohammedzamakhan

projects/elements-demo/src/app/features/docs/api/api.component.html

@@ -293,6 +293,17 @@ <h2>LazyElementRootOptions</h2>
             >
           </td>
         </tr>
+        <tr>
+          <td><pre>preload: boolean</pre></td>
+          <td>
+            <p>
+              Flag that specifies if the all the modules should be preloaded
+            </p>
+            <code color="accent">Optional</code>&nbsp;<code color="accent"
+              >Default: undefined</code
+            >
+          </td>
+        </tr>
       </tbody>
     </table>
   </mat-card>
@@ -406,6 +417,53 @@ <h2>ElementConfig</h2>
             >
           </td>
         </tr>
+        <tr>
+          <td><pre>preload: boolean</pre></td>
+          <td>
+            <p>
+              Flag that specifies if the element is preloaded.
+            </p>
+            <code color="accent">Optional</code>&nbsp;<code color="accent"
+              >Default: undefined</code
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </mat-card>
+</section>
+
+<section>
+  <h2>LazyElementsLoaderService</h2>
+  <code color="accent">Service</code>
+  <br />
+  <p>
+    A service used for loading the Angular element (or any other webcomponent)
+  </p>
+  <mat-card>
+    <table>
+      <thead>
+        <th>Method</th>
+        <th>Description</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td><pre>preload(tags? : string[]): void</pre></td>
+          <td>
+            <p>
+              Preloads the specified tags which are preconfigured using
+              <code>forRoot</code> and <code>forFeature</code>. If
+              <code>tags</code> is <code>undefined|null</code> preload all the
+              configured tags. <br />
+              Parameters: <br />
+              tags <code color="accent">Optional</code>&nbsp;<code
+                color="accent"
+                >Default: undefined</code
+              ><br />
+              returns: <code color="accent">void</code>
+            </p>
+          </td>
+        </tr>
       </tbody>
     </table>
   </mat-card>

projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

@@ -110,4 +110,32 @@ <h2>
       <pre [highlight]="codeExample4coreModule"></pre>
     </div>
   </div>
+
+  <h2>
+    Preloading
+  </h2>
+  <div class="content">
+    <div class="implementation">
+      <button mat-flat-button color="accent" (click)="preload()">
+        Preload
+      </button>
+      <button
+        class="additional-btn"
+        mat-flat-button
+        color="accent"
+        (click)="preloadFab()"
+      >
+        Preload Fab
+      </button>
+    </div>
+    <div class="description">
+      <p>
+        You can inject <code>LazyElementLoaderService</code> and call the
+        <code>preload</code> method to preload all the configured modules, or
+        specify the list of <code>tags</code> you want to preload.
+      </p>
+      <pre [highlight]="codeExample5html"></pre>
+      <pre [highlight]="codeExample5ts"></pre>
+    </div>
+  </div>
 </div>

projects/elements-demo/src/app/features/examples/advanced/advanced.component.scss

@@ -20,6 +20,10 @@
       p {
         margin: 10px 0 0 0;
       }
+
+      .additional-btn {
+        margin-top: 10px;
+      }
     }
 
     .description {

projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { LazyElementsLoaderService } from './../../../../../../elements/src/lib/lazy-elements/lazy-elements-loader.service';
 
 @Component({
   selector: 'demo-advanced',
@@ -21,17 +22,27 @@ export class AdvancedComponent implements OnInit {
   codeExample3html = CODE_EXAMPLE_3_HTML;
   codeExample4html = CODE_EXAMPLE_4_HTML;
   codeExample4coreModule = CODE_EXAMPLE_4_CORE_MODULE;
+  codeExample5html = CODE_EXAMPLE_5_HTML;
+  codeExample5ts = CODE_EXAMPLE_5_TS;
 
   // example state
   counter = 0;
 
-  constructor() {}
+  constructor(private lazyElementLoaderService: LazyElementsLoaderService) {}
 
   ngOnInit() {}
 
   increment() {
     this.counter++;
   }
+
+  preload() {
+    this.lazyElementLoaderService.preload();
+  }
+
+  preloadFab() {
+    this.lazyElementLoaderService.preload(['mwc-fab']);
+  }
 }
 
 const CODE_EXAMPLE_1_MODULE = `// pre-configured LazyElementsModule
@@ -41,7 +52,8 @@ const options: LazyElementModuleOptions = {
       tag: 'ion-button',
       url: 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js',
       loadingComponent: SpinnerComponent,
-      errorComponent: ErrorComponent
+      errorComponent: ErrorComponent,
+      preload: true
     }
   ]
 };
@@ -132,3 +144,19 @@ const options: LazyElementModuleRootOptions = {
 })
 export class CoreModule { }
 `;
+
+const CODE_EXAMPLE_5_HTML = `<button (click)="preload()">Preload</button>`;
+
+const CODE_EXAMPLE_5_TS = `
+class PageComponent {
+  constructor(private lazyElementLoaderService: LazyElementLoaderService) {}
+
+  preload() {
+    this.lazyElementLoaderService.preload();
+  }
+
+  preloadFab() {
+    this.lazyElementLoaderService.preload(['mwc-fab']);
+  }
+}
+`;

projects/elements-demo/src/app/features/examples/advanced/advanced.module.ts

@@ -19,7 +19,8 @@ const options: LazyElementModuleOptions = {
       tag: 'ion-button',
       url: 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js',
       loadingComponent: SpinnerComponent,
-      errorComponent: ErrorComponent
+      errorComponent: ErrorComponent,
+      preload: true
     },
     {
       tag: 'mwc-switch',

projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.spec.ts

@@ -138,7 +138,8 @@ describe('LazyElementsLoaderService preconfigured with LazyElementsModule', () =
             { tag: 'some-element', url: 'http://elements.com/some-url' },
             {
               tag: 'some-other-element',
-              url: 'http://elements.com/some-other-url'
+              url: 'http://elements.com/some-other-url',
+              preload: true
             },
             {
               tag: 'some-module-element',
@@ -167,7 +168,8 @@ describe('LazyElementsLoaderService preconfigured with LazyElementsModule', () =
     });
     expect(service.configs[1]).toEqual({
       tag: 'some-other-element',
-      url: 'http://elements.com/some-other-url'
+      url: 'http://elements.com/some-other-url',
+      preload: true
     });
     expect(service.configs[2]).toEqual({
       tag: 'some-module-element',
@@ -185,4 +187,14 @@ describe('LazyElementsLoaderService preconfigured with LazyElementsModule', () =
     );
     expect(appendChildSpy.calls.argsFor(0)[0].type).toBe('module');
   });
+
+  it('should preload all the configurations', () => {
+    service.preload();
+    expect(appendChildSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('should preload only specified tags', () => {
+    service.preload(['some-element']);
+    expect(appendChildSpy).toHaveBeenCalledTimes(1);
+  });
 });

projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts

@@ -11,6 +11,7 @@ export interface ElementConfig {
   isModule?: boolean;
   loadingComponent?: Type<any>;
   errorComponent?: Type<any>;
+  preload?: boolean;
 }
 
 @Injectable({
@@ -39,6 +40,13 @@ export class LazyElementsLoaderService {
         );
       } else {
         this.configs.push(newConfig);
+        const shouldPreload =
+          newConfig.preload !== undefined
+            ? newConfig.preload
+            : this.options.preload;
+        if (shouldPreload) {
+          this.loadElement(newConfig.url, newConfig.tag, newConfig.isModule);
+        }
       }
     });
   }
@@ -47,6 +55,16 @@ export class LazyElementsLoaderService {
     return this.configs.find(config => config.tag === tag);
   }
 
+  preload(tags?: string[]) {
+    let configs = this.configs;
+    if (tags) {
+      configs = this.configs.filter(config => tags.includes(config.tag));
+    }
+    configs.forEach(config =>
+      this.loadElement(config.url, config.tag, config.isModule)
+    );
+  }
+
   loadElement(url: string, tag: string, isModule?: boolean): Promise<void> {
     const config = this.getElementConfig(tag);
 

projects/elements/src/lib/lazy-elements/lazy-elements.module.ts

@@ -95,4 +95,5 @@ export interface LazyElementRootOptions {
   loadingComponent?: Type<any>;
   errorComponent?: Type<any>;
   isModule?: boolean;
+  preload?: boolean;
 }