chore(docs): update documentation to include importMap option

angular-extensions · Sep 27, 2020 · fef4321 · fef4321
1 parent 3327496
commit fef4321
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 18 deletions.
diff --git a/projects/elements-demo/src/app/features/docs/faq/faq.component.ts b/projects/elements-demo/src/app/features/docs/faq/faq.component.ts
@@ -44,7 +44,7 @@ const FAQ = [
     question:
       'When do we need to use <code>*axLazyElement="module: true"</code> flag?',
     answer:
-      'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.',
+      'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.',
   },
   {
     question: 'Angular elements / web components / custom elements / what?',

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
@@ -87,7 +87,7 @@ const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
       tag: 'mwc-checkbox',
-      url: 'https://unpkg.com/@material/mwc-checkbox@0.6.0/mwc-checkbox.js?module'
+      url: 'https://unpkg.com/@material/mwc-checkbox@0.18.0/mwc-checkbox.js?module'
     }
   ]
 };
@@ -110,7 +110,7 @@ const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
       tag: 'mwc-switch',
-      url: 'https://unpkg.com/@material/mwc-switch@0.6.0/mwc-switch.js?module',
+      url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module',
       isModule: true
     }
   ]
@@ -142,7 +142,7 @@ const options: LazyElementModuleRootOptions = {
   elementConfigs: [
     {
       tag: 'mwc-switch',
-      url: 'https://unpkg.com/@material/mwc-switch@0.6.0/mwc-switch.js?module'
+      url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module'
     }
   ]
 };

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
@@ -46,18 +46,18 @@ const options: LazyElementModuleOptions = {
     },
     {
       tag: 'mwc-switch',
-      url: 'https://unpkg.com/@material/mwc-switch@0.6.0/mwc-switch.js?module',
+      url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module',
       isModule: true,
     },
     {
       tag: 'mwc-checkbox',
       url:
-        'https://unpkg.com/@material/mwc-checkbox@0.6.0/mwc-checkbox.js?module',
+        'https://unpkg.com/@material/mwc-checkbox@0.18.0/mwc-checkbox.js?module',
       isModule: true,
     },
     {
       tag: 'mwc-fab',
-      url: 'https://unpkg.com/@material/mwc-fab@0.6.0/mwc-fab.js?module',
+      url: 'https://unpkg.com/@material/mwc-fab@0.18.0/mwc-fab.js?module',
       isModule: true,
       loadingComponent: SpinnerComponent,
     },

diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.html b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
@@ -26,7 +26,7 @@ <h2 id="basic-usage">Basic usage</h2>
     <div class="implementation" *ngIf="example1">
       <mwc-icon
         *axLazyElement="
-          'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module';
+          'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module';
           module: true
         "
       >
@@ -58,7 +58,7 @@ <h2 id="loading-template">
       <ng-template #loading>Loading...</ng-template>
       <mwc-button
         *axLazyElement="
-          'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
+          'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module';
           loadingTemplate: loading;
           module: true
         "
@@ -177,4 +177,29 @@ <h2 id="advanced-angular-template-binding">
       <pre [highlight]="codeExample4"></pre>
     </div>
   </div>
+
+  <h2 id="import-maps">Using import maps (SystemJS)</h2>
+  <div class="content">
+    <div class="implementation" *ngIf="!example5">
+      <button mat-flat-button color="accent" (click)="example5 = true">
+        <mat-icon>play_arrow</mat-icon>
+        Run
+      </button>
+    </div>
+    <div class="implementation" *ngIf="example5">
+      <mwc-switch
+        checked
+        *axLazyElement="'mwc-switch'; module: true; importMap: true"
+      ></mwc-switch>
+    </div>
+    <div class="description">
+      <p>
+        This example show how to use axLazyElement with Import Maps, for example
+        <code>&#60;mwc-switch></code> and add
+        <code>*axLazyElement</code> directive with the key stored in the import
+        map.
+      </p>
+      <pre [highlight]="codeExample5"></pre>
+    </div>
+  </div>
 </div>
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
@@ -12,12 +12,14 @@ export class BasicComponent implements OnInit {
   example2 = false;
   example3 = false;
   example4 = false;
+  example5 = false;
 
   // example code examples
   codeExample1 = CODE_EXAMPLE_1;
   codeExample2 = CODE_EXAMPLE_2;
   codeExample3 = CODE_EXAMPLE_3;
   codeExample4 = CODE_EXAMPLE_4;
+  codeExample5 = CODE_EXAMPLE_5;
 
   // example state
   counter = 0;
@@ -38,12 +40,12 @@ export class BasicComponent implements OnInit {
   }
 }
 
-const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module'; -->
+const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module'; -->
 <mwc-icon *axLazyElement="url; module: true">
   favorite
 </mwc-icon>`;
 
-const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module' -->;
+const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module' -->;
 <ng-template #loading>Loading...</ng-template>
 <mwc-button *axLazyElement="url; loadingTemplate: loading; module: true"
             (click)="increment()">
@@ -61,3 +63,6 @@ const CODE_EXAMPLE_4 = `<!-- https://unpkg.com/ink-components' -->;
 <ink-chart *axLazyElement="url" [xlim]="xAxis">
   <ink-chart-eqn eqn="Math.sin(x)"></ink-chart-eqn>
 </ink-chart>`;
+
+const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@material/mwc-switch@0.18.0//mwc-switch.js?module'; -->
+<mwc-switch checked *axLazyElement="; module: true; importMap: true"></mwc-switch>`;
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
@@ -41,7 +41,7 @@ <h2 id="dynamic-element-tag">Dynamic element tag</h2>
       <ax-lazy-element
         *axLazyElementDynamic="
           'mwc-button';
-          url: 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module';
+          url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module';
           loadingTemplate: loading;
           module: true
         "

diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
@@ -26,7 +26,7 @@ export class DynamicComponent implements OnInit {
   dynamicConfigs = [
     {
       tag: 'mwc-button',
-      url: 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module',
+      url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module',
       isModule: true,
       content: 'Increment',
       actionName: 'increment',
@@ -40,7 +40,7 @@ export class DynamicComponent implements OnInit {
     },
     {
       tag: 'mwc-icon',
-      url: 'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module',
+      url: 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module',
       content: 'replay',
       actionName: 'reset',
     },
@@ -73,7 +73,7 @@ export class DynamicComponent implements OnInit {
   }
 }
 
-export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module' -->;
+export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module' -->;
 <ax-lazy-element *axLazyElementDynamic="'mwc-button', url: url; module: true"
      [outlined]="true"
      (click)="increment()">
@@ -122,7 +122,7 @@ export const CODE_EXAMPLE_3_HTML = `<ng-container *ngFor="let c of dynamicConfig
 dynamicConfigs = [
   {
     tag: 'mwc-button',
-    url: 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module',
+    url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module',
     isModule: true,
     content: 'Increment',
     actionName: 'increment'
@@ -135,7 +135,7 @@ dynamicConfigs = [
   },
   {
     tag: 'mwc-icon',
-    url: 'https://unpkg.com/@material/mwc-icon@0.6.0/mwc-icon.js?module',
+    url: 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module',
     content: 'replay',
     actionName: 'reset'
   }

diff --git a/projects/elements-demo/src/index.html b/projects/elements-demo/src/index.html
@@ -26,6 +26,15 @@
     />
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.6.1/system.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.6.1/extras/dynamic-import-maps.min.js"></script>
+    <script type="systemjs-importmap">
+      {
+        "imports": {
+          "mwc-icon": "https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module"
+        }
+      }
+    </script>
   </head>
   <body class="mat-typography">
     <demo-root></demo-root>

diff --git a/projects/elements-demo/tsconfig.app.json b/projects/elements-demo/tsconfig.app.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": []
+    "types": ["systemjs"]
   },
   "include": ["src/**/*.ts"],
   "exclude": ["src/test.ts", "src/**/*.spec.ts"]