feat(zone.js): upgrade zone.js to angular package format(APF) (#36540)

Close #35157

In the current version of zone.js, zone.js uses it's own package format, and it is not following the rule
of Angualr package format(APF), so it is not easily to be consumed by Angular CLI or other bundle tools.
For example, zone.js npm package has two bundles,

1. zone.js/dist/zone.js, this is a `es5` bundle.
2. zone.js/dist/zone-evergreen.js, this is a `es2015` bundle.

And Angular CLI has to add some hard-coding code to handle this case, o5376a8b139/packages/schematics/angular/application/files/src/polyfills.ts.template (L55-L58)

This PR upgrade zone.js npm package format to follow APF rule, https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx

The updated points are:

1. in package.json, update all bundle related properties

```
  "main": "./bundles/zone.umd.js",
  "module": "./fesm2015/zone.js",
  "es2015": "./fesm2015/zone.js",
  "fesm2015": "./fesm2015/zone.js",
```

2. re-organize dist folder, for example for `zone.js` bundle, now we have

```
  dist/
      bundles/
             zone.js            // this is the es5 bundle
      fesm2015/
             zone.js            // this is the es2015 bundle (in the old version is `zone-evergreen.js`)
```

3. have several sub-packages.

1. `zone-testing`, provide zone-testing bundles include zone.js and testing libraries
2. `zone-node`, provide zone.js implemention for NodeJS
3. `zone-mix`, provide zone.js patches for both Browser and NodeJS

All those sub-packages will have their own `package.json` and the bundle will reference `bundles(es5)` and `fesm2015(es2015)`.

4. keep backward compatibility, still keep the `zone.js/dist` folder, and all bundles will be redirected to `zone.js/bundles` or `zone.js/fesm2015` folders.

PR Close #36540
This commit is contained in:
JiaLiPassion
2020-05-17 10:53:03 +09:00
committed by Misko Hevery
parent 1fce6d6bae
commit 583a9d38a1
182 changed files with 1710 additions and 904 deletions

View File

@ -282,15 +282,15 @@ test_deps = [
test_entry_point = ":browser_entry_point.ts"
karma_tests = {
"browser_test": ["//packages/zone.js/dist:zone-testing-bundle.js"],
"browser_test": ["//packages/zone.js/bundles:zone-testing-bundle.umd.js"],
"browser_green_test": [
"//packages/zone.js/dist:zone-evergreen.js",
"//packages/zone.js/dist:zone-testing.js",
"//packages/zone.js/fesm2015:zone.js",
"//packages/zone.js/fesm2015:zone-testing.js",
],
"browser_legacy_test": [
"//packages/zone.js/dist:zone-legacy.js",
"//packages/zone.js/dist:zone-evergreen.js",
"//packages/zone.js/dist:zone-testing.js",
"//packages/zone.js/bundles:zone-legacy.umd.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:zone-testing.umd.js",
],
}
@ -309,8 +309,8 @@ karma_test(
karma_test(
name = "browser_shadydom",
bootstraps = {"browser_shadydom": [
"//packages/zone.js/dist:zone-testing-bundle.js",
"//packages/zone.js/dist:webapis-shadydom.js",
"//packages/zone.js/bundles:zone-testing-bundle.umd.js",
"//packages/zone.js/bundles:webapis-shadydom.umd.js",
]},
ci = False,
env_deps = [
@ -331,7 +331,7 @@ karma_test(
karma_test(
name = "browser_disable_wrap_uncaught_promise_rejection",
bootstraps = {"browser_disable_wrap_uncaught_promise_rejection": [
"//packages/zone.js/dist:zone-testing-bundle.js",
"//packages/zone.js/bundles:zone-testing-bundle.umd.js",
]},
ci = False,
env_deps = [

View File

@ -8,7 +8,7 @@
var domino = require('domino');
var mockRequire = require('mock-require');
var nativeTimeout = setTimeout;
require('./zone-mix');
require('./zone-mix.umd');
mockRequire('electron', {
desktopCapturer: {
getSources: function(callback) {
@ -26,7 +26,7 @@ mockRequire('electron', {
}
},
});
require('./zone-patch-electron');
require('./zone-patch-electron.umd');
var electron = require('electron');
var zone = Zone.current.fork({name: 'zone'});
zone.run(function() {

View File

@ -49,15 +49,15 @@ def karma_test(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps,
first = False
karma_test_prepare(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps, test_entry_point)
_karma_test_required_dist_files = [
"//packages/zone.js/dist:task-tracking.js",
"//packages/zone.js/dist:wtf.js",
"//packages/zone.js/dist:webapis-notification.js",
"//packages/zone.js/dist:webapis-media-query.js",
"//packages/zone.js/dist:zone-patch-canvas.js",
"//packages/zone.js/dist:zone-patch-fetch.js",
"//packages/zone.js/dist:zone-patch-resize-observer.js",
"//packages/zone.js/dist:zone-patch-message-port.js",
"//packages/zone.js/dist:zone-patch-user-media.js",
"//packages/zone.js/bundles:task-tracking.umd.js",
"//packages/zone.js/bundles:wtf.umd.js",
"//packages/zone.js/bundles:webapis-notification.umd.js",
"//packages/zone.js/bundles:webapis-media-query.umd.js",
"//packages/zone.js/bundles:zone-patch-canvas.umd.js",
"//packages/zone.js/bundles:zone-patch-fetch.umd.js",
"//packages/zone.js/bundles:zone-patch-resize-observer.umd.js",
"//packages/zone.js/bundles:zone-patch-message-port.umd.js",
"//packages/zone.js/bundles:zone-patch-user-media.umd.js",
":" + name + "_rollup.umd",
]
@ -91,7 +91,7 @@ def karma_test(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps,
bootstrap = [
":saucelabs.js",
":" + name + "_env_rollup.umd",
"//packages/zone.js/dist:zone-testing-bundle.min.js",
"//packages/zone.js/bundles:zone-testing-bundle.umd.min.js",
] + _karma_test_required_dist_files,
browsers = ["//dev-infra/browsers:chromium"],
config_file = "//:karma-js.conf.js",

View File

@ -8,6 +8,12 @@
import * as path from 'path';
import * as shx from 'shelljs';
function checkInSubFolder(subFolder: string, testFn: Function) {
shx.cd(subFolder);
testFn();
shx.cd('../');
}
describe('Zone.js npm_package', () => {
beforeEach(
() => {shx.cd(
@ -32,17 +38,11 @@ describe('Zone.js npm_package', () => {
});
it('should contain module resolution mappings', () => {
expect(shx.grep('"main":', packageJson)).toContain(`dist/zone-node.js`);
expect(shx.grep('"main":', packageJson)).toContain(`zone.umd.js`);
});
});
describe('check dist folder', () => {
beforeEach(() => {
shx.cd('./dist');
});
afterEach(() => {
shx.cd('../');
});
describe('check npm_package root folder', () => {
describe('typescript support', () => {
it('should have an zone.js.d.ts file', () => {
expect(shx.cat('zone.js.d.ts')).toContain('declare const');
@ -65,33 +65,46 @@ describe('Zone.js npm_package', () => {
describe('rxjs patch', () => {
it('should not contain rxjs source', () => {
expect(shx.cat('zone-patch-rxjs.js'))
.not.toContain('_enable_super_gross_mode_that_will_cause_bad_things');
checkInSubFolder('./bundles', () => {
expect(shx.cat('zone-patch-rxjs.umd.js'))
.not.toContain('_enable_super_gross_mode_that_will_cause_bad_things');
});
checkInSubFolder('./fesm2015', () => {
expect(shx.cat('zone-patch-rxjs.js'))
.not.toContain('_enable_super_gross_mode_that_will_cause_bad_things');
});
});
});
describe('es5', () => {
it('zone.js(es5) should not contain es6 spread code', () => {
expect(shx.cat('zone.js')).not.toContain('let value of values');
checkInSubFolder('./bundles', () => {
expect(shx.cat('zone.umd.js')).not.toContain('let value of values');
});
});
it('zone.js(es5) should not contain source map comment', () => {
expect(shx.cat('zone.js')).not.toContain('sourceMappingURL');
checkInSubFolder('./bundles', () => {
expect(shx.cat('zone.umd.js')).not.toContain('sourceMappingURL');
});
});
});
describe('es2015', () => {
it('zone-evergreen.js(es2015) should contain es6 code', () => {
expect(shx.cat('zone-evergreen.js')).toContain('let value of values');
it('zone.js(es2015) should contain es6 code', () => {
checkInSubFolder('./fesm2015', () => {
expect(shx.cat('zone.js')).toContain('let value of values');
});
});
it('zone.js(es5) should not contain source map comment', () => {
expect(shx.cat('zone-evergreen.js')).not.toContain('sourceMappingURL');
it('zone.js(es2015) should not contain source map comment', () => {
checkInSubFolder('./fesm2015', () => {
expect(shx.cat('zone.js')).not.toContain('sourceMappingURL');
});
});
});
describe('dist file list', () => {
it('should contain all files', () => {
const list = shx.ls('./').stdout.split('\n').sort().slice(1);
const expected = [
'async-test.js',
'async-test.min.js',
@ -119,15 +132,10 @@ describe('Zone.js npm_package', () => {
'webapis-shadydom.min.js',
'wtf.js',
'wtf.min.js',
'zone_externs.js',
'zone-bluebird.js',
'zone-bluebird.min.js',
'zone-error.js',
'zone-error.min.js',
'zone-evergreen.js',
'zone-evergreen.min.js',
'zone-evergreen-testing-bundle.js',
'zone-evergreen-testing-bundle.min.js',
'zone-legacy.js',
'zone-legacy.min.js',
'zone-mix.js',
@ -165,15 +173,139 @@ describe('Zone.js npm_package', () => {
'zone-testing.js',
'zone-testing.min.js',
'zone.js',
'zone.js.d.ts',
'zone.api.extensions.ts',
'zone.configurations.api.ts',
'zone.min.js',
].sort();
expect(list.length).toBe(expected.length);
for (let i = 0; i < list.length; i++) {
expect(list[i]).toEqual(expected[i]);
}
checkInSubFolder('./bundles', () => {
const list = shx.ls('./').stdout.split('\n').sort().slice(1);
expect(list.length).toBe(expected.length);
for (let i = 0; i < list.length; i++) {
if (expected[i].indexOf('.min.js') !== -1) {
expect(list[i]).toEqual(expected[i].replace('.min.js', '.umd.min.js'));
} else {
expect(list[i]).toEqual(expected[i].replace('.js', '.umd.js'));
}
}
});
checkInSubFolder('./fesm2015', () => {
const list = shx.ls('./').stdout.split('\n').sort().slice(1);
expect(list.length).toBe(expected.length);
for (let i = 0; i < list.length; i++) {
expect(list[i]).toEqual(expected[i]);
}
});
});
});
describe('backward compatible check', () => {
it('should contain all original folders in /dist', () => {
const expected = [
'async-test',
'async-test.min',
'fake-async-test',
'fake-async-test.min',
'jasmine-patch',
'jasmine-patch.min',
'long-stack-trace-zone',
'long-stack-trace-zone.min',
'mocha-patch',
'mocha-patch.min',
'proxy',
'proxy.min',
'sync-test',
'sync-test.min',
'task-tracking',
'task-tracking.min',
'webapis-media-query',
'webapis-media-query.min',
'webapis-notification',
'webapis-notification.min',
'webapis-rtc-peer-connection',
'webapis-rtc-peer-connection.min',
'webapis-shadydom',
'webapis-shadydom.min',
'wtf',
'wtf.min',
'zone-bluebird',
'zone-bluebird.min',
'zone-error',
'zone-error.min',
'zone-legacy',
'zone-legacy.min',
'zone-mix',
'zone-mix.min',
'zone-node',
'zone-node.min',
'zone-patch-canvas',
'zone-patch-canvas.min',
'zone-patch-cordova',
'zone-patch-cordova.min',
'zone-patch-electron',
'zone-patch-electron.min',
'zone-patch-fetch',
'zone-patch-fetch.min',
'zone-patch-jsonp',
'zone-patch-jsonp.min',
'zone-patch-message-port',
'zone-patch-message-port.min',
'zone-patch-promise-test',
'zone-patch-promise-test.min',
'zone-patch-resize-observer',
'zone-patch-resize-observer.min',
'zone-patch-rxjs-fake-async',
'zone-patch-rxjs-fake-async.min',
'zone-patch-rxjs',
'zone-patch-rxjs.min',
'zone-patch-socket-io',
'zone-patch-socket-io.min',
'zone-patch-user-media',
'zone-patch-user-media.min',
'zone-testing-bundle',
'zone-testing-bundle.min',
'zone-testing-node-bundle',
'zone-testing-node-bundle.min',
'zone-testing',
'zone-testing.min',
'zone',
'zone.min',
'zone_externs',
'zone-evergreen',
'zone-evergreen.min',
'zone-evergreen-testing-bundle',
'zone-evergreen-testing-bundle.min',
].sort();
checkInSubFolder('./dist', () => {
const list = shx.ls('./').stdout.split('\n').sort().slice(1);
expect(list.length).toBe(expected.length);
for (let i = 0; i < list.length; i++) {
expect(list[i]).toEqual(expected[i]);
const packageJson = shx.cat(`${list[i]}/package.json`);
if (list[i].indexOf('_externs') !== -1) {
expect(packageJson).toContain(`"name": "zone.js/${list[i]}"`);
expect(packageJson).toContain(`"main": "../../${list[i]}.js"`);
expect(packageJson).toContain(`"fesm2015": "../../${list[i]}.js"`);
expect(packageJson).toContain(`"es2015": "../../${list[i]}.js"`);
expect(packageJson).toContain(`"module": "../../${list[i]}.js"`);
continue;
}
if (list[i].indexOf('evergreen') === -1) {
const umdMinName = list[i].indexOf('.min') === -1 ?
`${list[i]}.umd` :
`${list[i].substring(0, list[i].indexOf('.min'))}.umd.min`;
expect(packageJson).toContain(`"name": "zone.js/${list[i]}"`);
expect(packageJson).toContain(`"main": "../../bundles/${umdMinName}.js"`);
expect(packageJson).toContain(`"fesm2015": "../../fesm2015/${list[i]}.js"`);
expect(packageJson).toContain(`"es2015": "../../fesm2015/${list[i]}.js"`);
expect(packageJson).toContain(`"module": "../../fesm2015/${list[i]}.js"`);
} else {
const removeEvergreen = list[i].replace('-evergreen', '');
expect(packageJson).toContain(`"name": "zone.js/${list[i]}"`);
expect(packageJson).toContain(`"main": "../../fesm2015/${removeEvergreen}.js"`);
expect(packageJson).toContain(`"fesm2015": "../../fesm2015/${removeEvergreen}.js"`);
expect(packageJson).toContain(`"es2015": "../../fesm2015/${removeEvergreen}.js"`);
expect(packageJson).toContain(`"module": "../../fesm2015/${removeEvergreen}.js"`);
}
}
});
});
});
});