From 4acb676f2e9ba3a9ea33dd020e23534d702f988b Mon Sep 17 00:00:00 2001 From: JiaLiPassion Date: Tue, 11 Feb 2020 04:23:58 +0900 Subject: [PATCH] feat: add interface definitions which zone extends EventTarget (#35304) Close #35173 PR Close #35304 --- packages/zone.js/dist/BUILD.bazel | 17 +++++- packages/zone.js/lib/zone.api.extensions.ts | 38 ++++++++++++ packages/zone.js/test/browser/browser.spec.ts | 58 +++++++++---------- .../test/npm_package/npm_package.spec.ts | 4 ++ 4 files changed, 87 insertions(+), 30 deletions(-) create mode 100644 packages/zone.js/lib/zone.api.extensions.ts diff --git a/packages/zone.js/dist/BUILD.bazel b/packages/zone.js/dist/BUILD.bazel index 34b399eec8..1b171d96fb 100644 --- a/packages/zone.js/dist/BUILD.bazel +++ b/packages/zone.js/dist/BUILD.bazel @@ -12,12 +12,27 @@ genrule( ) genrule( - name = "zone_d_ts", + name = "zone_js_d_ts", srcs = ["//packages/zone.js/lib:zone_d_ts"], outs = ["zone.js.d.ts"], cmd = "cp $< $@", ) +genrule( + name = "zone_extensions_d_ts", + srcs = ["//packages/zone.js/lib:zone.api.extensions.ts"], + outs = ["zone.api.extensions.ts"], + cmd = "cp $< $@", +) + +filegroup( + name = "zone_d_ts", + srcs = [ + ":zone_extensions_d_ts", + ":zone_js_d_ts", + ], +) + zone_rollup_bundle( bundles = ES5_BUNDLES.items(), config_file = "//packages/zone.js:rollup-es5.config.js", diff --git a/packages/zone.js/lib/zone.api.extensions.ts b/packages/zone.js/lib/zone.api.extensions.ts new file mode 100644 index 0000000000..488cdf5faf --- /dev/null +++ b/packages/zone.js/lib/zone.api.extensions.ts @@ -0,0 +1,38 @@ +/** + * @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 + */ + +/** + * Additional `EventTarget` methods added by `Zone.js`. + * + * 1. removeAllListeners, remove all event listeners of the given event name. + * 2. eventListeners, get all event listeners of the given event name. + */ +interface EventTarget { + /** + * + * Remove all event listeners by name for this event target. + * + * If the `eventName` is provided, will remove event listeners of that name. + * If the `eventName` is not provided, will remove all event listeners associated with + * `EventTarget`. + * + * @param eventName the name of the event, such as `click`. This parameter is optional. + */ + removeAllListeners(eventName?: string): void; + /** + * + * Retrieve all event listeners by name. + * + * If the `eventName` is provided, will return an array of event handlers or event listener + * objects of the given event. + * If the `eventName` is not provided, will return all listeners. + * + * @param eventName the name of the event, such as click. This parameter is optional. + */ + eventListeners(eventName?: string): EventListenerOrEventListenerObject[]; +} diff --git a/packages/zone.js/test/browser/browser.spec.ts b/packages/zone.js/test/browser/browser.spec.ts index 6c2b77a6c9..7641071ecc 100644 --- a/packages/zone.js/test/browser/browser.spec.ts +++ b/packages/zone.js/test/browser/browser.spec.ts @@ -1120,11 +1120,11 @@ describe('Zone', function() { }); zone.run(() => { button.addEventListener('click', function() { logs.push('click'); }); }); - let listeners = (button as any).eventListeners('click'); + let listeners = button.eventListeners('click'); expect(listeners.length).toBe(1); eventTask !.zone.cancelTask(eventTask !); - listeners = (button as any).eventListeners('click'); + listeners = button.eventListeners('click'); button.dispatchEvent(clickEvent); expect(logs.length).toBe(0); expect(listeners.length).toBe(0); @@ -1146,11 +1146,11 @@ describe('Zone', function() { zone.run(() => { button.addEventListener('click', function() { logs.push('click'); }, true); }); - let listeners = (button as any).eventListeners('click'); + let listeners = button.eventListeners('click'); expect(listeners.length).toBe(1); eventTask !.zone.cancelTask(eventTask !); - listeners = (button as any).eventListeners('click'); + listeners = button.eventListeners('click'); button.dispatchEvent(clickEvent); expect(logs.length).toBe(0); expect(listeners.length).toBe(0); @@ -1172,7 +1172,7 @@ describe('Zone', function() { zone.run( () => { button.addEventListener('click', function() { logs.push('click1'); }); }); button.addEventListener('click', function() { logs.push('click2'); }); - let listeners = (button as any).eventListeners('click'); + let listeners = button.eventListeners('click'); expect(listeners.length).toBe(2); button.dispatchEvent(clickEvent); @@ -1181,7 +1181,7 @@ describe('Zone', function() { eventTask !.zone.cancelTask(eventTask !); logs = []; - listeners = (button as any).eventListeners('click'); + listeners = button.eventListeners('click'); button.dispatchEvent(clickEvent); expect(logs.length).toBe(1); expect(listeners.length).toBe(1); @@ -1205,7 +1205,7 @@ describe('Zone', function() { button.addEventListener('click', function() { logs.push('click1'); }, true); }); button.addEventListener('click', function() { logs.push('click2'); }, true); - let listeners = (button as any).eventListeners('click'); + let listeners = button.eventListeners('click'); expect(listeners.length).toBe(2); button.dispatchEvent(clickEvent); @@ -1214,7 +1214,7 @@ describe('Zone', function() { eventTask !.zone.cancelTask(eventTask !); logs = []; - listeners = (button as any).eventListeners('click'); + listeners = button.eventListeners('click'); button.dispatchEvent(clickEvent); expect(logs.length).toBe(1); expect(listeners.length).toBe(1); @@ -1238,7 +1238,7 @@ describe('Zone', function() { button.addEventListener('click', function() { logs.push('click1'); }, true); }); button.addEventListener('click', function() { logs.push('click2'); }); - let listeners = (button as any).eventListeners('click'); + let listeners = button.eventListeners('click'); expect(listeners.length).toBe(2); button.dispatchEvent(clickEvent); @@ -1247,7 +1247,7 @@ describe('Zone', function() { eventTask !.zone.cancelTask(eventTask !); logs = []; - listeners = (button as any).eventListeners('click'); + listeners = button.eventListeners('click'); button.dispatchEvent(clickEvent); expect(logs.length).toBe(1); expect(listeners.length).toBe(1); @@ -1789,7 +1789,7 @@ describe('Zone', function() { function() { let logs: string[] = []; const listener1 = function() { - (button as any).removeAllListeners('click'); + button.removeAllListeners('click'); logs.push('listener1'); }; const listener2 = function() { logs.push('listener2'); }; @@ -1812,7 +1812,7 @@ describe('Zone', function() { function() { let logs: string[] = []; const listener1 = function() { - (button as any).removeAllListeners('click'); + button.removeAllListeners('click'); logs.push('listener1'); }; const listener2 = function() { logs.push('listener2'); }; @@ -1836,7 +1836,7 @@ describe('Zone', function() { let logs: string[] = []; const listener1 = function() { logs.push('listener1'); }; const listener2 = function() { - (button as any).removeAllListeners('click'); + button.removeAllListeners('click'); logs.push('listener2'); }; const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }}; @@ -1859,7 +1859,7 @@ describe('Zone', function() { let logs: string[] = []; const listener1 = function() { logs.push('listener1'); }; const listener2 = function() { - (button as any).removeAllListeners('click'); + button.removeAllListeners('click'); logs.push('listener2'); }; const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }}; @@ -1885,7 +1885,7 @@ describe('Zone', function() { const listener3 = { handleEvent: function(event: Event) { logs.push('listener3'); - (button as any).removeAllListeners('click'); + button.removeAllListeners('click'); } }; @@ -1910,7 +1910,7 @@ describe('Zone', function() { const listener3 = { handleEvent: function(event: Event) { logs.push('listener3'); - (button as any).removeAllListeners('click'); + button.removeAllListeners('click'); } }; @@ -1939,7 +1939,7 @@ describe('Zone', function() { button.addEventListener('click', listener3); button.addEventListener('mouseover', listener4); - const listeners = (button as any).eventListeners('click'); + const listeners = button.eventListeners('click'); expect(listeners.length).toBe(3); expect(listeners).toEqual([listener1, listener2, listener3]); button.removeEventListener('click', listener1); @@ -1956,7 +1956,7 @@ describe('Zone', function() { button.addEventListener('mouseover', listener2); button.addEventListener('mousehover', listener3); - const listeners = (button as any).eventListeners(); + const listeners = button.eventListeners(); expect(listeners.length).toBe(3); expect(listeners).toEqual([listener1, listener2, listener3]); button.removeEventListener('click', listener1); @@ -1979,8 +1979,8 @@ describe('Zone', function() { button.onmouseover = listener5; expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5); - (button as any).removeAllListeners('mouseover'); - const listeners = (button as any).eventListeners('mouseover'); + button.removeAllListeners('mouseover'); + const listeners = button.eventListeners('mouseover'); expect(listeners.length).toBe(0); expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull(); expect(!!button.onmouseover).toBeFalsy(); @@ -2010,8 +2010,8 @@ describe('Zone', function() { button.addEventListener('mouseover', listener3, true); button.addEventListener('click', listener4, true); - (button as any).removeAllListeners('mouseover'); - const listeners = (button as any).eventListeners('mouseover'); + button.removeAllListeners('mouseover'); + const listeners = button.eventListeners('mouseover'); expect(listeners.length).toBe(0); const mouseEvent = document.createEvent('Event'); @@ -2039,8 +2039,8 @@ describe('Zone', function() { button.addEventListener('mouseover', listener3, true); button.addEventListener('click', listener4, true); - (button as any).removeAllListeners('mouseover'); - const listeners = (button as any).eventListeners('mouseove'); + button.removeAllListeners('mouseover'); + const listeners = button.eventListeners('mouseove'); expect(listeners.length).toBe(0); const mouseEvent = document.createEvent('Event'); @@ -2070,8 +2070,8 @@ describe('Zone', function() { button.onmouseover = listener5; expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5); - (button as any).removeAllListeners(); - const listeners = (button as any).eventListeners('mouseover'); + button.removeAllListeners(); + const listeners = button.eventListeners('mouseover'); expect(listeners.length).toBe(0); expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull(); expect(!!button.onmouseover).toBeFalsy(); @@ -2102,7 +2102,7 @@ describe('Zone', function() { button.removeEventListener('mouseover', listener2); button.removeEventListener('click', listener3); button.removeEventListener('click', listener4); - const listeners = (button as any).eventListeners('mouseover'); + const listeners = button.eventListeners('mouseover'); expect(listeners.length).toBe(0); const mouseEvent = document.createEvent('Event'); @@ -2127,8 +2127,8 @@ describe('Zone', function() { button.addEventListener('click', listener3); (button as any)[Zone.__symbol__('addEventListener')]('click', listener4); - (button as any).removeAllListeners(); - const listeners = (button as any).eventListeners('mouseover'); + button.removeAllListeners(); + const listeners = button.eventListeners('mouseover'); expect(listeners.length).toBe(0); const mouseEvent = document.createEvent('Event'); diff --git a/packages/zone.js/test/npm_package/npm_package.spec.ts b/packages/zone.js/test/npm_package/npm_package.spec.ts index b4414ad9cd..9e34a6e9f7 100644 --- a/packages/zone.js/test/npm_package/npm_package.spec.ts +++ b/packages/zone.js/test/npm_package/npm_package.spec.ts @@ -39,6 +39,9 @@ describe('Zone.js npm_package', () => { describe('typescript support', () => { it('should have an zone.js.d.ts file', () => { expect(shx.cat('zone.js.d.ts')).toContain('declare const'); }); + + it('should have an zone.api.extensions.ts file', + () => { expect(shx.cat('zone.api.extensions.ts')).toContain('EventTarget'); }); }); describe('closure', () => { @@ -136,6 +139,7 @@ describe('Zone.js npm_package', () => { 'zone-testing.min.js', 'zone.js', 'zone.js.d.ts', + 'zone.api.extensions.ts', 'zone.min.js', ].sort(); expect(list.length).toBe(expected.length);