perf: move renderer to top-level module (#2598)

* perf: move renderer to top-level module

* fix: add tsconfig so my IDE stops complaining

* fix: use dependency injection pattern instead

* fix: add missing header

* test: fix test

* test: fix test

* fix: use "as const"`

* fix: add comment

Author: nolanlawson

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 '../../renderer';
 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

@@ -23,6 +23,7 @@ import {
     StringReplace,
     toString,
 } from '@lwc/shared';
+import { createText, createComment, createElement, isSyntheticShadowDefined } from '../renderer';
 import { logError, logWarn } from '../shared/logger';
 import { invokeEventListener } from './invoker';
 import { getVMBeingRendered } from './template';
@@ -82,9 +83,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 +117,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 +160,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 +223,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 +304,6 @@ const CustomElementHook: Hooks<VCustomElement> = {
             mode,
             owner,
             tagName: sel,
-            renderer: owner.renderer,
         });
 
         vnode.elm = elm as Element;
@@ -334,10 +330,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';