refactor(engine-core): encapsulate renderer as an object and allow it to be injectable in vnodes

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

@@ -27,29 +27,6 @@ import {
 
 import { logError } from '../shared/logger';
 import { getComponentTag } from '../shared/format';
-import {
-    getChildren,
-    getChildNodes,
-    getFirstChild,
-    getFirstElementChild,
-    getLastChild,
-    getLastElementChild,
-    assertInstanceOfHTMLElement,
-    attachShadow,
-    addEventListener,
-    removeEventListener,
-    getAttribute,
-    removeAttribute,
-    setAttribute,
-    getBoundingClientRect,
-    isConnected,
-    getClassList,
-    dispatchEvent,
-    getElementsByClassName,
-    getElementsByTagName,
-    querySelector,
-    querySelectorAll,
-} from '../renderer';
 
 import { HTMLElementOriginalDescriptors } from './html-properties';
 import { getWrappedComponentsListener } from './component';
@@ -220,6 +197,7 @@ export const LightningElement: LightningElementConstructor = function (
     const { bridge } = def;
 
     if (process.env.NODE_ENV !== 'production') {
+        const { assertInstanceOfHTMLElement } = vm.renderer;
         assertInstanceOfHTMLElement(
             vm.elm,
             `Component creation requires a DOM element to be associated to ${vm}.`
@@ -270,6 +248,7 @@ function doAttachShadow(vm: VM): ShadowRoot {
         mode,
         shadowMode,
         def: { ctor },
+        renderer: { attachShadow },
     } = vm;
 
     const shadowRoot = attachShadow(elm, {
@@ -303,7 +282,11 @@ LightningElement.prototype = {
     constructor: LightningElement,
 
     dispatchEvent(event: Event): boolean {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const {
+            elm,
+            renderer: { dispatchEvent },
+        } = vm;
         return dispatchEvent(elm, event);
     },
 
@@ -313,7 +296,10 @@ LightningElement.prototype = {
         options?: boolean | AddEventListenerOptions
     ): void {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const {
+            elm,
+            renderer: { addEventListener },
+        } = vm;
 
         if (process.env.NODE_ENV !== 'production') {
             const vmBeingRendered = getVMBeingRendered();
@@ -341,51 +327,74 @@ LightningElement.prototype = {
         options?: boolean | AddEventListenerOptions
     ): void {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const {
+            elm,
+            renderer: { removeEventListener },
+        } = vm;
 
         const wrappedListener = getWrappedComponentsListener(vm, listener);
         removeEventListener(elm, type, wrappedListener, options);
     },
 
     hasAttribute(name: string): boolean {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const {
+            elm,
+            renderer: { getAttribute },
+        } = vm;
         return !isNull(getAttribute(elm, name));
     },
 
     hasAttributeNS(namespace: string | null, name: string): boolean {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const {
+            elm,
+            renderer: { getAttribute },
+        } = vm;
         return !isNull(getAttribute(elm, name, namespace));
     },
 
     removeAttribute(name: string): void {
-        const { elm } = getAssociatedVM(this);
-
+        const vm = getAssociatedVM(this);
+        const {
+            elm,
+            renderer: { removeAttribute },
+        } = vm;
         unlockAttribute(elm, name);
         removeAttribute(elm, name);
         lockAttribute(elm, name);
     },
 
     removeAttributeNS(namespace: string | null, name: string): void {
-        const { elm } = getAssociatedVM(this);
-
+        const {
+            elm,
+            renderer: { removeAttribute },
+        } = getAssociatedVM(this);
         unlockAttribute(elm, name);
         removeAttribute(elm, name, namespace);
         lockAttribute(elm, name);
     },
 
     getAttribute(name: string): string | null {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
         return getAttribute(elm, name);
     },
 
     getAttributeNS(namespace: string | null, name: string): string | null {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
         return getAttribute(elm, name, namespace);
     },
 
     setAttribute(name: string, value: string): void {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const {
+            elm,
+            renderer: { setAttribute },
+        } = vm;
 
         if (process.env.NODE_ENV !== 'production') {
             assert.isFalse(
@@ -401,7 +410,10 @@ LightningElement.prototype = {
 
     setAttributeNS(namespace: string | null, name: string, value: string): void {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const {
+            elm,
+            renderer: { setAttribute },
+        } = vm;
 
         if (process.env.NODE_ENV !== 'production') {
             assert.isFalse(
@@ -417,7 +429,10 @@ LightningElement.prototype = {
 
     getBoundingClientRect(): ClientRect {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const {
+            elm,
+            renderer: { getBoundingClientRect },
+        } = vm;
 
         if (process.env.NODE_ENV !== 'production') {
             warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
@@ -427,13 +442,20 @@ LightningElement.prototype = {
     },
 
     get isConnected(): boolean {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const {
+            elm,
+            renderer: { isConnected },
+        } = vm;
         return isConnected(elm);
     },
 
     get classList(): DOMTokenList {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const {
+            elm,
+            renderer: { getClassList },
+        } = vm;
 
         if (process.env.NODE_ENV !== 'production') {
             // TODO [#1290]: this still fails in dev but works in production, eventually, we should
@@ -467,6 +489,60 @@ LightningElement.prototype = {
         return null;
     },
 
+    get children() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'children');
+        }
+        return renderer.getChildren(vm.elm);
+    },
+
+    get childNodes() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'childNodes');
+        }
+        return renderer.getChildNodes(vm.elm);
+    },
+
+    get firstChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstChild');
+        }
+        return renderer.getFirstChild(vm.elm);
+    },
+
+    get firstElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstElementChild');
+        }
+        return renderer.getFirstElementChild(vm.elm);
+    },
+
+    get lastChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastChild');
+        }
+        return renderer.getLastChild(vm.elm);
+    },
+
+    get lastElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastElementChild');
+        }
+        return renderer.getLastElementChild(vm.elm);
+    },
+
     render(): Template {
         const vm = getAssociatedVM(this);
         return vm.def.template;
@@ -480,84 +556,25 @@ LightningElement.prototype = {
 
 const queryAndChildGetterDescriptors: PropertyDescriptorMap = create(null);
 
-// The reason we don't just call `import * as renderer from '../renderer'` here is that the bundle size
-// is smaller if we reference each function individually. Otherwise Rollup will create one big frozen
-// object representing the renderer, with a lot of methods we don't actually need.
-const childGetters = [
-    'children',
-    'childNodes',
-    'firstChild',
-    'firstElementChild',
-    'lastChild',
-    'lastElementChild',
-] as const;
-
-function getChildGetter(methodName: typeof childGetters[number]) {
-    switch (methodName) {
-        case 'children':
-            return getChildren;
-        case 'childNodes':
-            return getChildNodes;
-        case 'firstChild':
-            return getFirstChild;
-        case 'firstElementChild':
-            return getFirstElementChild;
-        case 'lastChild':
-            return getLastChild;
-        case 'lastElementChild':
-            return getLastElementChild;
-    }
-}
-
-// Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
-for (const childGetter of childGetters) {
-    queryAndChildGetterDescriptors[childGetter] = {
-        get(this: LightningElement) {
-            const vm = getAssociatedVM(this);
-            const { elm } = vm;
-
-            if (process.env.NODE_ENV !== 'production') {
-                warnIfInvokedDuringConstruction(vm, childGetter);
-            }
-
-            return getChildGetter(childGetter)(elm);
-        },
-        configurable: true,
-        enumerable: true,
-    };
-}
-
 const queryMethods = [
     'getElementsByClassName',
     'getElementsByTagName',
     'querySelector',
     'querySelectorAll',
 ] as const;
-function getQueryMethod(methodName: typeof queryMethods[number]) {
-    switch (methodName) {
-        case 'getElementsByClassName':
-            return getElementsByClassName;
-        case 'getElementsByTagName':
-            return getElementsByTagName;
-        case 'querySelector':
-            return querySelector;
-        case 'querySelectorAll':
-            return querySelectorAll;
-    }
-}
 
 // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
 for (const queryMethod of queryMethods) {
     queryAndChildGetterDescriptors[queryMethod] = {
         value(this: LightningElement, arg: string) {
             const vm = getAssociatedVM(this);
-            const { elm } = vm;
+            const { elm, renderer } = vm;
 
             if (process.env.NODE_ENV !== 'production') {
                 warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
             }
 
-            return getQueryMethod(queryMethod)(elm, arg);
+            return renderer[queryMethod](elm, arg);
         },
         configurable: true,
         enumerable: true,