refactor(ivy): remove usage of Proxy for IE10/11 compatibility (#34328)

PR Close #34328

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)', () => {

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[] {

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', () => {

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', () => {