feat(patch): fix angular#1011, patch ResizeObserver

JiaLiPassion · Feb 3, 2018 · ac56a7b · ac56a7b
1 parent fd91152
commit ac56a7b
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 2 deletions.
diff --git a/NON-STANDARD-APIS.md b/NON-STANDARD-APIS.md
@@ -164,11 +164,22 @@ import 'zone.js/dist/zone-patch-rxjs';
 
 ## Usage.
 
-add following line into `polyfill.ts` after load zone-mix.
+add following line into `polyfill.ts` after loading zone-mix.
 
 ```
 import 'zone.js/dist/zone-patch-electron';
 ```
 
-there is a sampel repo [zone-electron](https://github.com/JiaLiPassion/zone-electron) here
+there is a sample repo [zone-electron](https://github.com/JiaLiPassion/zone-electron) here
 
+* ResizeObserver
+
+Currently only `Chrome 64` native support this feature.
+you can add the following line into `polyfill.ts` after loading `zone.js`.
+
+```
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-patch-resize-observer';
+```
+
+there is a sample repo [zone-resize-observer](https://github.com/JiaLiPassion/zone-resize-observer) here
diff --git a/gulpfile.js b/gulpfile.js
@@ -192,6 +192,14 @@ gulp.task('build/zone-patch-user-media.min.js', ['compile-esm'], function(cb) {
   return generateScript('./lib/browser/webapis-user-media.ts', 'zone-patch-user-media.min.js', true, cb);
 });
 
+gulp.task('build/zone-patch-resize-observer.js', ['compile-esm'], function(cb) {
+  return generateScript('./lib/browser/webapis-resize-observer.ts', 'zone-patch-resize-observer.js', false, cb);
+});
+
+gulp.task('build/zone-patch-resize-observer.min.js', ['compile-esm'], function(cb) {
+  return generateScript('./lib/browser/webapis-resize-observer.ts', 'zone-patch-resize-observer.min.js', true, cb);
+});
+
 gulp.task('build/bluebird.js', ['compile-esm'], function(cb) {
     return generateScript('./lib/extra/bluebird.ts', 'zone-bluebird.js', false, cb);
 });
@@ -297,6 +305,8 @@ gulp.task('build', [
   'build/zone-patch-electron.min.js',
   'build/zone-patch-user-media.js',
   'build/zone-patch-user-media.min.js',
+  'build/zone-patch-resize-observer.js',
+  'build/zone-patch-resize-observer.min.js',
   'build/zone-mix.js',
   'build/bluebird.js',
   'build/bluebird.min.js',

diff --git a/lib/browser/webapis-resize-observer.ts b/lib/browser/webapis-resize-observer.ts
@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Zone.__load_patch('ResizeObserver', (global: any, Zone: any, api: _ZonePrivate) => {
+  const ResizeObserver = global['ResizeObserver'];
+  if (!ResizeObserver) {
+    return;
+  }
+
+  const resizeObserverSymbol = api.symbol('ResizeObserver');
+
+  api.patchMethod(global, 'ResizeObserver', (delegate: Function) => (self: any, args: any[]) => {
+    const callback = args.length > 0 ? args[0] : null;
+    if (callback) {
+      args[0] = function(entries: any, observer: any) {
+        const zones: {[zoneName: string]: any} = {};
+        const currZone = Zone.current;
+        for (let entry of entries) {
+          let zone = entry.target[resizeObserverSymbol];
+          if (!zone) {
+            zone = currZone;
+          }
+          let zoneEntriesInfo = zones[zone.name];
+          if (!zoneEntriesInfo) {
+            zones[zone.name] = zoneEntriesInfo = {entries: [], zone: zone};
+          }
+          zoneEntriesInfo.entries.push(entry);
+        }
+
+        Object.keys(zones).forEach(zoneName => {
+          const zoneEntriesInfo = zones[zoneName];
+          if (zoneEntriesInfo.zone !== Zone.current) {
+            zoneEntriesInfo.zone.run(
+                callback, this, [zoneEntriesInfo.entries, observer], 'ResizeObserver');
+          } else {
+            callback.call(this, zoneEntriesInfo.entries, observer);
+          }
+        });
+      };
+    }
+    return args.length > 0 ? new ResizeObserver(args[0]) : new ResizeObserver();
+  });
+
+  api.patchMethod(ResizeObserver.prototype, 'observe', (delegate: Function) => (self: any, args: any[]) => {
+    const target = args.length > 0 ? args[0] : null;
+    if (!target) {
+      return delegate.apply(self, args);
+    }
+    let targets = self[resizeObserverSymbol];
+    if (!targets) {
+      targets = self[resizeObserverSymbol] = [];
+    }
+    targets.push(target);
+    target[resizeObserverSymbol] = Zone.current;
+    return delegate.apply(self, args);
+  });
+
+  api.patchMethod(ResizeObserver.prototype, 'unobserve', (delegate: Function) => (self: any, args: any[]) => {
+    const target = args.length > 0 ? args[0] : null;
+    if (!target) {
+      return delegate.apply(self, args);
+    }
+    let targets = self[resizeObserverSymbol];
+    if (targets) {
+      for (let i = 0; i < targets.length; i ++) {
+        if (targets[i] === target) {
+          targets.splice(i, 1);
+          break;
+        }
+      }
+    }
+    target[resizeObserverSymbol] = undefined;
+    return delegate.apply(self, args);
+  });
+
+  api.patchMethod(ResizeObserver.prototype, 'disconnect', (delegate: Function) => (self: any, args: any[]) => {
+    const targets = self[resizeObserverSymbol];
+    if (targets) {
+      targets.forEach((target: any) => {target[resizeObserverSymbol] = undefined;});
+      self[resizeObserverSymbol] = undefined;
+    }
+    return delegate.apply(self, args);
+  });
+});