fix(engine): remove piercing membrane (#324)

* wip: first pass
* wip: more pierce removal
* wip: parent element values on nodes
* wip: parent traversal
* wip: fixing rebase mistake
* wip: linting
* wip: fixing event preventDefault
* wip: queryselector
* wip: linting
* wip: lazy queryselectors
* wip: removed test file
* wip: cleanup types
* wip: fixing contentWindow unwrapping
* wip: master rebase
* wip: reorganizing filter methods
* wip: adding integration tests
* wip: fixing IE11
* wip: removing event proxy. Using getter for target
* wip: removed console
* wip: cleanup and comments
* fix(engine): change Root to ShadowRoot
* fix(engine): optimized monkey patch method
* fix(engine): remove unused variable
* fix(engine): removed double comment

packages/lwc-engine/src/framework/__tests__/api.spec.ts

@@ -2,6 +2,7 @@ import * as api from '../api';
 import { Element } from "../html-element";
 import { createElement } from '../main';
 import { RenderAPI } from '../api';
+import { querySelector } from "../dom";
 
 describe('api', () => {
     describe('#c()', () => {
@@ -100,7 +101,7 @@ describe('api', () => {
             }
             const elm = createElement('x-foo', { is: Foo });
             document.body.appendChild(elm);
-            const span = elm.querySelector('button') as Element;
+            const span = querySelector.call(elm, 'button') as Element;
             expect(span.tagName).toEqual('BUTTON');
             expect(span.getAttribute('is')).toEqual('x-bar');
         });

packages/lwc-engine/src/framework/__tests__/dom.spec.ts

@@ -1,6 +1,6 @@
 import { Element } from "../html-element";
 import { createElement } from "../upgrade";
-import { getRootNode } from "../dom";
+import { getRootNode, querySelector } from "../dom";
 
 describe('dom', () => {
     describe('getRootNode composed true', () => {
@@ -42,7 +42,7 @@ describe('dom', () => {
 
             const elm = createElement('x-parent', { is: Parent });
             document.body.appendChild(elm);
-            const child = elm.querySelector('x-child');
+            const child = querySelector.call(elm, 'x-child');
             const match = getRootNode.call(child, { composed: true });
             // We can't assert against document directly, because
             // for some reasons, jest is locking up with document here
@@ -99,7 +99,7 @@ describe('dom', () => {
 
             const elm = createElement('x-parent', { is: Parent });
             document.body.appendChild(elm);
-            const child = elm.querySelector('x-child');
+            const child = querySelector.call(elm, 'x-child');
             const match = getRootNode.call(child, { composed: false });
             // We can't assert against document directly, because
             // for some reasons, jest is locking up with document here
@@ -186,7 +186,7 @@ describe('dom', () => {
 
             const elm = createElement('x-parent', { is: Parent });
             document.body.appendChild(elm);
-            const child = elm.querySelector('x-foo');
+            const child = querySelector.call(elm, 'x-foo');
             child.trigger();
         });
     });

packages/lwc-engine/src/framework/__tests__/error-boundary.spec.ts

@@ -1,5 +1,6 @@
 import { Element } from "../html-element";
 import { createElement } from "../upgrade";
+import { querySelector, querySelectorAll } from "../dom";
 
 function createBoundaryComponent(elementsToRender) {
     function html($api, $cmp) {
@@ -78,7 +79,7 @@ describe('error boundary component', () => {
                 const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
 
                 document.body.appendChild(boundaryHostElm);
-                expect(boundaryHostElm.querySelectorAll('x-boundary-sibling').length).toBe(1);
+                expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
             }),
 
             it('should unmount enitre subtree up to boundary component if child throws inside constructor', () => {
@@ -104,8 +105,8 @@ describe('error boundary component', () => {
                 const elm = createElement('x-boundary', { is: Boundary });
                 document.body.appendChild(elm);
 
-                expect(elm.querySelector('x-second-level-child')).toBeNull();
-                expect(elm.querySelector('x-first-level-child')).toBeNull();
+                expect(querySelector.call(elm, 'x-second-level-child')).toBeNull();
+                expect(querySelector.call(elm, 'x-first-level-child')).toBeNull();
             }),
 
             it('should throw if error occurs in error boundary constructor', () => {
@@ -200,7 +201,7 @@ describe('error boundary component', () => {
                 const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
                 document.body.appendChild(boundaryHostElm);
 
-                expect(boundaryHostElm.querySelectorAll('x-boundary-sibling').length).toBe(1);
+                expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
             }),
 
             it('should unmount child and its subtree if boundary child throws inside render', () => {
@@ -225,8 +226,8 @@ describe('error boundary component', () => {
                 const elm = createElement('x-boundary', { is: Boundary });
                 document.body.appendChild(elm);
 
-                expect(elm.querySelector('x-first-level-child')).toBeNull();
-                expect(elm.querySelector('x-second-level-child')).toBeNull();
+                expect(querySelector.call(elm, 'x-first-level-child')).toBeNull();
+                expect(querySelector.call(elm, 'x-second-level-child')).toBeNull();
             }),
 
             it ('should call errorCallback if slot throws an error inside render', () => {
@@ -341,7 +342,7 @@ describe('error boundary component', () => {
                 document.body.appendChild(hostBoundaryElm);
 
                 expect(hostBoundaryElm.getError()).toBe('Child Boundary ErrorCallback Throw');
-                expect(hostBoundaryElm.querySelectorAll('child-error-boundary').length).toBe(0);
+                expect(querySelectorAll.call(hostBoundaryElm, 'child-error-boundary').length).toBe(0);
             });
 
             it('should unmount error boundary child if it throws inside renderedCallback', () => {
@@ -436,7 +437,7 @@ describe('error boundary component', () => {
                 const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
                 document.body.appendChild(boundaryHostElm);
 
-                expect(boundaryHostElm.querySelectorAll('x-boundary-sibling').length).toBe(1);
+                expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
             }),
 
             it('should unmount boundary child and its subtree if child throws inside renderedCallback', () => {
@@ -532,7 +533,7 @@ describe('error boundary component', () => {
                 const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
                 document.body.appendChild(boundaryHostElm);
 
-                expect(boundaryHostElm.querySelectorAll('x-boundary-sibling').length).toBe(1);
+                expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
             }),
 
             it('should unmount boundary child and its subtree if boundary child throws inside connectedCallback', () => {

packages/lwc-engine/src/framework/__tests__/events.spec.ts

@@ -2,7 +2,6 @@ import { Element } from "../html-element";
 import { createElement } from "./../upgrade";
 import { ViewModelReflection } from "../def";
 import { unwrap } from "../membrane";
-import { create } from "domain";
 
 describe('Composed events', () => {
     it('should be able to consume events from within template', () => {
@@ -456,7 +455,7 @@ describe('Events on Custom Elements', () => {
         class MyComponent extends Element {
             connectedCallback() {
                 this.addEventListener('click', function (evt) {
-                    expect(unwrap(evt.target)).toBe(elm);
+                    expect(evt.target).toBe(elm);
                 });
             }
 
@@ -480,7 +479,7 @@ describe('Events on Custom Elements', () => {
         class MyComponent extends Element {
             connectedCallback() {
                 this.addEventListener('click', function (evt) {
-                    expect(unwrap(evt.target)).toBe(elm);
+                    expect(evt.target).toBe(elm);
                 });
             }
 
@@ -593,7 +592,7 @@ describe('Component events', () => {
                     this.dispatchEvent(new CustomEvent('foo'));
                 });
                 this.addEventListener('foo', (evt) => {
-                    expect(unwrap(evt.target)).toBe(elm);
+                    expect(evt.target).toBe(elm);
                 });
             }
         }