How to use updateHostComponent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

kreact-dom.js

Source: kreact-dom.js Github

copy
1function render(vNode, container) {
2    const node = crateNode(vNode);
3    container.appendChild(node);
4}
5
6function updateNode(node, nextVal) {
7    Object.keys(nextVal)
8        .filter(k => k !== 'children')
9        .forEach(key => node[key] = nextVal[key]);
10}
11
12function updateHostComponent(vNode) {
13    const { type } = vNode;
14    let node = document.createElement(type);
15    updateNode(node, vNode.props);
16    return node;
17}
18
19function updateTextComponent(vNode) {
20    return document.createTextNode(vNode);
21}
22
23function reconcileChildren(node, children) {
24    if(children === void 0) {
25        return;
26    }
27    const newChildren = Array.isArray(children) ? children : [children];
28    for (let newChild of newChildren) {
29        render(newChild, node);
30    }
31}
32
33function crateNode(vNode) {
34    let node;
35    console.log(vNode);
36    const { type, props={} } = vNode;
37    if (typeof type === 'string') {
38        node = updateHostComponent(vNode);
39    } else {
40        node = updateTextComponent(vNode);
41    }
42
43    reconcileChildren(node, props.children);
44    return node;
45}
46
47
48export default { render }
49
50
Full Screen

react-dom.js

Source: react-dom.js Github

copy
1/* eslint-disable import/no-anonymous-default-export */
2/**
3 * @description vnode 虚拟dom node 真实dom
4 */
5// 核心渲染函数,初次渲染 不考虑diff
6function render(vnode, container) {
7	// 1. vnode ===> node
8	const node = createNode(vnode);
9	// 2. node ===> container
10	container.appendChild(node);
11}
12
13function createNode (vnode) {
14	// 虚拟dom js对象 
15	const {type} = vnode;
16	let node;
17	// 原生标签
18	if(typeof type === 'string') {
19		node = updateHostComponent(vnode);
20	} else if (typeof type === 'function') {
21		node = type.prototype.isReactComponent ?
22		updateClassComponent(vnode) :
23		updateFunctionComponent(vnode)
24	} else {
25		node = updateTextComponent(vnode);
26	}
27	return node;
28}
29// 渲染文本节点
30function updateTextComponent(vnode) {
31	return document.createTextNode(vnode);
32}
33// 渲染原生标签
34function updateHostComponent(vnode) {
35	const {type, props} = vnode;
36	const node = document.createElement(type);
37	updateNode(node, props); // 属性放上去
38	reconcilChildren(node, props.children);
39	return node;
40}
41// 渲染类组件
42function updateClassComponent(vnode) {
43	const {props, type} = vnode;
44	const instance = new type(props);
45	const vvnode = instance.render();
46	return createNode(vvnode);
47}
48// 渲染函数组件
49function updateFunctionComponent(vnode) {
50	const {type, props} = vnode;
51	const vvnode = type(props);
52	return createNode(vvnode);
53}
54function updateNode (node, props) {
55	Object.keys(props)
56	.filter((i) => i !== 'children')
57	.forEach((p) => node[p] = props[p])
58}
59
60function reconcilChildren(node, children){
61	const arr = Array.isArray(children) ? children : [children];
62	for(let i = 0; i< arr.length; i++) {
63		render(arr[i], node);
64	}
65}
66export default {render};
67
Full Screen

ReactFiberBeginWork.js

Source: ReactFiberBeginWork.js Github

copy
1
2import { HostRoot, HostComponent } from './ReactWorkTags';
3import { reconcileChildFibers, mountChildFibers } from './ReactChildFiber';
4import { shouldSetTextContent } from './ReactDOMHostConfig';
5/**
6 * 创建当前fiber的子fiber
7 */
8export function beginWork(current, workInProgress) {
9    switch (workInProgress.tag) {
10        case HostRoot:
11            return updateHostRoot(current, workInProgress);
12        case HostComponent:
13            return updateHostComponent(current, workInProgress);
14        default:
15            break;
16    }
17}
18/**
19 * 更新或者说挂载根节点
20 * 依据什么构建fiber树? 虚拟DOM
21 * @param {*} current 老fiber
22 * @param {*} workInProgress 构建中的新fiber
23 */
24function updateHostRoot(current, workInProgress) {
25    const updateQueue = workInProgress.updateQueue;
26    //获取要渲染的虚拟DOM <div key="title" id="title">title</div>
27    const nextChildren = updateQueue.shared.pending.payload.element;//element 
28    //处理子节点,根据老fiber和新的虚拟DOM进行对比,创建新的fiber树
29    reconcileChildren(current, workInProgress, nextChildren);
30    //返回第一个子fiber
31    return workInProgress.child;
32}
33function updateHostComponent(current, workInProgress) {
34    //获取 此原生组件的类型 span p
35    const type = workInProgress.type;
36    //新属性
37    const nextProps = workInProgress.pendingProps;//props.children
38    let nextChildren = nextProps.children;
39    //在react对于如果一个原生组件,它只有一个儿子,并且这个儿子是一个字符串的话,有一个优化
40    //不会对此儿子创建一个fiber节点,而是把它当成一个属性来处理
41    let isDirectTextChild = shouldSetTextContent(type, nextProps);
42    if (isDirectTextChild) {
43        nextChildren = null;
44    }
45    //处理子节点,根据老fiber和新的虚拟DOM进行对比,创建新的fiber树
46    reconcileChildren(current, workInProgress, nextChildren);
47    //返回第一个子fiber
48    return workInProgress.child;
49}
50export function reconcileChildren(current, workInProgress, nextChildren) {
51    //如果current有值,说明这是一类似于更新的作品
52    if (current) {
53        //进行比较 新老内容,得到差异进行更新
54        workInProgress.child = reconcileChildFibers(
55            workInProgress,//新fiber
56            current.child,//老fiber的第一个子fiber节点
57            nextChildren //新的虚拟DOM
58        );
59    } else {
60        ///初次渲染,不需要比较 ,全是新的
61        workInProgress.child = mountChildFibers(
62            workInProgress,//新fiber
63            current && current.child,//老fiber的第一个子fiber节点
64            nextChildren //新的虚拟DOM
65        );
66    }
67}
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)