build: activate experimental Angular Ivy build of the demo app

See scripts/ivy/README.md for instructions.

Author: alxhub

package.json

@@ -134,6 +134,8 @@
     "sorcery": "^0.10.0",
     "source-map-support": "^0.5.9",
     "stylelint": "^9.9.0",
+    "stylelint": "^8.4.0",
+    "systemjs-builder": "^0.16.13",
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.3.0",
     "tslint": "^5.12.0",

scripts/ivy/README.md

@@ -0,0 +1,39 @@
+# Experimental Ivy Scripts
+
+These scripts exist for the testing of Ivy in the Material repo, pre-launch. This is uncharted
+territory, so building Material this way may or may not work, and depending on the output is
+non-trivial.
+
+## Usage
+
+For the first execution, a version of Angular must be built with `ngtsc`. To do this, a current
+Angular repo is passed to `install-angular.sh`.
+
+```bash
+$ ./scripts/ivy/install-angular.sh /path/to/angular
+```
+
+This will replace `node_modules/@angular` with `ngtsc`-built versions of Angular packages.
+
+Once that step is complete, the demo application can be built.
+
+```bash
+# Build the demo-app with Ivy
+$ ./scripts/ivy/build.sh
+# And serve it
+$ cd dist/demo && http-server
+```
+
+## Known issues
+* Much of the compilation will fail without commits in the Angular repo not yet in `master`.
+* Ivy does not support the `ViewContainerRef.createComponent()` API yet, so the demo-app is unable to get past starting the Angular Router.
+
+## Maintaining tsconfig files
+
+The `ivy` branch has a lot of updated tsconfig files. These were mutated via script, which can
+be re-run if needed
+
+```bash
+# Update tsconfigs
+./scripts/ivy/update-tsconfigs.sh
+```

scripts/ivy/build.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+set -e
+
+echo ">>> Build Material"
+rm -rf dist
+gulp build:devapp
+
+echo ">>> Rebuild demo-app with ngtsc"
+node_modules/.bin/ngc -p src/demo-app/tsconfig-build.json
+
+echo ">>> Bundle demo-app with SystemJS"
+node ./src/demo-app/systemjs-bundle.js
+
+echo ">>> Assembling app"
+mkdir dist/demo
+cp dist/packages/demo-app/bundle.js dist/demo
+cp src/demo-app/index.html dist/demo
+cp dist/packages/demo-app/theme.css dist/demo
+cp 'node_modules/@webcomponents/custom-elements/custom-elements.min.js' dist/demo
+cp node_modules/core-js/client/core.js dist/demo
+cp node_modules/systemjs/dist/system.src.js dist/demo
+cp node_modules/zone.js/dist/zone.js dist/demo
+cp node_modules/hammerjs/hammer.min.js dist/demo
+
+echo ">>> Done."
+echo "Output: $(pwd)/dist/demo"

scripts/ivy/fix-tsconfig.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 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 https://angular.io/license
+ */
+
+/*
+ * This script updates a tsconfig-build.json file for Ivy compilation. It has 3 main goals:
+ *
+ * 1. Change "public-api.ts" to "index.ts" in the files array.
+ * 2. Add "enableIvy": "ngtsc" to "angularCompilerOptions".
+ * 3. Turn "annotateForClosureCompiler" off (so decorators will tree-shake properly).
+ */
+
+const fs = require('fs');
+
+function replacePublicApiTs(file) {
+  if (file === 'public-api.ts') {
+    return 'index.ts';
+  } else {
+    return file;
+  }
+}
+
+
+// Read in the tsconfig json file.
+let source = fs.readFileSync(process.argv[2], 'utf8')
+  .split(/\n/)
+  .filter(line => !line.trim().startsWith('/') && !line.trim().startsWith('*'))
+  .join('\n')
+  .replace(/,(\s+)]/g, '$1]')
+  .replace(/,(\s+)}/g, '$1}');
+
+let json = null;
+try {
+  json = JSON.parse(source);
+} catch (e) {
+  console.error(`Error parsing tsconfig ${process.argv[2]}:`);
+  console.error(source);
+  console.error(`Error was:`, e);
+  process.exit(1);
+}
+
+if (json['files'] && Array.isArray(json['files'])) {
+  json['files'] = json['files'].map(replacePublicApiTs);
+}
+
+if (json['angularCompilerOptions']) {
+  if (json['angularCompilerOptions']['annotateForClosureCompiler']) {
+    delete json['angularCompilerOptions']['annotateForClosureCompiler']
+  }
+  json['angularCompilerOptions']['enableIvy'] = 'ngtsc';
+}
+
+fs.writeFileSync(process.argv[2], JSON.stringify(json, null, 2));

scripts/ivy/install-angular.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+set -e
+
+
+function prep() {
+  echo ">>> Preparing node_modules"
+  chmod -R u+w node_modules/@angular
+  rm -rf node_modules/@angular/*
+}
+
+function buildNgPackages() {
+  ngDir=$1
+  echo ">>> Building @angular packages (from $ngDir)"
+  pushd $ngDir
+  bazel build --define=compile=local //packages/{animations,common,compiler,compiler-cli,core,elements,forms,platform-browser,platform-browser-dynamic,router,upgrade}:npm_package
+  outputPath=`bazel info 2>&1 | grep output_path | cut -d ':' -f 2 | cut -c 2-`/darwin-fastbuild/bin/packages
+  popd
+}
+
+function installNgPackage() {
+  name=$1
+  echo "    @angular/$name"
+  cp -r $outputPath/$name/npm_package node_modules/@angular/$name
+}
+
+function buildPackage() {
+  name=$1
+  echo "    $name"
+  
+  # First, fix the build definition.
+  # Update the tsconfig to compile from index.ts instead of public-api.ts, and turn on Ivy options.
+  node scripts/ivy/fix-tsconfig.js src/$name/tsconfig-build.json
+
+  # If no index.ts exists, rename public-api.ts.
+  if [ ! -f src/$name/index.ts -a -f src/$name/public-api.ts ]
+  then
+    mv src/$name/public-api.ts src/$name/index.ts
+  fi
+
+  node_modules/.bin/ngc -p src/$name/tsconfig-build.json
+}
+
+if [ "$1" != "" ]
+then
+  prep
+  buildNgPackages $1
+
+  echo ">>> Installing @angular packages"
+  installNgPackage "animations"
+  installNgPackage "common"
+  installNgPackage "compiler"
+  installNgPackage "compiler-cli"
+  installNgPackage "core"
+  installNgPackage "elements"
+  installNgPackage "forms"
+  installNgPackage "platform-browser"
+  installNgPackage "platform-browser-dynamic"
+  installNgPackage "router"
+  installNgPackage "upgrade"
+
+  chmod -R u+w node_modules/@angular
+else
+  echo "Usage: $0 /path/to/angular/repo"
+fi

scripts/ivy/update-tsconfigs.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+set -e
+
+find src | grep /tsconfig.*json | grep -v '/tsconfig.json' | while read tsconfig; do
+  dir=`dirname $tsconfig`
+  echo "Updating $tsconfig"
+
+  # If no index.ts exists, rename public-api.ts.
+  if [ ! -f $dir/index.ts -a -f $dir/public-api.ts ]
+  then
+    echo "export * from './public_api';" > $dir/index.ts
+  fi
+  node scripts/ivy/fix-tsconfig.js $tsconfig
+done

src/a11y-demo/menu/menu-a11y.html

@@ -36,11 +36,11 @@ <h2>Menu with Icons</h2>
 
   <section>
     <h2>Menu with links</h2>
-    <button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Learn more about Angular">
+    <button mat-icon-button [matMenuTriggerFor]="menu3" aria-label="Learn more about Angular">
       <mat-icon>more_vert</mat-icon>
     </button>
 
-    <mat-menu #menu2="matMenu">
+    <mat-menu #menu3="matMenu">
       <a href="http://angular.io" mat-menu-item>
         Angular
       </a>

src/cdk-experimental/dialog/tsconfig-build.json

@@ -1,15 +1,15 @@
 {
   "extends": "../tsconfig-build",
   "files": [
-    "public-api.ts",
+    "index.ts",
     "../typings.d.ts"
   ],
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental/dialog",
     "skipTemplateCodegen": true,
-    "fullTemplateTypeCheck": true
+    "fullTemplateTypeCheck": true,
+    "enableIvy": "ngtsc"
   }
-}
+}

src/cdk-experimental/scrolling/tsconfig-build.json

@@ -1,14 +1,14 @@
 {
   "extends": "../tsconfig-build",
   "files": [
-    "public-api.ts"
+    "index.ts"
   ],
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental/scrolling",
     "skipTemplateCodegen": true,
-    "fullTemplateTypeCheck": true
+    "fullTemplateTypeCheck": true,
+    "enableIvy": "ngtsc"
   }
-}
+}

src/cdk-experimental/tsconfig-build.json

@@ -1,4 +1,3 @@
-// TypeScript config file that is used to compile the experimental package into ES2015.
 {
   "compilerOptions": {
     "baseUrl": ".",
@@ -24,27 +23,37 @@
     "sourceMap": true,
     "inlineSources": true,
     "target": "es2015",
-    "lib": ["es2015", "dom"],
+    "lib": [
+      "es2015",
+      "dom"
+    ],
     "skipLibCheck": true,
-    "types": ["jasmine", "tslib"],
+    "types": [
+      "jasmine",
+      "tslib"
+    ],
     "paths": {
-      "@angular/cdk/*": ["../../dist/packages/cdk/*"],
-      "@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"]
+      "@angular/cdk/*": [
+        "../../dist/packages/cdk/*"
+      ],
+      "@angular/cdk-experimental/*": [
+        "../../dist/packages/cdk-experimental/*"
+      ]
     }
   },
   "files": [
-    "public-api.ts",
+    "index.ts",
     "typings.d.ts"
   ],
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental",
     "skipTemplateCodegen": true,
-    "fullTemplateTypeCheck": true
+    "fullTemplateTypeCheck": true,
+    "enableIvy": "ngtsc"
   },
   "bazelOptions": {
     "suppressTsconfigOverrideWarnings": true
   }
-}
+}

src/cdk-experimental/tsconfig-tests.json

@@ -1,16 +1,19 @@
-// TypeScript config file that extends the default build tsconfig file. This config is used to
-// also compile the unit-test files. Since the code will run inside of the browser, the target is
-// set to ES5. Also the format needs to be CommonJS for Karma.
 {
   "extends": "./tsconfig-build",
   "compilerOptions": {
     "importHelpers": false,
     "module": "commonjs",
     "target": "es5",
-    "types": ["jasmine"],
+    "types": [
+      "jasmine"
+    ],
     "paths": {
-      "@angular/cdk/*": ["../../dist/packages/cdk/*/public-api"],
-      "@angular/cdk-experimental/*": ["./*"]
+      "@angular/cdk/*": [
+        "../../dist/packages/cdk/*/public-api"
+      ],
+      "@angular/cdk-experimental/*": [
+        "./*"
+      ]
     }
   },
   "angularCompilerOptions": {
@@ -22,10 +25,10 @@
     "annotateForClosureCompiler": false,
     "flatModuleOutFile": null,
     "flatModuleId": null,
+    "enableIvy": "ngtsc"
   },
   "include": [
-    // Include the index.ts for each secondary entry-point
     "./*/index.ts",
     "**/*.spec.ts"
   ]
-}
+}

src/cdk/a11y/tsconfig-build.json

@@ -1,14 +1,14 @@
 {
   "extends": "../tsconfig-build",
   "files": [
-    "public-api.ts"
+    "index.ts"
   ],
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/a11y",
     "skipTemplateCodegen": true,
-    "fullTemplateTypeCheck": true
+    "fullTemplateTypeCheck": true,
+    "enableIvy": "ngtsc"
   }
-}
+}