diff --git a/gulpfile.js b/gulpfile.js index 0b0a16240a..bd12b98223 100644 --- a/gulpfile.js +++ b/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', diff --git a/modules/payload_tests/hello_world/ts/webpack/index.html b/modules/payload_tests/hello_world/ts/webpack/index.html new file mode 100644 index 0000000000..94a5f78cae --- /dev/null +++ b/modules/payload_tests/hello_world/ts/webpack/index.html @@ -0,0 +1,10 @@ + + + Angular 2.0 Hello World payload test + + + Loading... + + + + diff --git a/modules/payload_tests/hello_world/ts/webpack/index.ts b/modules/payload_tests/hello_world/ts/webpack/index.ts new file mode 100644 index 0000000000..a0cfbe9e03 --- /dev/null +++ b/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: ` +

Hello, {{name}}!

+ +` +}) +export class HelloCmp { + name = 'World'; +} + +bootstrap(HelloCmp); diff --git a/scripts/ci/build_and_test.sh b/scripts/ci/build_and_test.sh index 35ffaf6483..d13bfa0eb0 100755 --- a/scripts/ci/build_and_test.sh +++ b/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 diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts index 6759a2b043..5edd8777cb 100644 --- a/tools/broccoli/trees/browser_tree.ts +++ b/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, { diff --git a/tools/broccoli/trees/dart_tree.ts b/tools/broccoli/trees/dart_tree.ts index 06a713fc70..f94bf89eff 100644 --- a/tools/broccoli/trees/dart_tree.ts +++ b/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); diff --git a/tools/broccoli/trees/node_tree.ts b/tools/broccoli/trees/node_tree.ts index 9b5c40e5d1..69384fcbb9 100644 --- a/tools/broccoli/trees/node_tree.ts +++ b/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/**' ] });