refactor(zone.js): remove zone-async-tagging from zone.js (angular#47416

) 1. Remove `zone-async-tagging` implementation from zone.js and move the implementation to `@angular/core`, so `@angular/core` can import this package more easily for better treeshaking. 2. Add `async tagging zone` implemenation into `@angular/core` package. So we don't need to get the `AsyncStackTaggingZoneSpec` from `global` instance, we can import the `class` directly for better treeshaking. 3. Only load this ZoneSpec when `ngDevMode` is `true`. PR Close angular#47416
dario-piotrowicz · Sep 23, 2022 · 8637253 · 8637253
1 parent 291a5b3
commit 8637253
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 93 deletions.
diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json
@@ -33,7 +33,7 @@
   "cli-hello-world-lazy": {
     "uncompressed": {
       "runtime": 2835,
-      "main": 226893,
+      "main": 226324,
       "polyfills": 33842,
       "src_app_lazy_lazy_routes_ts": 487
     }

diff --git a/...e.js/lib/zone-spec/async-stack-tagging.ts → ...ages/core/src/zone/async-stack-tagging.ts b/...e.js/lib/zone-spec/async-stack-tagging.ts → ...ages/core/src/zone/async-stack-tagging.ts
@@ -6,38 +6,39 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-interface Console {
+interface ConsoleWithAsyncTagging {
   createTask(name: string): ConsoleTask;
 }
 
 interface ConsoleTask {
   run<T>(f: () => T): T;
 }
 
-interface Task {
+interface ZoneConsoleTask extends Task {
   consoleTask?: ConsoleTask;
 }
 
-class AsyncStackTaggingZoneSpec implements ZoneSpec {
-  createTask: Console['createTask'];
+export class AsyncStackTaggingZoneSpec implements ZoneSpec {
+  createTask: ConsoleWithAsyncTagging['createTask'];
 
-  constructor(namePrefix: string, consoleAsyncStackTaggingImpl: Console = console) {
+  constructor(
+      namePrefix: string, consoleAsyncStackTaggingImpl: ConsoleWithAsyncTagging = console as any) {
     this.name = 'asyncStackTagging for ' + namePrefix;
-    this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => {});
+    this.createTask = consoleAsyncStackTaggingImpl?.createTask ?? (() => null);
   }
 
   // ZoneSpec implementation below.
-
   name: string;
 
-  onScheduleTask(delegate: ZoneDelegate, _current: Zone, target: Zone, task: Task): Task {
+  onScheduleTask(delegate: ZoneDelegate, _current: Zone, target: Zone, task: ZoneConsoleTask):
+      Task {
     task.consoleTask = this.createTask(`Zone - ${task.source || task.type}`);
     return delegate.scheduleTask(target, task);
   }
 
   onInvokeTask(
-      delegate: ZoneDelegate, _currentZone: Zone, targetZone: Zone, task: Task, applyThis: any,
-      applyArgs?: any[]) {
+      delegate: ZoneDelegate, _currentZone: Zone, targetZone: Zone, task: ZoneConsoleTask,
+      applyThis: any, applyArgs?: any[]) {
     let ret;
     if (task.consoleTask) {
       ret = task.consoleTask.run(() => delegate.invokeTask(targetZone, task, applyThis, applyArgs));
@@ -47,7 +48,3 @@ class AsyncStackTaggingZoneSpec implements ZoneSpec {
     return ret;
   }
 }
-
-// Export the class so that new instances can be created with proper
-// constructor params.
-(Zone as any)['AsyncStackTaggingZoneSpec'] = AsyncStackTaggingZoneSpec;
diff --git a/packages/core/src/zone/ng_zone.ts b/packages/core/src/zone/ng_zone.ts
@@ -12,6 +12,7 @@ import {global} from '../util/global';
 import {noop} from '../util/noop';
 import {getNativeRequestAnimationFrame} from '../util/raf';
 
+import {AsyncStackTaggingZoneSpec} from './async-stack-tagging';
 
 /**
  * An injectable service for executing work inside or outside of the Angular zone.
@@ -138,8 +139,12 @@ export class NgZone {
 
     self._outer = self._inner = Zone.current;
 
-    if ((Zone as any)['AsyncStackTaggingZoneSpec']) {
-      const AsyncStackTaggingZoneSpec = (Zone as any)['AsyncStackTaggingZoneSpec'];
+    // AsyncStackTaggingZoneSpec provides `linked stack traces` to show
+    // where the async operation is scheduled. For more details, refer
+    // to this article, https://developer.chrome.com/blog/devtools-better-angular-debugging/
+    // And we only import this AsyncStackTaggingZoneSpec in development mode,
+    // in the production mode, the AsyncStackTaggingZoneSpec will be tree shaken away.
+    if (ngDevMode) {
       self._inner = self._inner.fork(new AsyncStackTaggingZoneSpec('Angular'));
     }
 

diff --git a/...t/zone-spec/async-tagging-console.spec.ts → ...e/test/zone/async-tagging-console.spec.ts b/...t/zone-spec/async-tagging-console.spec.ts → ...e/test/zone/async-tagging-console.spec.ts
@@ -5,12 +5,9 @@
  * 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
  */
-
-import {ifEnvSupports, ifEnvSupportsWithDone} from '../test-util';
+import {AsyncStackTaggingZoneSpec} from '../../src/zone/async-stack-tagging';
 
 describe('AsyncTaggingConsoleTest', () => {
-  const AsyncStackTaggingZoneSpec = (Zone as any)['AsyncStackTaggingZoneSpec'];
-
   describe('should call console async stack tagging API', () => {
     const startAsyncTaskSpy = jasmine.createSpy('startAsyncTask');
     const finishAsyncTaskSpy = jasmine.createSpy('finishAsyncTask');
@@ -91,45 +88,51 @@ describe('AsyncTaggingConsoleTest', () => {
       });
     });
 
-    it('XMLHttpRequest', ifEnvSupportsWithDone('XMLHttpRequest', (done: DoneFn) => {
-         asyncStackTaggingZone.run(() => {
-           const req = new XMLHttpRequest();
-           req.onload = () => {
-             Zone.root.run(() => {
-               setTimeout(() => {
-                 expect(scheduleAsyncTaskSpy.calls.all()[0].args).toEqual([
-                   'Zone - XMLHttpRequest.addEventListener:load',
-                 ]);
-                 expect(scheduleAsyncTaskSpy.calls.all()[1].args).toEqual([
-                   'Zone - XMLHttpRequest.send',
-                 ]);
-                 expect(startAsyncTaskSpy.calls.count()).toBe(2);
-                 expect(finishAsyncTaskSpy.calls.count()).toBe(2);
-                 done();
-               });
-             });
-           };
-           req.open('get', '/', true);
-           req.send();
-         });
-       }));
+    if (global.XMLHttpRequest) {
+      it('XMLHttpRequest', (done: DoneFn) => {
+        asyncStackTaggingZone.run(() => {
+          const req = new XMLHttpRequest();
+          req.onload = () => {
+            Zone.root.run(() => {
+              setTimeout(() => {
+                expect(scheduleAsyncTaskSpy.calls.all()[0].args).toEqual([
+                  'Zone - XMLHttpRequest.addEventListener:load',
+                ]);
+                expect(scheduleAsyncTaskSpy.calls.all()[1].args).toEqual([
+                  'Zone - XMLHttpRequest.send',
+                ]);
+                expect(startAsyncTaskSpy.calls.count()).toBe(2);
+                expect(finishAsyncTaskSpy.calls.count()).toBe(2);
+                done();
+              });
+            });
+          };
+          req.open('get', '/', true);
+          req.send();
+        });
+      });
+    }
 
-    it('button click', ifEnvSupports('document', () => {
-         asyncStackTaggingZone.run(() => {
-           const button = document.createElement('button');
-           const clickEvent = document.createEvent('Event');
-           clickEvent.initEvent('click', true, true);
-           document.body.appendChild(button);
-           const handler = () => {};
-           button.addEventListener('click', handler);
-           button.dispatchEvent(clickEvent);
-           button.dispatchEvent(clickEvent);
-           button.removeEventListener('click', handler);
-           expect(scheduleAsyncTaskSpy)
-               .toHaveBeenCalledWith('Zone - HTMLButtonElement.addEventListener:click');
-           expect(startAsyncTaskSpy.calls.count()).toBe(2);
-           expect(finishAsyncTaskSpy.calls.count()).toBe(2);
-         });
-       }));
+    // Only run test when addEventListener is patched by zone.js
+    if (document && document.addEventListener &&
+        (document.addEventListener as any)[Zone.__symbol__('OriginalDelegate')]) {
+      it('button click', () => {
+        asyncStackTaggingZone.run(() => {
+          const button = document.createElement('button');
+          const clickEvent = document.createEvent('Event');
+          clickEvent.initEvent('click', true, true);
+          document.body.appendChild(button);
+          const handler = () => {};
+          button.addEventListener('click', handler);
+          button.dispatchEvent(clickEvent);
+          button.dispatchEvent(clickEvent);
+          button.removeEventListener('click', handler);
+          expect(scheduleAsyncTaskSpy)
+              .toHaveBeenCalledWith('Zone - HTMLButtonElement.addEventListener:click');
+          expect(startAsyncTaskSpy.calls.count()).toBe(2);
+          expect(finishAsyncTaskSpy.calls.count()).toBe(2);
+        });
+      });
+    }
   });
 });
diff --git a/packages/zone.js/bundles.bzl b/packages/zone.js/bundles.bzl
@@ -19,9 +19,6 @@ BUNDLES_ENTRY_POINTS = {
     "async-test": {
         "entrypoint": _DIR + "testing/async-testing",
     },
-    "async-stack-tagging": {
-        "entrypoint": _DIR + "zone-spec/async-stack-tagging",
-    },
     "fake-async-test": {
         "entrypoint": _DIR + "testing/fake-async",
     },

diff --git a/packages/zone.js/dist/BUILD.bazel b/packages/zone.js/dist/BUILD.bazel
@@ -45,8 +45,6 @@ js_library(
 filegroup(
     name = "dist_bundle_group",
     srcs = [
-        ":async-stack-tagging.js",
-        ":async-stack-tagging.min.js",
         ":async-test.js",
         ":async-test.min.js",
         ":fake-async-test.js",

diff --git a/packages/zone.js/dist/tools.bzl b/packages/zone.js/dist/tools.bzl
@@ -4,7 +4,6 @@ ES5_BUNDLES = [
     "zone-node",
     "zone-testing-node-bundle",
     "async-test",
-    "async-stack-tagging",
     "fake-async-test",
     "long-stack-trace-zone",
     "proxy",

diff --git a/packages/zone.js/plugins/BUILD.bazel b/packages/zone.js/plugins/BUILD.bazel
@@ -3,8 +3,6 @@ package(default_visibility = ["//visibility:public"])
 filegroup(
     name = "plugin_bundle_group",
     srcs = [
-        "//packages/zone.js/plugins:async-stack-tagging.min/package.json",
-        "//packages/zone.js/plugins:async-stack-tagging/package.json",
         "//packages/zone.js/plugins:async-test.min/package.json",
         "//packages/zone.js/plugins:async-test/package.json",
         "//packages/zone.js/plugins:fake-async-test.min/package.json",

diff --git a/packages/zone.js/plugins/async-stack-tagging.min/package.json b/packages/zone.js/plugins/async-stack-tagging.min/package.json
diff --git a/packages/zone.js/plugins/async-stack-tagging/package.json b/packages/zone.js/plugins/async-stack-tagging/package.json
diff --git a/packages/zone.js/test/BUILD.bazel b/packages/zone.js/test/BUILD.bazel
@@ -34,7 +34,6 @@ ts_library(
         exclude = [
             "common/Error.spec.ts",
             "common/promise-disable-wrap-uncaught-promise-rejection.spec.ts",
-            "zone-spec/async-tagging-console.spec.ts",
         ],
     ),
     deps = [
@@ -265,7 +264,6 @@ test_srcs = glob(
     "jasmine-patch.spec.ts",
     "common_tests.ts",
     "browser_entry_point.ts",
-    "zone-spec/async-tagging-console.spec.ts",
 ]
 
 test_deps = [

diff --git a/packages/zone.js/test/browser-zone-setup.ts b/packages/zone.js/test/browser-zone-setup.ts
@@ -21,7 +21,6 @@ import '../lib/browser/webapis-media-query';
 import '../lib/testing/zone-testing';
 import '../lib/zone-spec/task-tracking';
 import '../lib/zone-spec/wtf';
-import '../lib/zone-spec/async-stack-tagging';
 import '../lib/extra/cordova';
 import '../lib/testing/promise-testing';
 import '../lib/testing/async-testing';

diff --git a/packages/zone.js/test/browser_entry_point.ts b/packages/zone.js/test/browser_entry_point.ts
@@ -29,4 +29,3 @@ import './jasmine-patch.spec';
 import './browser/messageport.spec';
 import './extra/cordova.spec';
 import './browser/queue-microtask.spec';
-import './zone-spec/async-tagging-console.spec';
diff --git a/packages/zone.js/test/karma_test.bzl b/packages/zone.js/test/karma_test.bzl
@@ -58,7 +58,6 @@ def karma_test(name, env_srcs, env_deps, env_entry_point, test_srcs, test_deps,
             "//packages/zone.js/bundles:zone-patch-resize-observer.umd.js",
             "//packages/zone.js/bundles:zone-patch-message-port.umd.js",
             "//packages/zone.js/bundles:zone-patch-user-media.umd.js",
-            "//packages/zone.js/bundles:async-stack-tagging.umd.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
@@ -115,8 +115,6 @@ describe('Zone.js npm_package', () => {
     describe('plugins folder check', () => {
       it('should contain all plugin folders in ./plugins', () => {
         const expected = [
-          'async-stack-tagging',
-          'async-stack-tagging.min',
           'async-test',
           'async-test.min',
           'fake-async-test',
@@ -197,8 +195,6 @@ describe('Zone.js npm_package', () => {
     describe('bundles file list', () => {
       it('should contain all files', () => {
         const expected = [
-          'async-stack-tagging.js',
-          'async-stack-tagging.min.js',
           'async-test.js',
           'async-test.min.js',
           'fake-async-test.js',
@@ -293,8 +289,6 @@ describe('Zone.js npm_package', () => {
       it('should contain all original folders in /dist', () => {
         const list = shx.ls('./dist').stdout.split('\n').sort().slice(1);
         const expected = [
-          'async-stack-tagging.js',
-          'async-stack-tagging.min.js',
           'async-test.js',
           'async-test.min.js',
           'fake-async-test.js',