Skip to content

Commit 00e9140

Browse files
caridyravijayaramappa
caridy
authored and
ravijayaramappa
committed
refactor: following PM recommendation to rely on owner.renderer instead of using the vnode
1 parent 476be2a commit 00e9140

File tree

12 files changed

+105
-60
lines changed

12 files changed

+105
-60
lines changed

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

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ import {
4242
VElementData,
4343
VNodeType,
4444
} from './vnodes';
45-
import type { RendererAPI } from '../renderer';
4645

4746
const SymbolIterator: typeof Symbol.iterator = Symbol.iterator;
4847

@@ -51,12 +50,7 @@ function addVNodeToChildLWC(vnode: VCustomElement) {
5150
}
5251

5352
// [h]tml node
54-
function h(
55-
renderer: RendererAPI,
56-
sel: string,
57-
data: VElementData,
58-
children: VNodes = EmptyArray
59-
): VElement {
53+
function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VElement {
6054
const vmBeingRendered = getVMBeingRendered()!;
6155
if (process.env.NODE_ENV !== 'production') {
6256
assert.isTrue(isString(sel), `h() 1st argument sel must be a string.`);
@@ -98,7 +92,6 @@ function h(
9892
const { key } = data;
9993

10094
return {
101-
renderer,
10295
type: VNodeType.Element,
10396
sel,
10497
data,
@@ -131,7 +124,6 @@ function ti(value: any): number {
131124

132125
// [s]lot element node
133126
function s(
134-
renderer: RendererAPI,
135127
slotName: string,
136128
data: VElementData,
137129
children: VNodes,
@@ -160,12 +152,11 @@ function s(
160152
// TODO [#1276]: compiler should give us some sort of indicator when a vnodes collection is dynamic
161153
sc(children);
162154
}
163-
return h(renderer, 'slot', data, children);
155+
return h('slot', data, children);
164156
}
165157

166158
// [c]ustom element node
167159
function c(
168-
renderer: RendererAPI,
169160
sel: string,
170161
Ctor: LightningElementConstructor,
171162
data: VElementData,
@@ -212,7 +203,6 @@ function c(
212203
const { key } = data;
213204
let elm, aChildren, vm;
214205
const vnode: VCustomElement = {
215-
renderer,
216206
type: VNodeType.CustomElement,
217207
sel,
218208
data,
@@ -342,10 +332,9 @@ function f(items: Readonly<Array<Readonly<Array<VNodes>> | VNodes>>): VNodes {
342332
}
343333

344334
// [t]ext node
345-
function t(renderer: RendererAPI, text: string): VText {
335+
function t(text: string): VText {
346336
let sel, key, elm;
347337
return {
348-
renderer,
349338
type: VNodeType.Text,
350339
sel,
351340
text,
@@ -356,10 +345,9 @@ function t(renderer: RendererAPI, text: string): VText {
356345
}
357346

358347
// [co]mment node
359-
function co(renderer: RendererAPI, text: string): VComment {
348+
function co(text: string): VComment {
360349
let sel, key, elm;
361350
return {
362-
renderer,
363351
type: VNodeType.Comment,
364352
sel,
365353
text,
@@ -462,7 +450,6 @@ let dynamicImportedComponentCounter = 0;
462450
* create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
463451
*/
464452
function dc(
465-
renderer: RendererAPI,
466453
sel: string,
467454
Ctor: LightningElementConstructor | null | undefined,
468455
data: VElementData,
@@ -494,7 +481,7 @@ function dc(
494481
// Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
495482
// hoisting optimization.
496483
const newData = { ...data, key: `dc:${idx}:${data.key}` };
497-
return c(renderer, sel, Ctor, newData, children);
484+
return c(sel, Ctor, newData, children);
498485
}
499486

500487
/**

‎packages/@lwc/engine-core/src/framework/hydration.ts‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ function hydrateNode(node: Node, vnode: VNode): Node | null {
8888
break;
8989
}
9090
const {
91-
renderer: { nextSibling },
91+
owner: {
92+
renderer: { nextSibling },
93+
},
9294
} = vnode;
9395
return nextSibling(hydratedNode);
9496
}
@@ -100,7 +102,9 @@ function hydrateText(node: Node, vnode: VText): Node | null {
100102

101103
if (process.env.NODE_ENV !== 'production') {
102104
const {
103-
renderer: { getProperty },
105+
owner: {
106+
renderer: { getProperty },
107+
},
104108
} = vnode;
105109
const nodeValue = getProperty(node, 'nodeValue');
106110

@@ -112,7 +116,9 @@ function hydrateText(node: Node, vnode: VText): Node | null {
112116
}
113117
}
114118
const {
115-
renderer: { setText },
119+
owner: {
120+
renderer: { setText },
121+
},
116122
} = vnode;
117123
setText(node, vnode.text ?? null);
118124
vnode.elm = node;
@@ -127,7 +133,9 @@ function hydrateComment(node: Node, vnode: VComment): Node | null {
127133

128134
if (process.env.NODE_ENV !== 'production') {
129135
const {
130-
renderer: { getProperty },
136+
owner: {
137+
renderer: { getProperty },
138+
},
131139
} = vnode;
132140
const nodeValue = getProperty(node, 'nodeValue');
133141

@@ -140,7 +148,9 @@ function hydrateComment(node: Node, vnode: VComment): Node | null {
140148
}
141149

142150
const {
143-
renderer: { setProperty },
151+
owner: {
152+
renderer: { setProperty },
153+
},
144154
} = vnode;
145155
setProperty(node, 'nodeValue', vnode.text ?? null);
146156
vnode.elm = node;
@@ -168,7 +178,9 @@ function hydrateElement(elm: Node, vnode: VElement): Node | null {
168178
// remove the innerHTML from props so it reuses the existing dom elements.
169179
const {
170180
data: { props },
171-
renderer: { getProperty },
181+
owner: {
182+
renderer: { getProperty },
183+
},
172184
} = vnode;
173185
if (!isUndefined(props) && !isUndefined(props.innerHTML)) {
174186
if (getProperty(elm, 'innerHTML') === props.innerHTML) {
@@ -195,7 +207,9 @@ function hydrateElement(elm: Node, vnode: VElement): Node | null {
195207

196208
if (!isDomManual) {
197209
const {
198-
renderer: { getFirstChild },
210+
owner: {
211+
renderer: { getFirstChild },
212+
},
199213
} = vnode;
200214
hydrateChildren(getFirstChild(elm), vnode.children, elm, vnode.owner);
201215
}
@@ -211,7 +225,8 @@ function hydrateCustomElement(elm: Node, vnode: VCustomElement): Node | null {
211225
return handleMismatch(elm, vnode);
212226
}
213227

214-
const { sel, mode, ctor, owner, renderer } = vnode;
228+
const { sel, mode, ctor, owner } = vnode;
229+
const { renderer } = owner;
215230

216231
const vm = createVM(elm, ctor, renderer, {
217232
mode,
@@ -234,7 +249,9 @@ function hydrateCustomElement(elm: Node, vnode: VCustomElement): Node | null {
234249

235250
if (vm.renderMode !== RenderMode.Light) {
236251
const {
237-
renderer: { getFirstChild },
252+
owner: {
253+
renderer: { getFirstChild },
254+
},
238255
} = vnode;
239256
// VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
240257
// Note: for Light DOM, this is handled while hydrating the VM
@@ -305,7 +322,9 @@ function handleMismatch(node: Node, vnode: VNode, msg?: string): Node | null {
305322
logError(msg, vnode.owner);
306323
}
307324
}
308-
const { renderer } = vnode;
325+
const {
326+
owner: { renderer },
327+
} = vnode;
309328
const { getProperty } = renderer;
310329
const parentNode = getProperty(node, 'parentNode');
311330
mount(vnode, parentNode, node);
@@ -321,7 +340,9 @@ function patchElementPropsAndAttrs(vnode: VBaseElement) {
321340

322341
function hasCorrectNodeType<T extends Node>(vnode: VNode, node: Node, nodeType: number): node is T {
323342
const {
324-
renderer: { getProperty },
343+
owner: {
344+
renderer: { getProperty },
345+
},
325346
} = vnode;
326347
if (getProperty(node, 'nodeType') !== nodeType) {
327348
if (process.env.NODE_ENV !== 'production') {
@@ -335,7 +356,9 @@ function hasCorrectNodeType<T extends Node>(vnode: VNode, node: Node, nodeType:
335356

336357
function isMatchingElement(vnode: VBaseElement, elm: Element) {
337358
const {
338-
renderer: { getProperty },
359+
owner: {
360+
renderer: { getProperty },
361+
},
339362
} = vnode;
340363
if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
341364
if (process.env.NODE_ENV !== 'production') {
@@ -369,13 +392,17 @@ function validateAttrs(vnode: VBaseElement, elm: Element): boolean {
369392
// Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
370393
for (const [attrName, attrValue] of Object.entries(attrs)) {
371394
const {
372-
renderer: { getAttribute },
395+
owner: {
396+
renderer: { getAttribute },
397+
},
373398
} = vnode;
374399
const elmAttrValue = getAttribute(elm, attrName);
375400
if (String(attrValue) !== elmAttrValue) {
376401
if (process.env.NODE_ENV !== 'production') {
377402
const {
378-
renderer: { getProperty },
403+
owner: {
404+
renderer: { getProperty },
405+
},
379406
} = vnode;
380407
logError(
381408
`Mismatch hydrating element <${getProperty(
@@ -395,7 +422,9 @@ function validateAttrs(vnode: VBaseElement, elm: Element): boolean {
395422
function validateClassAttr(vnode: VBaseElement, elm: Element): boolean {
396423
const {
397424
data: { className, classMap },
398-
renderer: { getProperty, getClassList },
425+
owner: {
426+
renderer: { getProperty, getClassList },
427+
},
399428
} = vnode;
400429

401430
let nodesAreCompatible = true;
@@ -446,7 +475,9 @@ function validateClassAttr(vnode: VBaseElement, elm: Element): boolean {
446475
function validateStyleAttr(vnode: VBaseElement, elm: Element): boolean {
447476
const {
448477
data: { style, styleDecls },
449-
renderer: { getAttribute },
478+
owner: {
479+
renderer: { getAttribute },
480+
},
450481
} = vnode;
451482
const elmStyle = getAttribute(elm, 'style') || '';
452483
let vnodeStyle;
@@ -484,7 +515,9 @@ function validateStyleAttr(vnode: VBaseElement, elm: Element): boolean {
484515
if (!nodesAreCompatible) {
485516
if (process.env.NODE_ENV !== 'production') {
486517
const {
487-
renderer: { getProperty },
518+
owner: {
519+
renderer: { getProperty },
520+
},
488521
} = vnode;
489522
logError(
490523
`Mismatch hydrating element <${getProperty(

‎packages/@lwc/engine-core/src/framework/modules/attrs.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ export function patchAttributes(oldVnode: VBaseElement | null, vnode: VBaseEleme
2525

2626
const {
2727
elm,
28-
renderer: { setAttribute, removeAttribute },
28+
owner: {
29+
renderer: { setAttribute, removeAttribute },
30+
},
2931
} = vnode;
3032
for (const key in attrs) {
3133
const cur = attrs[key];

‎packages/@lwc/engine-core/src/framework/modules/computed-class-attr.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export function patchClassAttribute(oldVnode: VBaseElement | null, vnode: VBaseE
6666
return;
6767
}
6868

69-
const classList = vnode.renderer.getClassList(elm!);
69+
const classList = vnode.owner.renderer.getClassList(elm!);
7070
const newClassMap = getMapFromClassName(newClass);
7171
const oldClassMap = getMapFromClassName(oldClass);
7272

‎packages/@lwc/engine-core/src/framework/modules/computed-style-attr.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ export function patchStyleAttribute(oldVnode: VBaseElement | null, vnode: VBaseE
2121
}
2222

2323
const {
24-
renderer: { setAttribute, removeAttribute },
24+
owner: {
25+
renderer: { setAttribute, removeAttribute },
26+
},
2527
} = vnode;
2628
if (!isString(newStyle) || newStyle === '') {
2729
removeAttribute(elm, 'style');

‎packages/@lwc/engine-core/src/framework/modules/events.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ export function applyEventListeners(vnode: VBaseElement) {
1919
}
2020

2121
const {
22-
renderer: { addEventListener },
22+
owner: {
23+
renderer: { addEventListener },
24+
},
2325
} = vnode;
2426
for (const name in on) {
2527
const handler = on[name];

‎packages/@lwc/engine-core/src/framework/modules/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export function patchProps(oldVnode: VBaseElement | null, vnode: VBaseElement) {
3030
const {
3131
elm,
3232
sel,
33-
renderer: { getProperty, setProperty },
33+
owner: {
34+
renderer: { getProperty, setProperty },
35+
},
3436
} = vnode;
3537

3638
for (const key in props) {

‎packages/@lwc/engine-core/src/framework/modules/static-class-attr.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function applyStaticClassAttribute(vnode: VBaseElement) {
1515
const {
1616
elm,
1717
data: { classMap },
18-
renderer,
18+
owner: { renderer },
1919
} = vnode;
2020

2121
if (isUndefined(classMap)) {

‎packages/@lwc/engine-core/src/framework/modules/static-style-attr.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function applyStaticStyleAttribute(vnode: VBaseElement) {
1515
const {
1616
elm,
1717
data: { styleDecls },
18-
renderer,
18+
owner: { renderer },
1919
} = vnode;
2020

2121
if (isUndefined(styleDecls)) {

0 commit comments

Comments
 (0)