feat: update to 9.0.0-next.x and enable Ivy rendering engine

.circleci/config.yml

@@ -1,6 +1,6 @@
 # Cache key for CircleCI. We want to invalidate the cache whenever the Yarn lock file changes.
 var_1: &cache_key material-angular-io-{{ checksum "yarn.lock" }}
-var_2: &default_docker_image circleci/node:10.12-browsers
+var_2: &default_docker_image circleci/node:10.16.3-browsers
 
 # Settings common to each job
 var_3: &job_defaults

.gitignore

@@ -40,6 +40,8 @@ speed-measure-plugin*.json
 npm-debug.log
 yarn-error.log
 testem.log
+firebase-debug.log
+.firebase/
 /typings
 
 #System Files

angular.json

@@ -46,30 +46,36 @@
                 "input": "src/highlightjs/material-light.scss"
               },
               {
+                "inject": false,
                 "input": "src/assets/pink-bluegrey.css",
-                "lazy": true,
                 "bundleName": "pink-bluegrey"
               },
               {
+                "inject": false,
                 "input": "src/assets/deeppurple-amber.css",
-                "lazy": true,
                 "bundleName": "deeppurple-amber"
               },
               {
+                "inject": false,
                 "input": "src/assets/indigo-pink.css",
-                "lazy": true,
                 "bundleName": "indigo-pink"
               },
               {
+                "inject": false,
                 "input": "src/assets/purple-green.css",
-                "lazy": true,
                 "bundleName": "purple-green"
               }
             ],
             "scripts": []
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -121,23 +127,23 @@
                 "input": "src/highlightjs/material-light.scss"
               },
               {
+                "inject": false,
                 "input": "src/assets/pink-bluegrey.css",
-                "lazy": true,
                 "bundleName": "pink-bluegrey"
               },
               {
+                "inject": false,
                 "input": "src/assets/deeppurple-amber.css",
-                "lazy": true,
                 "bundleName": "deeppurple-amber"
               },
               {
+                "inject": false,
                 "input": "src/assets/indigo-pink.css",
-                "lazy": true,
                 "bundleName": "indigo-pink"
               },
               {
+                "inject": false,
                 "input": "src/assets/purple-green.css",
-                "lazy": true,
                 "bundleName": "purple-green"
               }
             ],
@@ -182,5 +188,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "cf155f04-1636-4df9-9ce2-870ba25ad38d"
   }
-}
+}

package.json

@@ -13,6 +13,7 @@
     "pree2e": "webdriver-manager update",
     "e2e": "yarn build-themes && ng e2e",
     "build": "yarn build-themes && ng build",
+    "build:content": "yarn upgrade @angular/material-examples",
     "build:highmem": "yarn build-themes && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build",
     "build:sm": "ng build --prod --source-map",
     "build-themes": "bash ./tools/build-themes.sh",
@@ -24,33 +25,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.9",
-    "@angular/cdk": "^8.2.2",
-    "@angular/cdk-experimental": "^8.2.2",
-    "@angular/common": "^8.2.9",
-    "@angular/compiler": "^8.2.9",
-    "@angular/core": "^8.2.9",
-    "@angular/forms": "^8.2.9",
-    "@angular/material": "^8.2.2",
+    "@angular/animations": "^9.0.0-next.9",
+    "@angular/cdk": "^9.0.0-next.0",
+    "@angular/cdk-experimental": "^9.0.0-next.0",
+    "@angular/common": "^9.0.0-next.9",
+    "@angular/compiler": "^9.0.0-next.9",
+    "@angular/core": "^9.0.0-next.9",
+    "@angular/forms": "^9.0.0-next.9",
+    "@angular/material": "^9.0.0-next.0",
     "@angular/material-examples": "angular/material2-docs-content",
-    "@angular/material-experimental": "^8.2.2",
-    "@angular/material-moment-adapter": "^8.2.2",
-    "@angular/platform-browser": "^8.2.9",
-    "@angular/platform-browser-dynamic": "^8.2.9",
-    "@angular/router": "^8.2.9",
+    "@angular/material-experimental": "^9.0.0-next.0",
+    "@angular/material-moment-adapter": "^9.0.0-next.0",
+    "@angular/platform-browser": "^9.0.0-next.9",
+    "@angular/platform-browser-dynamic": "^9.0.0-next.9",
+    "@angular/router": "^9.0.0-next.9",
     "core-js": "^2.6.9",
     "hammerjs": "^2.0.8",
     "material-components-web": "^4.0.0-alpha.0",
     "moment": "^2.24.0",
     "rxjs": "^6.5.3",
-    "zone.js": "^0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.6",
-    "@angular/cli": "^8.3.6",
-    "@angular/compiler-cli": "^8.2.9",
+    "@angular-devkit/build-angular": "~0.900.0-next.8",
+    "@angular/cli": "^9.0.0-next.8",
+    "@angular/compiler-cli": "^9.0.0-next.9",
     "@types/jasmine": "^3.4.1",
-    "@types/node": "^12.7.8",
+    "@types/node": "^12.7.11",
     "firebase-tools": "^7.4.0",
     "jasmine-core": "^3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app-module.ts

@@ -20,7 +20,7 @@ import {ComponentHeaderModule} from './pages/component-page-header/component-pag
 import {StyleManager} from './shared/style-manager';
 import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
 import {ThemePickerModule} from './shared/theme-picker';
-import {StackblitzButtonModule} from './shared/stackblitz';
+import {StackBlitzButtonModule} from './shared/stack-blitz';
 import {NavBarModule} from './shared/navbar';
 import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage';
 import {GuideItems} from './shared/guide-items/guide-items';
@@ -58,7 +58,7 @@ import {GaService} from './shared/ga/ga';
     GuideViewerModule,
     HomepageModule,
     NavBarModule,
-    StackblitzButtonModule,
+    StackBlitzButtonModule,
     SvgViewerModule,
     ThemePickerModule,
   ],

src/app/shared/doc-viewer/doc-viewer-module.ts

@@ -1,6 +1,6 @@
 import {DocViewer} from './doc-viewer';
 import {ExampleViewer} from '../example-viewer/example-viewer';
-import {StackblitzButtonModule} from '../stackblitz/stackblitz-button';
+import {StackBlitzButtonModule} from '../stack-blitz/stack-blitz-button';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
@@ -23,7 +23,7 @@ import {CopierService} from '../copier/copier.service';
     MatTabsModule,
     CommonModule,
     PortalModule,
-    StackblitzButtonModule
+    StackBlitzButtonModule
   ],
   providers: [CopierService],
   declarations: [DocViewer, ExampleViewer, HeaderLink],

src/app/shared/example-viewer/example-viewer.html

@@ -12,7 +12,7 @@
       </mat-icon>
     </button>
 
-  <stackblitz-button [example]="example"></stackblitz-button>
+  <stack-blitz-button [example]="example"></stack-blitz-button>
 </div>
 
   <div class="docs-example-viewer-source" *ngIf="showSource">

src/app/shared/stack-blitz/index.ts

@@ -0,0 +1 @@
+export * from './stack-blitz-button';

src/app/shared/stack-blitz/stack-blitz-button.html

@@ -0,0 +1,20 @@
+<div [matTooltip]="isDisabled ? 'Building StackBlitz example...' : 'Edit in StackBlitz'">
+  <button mat-icon-button type="button"
+          (click)="openStackBlitz()"
+          [disabled]="isDisabled">
+    <mat-icon>
+      <svg width='24px' height='24px' viewBox='0 -3 23 40' version='1.1'
+           xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+        <title>StackBlitz Logo</title>
+        <desc>Created with Sketch.</desc>
+        <g id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+          <g fill='#1389FD' fill-rule='nonzero'>
+            <polygon id='Path'
+                     points='0 19.9187087 9.87007874 19.9187087 4.12007874 34 23 13.9612393 13.0846457 13.9612393 18.7893701 0'>
+            </polygon>
+          </g>
+        </g>
+      </svg>
+    </mat-icon>
+  </button>
+</div>

src/app/shared/stackblitz/stackblitz-button.ts → src/app/shared/stack-blitz/stack-blitz-button.ts

@@ -1,59 +1,60 @@
 import {Component, Input, NgModule} from '@angular/core';
-import {StackblitzWriter} from './stackblitz-writer';
 import {ExampleData} from '@angular/material-examples';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {StackBlitzWriter} from './stack-blitz-writer';
 
 @Component({
-  selector: 'stackblitz-button',
-  templateUrl: './stackblitz-button.html',
-  providers: [StackblitzWriter],
+  selector: 'stack-blitz-button',
+  templateUrl: './stack-blitz-button.html',
+  providers: [StackBlitzWriter],
   host: {
-    '(mouseover)': 'isDisabled = !stackblitzForm'
+    '(mouseover)': 'isDisabled = !stackBlitzForm'
   }
 })
-export class StackblitzButton {
+export class StackBlitzButton {
   /**
-   * The button becomes disabled if the user hovers over the button before the stackblitz form
+   * The button becomes disabled if the user hovers over the button before the StackBlitz form
    * is created. After the form is created, the button becomes enabled again.
    * The form creation usually happens extremely quickly, but we handle the case of the
-   * stackblitz not yet being ready for people with poor network connections or slow devices.
+   * StackBlitz not yet being ready for people with poor network connections or slow devices.
    */
   isDisabled = false;
-  stackblitzForm: HTMLFormElement;
+  stackBlitzForm: HTMLFormElement;
 
   @Input()
   set example(example: string) {
     const exampleData = new ExampleData(example);
 
     if (example) {
-      this.stackblitzWriter.constructStackblitzForm(exampleData).then(stackblitzForm => {
-        this.stackblitzForm = stackblitzForm;
+      this.stackBlitzWriter.constructStackBlitzForm(exampleData)
+      .then((stackBlitzForm: HTMLFormElement) => {
+        this.stackBlitzForm = stackBlitzForm;
         this.isDisabled = false;
       });
     } else {
       this.isDisabled = true;
     }
   }
 
-  constructor(private stackblitzWriter: StackblitzWriter) {}
+  constructor(private stackBlitzWriter: StackBlitzWriter) {}
 
-  openStackblitz(): void {
+  openStackBlitz(): void {
     // When the form is submitted, it must be in the document body. The standard of forms is not
     // 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!
-    document.body.appendChild(this.stackblitzForm);
-    this.stackblitzForm.submit();
-    document.body.removeChild(this.stackblitzForm);
+    document.body.appendChild(this.stackBlitzForm);
+    this.stackBlitzForm.submit();
+    document.body.removeChild(this.stackBlitzForm);
   }
 }
 
 @NgModule({
   imports: [MatTooltipModule, MatButtonModule, MatIconModule],
-  exports: [StackblitzButton],
-  declarations: [StackblitzButton],
-  providers: [StackblitzWriter],
+  exports: [StackBlitzButton],
+  declarations: [StackBlitzButton],
+  providers: [StackBlitzWriter],
 })
-export class StackblitzButtonModule {}
+export class StackBlitzButtonModule {}