[6a3a178] | 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 |
---|