fix: perf improvements to consider only Elements

salesforce · Aug 9, 2019 · 7d0851b · 7d0851b
1 parent 7418655
commit 7d0851b
Show file tree

Hide file tree

Showing 13 changed files with 352 additions and 129 deletions.
diff --git a/packages/@lwc/engine/src/framework/api.ts b/packages/@lwc/engine/src/framework/api.ts
@@ -4,8 +4,6 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import reactTo, { ReactionEventType } from '@lwc/node-reactions';
-
 import assert from '../shared/assert';
 import { vmBeingRendered, invokeEventListener, invokeComponentCallback } from './invoker';
 import {
@@ -32,7 +30,7 @@ import {
     EmptyObject,
     useSyntheticShadow,
 } from './utils';
-import { VM, SlotSet, getCustomElementVM, appendVM, removeVM } from './vm';
+import { VM, SlotSet } from './vm';
 import { ComponentConstructor } from './component';
 import {
     VNode,
@@ -174,14 +172,6 @@ const CustomElementHook: Hooks = {
     create: (vnode: VCustomElement) => {
         const { sel } = vnode;
         vnode.elm = document.createElement(sel);
-        reactTo(vnode.elm, ReactionEventType.connected, function() {
-            const vm = getCustomElementVM(this as HTMLElement);
-            appendVM(vm);
-        });
-        reactTo(vnode.elm, ReactionEventType.disconnected, function() {
-            const vm = getCustomElementVM(this as HTMLElement);
-            removeVM(vm);
-        });
         linkNodeToShadow(vnode);
         if (process.env.NODE_ENV !== 'production') {
             markNodeFromVNode(vnode.elm as Element);

diff --git a/packages/@lwc/engine/src/framework/hooks.ts b/packages/@lwc/engine/src/framework/hooks.ts
@@ -33,6 +33,7 @@ import {
     lockDomMutation,
 } from './restrictions';
 import { getComponentDef, setElementProto } from './def';
+import reactTo, { ReactionEventType } from '@lwc/node-reactions';
 
 const noop = () => void 0;
 
@@ -193,15 +194,22 @@ export function createViewModelHook(vnode: VCustomElement) {
         mode,
         owner,
     });
-    const vm = getCustomElementVM(elm);
+    reactTo(elm, ReactionEventType.connected, function(this: HTMLElement) {
+        const vm = getCustomElementVM(this);
+        appendVM(vm);
+    });
+    reactTo(elm, ReactionEventType.disconnected, function(this: HTMLElement) {
+        const vm = getCustomElementVM(this as HTMLElement);
+        removeVM(vm);
+    });
     if (process.env.NODE_ENV !== 'production') {
+        const vm = getCustomElementVM(elm);
         assert.isTrue(vm && 'cmpRoot' in vm, `${vm} is not a vm.`);
         assert.isTrue(
             isArray(vnode.children),
             `Invalid vnode for a custom element, it must have children defined.`
         );
-    }
-    if (process.env.NODE_ENV !== 'production') {
+
         patchCustomElementWithRestrictions(elm, EmptyObject);
     }
 }

diff --git a/packages/@lwc/engine/src/framework/wc.ts b/packages/@lwc/engine/src/framework/wc.ts
@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import reactTo, { ReactionEventType } from '@lwc/node-reactions';
 import { ComponentConstructor } from './component';
 import { isUndefined, isObject, isNull, getOwnPropertyNames, ArrayMap } from '../shared/language';
 import { createVM, appendRootVM, removeRootVM, getCustomElementVM, CreateVMInit } from './vm';
@@ -49,14 +48,14 @@ export function buildCustomElementConstructor(
             if (process.env.NODE_ENV !== 'production') {
                 patchCustomElementWithRestrictions(this, EmptyObject);
             }
-            reactTo(this, ReactionEventType.connected, function() {
-                const vm = getCustomElementVM(this as HTMLElement);
-                appendRootVM(vm);
-            });
-            reactTo(this, ReactionEventType.disconnected, function() {
-                const vm = getCustomElementVM(this as HTMLElement);
-                removeRootVM(vm);
-            });
+        }
+        connectedCallback() {
+            const vm = getCustomElementVM(this as HTMLElement);
+            appendRootVM(vm);
+        }
+        disconnectedCallback() {
+            const vm = getCustomElementVM(this as HTMLElement);
+            removeRootVM(vm);
         }
         attributeChangedCallback(attrName, oldValue, newValue) {
             if (oldValue === newValue) {