How to use updateHostComponent method in Playwright Internal

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

Source: kreact-dom.js

function render(vNode, container) {
    const node = crateNode(vNode);
    container.appendChild(node);
}

function updateNode(node, nextVal) {
    Object.keys(nextVal)
        .filter(k => k !== 'children')
        .forEach(key => node[key] = nextVal[key]);
}

function updateHostComponent(vNode) {
    const { type } = vNode;
    let node = document.createElement(type);
    updateNode(node, vNode.props);
    return node;
}

function updateTextComponent(vNode) {
    return document.createTextNode(vNode);
}

function reconcileChildren(node, children) {
    if(children === void 0) {
        return;
    }
    const newChildren = Array.isArray(children) ? children : [children];
    for (let newChild of newChildren) {
        render(newChild, node);
    }
}

function crateNode(vNode) {
    let node;
    console.log(vNode);
    const { type, props={} } = vNode;
    if (typeof type === 'string') {
        node = updateHostComponent(vNode);
    } else {
        node = updateTextComponent(vNode);
    }

    reconcileChildren(node, props.children);
    return node;
}


export default { render }

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

Source: react-dom.js

/* eslint-disable import/no-anonymous-default-export */
/**
 * @description vnode 虚拟dom node 真实dom
 */
// 核心渲染函数,初次渲染 不考虑diff
function render(vnode, container) {
	// 1. vnode ===> node
	const node = createNode(vnode);
	// 2. node ===> container
	container.appendChild(node);
}

function createNode (vnode) {
	// 虚拟dom js对象 
	const {type} = vnode;
	let node;
	// 原生标签
	if(typeof type === 'string') {
		node = updateHostComponent(vnode);
	} else if (typeof type === 'function') {
		node = type.prototype.isReactComponent ?
		updateClassComponent(vnode) :
		updateFunctionComponent(vnode)
	} else {
		node = updateTextComponent(vnode);
	}
	return node;
}
// 渲染文本节点
function updateTextComponent(vnode) {
	return document.createTextNode(vnode);
}
// 渲染原生标签
function updateHostComponent(vnode) {
	const {type, props} = vnode;
	const node = document.createElement(type);
	updateNode(node, props); // 属性放上去
	reconcilChildren(node, props.children);
	return node;
}
// 渲染类组件
function updateClassComponent(vnode) {
	const {props, type} = vnode;
	const instance = new type(props);
	const vvnode = instance.render();
	return createNode(vvnode);
}
// 渲染函数组件
function updateFunctionComponent(vnode) {
	const {type, props} = vnode;
	const vvnode = type(props);
	return createNode(vvnode);
}
function updateNode (node, props) {
	Object.keys(props)
	.filter((i) => i !== 'children')
	.forEach((p) => node[p] = props[p])
}

function reconcilChildren(node, children){
	const arr = Array.isArray(children) ? children : [children];
	for(let i = 0; i< arr.length; i++) {
		render(arr[i], node);
	}
}
export default {render};

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}

Source: ReactFiberBeginWork.js

import { HostRoot, HostComponent } from './ReactWorkTags';
import { reconcileChildFibers, mountChildFibers } from './ReactChildFiber';
import { shouldSetTextContent } from './ReactDOMHostConfig';
/**
 * 创建当前fiber的子fiber
 */
export function beginWork(current, workInProgress) {
    switch (workInProgress.tag) {
        case HostRoot:
            return updateHostRoot(current, workInProgress);
        case HostComponent:
            return updateHostComponent(current, workInProgress);
        default:
            break;
    }
}
/**
 * 更新或者说挂载根节点
 * 依据什么构建fiber树？ 虚拟DOM
 * @param {*} current 老fiber
 * @param {*} workInProgress 构建中的新fiber
 */
function updateHostRoot(current, workInProgress) {
    const updateQueue = workInProgress.updateQueue;
    //获取要渲染的虚拟DOM <div key="title" id="title">title</div>
    const nextChildren = updateQueue.shared.pending.payload.element;//element 
    //处理子节点，根据老fiber和新的虚拟DOM进行对比，创建新的fiber树
    reconcileChildren(current, workInProgress, nextChildren);
    //返回第一个子fiber
    return workInProgress.child;
}
function updateHostComponent(current, workInProgress) {
    //获取 此原生组件的类型 span p
    const type = workInProgress.type;
    //新属性
    const nextProps = workInProgress.pendingProps;//props.children
    let nextChildren = nextProps.children;
    //在react对于如果一个原生组件，它只有一个儿子，并且这个儿子是一个字符串的话，有一个优化
    //不会对此儿子创建一个fiber节点，而是把它当成一个属性来处理
    let isDirectTextChild = shouldSetTextContent(type, nextProps);
    if (isDirectTextChild) {
        nextChildren = null;
    }
    //处理子节点，根据老fiber和新的虚拟DOM进行对比，创建新的fiber树
    reconcileChildren(current, workInProgress, nextChildren);
    //返回第一个子fiber
    return workInProgress.child;
}
export function reconcileChildren(current, workInProgress, nextChildren) {
    //如果current有值，说明这是一类似于更新的作品
    if (current) {
        //进行比较 新老内容，得到差异进行更新
        workInProgress.child = reconcileChildFibers(
            workInProgress,//新fiber
            current.child,//老fiber的第一个子fiber节点
            nextChildren //新的虚拟DOM
        );
    } else {
        ///初次渲染，不需要比较 ，全是新的
        workInProgress.child = mountChildFibers(
            workInProgress,//新fiber
            current && current.child,//老fiber的第一个子fiber节点
            nextChildren //新的虚拟DOM
        );
    }
}