1 | # Zone.js
|
---|
2 |
|
---|
3 | [![CDNJS](https://img.shields.io/cdnjs/v/zone.js.svg)](https://cdnjs.com/libraries/zone.js)
|
---|
4 |
|
---|
5 | Implements _Zones_ for JavaScript, inspired by [Dart](https://dart.dev/articles/archive/zones).
|
---|
6 |
|
---|
7 | > If you're using zone.js via unpkg (i.e. using `https://unpkg.com/zone.js`)
|
---|
8 | > and you're using any of the following libraries, make sure you import them first
|
---|
9 |
|
---|
10 | > * 'newrelic' as it patches global.Promise before zone.js does
|
---|
11 | > * 'async-listener' as it patches global.setTimeout, global.setInterval before zone.js does
|
---|
12 | > * 'continuation-local-storage' as it uses async-listener
|
---|
13 |
|
---|
14 | # NEW Zone.js POST-v0.6.0
|
---|
15 |
|
---|
16 | See the new API [here](./lib/zone.ts).
|
---|
17 |
|
---|
18 | Read up on [Zone Primer](https://docs.google.com/document/d/1F5Ug0jcrm031vhSMJEOgp1l-Is-Vf0UCNDY-LsQtAIY).
|
---|
19 |
|
---|
20 | # BREAKING CHANGES since Zone.js v0.11.1
|
---|
21 |
|
---|
22 | Prior to `v0.11.1`, Zone.js provided two distribution bundle formats in the `dist` folder.
|
---|
23 | They were (1) `ES5` bundle distributed as `zone.js` and (2) `ES2015` bundle distributed as `zone-evergreen.js`.
|
---|
24 | Both of these bundles were in `UMD` format, and are used for Angular's differential-loading mechanism.
|
---|
25 |
|
---|
26 | Starting with `v0.11.1`, Zone.js follows the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs). Therefor the new Zone.js file layout is:
|
---|
27 |
|
---|
28 | - `bundles`: `ES5` bundle in `UMD` format.
|
---|
29 | - `fesm2015`: `ES5` bundle in `ESM` format.
|
---|
30 | - `dist`: `ES5` bundle in `UMD` format. This directory is present to keep backward compatibility.
|
---|
31 |
|
---|
32 | If you are using `Angular CLI`, the `polyfills.ts` file will contain:
|
---|
33 |
|
---|
34 | ```
|
---|
35 | import 'zone.js/dist/zone';
|
---|
36 | ```
|
---|
37 |
|
---|
38 | Starting with Zone.js `v0.11.1+` the import changes to:
|
---|
39 |
|
---|
40 | ```
|
---|
41 | import 'zone.js';
|
---|
42 | ```
|
---|
43 |
|
---|
44 | Prior to `v0.11.1` the import would load the `ES5` bundle in `UMD` format from `dist/zone.js`.
|
---|
45 | Starting with `v0.11.1` the import loads the `ES2015` bundle in `ESM` format instead.
|
---|
46 |
|
---|
47 | This is a breaking change for legacy browsers such as `IE11`.
|
---|
48 |
|
---|
49 | For backwards compatibility `zone.js` continues to distribute the same bundles under `dist`.
|
---|
50 | To restore the old behavior import from the `dist` directory instead like so:
|
---|
51 |
|
---|
52 | ```
|
---|
53 | import 'zone.js/dist/zone';
|
---|
54 | ```
|
---|
55 |
|
---|
56 | For details, please refer the [changelog](./CHANGELOG.md) and the [PR](https://github.com/angular/angular/pull/36540).
|
---|
57 |
|
---|
58 | ## What's a Zone?
|
---|
59 |
|
---|
60 | A Zone is an execution context that persists across async tasks.
|
---|
61 | You can think of it as [thread-local storage](https://en.wikipedia.org/wiki/Thread-local_storage) for JavaScript VMs.
|
---|
62 |
|
---|
63 | See this video from ng-conf 2014 for a detailed explanation:
|
---|
64 |
|
---|
65 | [![screenshot of the zone.js presentation and ng-conf 2014](./presentation.png)](//www.youtube.com/watch?v=3IqtmUscE_U&t=150)
|
---|
66 |
|
---|
67 | ## See also
|
---|
68 | * [async-listener](https://github.com/othiym23/async-listener) - a similar library for node
|
---|
69 | * [Async stack traces in Chrome](https://www.html5rocks.com/en/tutorials/developertools/async-call-stack/)
|
---|
70 | * [strongloop/zone](https://github.com/strongloop/zone) (Deprecated)
|
---|
71 | * [vizone](https://github.com/gilbox/vizone) - control flow visualizer that uses zone.js
|
---|
72 |
|
---|
73 | ## Standard API support
|
---|
74 |
|
---|
75 | zone.js patched most standard web APIs (such as DOM events, `XMLHttpRequest`, ...) and nodejs APIs
|
---|
76 | (`EventEmitter`, `fs`, ...), for more details, please see [STANDARD-APIS.md](STANDARD-APIS.md).
|
---|
77 |
|
---|
78 | ## Nonstandard API support
|
---|
79 |
|
---|
80 | We are adding support to some nonstandard APIs, such as MediaQuery and
|
---|
81 | Notification. Please see [NON-STANDARD-APIS.md](NON-STANDARD-APIS.md) for more details.
|
---|
82 |
|
---|
83 | ## Examples
|
---|
84 |
|
---|
85 | You can find some samples to describe how to use zone.js in [SAMPLE.md](SAMPLE.md).
|
---|
86 |
|
---|
87 | ## Modules
|
---|
88 |
|
---|
89 | zone.js patches the async APIs described above, but those patches will have some overhead.
|
---|
90 | Starting from zone.js v0.8.9, you can choose which web API module you want to patch.
|
---|
91 | For more details, please
|
---|
92 | see [MODULE.md](MODULE.md).
|
---|
93 |
|
---|
94 | ## Bundles
|
---|
95 |
|
---|
96 | Starting with `v0.11.0`, `zone.js` uses `Angular Package Format` for bundle distribution.
|
---|
97 | (For backwards compatibility, all bundles can still be accessed from `dist` folder.)
|
---|
98 |
|
---|
99 | |Bundle|Summary|
|
---|
100 | |---|---|
|
---|
101 | |`zone.js`| The default bundle. Contains the most used APIs such as `setTimeout/Promise/EventTarget...`, it also supports differential loading by importing this bundle using `import zone.js`. In legacy browsers it includes some additional patches such as `registerElement` and `EventTarget` like APIs.|
|
---|
102 | |`zone-testing.js`| The bundle for zone testing support of `jasmine` / `mocha` / `jest`. Also includes test utility functions `async` / `fakeAsync` / `sync`.|
|
---|
103 | |`zone-node.js`|The NodeJS support bundle.|
|
---|
104 | |`zone-mix.js`|A mixed bundle which supports both browser and NodeJS. Useful for mixed environment such as Electron.|
|
---|
105 | |`zone-externs.js`|the API definitions for `closure compiler`.|
|
---|
106 |
|
---|
107 | Additional optional patches not included in the `zone.js` bundles which extend functionality.
|
---|
108 | The additional bundles can be found under `zone.js/plugins` folder.
|
---|
109 | To use these bundles, add the following code after importing zone.js bundle.
|
---|
110 |
|
---|
111 | ```
|
---|
112 | import 'zone.js';
|
---|
113 | // For example, import canvas patch
|
---|
114 | import 'zone.js/plugins/zone-patch-canvas';
|
---|
115 | ```
|
---|
116 |
|
---|
117 | |Patch|Summary|
|
---|
118 | |---|---|
|
---|
119 | |`webapis-media-query.js`|patch for `MediaQuery APIs`|
|
---|
120 | |`webapis-notification.js`|patch for `Notification APIs`|
|
---|
121 | |`webapis-rtc-peer-connection.js`|patch for `RTCPeerConnection APIs`|
|
---|
122 | |`webapis-shadydom.js`|patch for `Shady DOM APIs`|
|
---|
123 | |`zone-bluebird.js`|patch for `Bluebird APIs`|
|
---|
124 | |`zone-error.js`|patch for `Error Global Object`, supports adding zone information to stack frame, and also removing unrelated stack frames from `zone.js` internally|
|
---|
125 | |`zone-patch-canvas.js`|patch for `Canvas API`|
|
---|
126 | |`zone-patch-cordova.js`|patch for `Cordova API`|
|
---|
127 | |`zone-patch-electron.js`|patch for `Electron API`|
|
---|
128 | |`zone-patch-fetch.js`|patch for `Fetch API`|
|
---|
129 | |`zone-patch-jsonp.js`|helper utility for `jsonp API`|
|
---|
130 | |`zone-patch-resize-observer.js`|patch for `ResizeObserver API`|
|
---|
131 | |`zone-patch-rxjs.js`|patch for `rxjs API`|
|
---|
132 | |`zone-patch-rxjs-fake-async.js`|patch for `rxjs fakeasync test`|
|
---|
133 | |`zone-patch-socket-io.js`|patch for `socket-io`|
|
---|
134 | |`zone-patch-user-media.js`|patch for `UserMedia API`|
|
---|
135 | |`zone-patch-message-port.js`|patch for `MessagePort API`|
|
---|
136 |
|
---|
137 | ## Promise A+ test passed
|
---|
138 | [![Promises/A+ 1.1 compliant](https://promisesaplus.com/assets/logo-small.png)](https://promisesaplus.com/)
|
---|
139 |
|
---|
140 | ## License
|
---|
141 | MIT |
---|