feat(element): support / document dynamic module configuration, fix #29

angular-extensions · Jun 10, 2020 · d0a9842 · d0a9842
1 parent 8ba0f7a
commit d0a9842
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 9 deletions.
diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html
@@ -6,6 +6,11 @@ <h3>Quick navigation</h3>
         >Feature module pre-configuration</a
       >
     </li>
+    <li>
+      <a routerLink="." fragment="feature-module-dynamic-pre-configuration"
+        >Feature module dynamic pre-configuration</a
+      >
+    </li>
     <li>
       <a routerLink="." fragment="inline-options"
         >Pre-configuration with inline options</a
@@ -54,6 +59,32 @@ <h2 id="feature-module-pre-configuration">
     </div>
   </div>
 
+  <h2 id="feature-module-dynamic-pre-configuration">
+    Dynamic configuration resolved at runtime
+  </h2>
+  <div class="content">
+    <div class="implementation" *ngIf="!example7">
+      <button mat-flat-button color="accent" (click)="example7 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example7">
+      <wired-toggle *axLazyElement (change)="toggle()">Toggle me</wired-toggle>
+      <p>Value: {{ flag }}</p>
+    </div>
+    <div class="description">
+      <p>
+        In this example we're pre-configuring
+        <code>LazyElementsModule</code> with the element config that is provided
+        during runtime. We're using <code>LAZY_ELEMENT_CONFIGS</code> token as a
+        multi provider with a custom factory function.
+      </p>
+      <pre [highlight]="codeExample7html"></pre>
+      <pre [highlight]="codeExample7module"></pre>
+    </div>
+  </div>
+
   <h2 id="inline-options">
     Elements configured in a feature module with HTML inline options
   </h2>

diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts
@@ -13,6 +13,7 @@ export class AdvancedComponent implements OnInit {
   example3 = false;
   example4 = false;
   example6 = false;
+  example7 = false;
 
   // example code examples
   codeExample1module = CODE_EXAMPLE_1_MODULE;
@@ -27,9 +28,12 @@ export class AdvancedComponent implements OnInit {
   codeExample5ts = CODE_EXAMPLE_5_TS;
   codeExample6html = CODE_EXAMPLE_6_HTML;
   codeExample6module = CODE_EXAMPLE_6_MODULE;
+  codeExample7html = CODE_EXAMPLE_7_HTML;
+  codeExample7module = CODE_EXAMPLE_7_MODULE;
 
   // example state
   counter = 0;
+  flag = false;
 
   constructor(private lazyElementLoaderService: LazyElementsLoaderService) {}
 
@@ -39,6 +43,10 @@ export class AdvancedComponent implements OnInit {
     this.counter++;
   }
 
+  toggle() {
+    this.flag = !this.flag;
+  }
+
   preload() {
     this.lazyElementLoaderService.preload();
   }
@@ -196,3 +204,36 @@ export class FeatureModule { }
 `;
 
 const CODE_EXAMPLE_6_HTML = `<mwc-slider *axLazyElement></mwc-slider>`;
+
+const CODE_EXAMPLE_7_HTML = `<!-- No need to specify url -->
+<wired-toggle *axLazyElement (change)="toggle()"></wired-toggle>`;
+
+const CODE_EXAMPLE_7_MODULE = `export function elementConfigsFactory(): ElementConfig[] {
+  // retrieve or construct configs (sync)
+  const configs = [
+    {
+      tag: 'wired-toggle',
+      url: 'https://unpkg.com/wired-elements@1.0.0/dist/wired-elements.bundled.js'
+    }
+  ]
+  return configs;
+};
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [FeatureComponent],
+  imports: [
+    LazyElementsModule.forFeature({
+      // some other configs
+    }),
+  ],
+  providers: [
+    {
+      provide: LAZY_ELEMENT_CONFIGS,
+      useFactory: elementConfigsFactory,
+      multi: true
+    }
+  ]
+})
+export class FeatureModule { }
+`;
diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.module.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.module.ts
@@ -5,13 +5,15 @@ import {
   LazyElementModuleOptions,
   LazyElementsModule
 } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.module';
+import { ElementConfig } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements-loader.service';
+import { LAZY_ELEMENT_CONFIGS } from '../../../../../../elements/src/lib/lazy-elements/lazy-elements.tokens';
 
 import { SharedModule } from '../../../shared/shared.module';
+import { ErrorComponent } from '../../../shared/error/error.component';
+import { SpinnerComponent } from '../../../shared/spinner/spinner.component';
 
 import { AdvancedRoutingModule } from './advanced-routing.module';
 import { AdvancedComponent } from './advanced.component';
-import { SpinnerComponent } from '../../../shared/spinner/spinner.component';
-import { ErrorComponent } from '../../../shared/error/error.component';
 
 export function beforeLoadHook(tag: string): Promise<void> {
   alert(
@@ -20,6 +22,18 @@ export function beforeLoadHook(tag: string): Promise<void> {
   return new Promise(res => setTimeout(res, 5000));
 }
 
+export function elementConfigsFactory(): ElementConfig[] {
+  return [
+    {
+      tag: 'wired-toggle',
+      url:
+        'https://unpkg.com/wired-elements@1.0.0/dist/wired-elements.bundled.js',
+      loadingComponent: SpinnerComponent,
+      errorComponent: ErrorComponent
+    }
+  ];
+}
+
 const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
@@ -64,9 +78,15 @@ const options: LazyElementModuleOptions = {
   imports: [
     HighlightModule,
     LazyElementsModule.forFeature(options),
-    LazyElementsModule.forFeature(options),
     SharedModule,
     AdvancedRoutingModule
+  ],
+  providers: [
+    {
+      provide: LAZY_ELEMENT_CONFIGS,
+      useFactory: elementConfigsFactory,
+      multi: true
+    }
   ]
 })
 export class AdvancedModule {}
diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.spec.ts
@@ -256,17 +256,20 @@ describe('LazyElementsLoaderService preconfigured with LazyElementsModule', () =
     expect(service.configs.length).toEqual(3);
     expect(service.configs[0]).toEqual({
       tag: 'some-element',
-      url: 'http://elements.com/some-url'
+      url: 'http://elements.com/some-url',
+      isAdded: true
     });
     expect(service.configs[1]).toEqual({
       tag: 'some-other-element',
       url: 'http://elements.com/some-other-url',
-      preload: true
+      preload: true,
+      isAdded: true
     });
     expect(service.configs[2]).toEqual({
       tag: 'some-module-element',
       url: 'http://elements.com/some-module-url',
-      isModule: true
+      isModule: true,
+      isAdded: true
     });
   });
 

diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts b/projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts
@@ -24,6 +24,7 @@ export interface ElementConfig {
   errorComponent?: Type<any>;
   preload?: boolean;
   hooks?: HooksConfig;
+  isAdded?: boolean;
 }
 
 @Injectable({
@@ -51,6 +52,7 @@ export class LazyElementsLoaderService {
           `${LOG_PREFIX} - ElementConfig for tag '${newConfig.tag}' was previously added, it will not be added multiple times, continue...`
         );
       } else {
+        newConfig.isAdded = true;
         this.configs.push(newConfig);
         const shouldPreload =
           newConfig.preload !== undefined

diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts
@@ -88,9 +88,9 @@ export class LazyElementsModule {
     guard: any
   ) {
     if (elementConfigsMultiProvider && elementConfigsMultiProvider.length) {
-      const lastAddedConfigs =
-        elementConfigsMultiProvider[elementConfigsMultiProvider.length - 1];
-      lazyElementsLoaderService.addConfigs(lastAddedConfigs);
+      elementConfigsMultiProvider
+        .filter(configs => configs.some(config => !config.isAdded))
+        .forEach(configs => lazyElementsLoaderService.addConfigs(configs));
     }
   }
 }