build: run closure-compiler (#3789)

* build: run closure-compiler

* Adds a script that runs the closure-compiler against the devapp / demo-app.
* The script will run on the CI as a new mode. Ensuring that all our components are closure-compatible.

Fixes #1206.

* Address feedback

Author: devversion

.travis.yml

@@ -27,6 +27,7 @@ env:
     # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
     - MODE=lint
     - MODE=aot
+    - MODE=closure-compiler
     - MODE=payload
     - MODE=e2e
     - MODE=saucelabs_required

package.json

@@ -60,11 +60,12 @@
     "conventional-changelog": "^1.1.0",
     "dgeni": "^0.4.7",
     "dgeni-packages": "^0.16.5",
+    "firebase": "^3.7.2",
     "firebase-admin": "^4.1.2",
     "firebase-tools": "^2.2.1",
-    "firebase": "^3.7.2",
     "fs-extra": "^2.0.0",
     "glob": "^7.1.1",
+    "google-closure-compiler": "^20170218.0.0",
     "google-cloud": "^0.48.0",
     "gulp": "^3.9.1",
     "gulp-clean": "^0.3.2",

scripts/ci/build-and-test.sh

@@ -21,6 +21,8 @@ elif is_aot; then
   $(npm bin)/gulp ci:aot
 elif is_payload; then
   $(npm bin)/gulp ci:payload
+elif is_closure_compiler; then
+  ./scripts/closure-compiler/build-devapp-bundle.sh
 else
   $(npm bin)/gulp ci:test
 fi

scripts/ci/sources/mode.sh

@@ -13,6 +13,10 @@ is_aot() {
   [[ "$MODE" = aot ]]
 }
 
+is_closure_compiler() {
+  [[ "$MODE" = closure-compiler ]]
+}
+
 is_payload() {
   [[ "$MODE" = payload ]]
 }

scripts/closure-compiler/build-devapp-bundle.sh

@@ -0,0 +1,93 @@
+#!/bin/bash
+
+# Script that bundles the dev-app using the Google Closure compiler.
+# This is script is used to verify closure-compatiblity of all Material components.
+
+set -e -o pipefail
+
+# Go to the project root directory
+cd $(dirname $0)/../..
+
+# Build the demo-app and also create the release output.
+$(npm bin)/gulp build:devapp
+$(npm bin)/gulp :package:release
+
+# Rebuild demo-app with ES2015 modules. Closure compiler is then able to parse imports.
+$(npm bin)/tsc -p src/demo-app/ --target ES2015 --module ES2015
+
+# Re-compile RxJS sources into ES2015. Otherwise closure compiler can't parse it properly.
+$(npm bin)/ngc -p scripts/closure-compiler/tsconfig-rxjs.json
+
+# Create a list of all RxJS source files.
+rxjsSourceFiles=$(find dist/packages/rxjs -name '*.js');
+
+# Due a Closure Compiler issue https://github.com/google/closure-compiler/issues/2247
+# we need to add exports to the different RxJS ES2015 files.
+for i in $rxjsSourceFiles; do
+    echo "export var __CLOSURE_WORKAROUND__" >> $i
+done
+
+OPTS=(
+  "--language_in=ES6_STRICT"
+  "--language_out=ES5"
+  "--compilation_level=ADVANCED_OPTIMIZATIONS"
+  "--js_output_file=dist/closure/closure-bundle.js"
+  "--variable_renaming_report=dist/closure/variable_renaming_report"
+  "--property_renaming_report=dist/closure/property_renaming_report"
+  "--warning_level=QUIET"
+  "--rewrite_polyfills=false"
+
+  # List of path prefixes to be removed from ES6 & CommonJS modules.
+  "--js_module_root=dist/packages"
+  "--js_module_root=dist/release"
+  "--js_module_root=node_modules/@angular/core"
+  "--js_module_root=node_modules/@angular/common"
+  "--js_module_root=node_modules/@angular/compiler"
+  "--js_module_root=node_modules/@angular/forms"
+  "--js_module_root=node_modules/@angular/http"
+  "--js_module_root=node_modules/@angular/router"
+  "--js_module_root=node_modules/@angular/platform-browser"
+  "--js_module_root=node_modules/@angular/platform-browser/animations"
+  "--js_module_root=node_modules/@angular/platform-browser-dynamic"
+  "--js_module_root=node_modules/@angular/animations"
+  "--js_module_root=node_modules/@angular/animations/browser"
+
+  # Flags to simplify debugging.
+  "--formatting=PRETTY_PRINT"
+  "--debug"
+
+  # Include the Material FESM bundle
+  dist/release/@angular/material.js
+
+  # Include all Angular FESM bundles.
+  node_modules/@angular/core/@angular/core.js
+  node_modules/@angular/common/@angular/common.js
+  node_modules/@angular/compiler/@angular/compiler.js
+  node_modules/@angular/forms/@angular/forms.js
+  node_modules/@angular/http/@angular/http.js
+  node_modules/@angular/router/@angular/router.js
+  node_modules/@angular/platform-browser/@angular/platform-browser.js
+  node_modules/@angular/platform-browser/@angular/platform-browser/animations.js
+  node_modules/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.js
+  node_modules/@angular/animations/@angular/animations.js
+  node_modules/@angular/animations/@angular/animations/browser.js
+
+  # Include other dependencies like Zone.js and RxJS
+  node_modules/zone.js/dist/zone.js
+  $rxjsSourceFiles
+
+  # Include all files from the demo-app package.
+  $(find dist/packages/demo-app -name '*.js')
+
+  "--entry_point=./dist/packages/demo-app/main.js"
+  "--dependency_mode=STRICT"
+)
+
+# Write closure flags to a closure flagfile.
+closureFlags=$(mktemp)
+echo ${OPTS[*]} > $closureFlags
+
+# Run the Google Closure compiler java runnable.
+java -jar node_modules/google-closure-compiler/compiler.jar --flagfile $closureFlags
+
+echo "Finished bundling the dev-app using google closure compiler.."

scripts/closure-compiler/tsconfig-rxjs.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "es2015",
+    "outDir": "../../dist/packages/rxjs",
+    "target": "es5",
+    "lib": ["es2015", "dom"]
+  },
+  "files": [
+    "../../node_modules/rxjs/src/Rx.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipMetadataEmit": true,
+    "skipTemplateCodegen": true
+  }
+}