feat(core): Add an option '__Zone_symbol_prefix' to set symbol prefix used in Zone.__symbol__(). (#1219)

* feat(core): Add an option '__Zone_symbol_prefix' to set symbol prefix used in Zone.__symbol__().

Add a global environment option `__Zone_symbol_prefix` to allow configuring the symbol prefix Zone.js uses to store its state data on objects.

This is needed in situations where multiple instances of Zone.js may 'touch' the same object or DOM node, accessing and clobbering the other instance's data stored there, and causing unpredictable behavior. Ultimately, it would be nice if Zone.js used proper ES6 symbols or some unique idetifier as a prefix, but many products rely on being able to access the data stored by it.

This change adds the env option and cleans up all hard-coded references to '__zone_symbol_XXX' to go through `Zone.__symbol__()`. In order to test the changes and protect against regressions, the tests are run with the symbol prefix changed to `__zone_symbol_test__`.

While the primary purpose of this change is to be able to isolate data stored on the objects & DOM nodes, some global environment options are also specified with the `__zone_symbol__` prefix and not the usual `__Zone_` one. The current API for providing env options isn't very consistent. For example, disabling 'on<X>' property patching is done via `__Zone_ignore_on_properties`, w/o using the symbol prefix, while disabling event patching is done via `__zone_symbol__UNPATCHED_EVENTS`, using the symbol prefix. This change only affects the options that are prefixed with `__zone_symbol__`.

* Fix failing karma test.

* Remove trailing whitespace.

* Bump up the file size limiit.

Author: mleibman

file-size-limit.json

@@ -8,7 +8,7 @@
     {
       "path": "dist/zone.min.js",
       "checkTarget": true,
-      "limit": 44500
+      "limit": 45000
     }
   ]
 }

gulpfile.js

@@ -466,6 +466,8 @@ gulp.task('build', [
 ]);
 
 function nodeTest(specFiles, cb) {
+  require('./build/test/node-env-setup');
+
   // load zone-node here to let jasmine be able to use jasmine.clock().install()
   // without throw error
   require('./build/lib/node/rollup-main');

karma-build.conf.js

@@ -9,6 +9,7 @@
 module.exports = function(config) {
   require('./karma-base.conf.js')(config);
   config.files.push('node_modules/core-js-bundle/index.js');
+  config.files.push('build/test/browser-env-setup.js');
   config.files.push('build/test/wtf_mock.js');
   config.files.push('build/test/test_fake_polyfill.js');
   config.files.push('build/lib/zone.js');

karma-dist.conf.js

@@ -9,6 +9,7 @@
 module.exports = function(config) {
   require('./karma-base.conf.js')(config);
   config.files.push('node_modules/core-js-bundle/index.js');
+  config.files.push('build/test/browser-env-setup.js');
   config.files.push('build/test/wtf_mock.js');
   config.files.push('build/test/test_fake_polyfill.js');
   config.files.push('build/test/custom_error.js');

karma-evergreen-dist.conf.js

@@ -16,6 +16,7 @@ module.exports = function(config) {
     }
   }
 
+  config.files.push('build/test/browser-env-setup.js');
   config.files.push('build/test/wtf_mock.js');
   config.files.push('build/test/test_fake_polyfill.js');
   config.files.push('build/test/custom_error.js');

lib/browser/browser-legacy.ts

@@ -15,7 +15,7 @@ import {propertyDescriptorLegacyPatch} from './property-descriptor-legacy';
 import {registerElementPatch} from './register-element';
 
 (function(_global: any) {
-_global['__zone_symbol__legacyPatch'] = function() {
+_global[Zone.__symbol__('legacyPatch')] = function() {
   const Zone = _global['Zone'];
   Zone.__load_patch('registerElement', (global: any, Zone: ZoneType, api: _ZonePrivate) => {
     registerElementPatch(global, api);

lib/browser/browser.ts

@@ -142,13 +142,13 @@ Zone.__load_patch('XHR', (global: any, Zone: ZoneType) => {
             // check whether the xhr has registered onload listener
             // if that is the case, the task should invoke after all
             // onload listeners finish.
-            const loadTasks = target['__zone_symbol__loadfalse'];
+            const loadTasks = target[Zone.__symbol__('loadfalse')];
             if (loadTasks && loadTasks.length > 0) {
               const oriInvoke = task.invoke;
               task.invoke = function() {
                 // need to load the tasks again, because in other
                 // load listener, they may remove themselves
-                const loadTasks = target['__zone_symbol__loadfalse'];
+                const loadTasks = target[Zone.__symbol__('loadfalse')];
                 for (let i = 0; i < loadTasks.length; i++) {
                   if (loadTasks[i] === task) {
                     loadTasks.splice(i, 1);

lib/common/events.ts

@@ -43,8 +43,8 @@ const OPTIMIZED_ZONE_EVENT_TASK_DATA: EventTaskData = {
 export const zoneSymbolEventNames: any = {};
 export const globalSources: any = {};
 
-const EVENT_NAME_SYMBOL_REGX = /^__zone_symbol__(\w+)(true|false)$/;
-const IMMEDIATE_PROPAGATION_SYMBOL = ('__zone_symbol__propagationStopped');
+const EVENT_NAME_SYMBOL_REGX = new RegExp('^' + ZONE_SYMBOL_PREFIX + '(\\w+)(true|false)$');
+const IMMEDIATE_PROPAGATION_SYMBOL = zoneSymbol('propagationStopped');
 
 export interface PatchEventTargetOptions {
   // validateHandler
@@ -327,7 +327,7 @@ export function patchEventTarget(
     const compare =
         (patchOptions && patchOptions.diff) ? patchOptions.diff : compareTaskCallbackVsDelegate;
 
-    const blackListedEvents: string[] = (Zone as any)[Zone.__symbol__('BLACK_LISTED_EVENTS')];
+    const blackListedEvents: string[] = (Zone as any)[zoneSymbol('BLACK_LISTED_EVENTS')];
 
     const makeAddListener = function(
         nativeListener: any, addSource: string, customScheduleFn: any, customCancelFn: any,

lib/common/utils.ts

@@ -34,8 +34,8 @@ export const ZONE_SYMBOL_REMOVE_EVENT_LISTENER = Zone.__symbol__(REMOVE_EVENT_LI
 export const TRUE_STR = 'true';
 /** false string const */
 export const FALSE_STR = 'false';
-/** __zone_symbol__ string const */
-export const ZONE_SYMBOL_PREFIX = '__zone_symbol__';
+/** Zone symbol prefix string const. */
+export const ZONE_SYMBOL_PREFIX = Zone.__symbol__('');
 
 export function wrapWithCurrentZone<T extends Function>(callback: T, source: string): T {
   return Zone.current.wrap(callback, source);

lib/jasmine/jasmine.ts

@@ -217,8 +217,8 @@
         ambientZone.scheduleMicroTask('jasmine.onComplete', fn);
       })(attrs.onComplete);
 
-      const nativeSetTimeout = _global['__zone_symbol__setTimeout'];
-      const nativeClearTimeout = _global['__zone_symbol__clearTimeout'];
+      const nativeSetTimeout = _global[Zone.__symbol__('setTimeout')];
+      const nativeClearTimeout = _global[Zone.__symbol__('clearTimeout')];
       if (nativeSetTimeout) {
         // should run setTimeout inside jasmine outside of zone
         attrs.timeout = {

lib/zone.ts

@@ -154,6 +154,7 @@ interface Zone {
    * @returns {any} The value for the key, or `undefined` if not found.
    */
   get(key: string): any;
+
   /**
    * Returns a Zone which defines a `key`.
    *
@@ -163,13 +164,15 @@ interface Zone {
    * @returns {Zone} The Zone which defines the `key`, `null` if not found.
    */
   getZoneWith(key: string): Zone|null;
+
   /**
    * Used to create a child zone.
    *
    * @param zoneSpec A set of rules which the child zone should follow.
    * @returns {Zone} A new child zone.
    */
   fork(zoneSpec: ZoneSpec): Zone;
+
   /**
    * Wraps a callback function in a new function which will properly restore the current zone upon
    * invocation.
@@ -184,6 +187,7 @@ interface Zone {
    * @returns {function(): *} A function which will invoke the `callback` through [Zone.runGuarded].
    */
   wrap<F extends Function>(callback: F, source: string): F;
+
   /**
    * Invokes a function in a given zone.
    *
@@ -196,6 +200,7 @@ interface Zone {
    * @returns {any} Value from the `callback` function.
    */
   run<T>(callback: Function, applyThis?: any, applyArgs?: any[], source?: string): T;
+
   /**
    * Invokes a function in a given zone and catches any exceptions.
    *
@@ -211,6 +216,7 @@ interface Zone {
    * @returns {any} Value from the `callback` function.
    */
   runGuarded<T>(callback: Function, applyThis?: any, applyArgs?: any[], source?: string): T;
+
   /**
    * Execute the Task by restoring the [Zone.currentTask] in the Task's zone.
    *
@@ -287,6 +293,7 @@ interface ZoneType {
    * duration of the run method callback.
    */
   current: Zone;
+
   /**
    * @returns {Task} The task associated with the current execution.
    */
@@ -666,7 +673,17 @@ const Zone: ZoneType = (function(global: any) {
     performance && performance['measure'] && performance['measure'](name, label);
   }
   mark('Zone');
-  const checkDuplicate = global[('__zone_symbol__forceDuplicateZoneCheck')] === true;
+
+  // Initialize before it's accessed below.
+  // __Zone_symbol_prefix global can be used to override the default zone
+  // symbol prefix with a custom one if needed.
+  const symbolPrefix = global['__Zone_symbol_prefix'] || '__zone_symbol__';
+
+  function __symbol__(name: string) {
+    return symbolPrefix + name;
+  }
+
+  const checkDuplicate = global[__symbol__('forceDuplicateZoneCheck')] === true;
   if (global['Zone']) {
     // if global['Zone'] already exists (maybe zone.js was already loaded or
     // some other lib also registered a global object named Zone), we may need
@@ -1284,6 +1301,7 @@ const Zone: ZoneType = (function(global: any) {
     }
   }
 
+
   //////////////////////////////////////////////////////
   //////////////////////////////////////////////////////
   ///  MICROTASK QUEUE
@@ -1397,10 +1415,6 @@ const Zone: ZoneType = (function(global: any) {
 
   function noop() {}
 
-  function __symbol__(name: string) {
-    return '__zone_symbol__' + name;
-  }
-
   performanceMeasure('Zone', 'Zone');
   return global['Zone'] = Zone;
 })(typeof window !== 'undefined' && window || typeof self !== 'undefined' && self || global);

promise-adapter.js

@@ -1,5 +1,5 @@
 require('./dist/zone-node.js');
-Zone[('__zone_symbol__ignoreConsoleErrorUncaughtError')] = true;
+Zone[Zone.__symbol__('ignoreConsoleErrorUncaughtError')] = true;
 module.exports.deferred = function() {
   const p = {};
   p.promise = new Promise((resolve, reject) => {

promise.finally.spec.js

@@ -2,7 +2,7 @@
 
 var assert = require('assert');
 var adapter = require('./promise-adapter');
-var P = global['__zone_symbol__Promise'];
+var P = global[Zone.__symbol__('Promise')];
 
 var someRejectionReason = {message: 'some rejection reason'};
 var anotherReason = {message: 'another rejection reason'};

test/browser-env-setup.ts

@@ -0,0 +1,2 @@
+// Change default symbol prefix for testing to ensure no hard-coded references.
+(window as any)['__Zone_symbol_prefix'] = '_test__';

test/browser-zone-setup.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 if (typeof window !== 'undefined') {
+  const zoneSymbol = (window as any).Zone.__symbol__;
   (window as any)['__Zone_enable_cross_context_check'] = true;
-  (window as any)['__zone_symbol__fakeAsyncAutoFakeAsyncWhenClockPatched'] = true;
+  (window as any)[zoneSymbol('fakeAsyncAutoFakeAsyncWhenClockPatched')] = true;
 }
 import '../lib/common/to-string';
 import '../lib/browser/api-util';

test/browser/XMLHttpRequest.spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ifEnvSupports, ifEnvSupportsWithDone, supportPatchXHROnProperty} from '../test-util';
+import {ifEnvSupports, ifEnvSupportsWithDone, supportPatchXHROnProperty, zoneSymbol} from '../test-util';
 
 describe('XMLHttpRequest', function() {
   let testZone: Zone;
@@ -45,7 +45,7 @@ describe('XMLHttpRequest', function() {
               .toMatch(/\> Zone\:invokeTask.*addEventListener\:load/);
         }
         // if browser can patch onload
-        if ((req as any)['__zone_symbol__loadfalse']) {
+        if ((req as any)[zoneSymbol('loadfalse')]) {
           expect(logs).toEqual(['onload']);
         }
         done();
@@ -278,8 +278,8 @@ describe('XMLHttpRequest', function() {
     }
     req.addEventListener('readystatechange', function(ev) {
       if (req.readyState === 4) {
-        const xhrScheduled = (req as any)['__zone_symbol__xhrScheduled'];
-        const task = (req as any)['__zone_symbol__xhrTask'];
+        const xhrScheduled = (req as any)[zoneSymbol('xhrScheduled')];
+        const task = (req as any)[zoneSymbol('xhrTask')];
         if (xhrScheduled === false) {
           expect(task.state).toEqual('scheduling');
           setTimeout(() => {
@@ -323,7 +323,7 @@ describe('XMLHttpRequest', function() {
       let isError = false;
       let timerId = null;
       try {
-        timerId = (window as any)['__zone_symbol__setTimeout'](() => {
+        timerId = (window as any)[zoneSymbol('setTimeout')](() => {
           expect(logs).toEqual([
             `{"microTask":false,"macroTask":true,"eventTask":false,"change":"macroTask"}`,
             `{"microTask":false,"macroTask":false,"eventTask":false,"change":"macroTask"}`
@@ -333,7 +333,7 @@ describe('XMLHttpRequest', function() {
         req.send();
       } catch (error) {
         isError = true;
-        (window as any)['__zone_symbol__clearTimeout'](timerId);
+        (window as any)[zoneSymbol('clearTimeout')](timerId);
         done();
       }
     });

test/browser/browser.spec.ts

@@ -8,7 +8,7 @@
 
 import {patchFilteredProperties} from '../../lib/browser/property-descriptor';
 import {patchEventTarget} from '../../lib/common/events';
-import {isBrowser, isIEOrEdge, isMix, zoneSymbol} from '../../lib/common/utils';
+import {isIEOrEdge, zoneSymbol} from '../../lib/common/utils';
 import {getEdgeVersion, getIEVersion, ifEnvSupports, ifEnvSupportsWithDone, isEdge} from '../test-util';
 
 import Spy = jasmine.Spy;
@@ -306,8 +306,8 @@ describe('Zone', function() {
                const logs: string[] = [];
                const EventTarget = (window as any)['EventTarget'];
                let oriAddEventListener = EventTarget && EventTarget.prototype ?
-                   (EventTarget.prototype as any)['__zone_symbol__addEventListener'] :
-                   (HTMLSpanElement.prototype as any)['__zone_symbol__addEventListener'];
+                   (EventTarget.prototype as any)[zoneSymbol('addEventListener')] :
+                   (HTMLSpanElement.prototype as any)[zoneSymbol('addEventListener')];
 
                if (!oriAddEventListener) {
                  // no patched addEventListener found
@@ -334,7 +334,7 @@ describe('Zone', function() {
                  return oriAddEventListener.apply(this, arguments);
                };
 
-               (HTMLSpanElement.prototype as any)['__zone_symbol__addEventListener'] = null;
+               (HTMLSpanElement.prototype as any)[zoneSymbol('addEventListener')] = null;
 
                patchEventTarget(window, [HTMLSpanElement.prototype]);
 
@@ -356,10 +356,10 @@ describe('Zone', function() {
                expect(logs).toEqual(['listener1', 'listener2']);
                document.body.removeChild(span);
                if (EventTarget) {
-                 (EventTarget.prototype as any)['__zone_symbol__addEventListener'] =
+                 (EventTarget.prototype as any)[zoneSymbol('addEventListener')] =
                      oriAddEventListener;
                } else {
-                 (HTMLSpanElement.prototype as any)['__zone_symbol__addEventListener'] =
+                 (HTMLSpanElement.prototype as any)[zoneSymbol('addEventListener')] =
                      oriAddEventListener;
                }
              }));

test/common/Error.spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {isBrowser} from '../../lib/common/utils';
-import {isSafari} from '../test-util';
+import {isSafari, zoneSymbol} from '../test-util';
 
 // simulate @angular/facade/src/error.ts
 class BaseError extends Error {
@@ -439,7 +439,7 @@ describe('ZoneAwareError', () => {
     it('should be able to generate zone free stack even NativeError stack is readonly', function() {
       const _global: any =
           typeof window === 'object' && window || typeof self === 'object' && self || global;
-      const NativeError = _global['__zone_symbol__Error'];
+      const NativeError = _global[zoneSymbol('Error')];
       const desc = Object.getOwnPropertyDescriptor(NativeError.prototype, 'stack');
       if (desc) {
         const originalSet: ((value: any) => void)|undefined = desc.set;

test/node-env-setup.ts

@@ -0,0 +1,2 @@
+// Change default symbol prefix for testing to ensure no hard-coded references.
+(global as any)['__Zone_symbol_prefix'] = '__zone_symbol_test__';

test/node_entry_point.ts

@@ -7,13 +7,15 @@
  */
 
 // Must be loaded before zone loads, so that zone can detect WTF.
-if (typeof global !== 'undefined' &&
-    (global as any)['__zone_symbol__fakeAsyncAutoFakeAsyncWhenClockPatched'] !== false) {
-  (global as any)['__zone_symbol__fakeAsyncAutoFakeAsyncWhenClockPatched'] = true;
-}
 import './wtf_mock';
 import './test_fake_polyfill';
 
+// Zone symbol prefix is set to '__zone_symbol2__' in node-env-setup.ts.
+if (typeof global !== 'undefined' &&
+    (global as any)['__zone_symbol_test__fakeAsyncAutoFakeAsyncWhenClockPatched'] !== false) {
+  (global as any)['__zone_symbol_test__fakeAsyncAutoFakeAsyncWhenClockPatched'] = true;
+}
+
 // Setup tests for Zone without microtask support
 import '../lib/testing/zone-testing';
 import '../lib/zone-spec/task-tracking';

test/test-env-setup-jasmine-no-patch-clock.ts

@@ -5,4 +5,4 @@
  * 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
  */
-(global as any)['__zone_symbol__fakeAsyncAutoFakeAsyncWhenClockPatched'] = false;
+(global as any)[(global as any).Zone.__symbol__('fakeAsyncAutoFakeAsyncWhenClockPatched')] = false;

test/test-util.ts

@@ -21,7 +21,10 @@
  *
  *  ifEnvSupports(supportsOnClick, function() { ... });
  */
-import {isNode} from '../lib/common/utils';
+import {isNode, zoneSymbol} from '../lib/common/utils';
+
+// Re-export for convenience.
+export {zoneSymbol};
 
 declare const global: any;
 export function ifEnvSupports(test: any, block: Function): () => void {

test/test_fake_polyfill.ts

@@ -72,8 +72,12 @@ Object.defineProperties(TestTarget.prototype, {
   }
 });
 
+// Zone symbol prefix may be set in *-env-setup.ts (browser & node),
+// but this file is used in multiple scenarios, and Zone isn't loaded at this point yet.
+const zoneSymbolPrefix = global['__Zone_symbol_prefix'] || '__zone_symbol__';
+
 global['__Zone_ignore_on_properties'] =
     [{target: TestTarget.prototype, ignoreProperties: ['prop1']}];
-global['__zone_symbol__FakeAsyncTestMacroTask'] = [{source: 'TestClass.myTimeout'}];
-global['__zone_symbol__UNPATCHED_EVENTS'] = ['scroll'];
+global[zoneSymbolPrefix + 'FakeAsyncTestMacroTask'] = [{source: 'TestClass.myTimeout'}];
+global[zoneSymbolPrefix + 'UNPATCHED_EVENTS'] = ['scroll'];
 })(typeof window === 'object' && window || typeof self === 'object' && self || global);

test/zone-spec/fake-async-test.spec.ts

@@ -11,7 +11,7 @@ import '../../lib/rxjs/rxjs-fake-async';
 import {Observable} from 'rxjs';
 import {delay} from 'rxjs/operators';
 
-import {isNode, patchMacroTask} from '../../lib/common/utils';
+import {isNode, patchMacroTask, zoneSymbol} from '../../lib/common/utils';
 import {ifEnvSupports} from '../test-util';
 
 function supportNode() {
@@ -23,7 +23,7 @@ function supportNode() {
 function supportClock() {
   const _global: any = typeof window === 'undefined' ? global : window;
   return typeof jasmine.clock === 'function' &&
-      _global['__zone_symbol__fakeAsyncAutoFakeAsyncWhenClockPatched'];
+      _global[zoneSymbol('fakeAsyncAutoFakeAsyncWhenClockPatched')];
 }
 
 (supportClock as any).message = 'support patch clock';