perf: example rendering performance improvements (#961)

When generating an example in Stackblitz, we have to create a `form` element and submit it to a specific URL. The `form` has to be created eagerly, because some browsers will block us from submitting it if it is created asynchronously.

As a result of this setup we fire off a lot of HTTP requests when an example is rendered which slows the page down a lot. These changes make the following improvements which shave off more than a second of scripting time when transitioning from the "Overview" to "Examples". I've used the datepicker examples as a benchmark.

1. Runs the HTTP requests outside of the Angular zone so that we don't trigger change detections once each request is resolved.
2. Caches the file content so that the user doesn't have to load the same file multiple times.

I've also fixed that the copyright still said "2020".

Author: crisbeto

material.angular.io/src/app/shared/stack-blitz/stack-blitz-button.ts

@@ -8,7 +8,6 @@ import {StackBlitzWriter} from './stack-blitz-writer';
 @Component({
   selector: 'stack-blitz-button',
   templateUrl: './stack-blitz-button.html',
-  providers: [StackBlitzWriter],
 })
 export class StackBlitzButton {
   /**
@@ -18,28 +17,31 @@ export class StackBlitzButton {
    * StackBlitz not yet being ready for people with poor network connections or slow devices.
    */
   isDisabled = false;
-  stackBlitzForm: HTMLFormElement | undefined;
   exampleData: ExampleData | undefined;
 
-  @HostListener('mouseover') onMouseOver() {
-    this.isDisabled = !this.stackBlitzForm;
+  /**
+   * Form used to submit the data to Stackblitz.
+   * Important! it needs to be constructed ahead-of-time, because doing so on-demand
+   * will cause Firefox to block the submit as a popup, because it didn't happen within
+   * the same tick as the user interaction.
+   */
+  private _stackBlitzForm: HTMLFormElement | undefined;
+
+  @HostListener('mouseover')
+  onMouseOver() {
+    this.isDisabled = !this._stackBlitzForm;
   }
 
   @Input()
   set example(example: string | undefined) {
     if (example) {
+      const isTest = example.includes('harness');
       this.exampleData = new ExampleData(example);
-      if (this.exampleData) {
-        this.stackBlitzWriter.constructStackBlitzForm(example,
-          this.exampleData,
-          example.includes('harness'))
-        .then((stackBlitzForm: HTMLFormElement) => {
-          this.stackBlitzForm = stackBlitzForm;
+      this.stackBlitzWriter.constructStackBlitzForm(example, this.exampleData, isTest)
+        .then(form => {
+          this._stackBlitzForm = form;
           this.isDisabled = false;
         });
-      } else {
-        this.isDisabled = true;
-      }
     } else {
       this.isDisabled = true;
     }
@@ -52,10 +54,10 @@ export class StackBlitzButton {
     // to submit if it is detached from the document. See the following chromium commit for
     // more details:
     // https://chromium.googlesource.com/chromium/src/+/962c2a22ddc474255c776aefc7abeba00edc7470%5E!
-    if (this.stackBlitzForm) {
-      document.body.appendChild(this.stackBlitzForm);
-      this.stackBlitzForm.submit();
-      document.body.removeChild(this.stackBlitzForm);
+    if (this._stackBlitzForm) {
+      document.body.appendChild(this._stackBlitzForm);
+      this._stackBlitzForm.submit();
+      document.body.removeChild(this._stackBlitzForm);
     }
   }
 }

material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.spec.ts

@@ -41,15 +41,16 @@ describe('StackBlitzWriter', () => {
   });
 
   it('should append correct copyright', () => {
+    const year = new Date().getFullYear();
     expect(stackBlitzWriter._appendCopyright('test.ts', 'NoContent')).toBe(`NoContent
 
-/**  Copyright 2020 Google LLC. All Rights Reserved.
+/**  Copyright ${year} Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license */`);
 
     expect(stackBlitzWriter._appendCopyright('test.html', 'NoContent')).toBe(`NoContent
 
-<!-- Copyright 2020 Google LLC. All Rights Reserved.
+<!-- Copyright ${year} Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license -->`);
 

material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts

@@ -1,14 +1,16 @@
 import {HttpClient} from '@angular/common/http';
-import {Injectable} from '@angular/core';
+import {Injectable, NgZone} from '@angular/core';
 import {VERSION} from '@angular/material/core';
 import {EXAMPLE_COMPONENTS, ExampleData} from '@angular/components-examples';
+import {Observable} from 'rxjs';
+import {shareReplay, take} from 'rxjs/operators';
 
 import {materialVersion} from '../version/version';
 
 const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1';
 
 const COPYRIGHT =
-  `Copyright 2020 Google LLC. All Rights Reserved.
+  `Copyright ${new Date().getFullYear()} Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license`;
 
@@ -116,17 +118,18 @@ const testDependencies = {
  *  dependencies: dependencies
  * }
  */
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class StackBlitzWriter {
-  constructor(private _http: HttpClient) {}
+  private _fileCache = new Map<string, Observable<string>>();
+
+  constructor(private _http: HttpClient, private _ngZone: NgZone) {}
 
   /**
    * Returns an HTMLFormElement that will open a new StackBlitz template with the example data when
    * called with submit().
    */
-  constructStackBlitzForm(exampleId: string,
-                          data: ExampleData,
-                          isTest: boolean): Promise<HTMLFormElement> {
+  async constructStackBlitzForm(exampleId: string, data: ExampleData,
+                                isTest: boolean): Promise<HTMLFormElement> {
     const liveExample = EXAMPLE_COMPONENTS[exampleId];
     const indexFile = `src%2Fapp%2F${data.indexFilename}`;
     const form = this._createFormElement(indexFile);
@@ -140,26 +143,30 @@ export class StackBlitzWriter {
       'dependencies',
       JSON.stringify(isTest ? testDependencies : dependencies));
 
-    return new Promise(resolve => {
-      const templateContents = (isTest ? TEST_TEMPLATE_FILES : TEMPLATE_FILES)
-        .map(file => this._readFile(form,
-          data,
-          file,
-          isTest ? TEST_TEMPLATE_PATH : TEMPLATE_PATH,
-          isTest));
+    // Run outside the zone since this form doesn't interact with Angular
+    // and the file requests can cause excessive change detections.
+    await this._ngZone.runOutsideAngular(() => {
+      const fileReadPromises: Promise<void>[] = [];
+
+      // Read all of the template files.
+      (isTest ? TEST_TEMPLATE_FILES : TEMPLATE_FILES).forEach(file => fileReadPromises.push(
+        this._loadAndAppendFile(form, data, file, isTest ? TEST_TEMPLATE_PATH : TEMPLATE_PATH,
+          isTest)));
 
-      const exampleContents = data.exampleFiles
-        .map(file => this._readFile(form, data, file, baseExamplePath, isTest));
+      // Read the example-specific files.
+      data.exampleFiles.forEach(file => fileReadPromises.push(this._loadAndAppendFile(form, data,
+        file, baseExamplePath, isTest)));
 
       // TODO(josephperrott): Prevent including assets to be manually checked.
       if (data.selectorName === 'icon-svg-example') {
-        this._readFile(form, data, 'assets/img/examples/thumbup-icon.svg', '', isTest, false);
+        fileReadPromises.push(this._loadAndAppendFile(form, data,
+          'assets/img/examples/thumbup-icon.svg', '', isTest, false));
       }
 
-      Promise.all(templateContents.concat(exampleContents)).then(() => {
-        resolve(form);
-      });
+      return Promise.all(fileReadPromises);
     });
+
+    return form;
   }
 
   /** Constructs a new form element that will navigate to the StackBlitz url. */
@@ -172,7 +179,7 @@ export class StackBlitzWriter {
   }
 
   /** Appends the name and value as an input to the form. */
-  _appendFormInput(form: HTMLFormElement, name: string, value: string): void {
+  private _appendFormInput(form: HTMLFormElement, name: string, value: string): void {
     const input = document.createElement('input');
     input.type = 'hidden';
     input.name = name;
@@ -189,13 +196,18 @@ export class StackBlitzWriter {
    * @param isTest whether file is part of a test example
    * @param prependApp whether to prepend the 'app' prefix to the path
    */
-  _readFile(form: HTMLFormElement,
-            data: ExampleData,
-            filename: string,
-            path: string,
-            isTest: boolean,
-            prependApp = true): void {
-    this._http.get(path + filename, {responseType: 'text'}).subscribe(
+  private _loadAndAppendFile(form: HTMLFormElement, data: ExampleData, filename: string,
+                            path: string, isTest: boolean, prependApp = true): Promise<void> {
+    const url = path + filename;
+    let stream = this._fileCache.get(url);
+
+    if (!stream) {
+      stream = this._http.get(url, {responseType: 'text'}).pipe(shareReplay(1));
+      this._fileCache.set(url, stream);
+    }
+
+    // The `take(1)` is necessary, because the Promise from `toPromise` resolves on complete.
+    return stream.pipe(take(1)).toPromise().then(
       response => this._addFileToForm(form, data, response, filename, path, isTest, prependApp),
       error => console.log(error)
     );
@@ -232,9 +244,9 @@ export class StackBlitzWriter {
    * This will replace those placeholders with the names from the example metadata,
    * e.g. "<basic-button-example>" and "BasicButtonExample"
    */
-  _replaceExamplePlaceholderNames(data: ExampleData,
-                                  fileName: string,
-                                  fileContent: string): string {
+  private _replaceExamplePlaceholderNames(data: ExampleData,
+                                          fileName: string,
+                                          fileContent: string): string {
     if (fileName === 'src/index.html') {
       // Replace the component selector in `index,html`.
       // For example, <material-docs-example></material-docs-example> will be replaced as