chore: track size of a "Hello world" app built with WebPack

Closes #6434

gulpfile.js

@@ -42,7 +42,7 @@ if (cliArgs.projects) {
 
 // --projects=angular2,angular2_material => {angular2: true, angular2_material: true}
 var allProjects =
-    'angular1_router,angular2,angular2_material,benchmarks,benchmarks_external,benchpress,playground,bundle_deps';
+    'angular1_router,angular2,angular2_material,benchmarks,benchmarks_external,benchpress,playground,payload_tests,bundle_deps';
 var cliArgsProjects = (cliArgs.projects || allProjects)
                           .split(',')
                           .reduce((map, projectName) => {
@@ -168,6 +168,20 @@ var BENCHPRESS_BUNDLE_CONFIG = {
   dest: CONFIG.dest.bundles.benchpress
 };
 
+var PAYLOAD_TESTS_CONFIG = {
+  ts: {
+    sizeLimits: {'uncompressed': 550 * 1024, 'gzip level=9': 120 * 1024},
+    webpack: {
+      cases: ['hello_world'],
+      bundleName: 'app-bundle-deps.min.js',
+      dist: function(caseName) {
+        return path.join(__dirname, CONFIG.dest.js.prod.es5, 'payload_tests', caseName,
+                         'ts/webpack');
+      }
+    }
+  }
+};
+
 // ------------
 // clean
 
@@ -638,7 +652,7 @@ gulp.task('test.unit.dart', function(done) {
 // This test will fail if the size of our hello_world app goes beyond one of
 // these values when compressed at the specified level.
 // Measure in bytes.
-var _DART_PAYLOAD_SIZE_LIMITS = {'uncompressed': 320 * 1024, 'gzip level=6': 90 * 1024};
+var _DART_PAYLOAD_SIZE_LIMITS = {'uncompressed': 320 * 1024, 'gzip level=9': 90 * 1024};
 gulp.task('test.payload.dart/ci', function(done) {
   runSequence('build/packages.dart', '!pubget.payload.dart', '!pubbuild.payload.dart',
               '!checkAndReport.payload.dart', done);
@@ -658,6 +672,64 @@ gulp.task('!checkAndReport.payload.dart', function() {
                     {failConditions: _DART_PAYLOAD_SIZE_LIMITS, prefix: 'hello_world'});
 });
 
+// JS payload size tracking
+gulp.task('test.payload.js/ci', function(done) {
+  runSequence('build.payload.js', '!checkAndReport.payload.js', sequenceComplete(done));
+});
+
+gulp.task('build.payload.js', ['build.js.prod'],
+          function(done) { runSequence('!build.payload.js.webpack', sequenceComplete(done)); });
+
+gulp.task('!build.payload.js.webpack', function() {
+  var q = require('q');
+  var webpack = q.denodeify(require('webpack'));
+  var concat = require('gulp-concat');
+  var uglify = require('gulp-uglify');
+
+  var ES5_PROD_ROOT = __dirname + '/' + CONFIG.dest.js.prod.es5;
+
+  return q.all(PAYLOAD_TESTS_CONFIG.ts.webpack.cases.map(function(caseName) {
+    var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.webpack.dist(caseName);
+
+    return webpack({
+             // bundle app + framework
+             entry: CASE_PATH + '/index.js',
+             output: {path: CASE_PATH, filename: "app-bundle.js"},
+             resolve: {
+               extensions: ['', '.js'],
+               packageAlias: '',  // option added to ignore "broken" package.json in our dist folder
+               root: [ES5_PROD_ROOT]
+             }
+           })
+        .then(function() {  // pad bundle with mandatory dependencies
+          return new Promise(function(resolve, reject) {
+            gulp.src([
+                  'node_modules/zone.js/dist/zone-microtask.js',
+                  'node_modules/zone.js/dist/long-stack-trace-zone.js',
+                  'node_modules/reflect-metadata/Reflect.js',
+                  CASE_PATH + '/app-bundle.js'
+                ])
+                .pipe(concat(PAYLOAD_TESTS_CONFIG.ts.webpack.bundleName))
+                .pipe(uglify())
+                .pipe(gulp.dest(CASE_PATH))
+                .on('end', resolve)
+                .on('error', reject);
+          });
+        });
+  }));
+});
+
+gulp.task('!checkAndReport.payload.js', function() {
+  var reportSize = require('./tools/analytics/reportsize');
+  var webPackConf = PAYLOAD_TESTS_CONFIG.ts.webpack;
+
+  return webPackConf.cases.reduce(function(sizeReportingStreams, caseName) {
+    sizeReportingStreams.add(
+        reportSize(webPackConf.dist(caseName) + '/' + webPackConf.bundleName,
+                   {failConditions: PAYLOAD_TESTS_CONFIG.ts.sizeLimits, prefix: caseName}))
+  }, merge2());
+});
+
 gulp.task('watch.dart.dev', function(done) {
   runSequence('build/tree.dart', 'build/pure-packages.dart', '!build/pubget.angular2.dart',
               '!build/change_detect.dart', '!build/remove-pub-symlinks', 'build.dart.material.css',

modules/payload_tests/hello_world/ts/webpack/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <title>Angular 2.0 Hello World payload test</title>
+<body>
+  <hello-app>
+    Loading...
+  </hello-app>
+  <script src="app-bundle-deps.min.js"></script>
+</body>
+</html>

modules/payload_tests/hello_world/ts/webpack/index.ts

@@ -0,0 +1,15 @@
+import {Component} from 'angular2/core';
+import {bootstrap} from 'angular2/bootstrap';
+
+@Component({
+  selector: 'hello-app',
+  template: `
+    <h1>Hello, {{name}}!</h1>
+    <label> Say hello to: <input [value]="name" (input)="name = $event.target.value"></label>
+`
+})
+export class HelloCmp {
+  name = 'World';
+}
+
+bootstrap(HelloCmp);

scripts/ci/build_and_test.sh

@@ -22,6 +22,7 @@ elif [ "$MODE" = "build_only" ]; then
 elif [ "$MODE" = "payload" ]; then
   source ${SCRIPT_DIR}/env_dart.sh
   ./node_modules/.bin/gulp test.payload.dart/ci
+  ./node_modules/.bin/gulp test.payload.js/ci
 else
   ${SCRIPT_DIR}/build_$MODE.sh
   ${SCRIPT_DIR}/test_$MODE.sh

tools/broccoli/trees/browser_tree.ts

@@ -108,6 +108,12 @@ module.exports = function makeBrowserTree(options, destinationPath) {
         {include: ['**/**'], exclude: ['e2e_test/**'], destDir: '/benchmarks_external/'});
   }
 
+  if (modules.payload_tests) {
+    var payloadTestsTree =
+        new Funnel('modules/payload_tests',
+                   {include: ['**/ts/**'], exclude: ['e2e_test/**'], destDir: '/payload_tests/'});
+  }
+
   if (modules.playground) {
     var playgroundTree =
         new Funnel('modules/playground',
@@ -125,6 +131,7 @@ module.exports = function makeBrowserTree(options, destinationPath) {
     angular2MaterialTree,
     benchmarksTree,
     benchmarksExternalTree,
+    payloadTestsTree,
     playgroundTree,
     benchpressTree
   ]);
@@ -215,8 +222,10 @@ module.exports = function makeBrowserTree(options, destinationPath) {
         modulesTree, {include: ['**/*'], exclude: ['**/*.{html,ts,dart}'], destDir: '/'});
   }
 
-  var htmlTree = new Funnel(
-      modulesTree, {include: ['*/src/**/*.html', '**/playground/**/*.html'], destDir: '/'});
+  var htmlTree = new Funnel(modulesTree, {
+    include: ['*/src/**/*.html', '**/playground/**/*.html', '**/payload_tests/**/ts/**/*.html'],
+    destDir: '/'
+  });
 
   if (modules.benchmarks || modules.benchmarks_external || modules.playground) {
     htmlTree = replace(htmlTree, {

tools/broccoli/trees/dart_tree.ts

@@ -14,17 +14,18 @@ import dartfmt from '../broccoli-dartfmt';
 import replace from '../broccoli-replace';
 
 var global_excludes = [
-  'angular2/http*',
-  'angular2/upgrade*',
   'angular2/examples/**/ts/**/*',
+  'angular2/http*',
   'angular2/http/**/*',
   'angular2/src/http/**/*',
-  'angular2/test/http/**/*',
   'angular2/src/upgrade/**/*',
+  'angular2/test/http/**/*',
   'angular2/test/upgrade/**/*',
+  'angular2/upgrade*',
+  'payload_tests/**/ts/**/*',
   'playground/src/http/**/*',
-  'playground/test/http/**/*',
   'playground/src/jsonp/**/*',
+  'playground/test/http/**/*',
   'playground/test/jsonp/**/*'
 ];
 
@@ -145,7 +146,12 @@ function getDocsTree() {
   var licenses = new MultiCopy('', {
     srcPath: 'LICENSE',
     targetPatterns: ['modules/*'],
-    exclude: ['*/angular2/src/http', '*/upgrade', '*/angular1_router']  // Not in dart.
+    exclude: [
+      '*/angular1_router',
+      '*/angular2/src/http',
+      '*/payload_tests',
+      '*/upgrade'
+    ]  // Not in dart.
   });
   licenses = stew.rename(licenses, stripModulePrefix);
 

tools/broccoli/trees/node_tree.ts

@@ -74,8 +74,8 @@ module.exports = function makeNodeTree(projects, destinationPath) {
       'angular2/test/web_workers/worker/renderer_integration_spec.ts',
 
       'angular2/test/upgrade/**/*.ts',
-
       'angular1_router/**',
+      'payload_tests/**'
     ]
   });