From 15c11a0152df2f0d6c07a313fafc2c4ae6d4a4c2 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 14 Dec 2018 14:30:16 +0100
Subject: [PATCH] build: lazily compile examples in dev app

Currently we compile all example up-front which adds a bit to the scripting time in the dev app, even if the example page hasn't been visited. These changes switch to only rendering the examples that are active on the current page.
---
 src/dev-app/dev-app-module.ts       | 16 +++-------------
 src/dev-app/example/example-list.ts | 24 ++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/dev-app/dev-app-module.ts b/src/dev-app/dev-app-module.ts
index 38cc5dfaab5b..170bced134e2 100644
--- a/src/dev-app/dev-app-module.ts
+++ b/src/dev-app/dev-app-module.ts
@@ -10,10 +10,9 @@ import {LayoutModule} from '@angular/cdk/layout';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
-import {Injector, NgModule} from '@angular/core';
-import {createCustomElement} from '@angular/elements';
+import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
+import {ExampleModule} from '@angular/material-examples';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
@@ -152,13 +151,4 @@ import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
   ],
   bootstrap: [DevAppComponent],
 })
-export class DevAppModule {
-
-  constructor(injector: Injector) {
-    // Register examples as custom elements so that they can be inserted into the DOM dynamically
-    Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
-      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
-      customElements.define(key, element);
-    });
-  }
-}
+export class DevAppModule {}
diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index d71ec6502164..b70a77827fda 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, Input, SimpleChanges, OnChanges, Injector} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {createCustomElement} from '@angular/elements';
 
 /** Displays a set of material examples in a mat-accordion. */
 @Component({
@@ -51,7 +52,10 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
     }
   `]
 })
-export class ExampleList {
+export class ExampleList implements OnChanges {
+  /** Keeps track of the example ids that have been compiled already. */
+  private static _compiledComponents = new Set<string>();
+
   /** Type of examples being displayed. */
   @Input() type: string;
 
@@ -64,4 +68,20 @@ export class ExampleList {
   _expandAll: boolean;
 
   exampleComponents = EXAMPLE_COMPONENTS;
+
+  constructor(private _injector: Injector) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.ids) {
+      (changes.ids.currentValue as string[])
+        .filter(id => !ExampleList._compiledComponents.has(id))
+        .forEach(id => {
+          const element = createCustomElement(EXAMPLE_COMPONENTS[id].component, {
+            injector: this._injector
+          });
+          customElements.define(id, element);
+          ExampleList._compiledComponents.add(id);
+        });
+    }
+  }
 }