feat(zone): added ResizeObserver patch for Zone

wessberg · Mar 28, 2019 · 1cdcbb5 · 1cdcbb5
1 parent 315b0c1
commit 1cdcbb5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -244,13 +244,14 @@ For example: `systemjs|variant=s` selects the _s_ variant, while `systemjs|varia
 
 [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)               |
+| 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). _This will be automatically applied if the Fetch polyfill is being loaded along with Zone_.                        |
+| `resizeobserver` | Patches the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). _This will be automatically applied if the ResizeObserver polyfill is being loaded along with Zone_. |
 
 ### Usage in a Web Worker/Service Worker
 

diff --git a/src/constant/constant.ts b/src/constant/constant.ts
@@ -47,7 +47,8 @@ export const constant: IConstant = {
 				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"
+				fetch: "dist/zone-patch-fetch.min.js",
+				resizeobserver: "dist/zone-patch-resize-observer.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
@@ -178,8 +178,11 @@ export class PolyfillBuilderService implements IPolyfillBuilderService {
 					}
 				}
 
-				// 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) {
+				// Check if any fetch polyfill has been requested
+				const hasFetchPolyfill = [...polyfillSet].some(({name}) => name === "fetch");
+
+				// If the Zone-patching of 'fetch' is requested, or if 'fetch' is requested as a polyfill along with Zone add it to the polyfill buffer for Zone.js
+				if (hasFetchPolyfill || (polyfillFeature.meta != null && polyfillFeature.meta.fetch === true)) {
 					const fetchExtensionPathInput = join(rootDirectory, meta.fetch);
 					const resolvedFetchExtensionPath = sync(fetchExtensionPathInput, SYNC_OPTIONS);
 					if (resolvedFetchExtensionPath != null) {
@@ -188,6 +191,20 @@ export class PolyfillBuilderService implements IPolyfillBuilderService {
 						this.logger.debug(`Unresolved path:`, fetchExtensionPathInput);
 					}
 				}
+
+				// Check if any fetch polyfill has been requested
+				const hasResizeObserverPolyfill = [...polyfillSet].some(({name}) => name === "resize-observer");
+
+				// If the Zone-patching of 'ResizeObserver' is requested or if ResizeObserver is requested as a polyfill along with Zone.js, add it to the polyfill buffer for Zone.js
+				if (hasResizeObserverPolyfill || (polyfillFeature.meta != null && polyfillFeature.meta.resizeobserver === true)) {
+					const resizeObserverExtensionPathInput = join(rootDirectory, meta.resizeobserver);
+					const resolvedResizeObserverExtensionPath = sync(resizeObserverExtensionPathInput, SYNC_OPTIONS);
+					if (resolvedResizeObserverExtensionPath != null) {
+						absolutePaths.push(resolvedResizeObserverExtensionPath);
+					} else {
+						this.logger.debug(`Unresolved path:`, resizeObserverExtensionPathInput);
+					}
+				}
 			}
 
 			// If the Polyfill is "intl.core" and a localeDir is associated with it, also resolve the requested locales (if any)