feat(zone.js): Monkey patch MessagePort.prototype onproperties (#34610)

JiaLiPassion · AndrewKushnir · commit 0f8e710c7cab · 2020-03-16T08:59:38.000-07:00
Monkey patch `MessagePort.prototype.onmessage` and `MessagePort.prototype.onmessageerror` to make these properties's value(callback function) run in the zone when these value are set. PR Close #34610
diff --git a/packages/zone.js/MODULE.md b/packages/zone.js/MODULE.md
@@ -43,6 +43,7 @@ Below is the full list of currently supported modules.
 |PromiseRejectionEvent|PromiseRejectEvent will fire when ZoneAwarePromise has unhandled error|__Zone_disable_PromiseRejectionEvent = true|
 |mediaQuery|mediaQuery addListener API will be patched as Zone aware EventTask. (By default, mediaQuery patch will not be loaded by zone.js) |__Zone_disable_mediaQuery = true|
 |notification|notification onProperties API will be patched as Zone aware EventTask. (By default, notification patch will not be loaded by zone.js) |__Zone_disable_notification = true|
+|MessagePort|MessagePort onProperties APIs will be patched as Zone aware EventTask. (By default, MessagePort patch will not be loaded by zone.js) |__Zone_disable_MessagePort = true|
 
 - NodeJS
 
diff --git a/packages/zone.js/bundles.bzl b/packages/zone.js/bundles.bzl
@@ -39,6 +39,7 @@ ES5_BUNDLES = {
     "zone-patch-rxjs": _DIR + "rxjs/rxjs",
     "webapis-shadydom": _DIR + "browser/shadydom",
     "zone-patch-socket-io": _DIR + "extra/socket-io",
+    "zone-patch-message-port": _DIR + "browser/message-port",
     "zone-patch-user-media": _DIR + "browser/webapis-user-media",
     "zone-testing": _DIR + "testing/zone-testing",
     "zone-testing-bundle": _DIR + "browser/rollup-legacy-test-main",
diff --git a/packages/zone.js/lib/browser/message-port.ts b/packages/zone.js/lib/browser/message-port.ts
@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+
+/**
+ * Monkey patch `MessagePort.prototype.onmessage` and `MessagePort.prototype.onmessageerror`
+ * properties to make the callback in the zone when the value are set.
+ */
+Zone.__load_patch('MessagePort', (global: any, Zone: ZoneType, api: _ZonePrivate) => {
+  const MessagePort = global['MessagePort'];
+  if (typeof MessagePort !== 'undefined' && MessagePort.prototype) {
+    api.patchOnProperties(MessagePort.prototype, ['message', 'messageerror']);
+  }
+});
diff --git a/packages/zone.js/test/browser/messageport.spec.ts b/packages/zone.js/test/browser/messageport.spec.ts
@@ -0,0 +1,49 @@
+/**
+ * @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
+ */
+
+/**
+ * Test MessagePort monkey patch.
+ */
+describe('MessagePort onproperties', () => {
+  let iframe: any;
+  beforeEach(() => {
+    iframe = document.createElement('iframe');
+    const html = `<body>
+      <script>
+      window.addEventListener('message', onMessage);
+      function onMessage(e) {
+        // Use the transfered port to post a message back to the main frame
+  	    e.ports[0].postMessage('Message back from the IFrame');
+      }
+      </script>
+    </body>`;
+    iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
+  });
+  afterEach(() => {
+    if (iframe) {
+      document.body.removeChild(iframe);
+    }
+  });
+
+  it('onmessge should in the zone', (done) => {
+    const channel = new MessageChannel();
+    const zone = Zone.current.fork({name: 'zone'});
+    iframe.onload = function() {
+      zone.run(() => {
+        channel.port1.onmessage = function() {
+          expect(Zone.current.name).toBe(zone.name);
+          done();
+        };
+        Zone.current.fork({name: 'zone1'}).run(() => {
+          iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+        });
+      });
+    };
+    document.body.appendChild(iframe);
+  });
+});
diff --git a/packages/zone.js/test/browser_entry_point.ts b/packages/zone.js/test/browser_entry_point.ts
@@ -27,4 +27,5 @@ import './browser/Notification.spec';
 import './browser/Worker.spec';
 import './mocha-patch.spec';
 import './jasmine-patch.spec';
+import './browser/messageport.spec';
 import './extra/cordova.spec';
diff --git a/packages/zone.js/test/karma_test.bzl b/packages/zone.js/test/karma_test.bzl
@@ -56,6 +56,7 @@ def karma_test(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps,
             "//packages/zone.js/dist:zone-patch-canvas.js",
             "//packages/zone.js/dist:zone-patch-fetch.js",
             "//packages/zone.js/dist:zone-patch-resize-observer.js",
+            "//packages/zone.js/dist:zone-patch-message-port.js",
             "//packages/zone.js/dist:zone-patch-user-media.js",
             ":" + name + "_rollup.umd",
         ]
diff --git a/packages/zone.js/test/npm_package/npm_package.spec.ts b/packages/zone.js/test/npm_package/npm_package.spec.ts
@@ -130,6 +130,8 @@ describe('Zone.js npm_package', () => {
           'zone-patch-fetch.min.js',
           'zone-patch-jsonp.js',
           'zone-patch-jsonp.min.js',
+          'zone-patch-message-port.js',
+          'zone-patch-message-port.min.js',
           'zone-patch-promise-test.js',
           'zone-patch-promise-test.min.js',
           'zone-patch-resize-observer.js',

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@ def karma_test(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps,`
`56`	`56`	`"//packages/zone.js/dist:zone-patch-canvas.js",`
`57`	`57`	`"//packages/zone.js/dist:zone-patch-fetch.js",`
`58`	`58`	`"//packages/zone.js/dist:zone-patch-resize-observer.js",`
	`59`	`+ "//packages/zone.js/dist:zone-patch-message-port.js",`
`59`	`60`	`"//packages/zone.js/dist:zone-patch-user-media.js",`
`60`	`61`	`":" + name + "_rollup.umd",`
`61`	`62`	`]`