feat(zone.js): adds additional configuration options for Zone.js

wessberg · Mar 27, 2019 · 315b0c1 · 315b0c1
1 parent 2d14f90
commit 315b0c1
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -240,9 +240,17 @@ By default, the _system_ variant will be used. You can decide which one to use w
 
 For example: `systemjs|variant=s` selects the _s_ variant, while `systemjs|variant=system` selects the _system_ variant.
 
-#### The `error` option for `Zone`
+#### Extra options for `Zone`
 
-[Zone.js](https://github.com/angular/zone.js/) can be configured to produce more readable Stack traces. If you want this, you can give the `error` option: `zone|error`.
+[Zone.js](https://github.com/angular/zone.js/), which is supported by Polyfiller, can be configured with some extra options to enhance its operation or support interoperability with more APIs:
+
+| Option       | Description                                                                                       |
+| ------------ | ------------------------------------------------------------------------------------------------- |
+| `error`      | Generates more readable Stack traces when using Zone                                              |
+| `shadydom`   | _This will be automatically applied if the Shadow DOM polyfill is being loaded along with Zone_.  |
+| `mediaquery` | Patches the [Media Query API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) |
+| `rxjs`       | Patches [Rxjs](https://github.com/ReactiveX/rxjs)                                                 |
+| `fetch`      | Patches the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)               |
 
 ### Usage in a Web Worker/Service Worker
 

diff --git a/src/constant/constant.ts b/src/constant/constant.ts
@@ -43,7 +43,11 @@ export const constant: IConstant = {
 		zone: {
 			library: "zone.js",
 			meta: {
-				error: "dist/zone-error.min.js"
+				error: "dist/zone-error.min.js",
+				shadydom: "dist/webapis-shadydom.min.js",
+				mediaquery: "dist/webapis-media-query.min.js",
+				rxjs: "dist/zone-patch-rxjs.min.js",
+				fetch: "dist/zone-patch-fetch.min.js"
 			},
 			relativePaths: {
 				window: ["dist/zone.min.js"],

diff --git a/src/service/polyfill-builder/polyfill-builder-service.ts b/src/service/polyfill-builder/polyfill-builder-service.ts
@@ -129,14 +129,64 @@ export class PolyfillBuilderService implements IPolyfillBuilderService {
 				}
 			}
 
-			// If Zone is requested, 'zone-error' may be requested which improves the produced Stack trace when using Zone
-			if (polyfillFeature.name === "zone" && meta != null && polyfillFeature.meta != null && polyfillFeature.meta.error === true) {
-				const errorPathInput = join(rootDirectory, meta.error);
-				const resolvedErrorPath = sync(errorPathInput, SYNC_OPTIONS);
-				if (resolvedErrorPath != null) {
-					absolutePaths.push(resolvedErrorPath);
-				} else {
-					this.logger.debug(`Unresolved path:`, errorPathInput);
+			if (meta != null && polyfillFeature.name === "zone") {
+				// If Zone is requested, 'zone-error' may be requested which improves the produced Stack trace when using Zone
+				if (polyfillFeature.meta != null && polyfillFeature.meta.error === true) {
+					const errorPathInput = join(rootDirectory, meta.error);
+					const resolvedErrorPath = sync(errorPathInput, SYNC_OPTIONS);
+					if (resolvedErrorPath != null) {
+						absolutePaths.push(resolvedErrorPath);
+					} else {
+						this.logger.debug(`Unresolved path:`, errorPathInput);
+					}
+				}
+
+				// Check if any web component polyfill has been requested
+				const hasWCPolyfill = [...polyfillSet].some(({name}) => name === "custom-elements" || name === "shadow-dom");
+
+				// If any web component polyfill has been requested, or if the 'shadydom' zone extension has been explicitly requested
+				// add it to the Zone.js polyfill buffer
+				if (hasWCPolyfill || (polyfillFeature.meta != null && polyfillFeature.meta.shadydom === true)) {
+					const shadyDomExtensionPathInput = join(rootDirectory, meta.shadydom);
+					const resolvedShadyDomExtensionPath = sync(shadyDomExtensionPathInput, SYNC_OPTIONS);
+					if (resolvedShadyDomExtensionPath != null) {
+						absolutePaths.push(resolvedShadyDomExtensionPath);
+					} else {
+						this.logger.debug(`Unresolved path:`, shadyDomExtensionPathInput);
+					}
+				}
+
+				// If the Zone-patching of 'matchMedia' is requested, add it to the polyfill buffer for Zone.js
+				if (polyfillFeature.meta != null && polyfillFeature.meta.mediaquery === true) {
+					const mediaQueryExtensionPathInput = join(rootDirectory, meta.mediaquery);
+					const resolvedMediaQueryExtensionPath = sync(mediaQueryExtensionPathInput, SYNC_OPTIONS);
+					if (resolvedMediaQueryExtensionPath != null) {
+						absolutePaths.push(resolvedMediaQueryExtensionPath);
+					} else {
+						this.logger.debug(`Unresolved path:`, mediaQueryExtensionPathInput);
+					}
+				}
+
+				// If the Zone-patching of 'rxjs' is requested, add it to the polyfill buffer for Zone.js
+				if (polyfillFeature.meta != null && polyfillFeature.meta.rxjs === true) {
+					const rxjsExtensionPathInput = join(rootDirectory, meta.rxjs);
+					const resolvedRxjsExtensionPath = sync(rxjsExtensionPathInput, SYNC_OPTIONS);
+					if (resolvedRxjsExtensionPath != null) {
+						absolutePaths.push(resolvedRxjsExtensionPath);
+					} else {
+						this.logger.debug(`Unresolved path:`, rxjsExtensionPathInput);
+					}
+				}
+
+				// If the Zone-patching of 'fetch' is requested, add it to the polyfill buffer for Zone.js
+				if (polyfillFeature.meta != null && polyfillFeature.meta.fetch === true) {
+					const fetchExtensionPathInput = join(rootDirectory, meta.fetch);
+					const resolvedFetchExtensionPath = sync(fetchExtensionPathInput, SYNC_OPTIONS);
+					if (resolvedFetchExtensionPath != null) {
+						absolutePaths.push(resolvedFetchExtensionPath);
+					} else {
+						this.logger.debug(`Unresolved path:`, fetchExtensionPathInput);
+					}
 				}
 			}
 

diff --git a/test/server/server.test.ts b/test/server/server.test.ts
@@ -61,7 +61,7 @@ test("Will not generate polyfills for 'Element' on Chrome 69 for a Galaxy S5", a
 	t.true(result.statusCode === constants.HTTP_STATUS_OK);
 });
 
-test("Will generate correct polyfills for IE11", async t => {
+test.only("Will generate correct polyfills for IE11", async t => {
 	const result = await sendRequest({
 		http2: config.http2,
 		tls: true,
@@ -71,7 +71,7 @@ test("Will generate correct polyfills for IE11", async t => {
 		port: config.port,
 		path: `${
 			constant.endpoint.polyfill
-		}?features=web-components,es,class-list,system|variant=system,custom-event,url,fetch,object-fit,intersection-observer,animation,regenerator-runtime,requestanimationframe,requestidlecallback,resize-observer,pointer-event,dom.collections.iterable,scroll-behavior,zone|error,esnext.reflect,intl|force|locale=en~da`,
+		}?features=web-components,es,class-list,system|variant=system,custom-event,url,fetch,object-fit,intersection-observer,animation,regenerator-runtime,requestanimationframe,requestidlecallback,resize-observer,pointer-event,dom.collections.iterable,scroll-behavior,zone|error|rxjs|shadydom,esnext.reflect,intl|force|locale=en~da`,
 		acceptEncoding: undefined
 	});