test(integration): add an env for testing closure builds (#14130)

* feat: add an env for testing closure builds
* build(npm): add dev dependency on yarn (and remove dev props for readability)
* build: refactor integration test runner

integration/.gitignore

@@ -0,0 +1,9 @@
+/rxjs/
+built/
+dist/
+vendor/
+*/src/*.d.ts
+*/src/*.js
+**/*.ngfactory.ts
+**/*.ngsummary.json
+*/yarn*

integration/build_rxjs_es6.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+
+# This script builds rxjs from source, with an ES6 target, and with tsickle turned on.
+# We need to do this until we work with the RxJS team to get a distribution that works
+# with Closure Compiler.
+# Note that in nodejs, we still run the standard RxJS distribution. This one is only
+# used for the bundle that targets a browser runtime.
+# TODO(alexeagle): discuss with Jay Phelps once we have a recommendation
+
+set -e -o pipefail
+
+cd `dirname $0`
+
+rm -rf rxjs
+git clone https://github.com/ReactiveX/rxjs.git --depth=200
+git -C rxjs/ checkout 5.0.3
+cp rxjs.tsconfig.json rxjs/
+TSC="node --max-old-space-size=3000 ../dist/tools/@angular/tsc-wrapped/src/main"
+$TSC -p rxjs/rxjs.tsconfig.json

integration/hello_world__closure/build.sh

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+
+# Build a folder using angular ES6 and the closure compiler
+
+set -e -o pipefail
+
+# The ES6 distro we built for rxjs works only in the browser, not in nodejs.
+# Since we installed rxjs in node_modules for ngc to use, we have to point
+# to the alternate distro when compiling with closure.
+rm -rf vendor
+mkdir vendor
+cp -pr ../rxjs/dist/es6 vendor/rxjs
+
+CLOSURE_ARGS=(
+  "--language_in=ES6_STRICT"
+  "--language_out=ES5"
+  "--compilation_level=ADVANCED_OPTIMIZATIONS"
+  "--js_output_file=dist/bundle.js"
+  "--create_source_map=%outname%.map"
+  "--variable_renaming_report=dist/variable_renaming_report"
+  "--property_renaming_report=dist/property_renaming_report"
+
+  # Don't include ES6 polyfills
+  "--rewrite_polyfills=false"
+
+  # List of path prefixes to be removed from ES6 & CommonJS modules.
+  "--js_module_root=node_modules"
+  "--js_module_root=vendor"
+
+  # Uncomment for easier debugging
+  # "--formatting=PRETTY_PRINT"
+
+  node_modules/zone.js/dist/zone.js
+  $(find -L vendor/rxjs -name *.js)
+  node_modules/@angular/{core,common,compiler,platform-browser}/index.js
+  $(find node_modules/@angular/{core,common,compiler,platform-browser}/src -name *.js)
+  "built/*.js"
+  "--entry_point=./built/main"
+)
+
+java -jar node_modules/google-closure-compiler/compiler.jar $(echo ${CLOSURE_ARGS[*]})
+gzip -f dist/bundle.js
+ls -alH dist/bundle*
+
+# TODO(alexeagle): add an e2e test that the application works in a browser

integration/hello_world__closure/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "angular-integration",
+  "version": "0.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "file:../../dist/packages-dist-es2015/common",
+    "@angular/compiler": "file:../../dist/packages-dist-es2015/compiler",
+    "@angular/compiler-cli": "file:../../dist/packages-dist-es2015/compiler-cli",
+    "@angular/core": "file:../../dist/packages-dist-es2015/core",
+    "@angular/platform-browser": "file:../../dist/packages-dist-es2015/platform-browser",
+    "@angular/platform-server": "file:../../dist/packages-dist-es2015/platform-server",
+    "@angular/tsc-wrapped": "file:../../dist/tools/@angular/tsc-wrapped",
+    "google-closure-compiler": "^20161201.0.0",
+    "rxjs": "file:../../node_modules/rxjs",
+    "source-map-explorer": "^1.3.3",
+    "typescript": "~2.0",
+    "zone.js": "^0.7.6"
+  },
+  "scripts": {
+    "test": "ngc && ./build.sh"
+  }
+}

integration/hello_world__closure/src/app.ts

@@ -0,0 +1,11 @@
+import {HelloWorldComponent} from './hello-world.component';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule],
+})
+export class AppModule {}

integration/hello_world__closure/src/hello-world.component.ts

@@ -0,0 +1,10 @@
+import {Component, Injectable} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: '<div>Hello {{ name }}!</div>',
+})
+@Injectable()
+export class HelloWorldComponent {
+  name: string = 'world';
+}

integration/hello_world__closure/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+  <base href="/">
+</head>
+<body>
+<hello-world-app>Loading...</hello-world-app>
+
+<script src="../dist/bundle.js"></script>
+
+</body>
+</html>

integration/hello_world__closure/src/main.ts

@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

integration/hello_world__closure/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "target": "es6",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "declaration": true,
+    "types": []
+  },
+
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "src/main-jit.ts"
+  ]
+}

integration/run_tests.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+
+set -e -o pipefail
+
+cd `dirname $0`
+
+if [ ! -d "rxjs/dist/es6" ]; then
+  echo "You must run build_rxjs_es6.sh before running tests"
+  exit 1
+fi
+
+for testDir in $(ls | grep -v rxjs | grep -v node_modules) ; do
+  [[ -d "$testDir" ]] || continue
+  echo "#################################"
+  echo "Running integration test $testDir"
+  echo "#################################"
+  (
+    cd $testDir
+    # Workaround for https://github.com/yarnpkg/yarn/issues/2256
+    rm -f yarn.lock
+    ../../node_modules/.bin/yarn
+    ../../node_modules/.bin/yarn test || exit 1
+  )
+done

integration/rxjs.tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "angularCompilerOptions": {
+    "skipMetadataEmit": true,
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true
+  },
+
+  /**
+   * Remaining options are copied from
+   * https://github.com/ReactiveX/rxjs/blob/cba74135810a8e6bbe0b3c7732e8544b0869589e/tsconfig.json
+   * TODO(alexeagle): use "extends" instead when Angular is on TS 2.1
+   */
+  "compilerOptions": {
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "declaration": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "moduleResolution": "node",
+    "module": "es2015",
+    "target": "es6",
+    "outDir": "dist/es6",
+    "lib": [
+      "es5",
+      "es2015.iterable",
+      "es2015.collection",
+      "es2015.promise",
+      "dom"
+    ]
+  },
+  "formatCodeOptions": {
+    "indentSize": 2,
+    "tabSize": 2
+  },
+  "files": [
+    "src/Rx.ts"
+  ]
+}

package.json

@@ -90,6 +90,7 @@
     "universal-analytics": "^0.3.9",
     "vrsource-tslint-rules": "^4.0.0",
     "webpack": "^1.12.6",
-    "yargs": "^3.31.0"
+    "yargs": "^3.31.0",
+    "yarn": "^0.19.1"
   }
 }

scripts/ci-lite/test_e2e.sh

@@ -21,9 +21,12 @@ echo 'travis_fold:start:test.buildPackages'
 
 echo 'travis_fold:end:test.buildPackages'
 
-
+./integration/build_rxjs_es6.sh
+./integration/run_tests.sh
+#TODO(alexeagle): move offline_compiler_test and typings-test to integration/
 ./scripts/ci-lite/offline_compiler_test.sh
 ./tools/typings-test/test.sh
+
 $(npm bin)/gulp public-api:enforce
 
 $(npm bin)/gulp check-cycle