From 88523c37aea0eb1cdf5e0e693847d133d4a3a149 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 18 Dec 2018 05:19:09 +0100
Subject: [PATCH] build: lazily compile examples in dev app (#14522)

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 38cc5dfaab5..170bced134e 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 d71ec650216..b70a77827fd 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);
+        });
+    }
+  }
 }