perf: move renderer to top-level module

Author: nolanlawson

packages/@lwc/engine-core/package.json

@@ -30,6 +30,9 @@
     "devDependencies": {
         "observable-membrane": "2.0.0"
     },
+    "peerDependencies": {
+        "@lwc/renderer-abstract": "2.7.0"
+    },
     "publishConfig": {
         "access": "public"
     },

packages/@lwc/engine-core/src/3rdparty/snabbdom/snabbdom.ts

@@ -13,6 +13,7 @@ Code distributed by Snabbdom as part of the Snabbdom project at
 https://github.com/snabbdom/snabbdom/
 */
 
+import { nextSibling } from '@lwc/renderer-abstract';
 import { VNode, VNodes, Key } from './types';
 
 function isUndef(s: any): s is undefined {
@@ -107,11 +108,7 @@ export function updateDynamicChildren(parentElm: Node, oldCh: VNodes, newCh: VNo
         } else if (sameVnode(oldStartVnode, newEndVnode)) {
             // Vnode moved right
             patchVnode(oldStartVnode, newEndVnode);
-            newEndVnode.hook.move(
-                oldStartVnode,
-                parentElm,
-                oldEndVnode.owner.renderer.nextSibling(oldEndVnode.elm!)
-            );
+            newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling(oldEndVnode.elm!));
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         } else if (sameVnode(oldEndVnode, newStartVnode)) {

packages/@lwc/engine-core/src/framework/api.ts

@@ -4,6 +4,12 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+import {
+    createText,
+    createComment,
+    createElement,
+    isSyntheticShadowDefined,
+} from '@lwc/renderer-abstract';
 import {
     ArrayPush,
     assert,
@@ -82,9 +88,8 @@ const SymbolIterator: typeof Symbol.iterator = Symbol.iterator;
 const TextHook: Hooks<VText> = {
     create: (vnode) => {
         const { owner } = vnode;
-        const { renderer } = owner;
 
-        const elm = renderer.createText(vnode.text!);
+        const elm = createText(vnode.text!);
         linkNodeToShadow(elm, owner);
         vnode.elm = elm;
     },
@@ -117,9 +122,8 @@ const TextHook: Hooks<VText> = {
 const CommentHook: Hooks<VComment> = {
     create: (vnode) => {
         const { owner, text } = vnode;
-        const { renderer } = owner;
 
-        const elm = renderer.createComment(text);
+        const elm = createComment(text);
         linkNodeToShadow(elm, owner);
         vnode.elm = elm;
     },
@@ -161,10 +165,9 @@ const ElementHook: Hooks<VElement> = {
             owner,
             data: { svg },
         } = vnode;
-        const { renderer } = owner;
 
         const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-        const elm = renderer.createElement(sel, namespace);
+        const elm = createElement(sel, namespace);
 
         linkNodeToShadow(elm, owner);
         fallbackElmHook(elm, vnode);
@@ -225,8 +228,7 @@ const ElementHook: Hooks<VElement> = {
 const CustomElementHook: Hooks<VCustomElement> = {
     create: (vnode) => {
         const { sel, owner } = vnode;
-        const { renderer } = owner;
-        const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+        const UpgradableConstructor = getUpgradableConstructor(sel);
         /**
          * Note: if the upgradable constructor does not expect, or throw when we new it
          * with a callback as the first argument, we could implement a more advanced
@@ -307,7 +309,6 @@ const CustomElementHook: Hooks<VCustomElement> = {
             mode,
             owner,
             tagName: sel,
-            renderer: owner.renderer,
         });
 
         vnode.elm = elm as Element;
@@ -334,10 +335,10 @@ const CustomElementHook: Hooks<VCustomElement> = {
 };
 
 function linkNodeToShadow(elm: Node, owner: VM) {
-    const { renderer, renderMode, shadowMode } = owner;
+    const { renderMode, shadowMode } = owner;
 
     // TODO [#1164]: this should eventually be done by the polyfill directly
-    if (renderer.isSyntheticShadowDefined) {
+    if (isSyntheticShadowDefined) {
         if (shadowMode === ShadowMode.Synthetic || renderMode === RenderMode.Light) {
             (elm as any)[KEY__SHADOW_RESOLVER] = getRenderRoot(owner)[KEY__SHADOW_RESOLVER];
         }

packages/@lwc/engine-core/src/framework/base-bridge-element.ts

@@ -25,7 +25,7 @@ import {
 
 import { getAssociatedVM } from './vm';
 import { reactiveMembrane } from './membrane';
-import { HTMLElementConstructor } from './renderer';
+import { HTMLElementConstructor } from './html-element';
 import { HTMLElementOriginalDescriptors } from './html-properties';
 import { isAttributeLocked } from './attributes';