From a7818002769191f0a4a241e530619735bd673262 Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Tue, 10 Dec 2019 15:55:53 +0100 Subject: [PATCH] refactor(ivy): remove usage of Proxy for IE10/11 compatibility (#34328) PR Close #34328 --- aio/src/app/app.component.spec.ts | 4 +- packages/core/src/debug/debug_node.ts | 37 ++++--------------- packages/core/test/acceptance/styling_spec.ts | 16 ++------ packages/core/test/debug/debug_node_spec.ts | 4 +- 4 files changed, 14 insertions(+), 47 deletions(-) diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index c1cf20877b..7737e04551 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -957,7 +957,7 @@ describe('AppComponent', () => { triggerDocViewerEvent('docRendered'); fixture.detectChanges(); expect(component.isTransitioning).toBe(false); - expect(toolbar.classes['transitioning']).toBe(false); + expect(toolbar.classes['transitioning']).toBeFalsy(); // While a document is being rendered, `isTransitoning` is set to true. triggerDocViewerEvent('docReady'); @@ -968,7 +968,7 @@ describe('AppComponent', () => { triggerDocViewerEvent('docRendered'); fixture.detectChanges(); expect(component.isTransitioning).toBe(false); - expect(toolbar.classes['transitioning']).toBe(false); + expect(toolbar.classes['transitioning']).toBeFalsy(); }); it('should update the sidenav state as soon as a new document is inserted (but not before)', () => { diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts index d01dd664ea..ca78b012ed 100644 --- a/packages/core/src/debug/debug_node.ts +++ b/packages/core/src/debug/debug_node.ts @@ -18,9 +18,6 @@ import {getComponentLViewByIndex, getNativeByTNodeOrNull} from '../render3/util/ import {assertDomNode} from '../util/assert'; import {DebugContext} from '../view/index'; -import {createProxy} from './proxy'; - - /** * @publicApi @@ -204,6 +201,7 @@ function _queryNodeChildren( }); } } + class DebugNode__POST_R3__ implements DebugNode { readonly nativeNode: Node; @@ -348,35 +346,14 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme return {}; } - private _classesProxy !: {}; get classes(): {[key: string]: boolean;} { - if (!this._classesProxy) { - const element = this.nativeElement; + const result: {[key: string]: boolean;} = {}; + const element = this.nativeElement as HTMLElement; + const classNames = element.className.split(' '); - // we use a proxy here because VE code expects `.classes` to keep - // track of which classes have been added and removed. Because we - // do not make use of a debug renderer anymore, the return value - // must always be `false` in the event that a class does not exist - // on the element (even if it wasn't added and removed beforehand). - this._classesProxy = createProxy({ - get(target: {}, prop: string) { - return element ? element.classList.contains(prop) : false; - }, - set(target: {}, prop: string, value: any) { - return element ? element.classList.toggle(prop, !!value) : false; - }, - ownKeys() { return element ? Array.from(element.classList).sort() : []; }, - getOwnPropertyDescriptor(k: any) { - // we use a special property descriptor here so that enumeration operations - // such as `Object.keys` will work on this proxy. - return { - enumerable: true, - configurable: true, - }; - }, - }); - } - return this._classesProxy; + classNames.forEach((value: string) => result[value] = true); + + return result; } get childNodes(): DebugNode[] { diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts index 24ab1fd257..811f8db763 100644 --- a/packages/core/test/acceptance/styling_spec.ts +++ b/packages/core/test/acceptance/styling_spec.ts @@ -2238,9 +2238,9 @@ describe('styling', () => { constructor(public elementRef: ElementRef, public renderer: Renderer2) { dirInstance = this; } setStyles() { - this.renderer.setStyle( - this.elementRef.nativeElement, 'transform', 'translate3d(0px, 0px, 0px)'); - this.renderer.addClass(this.elementRef.nativeElement, 'my-class'); + const nativeEl = this.elementRef.nativeElement; + this.renderer.setStyle(nativeEl, 'transform', 'translate3d(0px, 0px, 0px)'); + this.renderer.addClass(nativeEl, 'my-class'); } } @@ -2258,16 +2258,6 @@ describe('styling', () => { const div = fixture.debugElement.children[0]; expect(div.styles.transform).toMatch(/translate3d\(0px\s*,\s*0px\s*,\s*0px\)/); expect(div.classes['my-class']).toBe(true); - - div.classes['other-class'] = true; - div.styles['width'] = '200px'; - expect(div.styles.width).toEqual('200px'); - expect(div.classes['other-class']).toBe(true); - - if (ivyEnabled) { - expect(div.nativeElement.classList.contains('other-class')).toBeTruthy(); - expect(div.nativeElement.style['width']).toEqual('200px'); - } }); it('should not set classes when falsy value is passed while a sanitizer is present', () => { diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts index 64bd8ef083..f86394c741 100644 --- a/packages/core/test/debug/debug_node_spec.ts +++ b/packages/core/test/debug/debug_node_spec.ts @@ -354,7 +354,7 @@ class TestCmptWithPropInterpolation { const bankElem = fixture.debugElement.children[0]; expect(bankElem.classes['closed']).toBe(true); - expect(bankElem.classes['open']).toBe(false); + expect(bankElem.classes['open']).toBeFalsy(); }); it('should get element classes from host bindings', () => { @@ -365,7 +365,7 @@ class TestCmptWithPropInterpolation { expect(debugElement.classes['present-class']) .toBe(true, 'Expected bound host CSS class "present-class" to be present'); expect(debugElement.classes['absent-class']) - .toBe(false, 'Expected bound host CSS class "absent-class" to be absent'); + .toBeFalsy('Expected bound host CSS class "absent-class" to be absent'); }); it('should list element styles', () => {