yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Match-id-35f2c7376e69200fc10283c4e0ec4bd70de76f06

This commit is contained in:
* 2022-02-21 14:19:08 +08:00 committed by *
parent 042f655cca 2dbd2903b7
commit 52d60d64c4
24 changed files with 236 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
libs/horizon/src/dom/DOMOperator.ts
View File

@ -110,7 +110,7 @@ export function getPropChangeList(
type: string, type: string,
lastRawProps: Props, lastRawProps: Props,
nextRawProps: Props, nextRawProps: Props,
): Array<any> { ): Map<string, any> {
// 校验两个对象的不同 // 校验两个对象的不同
validateProps(type, nextRawProps); validateProps(type, nextRawProps);
@ -123,11 +123,11 @@ export function getPropChangeList(
} }
export function isTextChild(type: string, props: Props): boolean { export function isTextChild(type: string, props: Props): boolean {
const typeArray = ['textarea', 'option', 'noscript']; if (type === 'textarea' || type === 'option' || type === 'noscript') {
const typeOfPropsChild = ['string', 'number'];
if (typeArray.indexOf(type) >= 0) {
return true; return true;
} else if (typeOfPropsChild.indexOf(typeof props.children) >= 0) { }
const childType = typeof props.children;
if (childType === 'string' || childType === 'number') {
return true; return true;
} else { } else {
return ( return (

56
libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts
View File

@ -52,15 +52,10 @@ export function setDomProps(
// 更新 DOM 属性 // 更新 DOM 属性
export function updateDomProps( export function updateDomProps(
dom: Element, dom: Element,
changeList: Array<any>, changeList: Map<string, any>,
isNativeTag: boolean, isNativeTag: boolean,
): void { ): void {
const listLength = changeList.length; for(const [propName, propVal] of changeList) {
let propName;
let propVal;
for (let i = 0; i < listLength; i++) {
propName = changeList[i].propName;
propVal = changeList[i].propVal;
updateOneProp(dom, propName, isNativeTag, propVal); updateOneProp(dom, propName, isNativeTag, propVal);
} }
} }
@ -69,10 +64,9 @@ export function updateDomProps(
export function compareProps( export function compareProps(
oldProps: Object, oldProps: Object,
newProps: Object, newProps: Object,
): Array<any> { ): Map<string, any> {
let updatesForStyle = {}; let updatesForStyle = {};
const toBeDeletedProps: Array<any> = []; const toUpdateProps = new Map();
const toBeUpdatedProps: Array<any> = [];
const keysOfOldProps = Object.keys(oldProps); const keysOfOldProps = Object.keys(oldProps);
const keysOfNewProps = Object.keys(newProps); const keysOfNewProps = Object.keys(newProps);
@ -104,17 +98,11 @@ export function compareProps(
continue; continue;
} else if (isEventProp(propName)) { } else if (isEventProp(propName)) {
if (!allDelegatedHorizonEvents.has(propName)) { if (!allDelegatedHorizonEvents.has(propName)) {
toBeDeletedProps.push({ toUpdateProps.set(propName, null);
propName,
propVal: null,
});
} }
} else { } else {
// 其它属性都要加入到删除队列里面，等待删除 // 其它属性都要加入到删除队列里面，等待删除
toBeDeletedProps.push({ toUpdateProps.set(propName, null);
propName,
propVal: null,
});
} }
} }
@ -156,10 +144,7 @@ export function compareProps(
} }
} else { // 之前未设置 style 属性或者设置了空值 } else { // 之前未设置 style 属性或者设置了空值
if (Object.keys(updatesForStyle).length === 0) { if (Object.keys(updatesForStyle).length === 0) {
toBeUpdatedProps.push({ toUpdateProps.set(propName, null);
propName,
propVal: null,
});
} }
updatesForStyle = newPropValue; updatesForStyle = newPropValue;
} }
@ -168,41 +153,26 @@ export function compareProps(
oldHTML = oldPropValue ? oldPropValue.__html : undefined; oldHTML = oldPropValue ? oldPropValue.__html : undefined;
if (newHTML != null) { if (newHTML != null) {
if (oldHTML !== newHTML) { if (oldHTML !== newHTML) {
toBeUpdatedProps.push({ toUpdateProps.set(propName, newPropValue);
propName,
propVal: newPropValue,
});
} }
} }
} else if (propName === 'children') { } else if (propName === 'children') {
if (typeof newPropValue === 'string' || typeof newPropValue === 'number') { if (typeof newPropValue === 'string' || typeof newPropValue === 'number') {
toBeUpdatedProps.push({ toUpdateProps.set(propName, String(newPropValue));
propName,
propVal: String(newPropValue),
});
} }
} else if (isEventProp(propName)) { } else if (isEventProp(propName)) {
if (!allDelegatedHorizonEvents.has(propName)) { if (!allDelegatedHorizonEvents.has(propName)) {
toBeUpdatedProps.push({ toUpdateProps.set(propName, newPropValue);
propName,
propVal: newPropValue,
});
} }
} else { } else {
toBeUpdatedProps.push({ toUpdateProps.set(propName, newPropValue);
propName,
propVal: newPropValue,
});
} }
} }
// 处理style // 处理style
if (Object.keys(updatesForStyle).length > 0) { if (Object.keys(updatesForStyle).length > 0) {
toBeUpdatedProps.push({ toUpdateProps.set('style', updatesForStyle);
propName: 'style',
propVal: updatesForStyle,
});
} }
return [...toBeDeletedProps, ...toBeUpdatedProps]; return toUpdateProps;
} }

21
libs/horizon/src/renderer/TreeBuilder.ts
View File

@ -2,7 +2,7 @@ import type { VNode } from './Types';
import { callRenderQueueImmediate, pushRenderCallback } from './taskExecutor/RenderQueue'; import { callRenderQueueImmediate, pushRenderCallback } from './taskExecutor/RenderQueue';
import { updateVNode } from './vnode/VNodeCreator'; import { updateVNode } from './vnode/VNodeCreator';
import { TreeRoot } from './vnode/VNodeTags'; import { TreeRoot, DomComponent, DomPortal } from './vnode/VNodeTags';
import { FlagUtils, InitFlag, Interrupted } from './vnode/VNodeFlags'; import { FlagUtils, InitFlag, Interrupted } from './vnode/VNodeFlags';
import { captureVNode } from './render/BaseComponent'; import { captureVNode } from './render/BaseComponent';
import { checkLoopingUpdateLimit, submitToRender } from './submit/Submit'; import { checkLoopingUpdateLimit, submitToRender } from './submit/Submit';
@ -18,7 +18,6 @@ import {
setProcessingClassVNode, setProcessingClassVNode,
setStartVNode setStartVNode
} from './GlobalVar'; } from './GlobalVar';
import { findDomParent } from './vnode/VNodeUtils';
import { import {
ByAsync, ByAsync,
BySync, BySync,
@ -223,13 +222,21 @@ function buildVNodeTree(treeRoot: VNode) {
if (startVNode.tag !== TreeRoot) { // 不是根节点 if (startVNode.tag !== TreeRoot) { // 不是根节点
// 设置namespace，用于createElement // 设置namespace，用于createElement
const parentObj = findDomParent(startVNode); let parent = startVNode.parent;
while (parent !== null) {
const tag = parent.tag;
if (tag === DomComponent) {
break;
} else if (tag === TreeRoot || tag === DomPortal) {
break;
}
parent = parent.parent;
}
// 当在componentWillUnmount中调用setState，parent可能是null，因为startVNode会被clear // 当在componentWillUnmount中调用setState，parent可能是null，因为startVNode会被clear
if (parentObj !== null) { if (parent !== null) {
const domParent = parentObj.parent; resetNamespaceCtx(parent);
resetNamespaceCtx(domParent); setNamespaceCtx(parent, parent.outerDom);
setNamespaceCtx(domParent, domParent.outerDom);
} }
// 恢复父节点的context // 恢复父节点的context

5
libs/horizon/src/renderer/components/BaseClassComponent.ts
View File

@ -4,7 +4,10 @@
class Component<P,S,C> { class Component<P,S,C> {
props: P; props: P;
context: C; context: C;
state: S; state: S | null;
refs: any;
setState: any;
forceUpdate: any;
constructor(props: P, context: C) { constructor(props: P, context: C) {
this.props = props; this.props = props;

34
libs/horizon/src/renderer/diff/nodeDiffComparator.ts
View File

@ -2,7 +2,7 @@ import type { VNode } from '../Types';
import { FlagUtils } from '../vnode/VNodeFlags'; import { FlagUtils } from '../vnode/VNodeFlags';
import { TYPE_COMMON_ELEMENT, TYPE_FRAGMENT, TYPE_PORTAL } from '../../external/JSXElementType'; import { TYPE_COMMON_ELEMENT, TYPE_FRAGMENT, TYPE_PORTAL } from '../../external/JSXElementType';
import { DomText, DomPortal, Fragment, DomComponent } from '../vnode/VNodeTags'; import { DomText, DomPortal, Fragment, DomComponent } from '../vnode/VNodeTags';
import {updateVNode, createVNodeFromElement, updateVNodePath, createFragmentVNode, createPortalVNode, createDomTextVNode} from '../vnode/VNodeCreator'; import {updateVNode, createVNodeFromElement, createFragmentVNode, createPortalVNode, createDomTextVNode} from '../vnode/VNodeCreator';
import { import {
isSameType, isSameType,
getIteratorFn, getIteratorFn,
@ -209,11 +209,6 @@ function getOldNodeFromMap(nodeMap: Map<string | number, VNode>, newIdx: number,
return null; return null;
} }
function setCIndex(vNode: VNode, idx: number) {
vNode.cIndex = idx;
updateVNodePath(vNode);
}
// diff数组类型的节点，核心算法 // diff数组类型的节点，核心算法
function diffArrayNodesHandler( function diffArrayNodesHandler(
parentNode: VNode, parentNode: VNode,
@ -274,7 +269,8 @@ function diffArrayNodesHandler(
theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing); theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing);
newNode.eIndex = leftIdx; newNode.eIndex = leftIdx;
setCIndex(newNode, leftIdx); newNode.cIndex = leftIdx;
newNode.path = newNode.parent.path + newNode.cIndex;
appendNode(newNode); appendNode(newNode);
oldNode = nextOldNode; oldNode = nextOldNode;
} }
@ -347,11 +343,23 @@ function diffArrayNodesHandler(
// 4. 新节点还有一部分，但是老节点已经没有了 // 4. 新节点还有一部分，但是老节点已经没有了
if (oldNode === null) { if (oldNode === null) {
let isDirectAdd = false;
// TODO: 是否可以扩大至非dom类型节点
// 如果dom节点在上次添加前没有节点，说明本次添加时，可以直接添加到最后，不需要通过 getSiblingDom 函数找到 before 节点
if (parentNode.tag === DomComponent && parentNode.oldProps?.children?.length === 0 && rightIdx - leftIdx === newChildren.length) {
isDirectAdd = true;
}
for (; leftIdx < rightIdx; leftIdx++) { for (; leftIdx < rightIdx; leftIdx++) {
newNode = getNewNode(parentNode, newChildren[leftIdx], null); newNode = getNewNode(parentNode, newChildren[leftIdx], null);
if (newNode !== null) { if (newNode !== null) {
theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing); if (isComparing) {
FlagUtils.setAddition(newNode);
}
if (isDirectAdd) {
FlagUtils.markDirectAddition(newNode);
}
newNode.eIndex = leftIdx; newNode.eIndex = leftIdx;
appendNode(newNode); appendNode(newNode);
} }
@ -460,7 +468,7 @@ function setVNodesCIndex(startChild: VNode, startIdx: number) {
while (node !== null) { while (node !== null) {
node.cIndex = idx; node.cIndex = idx;
updateVNodePath(node); node.path = node.parent.path + node.cIndex;
node = node.next; node = node.next;
idx++; idx++;
} }
@ -471,7 +479,7 @@ function diffIteratorNodesHandler(
parentNode: VNode, parentNode: VNode,
firstChild: VNode | null, firstChild: VNode | null,
newChildrenIterable: Iterable<any>, newChildrenIterable: Iterable<any>,
isComparing: boolean = true isComparing: boolean
): VNode | null { ): VNode | null {
const iteratorFn = getIteratorFn(newChildrenIterable); const iteratorFn = getIteratorFn(newChildrenIterable);
const iteratorObj = iteratorFn.call(newChildrenIterable); const iteratorObj = iteratorFn.call(newChildrenIterable);
@ -511,7 +519,7 @@ function diffStringNodeHandler(
} }
newTextNode.parent = parentNode; newTextNode.parent = parentNode;
newTextNode.cIndex = 0; newTextNode.cIndex = 0;
updateVNodePath(newTextNode); newTextNode.path = newTextNode.parent.path + newTextNode.cIndex;
return newTextNode; return newTextNode;
} }
@ -589,7 +597,7 @@ function diffObjectNodeHandler(
resultNode.parent = parentNode; resultNode.parent = parentNode;
resultNode.cIndex = 0; resultNode.cIndex = 0;
updateVNodePath(resultNode); resultNode.path = resultNode.parent.path + resultNode.cIndex;
if (startDelVNode) { if (startDelVNode) {
deleteVNodes(parentNode, startDelVNode); deleteVNodes(parentNode, startDelVNode);
} }
@ -604,7 +612,7 @@ export function createChildrenByDiff(
parentNode: VNode, parentNode: VNode,
firstChild: VNode | null, firstChild: VNode | null,
newChild: any, newChild: any,
isComparing: boolean = true isComparing: boolean
): VNode | null { ): VNode | null {
const isFragment = isNoKeyFragment(newChild); const isFragment = isNoKeyFragment(newChild);
newChild = isFragment ? newChild.props.children : newChild; newChild = isFragment ? newChild.props.children : newChild;

6
libs/horizon/src/renderer/render/BaseComponent.ts
View File

@ -11,7 +11,6 @@ import {
} from '../vnode/VNodeTags'; } from '../vnode/VNodeTags';
import { getContextChangeCtx, setContextCtx, setNamespaceCtx } from '../ContextSaver'; import { getContextChangeCtx, setContextCtx, setNamespaceCtx } from '../ContextSaver';
import { FlagUtils } from '../vnode/VNodeFlags'; import { FlagUtils } from '../vnode/VNodeFlags';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import componentRenders from './index'; import componentRenders from './index';
@ -64,11 +63,6 @@ export function captureVNode(processing: VNode): VNode | null {
return component.captureRender(processing, shouldUpdate); return component.captureRender(processing, shouldUpdate);
} }
// 创建孩子节点
export function createVNodeChildren(processing: VNode, nextChildren: any) {
return createChildrenByDiff(processing, processing.child, nextChildren, !processing.isCreated);
}
export function markRef(processing: VNode) { export function markRef(processing: VNode) {
const ref = processing.ref; const ref = processing.ref;
if ((processing.isCreated && ref !== null) || (!processing.isCreated && processing.oldRef !== ref)) { if ((processing.isCreated && ref !== null) || (!processing.isCreated && processing.oldRef !== ref)) {

5
libs/horizon/src/renderer/render/ClassComponent.ts
View File

@ -21,7 +21,7 @@ import {
markGetSnapshotBeforeUpdate, markGetSnapshotBeforeUpdate,
} from './class/ClassLifeCycleProcessor'; } from './class/ClassLifeCycleProcessor';
import { FlagUtils, DidCapture } from '../vnode/VNodeFlags'; import { FlagUtils, DidCapture } from '../vnode/VNodeFlags';
import { createVNodeChildren, markRef } from './BaseComponent'; import { markRef } from './BaseComponent';
import { import {
createUpdateArray, createUpdateArray,
processUpdates, processUpdates,
@ -29,6 +29,7 @@ import {
import { getContextChangeCtx, setContextChangeCtx } from '../ContextSaver'; import { getContextChangeCtx, setContextChangeCtx } from '../ContextSaver';
import { setProcessingClassVNode } from '../GlobalVar'; import { setProcessingClassVNode } from '../GlobalVar';
import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator'; import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 获取当前节点的context // 获取当前节点的context
export function getCurrentContext(clazz, processing: VNode) { export function getCurrentContext(clazz, processing: VNode) {
@ -80,7 +81,7 @@ function createChildren(clazz: any, processing: VNode) {
? null ? null
: inst.render(); : inst.render();
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

4
libs/horizon/src/renderer/render/ClsOrFunComponent.ts
View File

@ -5,7 +5,7 @@ import {resetDepContexts} from '../components/context/Context';
import {getOldContext} from '../components/context/CompatibleContext'; import {getOldContext} from '../components/context/CompatibleContext';
import {FlagUtils} from '../vnode/VNodeFlags'; import {FlagUtils} from '../vnode/VNodeFlags';
import {exeFunctionHook} from '../hooks/HookMain'; import {exeFunctionHook} from '../hooks/HookMain';
import {createVNodeChildren} from './BaseComponent'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
function captureIndeterminateComponent( function captureIndeterminateComponent(
processing: VNode, processing: VNode,
@ -25,7 +25,7 @@ function captureIndeterminateComponent(
const newElements = exeFunctionHook(funcComp, props, context, processing); const newElements = exeFunctionHook(funcComp, props, context, processing);
processing.tag = FunctionComponent; processing.tag = FunctionComponent;
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

4
libs/horizon/src/renderer/render/ContextConsumer.ts
View File

@ -1,7 +1,7 @@
import type {VNode, ContextType} from '../Types'; import type {VNode, ContextType} from '../Types';
import {resetDepContexts, getNewContext} from '../components/context/Context'; import {resetDepContexts, getNewContext} from '../components/context/Context';
import {createVNodeChildren} from './BaseComponent'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
function captureContextConsumer(processing: VNode) { function captureContextConsumer(processing: VNode) {
const context: ContextType<any> = processing.type; const context: ContextType<any> = processing.type;
@ -12,7 +12,7 @@ function captureContextConsumer(processing: VNode) {
const contextVal = getNewContext(processing, context); const contextVal = getNewContext(processing, context);
const newChildren = renderFunc(contextVal); const newChildren = renderFunc(contextVal);
processing.child = createVNodeChildren(processing, newChildren); processing.child = createChildrenByDiff(processing, processing.child, newChildren, !processing.isCreated);
return processing.child; return processing.child;
} }

22
libs/horizon/src/renderer/render/ContextProvider.ts
View File

@ -1,18 +1,18 @@
import type {VNode, ContextType, ProviderType} from '../Types'; import type { VNode, ContextType, ProviderType } from '../Types';
import {createVNodeChildren} from './BaseComponent'; import { isSame } from '../utils/compare';
import {isSame} from '../utils/compare'; import { ClassComponent, ContextProvider } from '../vnode/VNodeTags';
import {ClassComponent, ContextProvider} from '../vnode/VNodeTags'; import { pushForceUpdate } from '../UpdateHandler';
import {pushForceUpdate} from '../UpdateHandler';
import { import {
getContextChangeCtx, getContextChangeCtx,
resetContextCtx, resetContextCtx,
setContextCtx, setContextCtx,
} from '../ContextSaver'; } from '../ContextSaver';
import {getFirstChild, travelVNodeTree} from '../vnode/VNodeUtils'; import { travelVNodeTree } from '../vnode/VNodeUtils';
import {launchUpdateFromVNode} from '../TreeBuilder'; import { launchUpdateFromVNode } from '../TreeBuilder';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import {setParentsChildShouldUpdate} from '../vnode/VNodeShouldUpdate'; import { setParentsChildShouldUpdate } from '../vnode/VNodeShouldUpdate';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 从依赖中找到匹配context的VNode // 从依赖中找到匹配context的VNode
function matchDependencies(depContexts, context, vNode): boolean { function matchDependencies(depContexts, context, vNode): boolean {
@ -56,7 +56,7 @@ function handleContextChange(processing: VNode, context: ContextType<any>): void
}, node => }, node =>
// 如果这是匹配的provider，则不要更深入地扫描 // 如果这是匹配的provider，则不要更深入地扫描
node.tag === ContextProvider && node.type === processing.type node.tag === ContextProvider && node.type === processing.type
, processing); , processing, null);
// 找到了依赖context的子节点，触发一次更新 // 找到了依赖context的子节点，触发一次更新
if (isMatch) { if (isMatch) {
@ -92,7 +92,7 @@ function captureContextProvider(processing: VNode): VNode | null {
} }
const newElements = newProps.children; const newElements = newProps.children;
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

9
libs/horizon/src/renderer/render/DomComponent.ts
View File

@ -13,9 +13,10 @@ import {
isTextChild, isTextChild,
} from '../../dom/DOMOperator'; } from '../../dom/DOMOperator';
import { FlagUtils } from '../vnode/VNodeFlags'; import { FlagUtils } from '../vnode/VNodeFlags';
import { createVNodeChildren, markRef } from './BaseComponent'; import { markRef } from './BaseComponent';
import { DomComponent, DomPortal, DomText } from '../vnode/VNodeTags'; import { DomComponent, DomPortal, DomText } from '../vnode/VNodeTags';
import { travelVNodeTree } from '../vnode/VNodeUtils'; import { travelVNodeTree } from '../vnode/VNodeUtils';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
function updateDom( function updateDom(
processing: VNode, processing: VNode,
@ -44,7 +45,7 @@ function updateDom(
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} else { } else {
// 其它的类型，数据有变化才标记更新 // 其它的类型，数据有变化才标记更新
if (changeList.length) { if (changeList.size) {
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} }
} }
@ -88,7 +89,7 @@ export function bubbleRender(processing: VNode) {
}, node => }, node =>
// 已经append到父节点，或者是DomPortal都不需要处理child了 // 已经append到父节点，或者是DomPortal都不需要处理child了
node.tag === DomComponent || node.tag === DomText || node.tag === DomPortal node.tag === DomComponent || node.tag === DomText || node.tag === DomPortal
, processing); , processing, null);
} }
processing.realNode = dom; processing.realNode = dom;
@ -123,7 +124,7 @@ function captureDomComponent(processing: VNode): VNode | null {
} }
markRef(processing); markRef(processing);
processing.child = createVNodeChildren(processing, nextChildren); processing.child = createChildrenByDiff(processing, processing.child, nextChildren, !processing.isCreated);
return processing.child; return processing.child;
} }

5
libs/horizon/src/renderer/render/DomPortal.ts
View File

@ -1,7 +1,6 @@
import type { VNode } from '../Types'; import type { VNode } from '../Types';
import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver'; import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver';
import { createChildrenByDiff } from '../diff/nodeDiffComparator'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
import { createVNodeChildren } from './BaseComponent';
import { prePortal } from '../../dom/DOMOperator'; import { prePortal } from '../../dom/DOMOperator';
export function bubbleRender(processing: VNode) { export function bubbleRender(processing: VNode) {
@ -17,9 +16,9 @@ function capturePortalComponent(processing: VNode) {
const newElements = processing.props; const newElements = processing.props;
if (processing.isCreated) { if (processing.isCreated) {
processing.child = createChildrenByDiff(processing, null, newElements); processing.child = createChildrenByDiff(processing, null, newElements, true);
} else { } else {
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
} }
return processing.child; return processing.child;
} }

4
libs/horizon/src/renderer/render/Fragment.ts
View File

@ -1,11 +1,11 @@
import type {VNode} from '../Types'; import type {VNode} from '../Types';
import {createVNodeChildren} from './BaseComponent'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
export function bubbleRender() {} export function bubbleRender() {}
function captureFragment(processing: VNode) { function captureFragment(processing: VNode) {
const newElement = processing.props; const newElement = processing.props;
processing.child = createVNodeChildren(processing, newElement); processing.child = createChildrenByDiff(processing, processing.child, newElement, !processing.isCreated);
return processing.child; return processing.child;
} }

4
libs/horizon/src/renderer/render/FunctionComponent.ts
View File

@ -4,11 +4,11 @@ import {mergeDefaultProps} from './LazyComponent';
import {getOldContext} from '../components/context/CompatibleContext'; import {getOldContext} from '../components/context/CompatibleContext';
import {resetDepContexts} from '../components/context/Context'; import {resetDepContexts} from '../components/context/Context';
import {exeFunctionHook} from '../hooks/HookMain'; import {exeFunctionHook} from '../hooks/HookMain';
import {createVNodeChildren} from './BaseComponent';
import {ForwardRef} from '../vnode/VNodeTags'; import {ForwardRef} from '../vnode/VNodeTags';
import {FlagUtils, Update} from '../vnode/VNodeFlags'; import {FlagUtils, Update} from '../vnode/VNodeFlags';
import {getContextChangeCtx} from '../ContextSaver'; import {getContextChangeCtx} from '../ContextSaver';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 在useState, useReducer的时候，会触发state变化 // 在useState, useReducer的时候，会触发state变化
let stateChange = false; let stateChange = false;
@ -79,7 +79,7 @@ export function captureFunctionComponent(
return onlyUpdateChildVNodes(processing); return onlyUpdateChildVNodes(processing);
} }
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

6
libs/horizon/src/renderer/render/MemoComponent.ts
View File

@ -1,7 +1,7 @@
import type {VNode} from '../Types'; import type {VNode} from '../Types';
import {mergeDefaultProps} from './LazyComponent'; import {mergeDefaultProps} from './LazyComponent';
import {updateVNode, onlyUpdateChildVNodes, updateVNodePath, createFragmentVNode, createUndeterminedVNode} from '../vnode/VNodeCreator'; import {updateVNode, onlyUpdateChildVNodes, createFragmentVNode, createUndeterminedVNode} from '../vnode/VNodeCreator';
import {shallowCompare} from '../utils/compare'; import {shallowCompare} from '../utils/compare';
import { import {
TYPE_FRAGMENT, TYPE_FRAGMENT,
@ -29,7 +29,7 @@ export function captureMemoComponent(
} }
newChild.parent = processing; newChild.parent = processing;
newChild.ref = processing.ref; newChild.ref = processing.ref;
updateVNodePath(newChild); newChild.path = newChild.parent.path + newChild.cIndex;
processing.child = newChild; processing.child = newChild;
return newChild; return newChild;
@ -48,7 +48,7 @@ export function captureMemoComponent(
const newChild = updateVNode(firstChild, newProps); const newChild = updateVNode(firstChild, newProps);
newChild.parent = processing; newChild.parent = processing;
newChild.cIndex = 0; newChild.cIndex = 0;
updateVNodePath(newChild); newChild.path = newChild.parent.path + newChild.cIndex;
newChild.ref = processing.ref; newChild.ref = processing.ref;
processing.child = newChild; processing.child = newChild;

6
libs/horizon/src/renderer/render/SuspenseComponent.ts
View File

@ -1,7 +1,7 @@
import type {VNode, PromiseType} from '../Types'; import type {VNode, PromiseType} from '../Types';
import {FlagUtils, Interrupted} from '../vnode/VNodeFlags'; import {FlagUtils, Interrupted} from '../vnode/VNodeFlags';
import {onlyUpdateChildVNodes, updateVNode, updateVNodePath, createFragmentVNode} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes, updateVNode, createFragmentVNode} from '../vnode/VNodeCreator';
import { import {
ClassComponent, ClassComponent,
IncompleteClassComponent, IncompleteClassComponent,
@ -44,7 +44,7 @@ function createFallback(processing: VNode, fallbackChildren) {
fallbackFragment.parent = processing; fallbackFragment.parent = processing;
fallbackFragment.eIndex = 1; fallbackFragment.eIndex = 1;
fallbackFragment.cIndex = 1; fallbackFragment.cIndex = 1;
updateVNodePath(fallbackFragment); fallbackFragment.path = fallbackFragment.parent.path + fallbackFragment.cIndex;
processing.suspenseChildStatus = SuspenseChildStatus.ShowFallback; processing.suspenseChildStatus = SuspenseChildStatus.ShowFallback;
return fallbackFragment; return fallbackFragment;
@ -76,7 +76,7 @@ function createSuspenseChildren(processing: VNode, newChildren) {
childFragment.parent = processing; childFragment.parent = processing;
childFragment.cIndex = 0; childFragment.cIndex = 0;
updateVNodePath(childFragment); childFragment.path = childFragment.parent.path + childFragment.cIndex;
processing.child = childFragment; processing.child = childFragment;
processing.promiseResolve = false; processing.promiseResolve = false;
return processing.child; return processing.child;

4
libs/horizon/src/renderer/render/TreeRoot.ts
View File

@ -1,10 +1,10 @@
import type {VNode} from '../Types'; import type {VNode} from '../Types';
import {throwIfTrue} from '../utils/throwIfTrue'; import {throwIfTrue} from '../utils/throwIfTrue';
import {processUpdates} from '../UpdateHandler'; import {processUpdates} from '../UpdateHandler';
import {createVNodeChildren} from './BaseComponent';
import {resetNamespaceCtx, setNamespaceCtx} from '../ContextSaver'; import {resetNamespaceCtx, setNamespaceCtx} from '../ContextSaver';
import {resetOldCtx} from '../components/context/CompatibleContext'; import {resetOldCtx} from '../components/context/CompatibleContext';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
export function bubbleRender(processing: VNode) { export function bubbleRender(processing: VNode) {
resetNamespaceCtx(processing); resetNamespaceCtx(processing);
@ -33,7 +33,7 @@ function updateTreeRoot(processing) {
if (newElement === oldElement) { if (newElement === oldElement) {
return onlyUpdateChildVNodes(processing); return onlyUpdateChildVNodes(processing);
} }
processing.child = createVNodeChildren(processing, newElement); processing.child = createChildrenByDiff(processing, processing.child, newElement, !processing.isCreated);
return processing.child; return processing.child;
} }

22
libs/horizon/src/renderer/render/class/ClassLifeCycleProcessor.ts
View File

@ -18,7 +18,7 @@ export function callDerivedStateFromProps(
getDerivedStateFromProps: (props: object, state: object) => object, getDerivedStateFromProps: (props: object, state: object) => object,
nextProps: object, nextProps: object,
) { ) {
if (typeof getDerivedStateFromProps === 'function') { if (getDerivedStateFromProps) {
const oldState = processing.state; const oldState = processing.state;
// 调用class组件的getDerivedStateFromProps函数 // 调用class组件的getDerivedStateFromProps函数
@ -57,7 +57,7 @@ export function callShouldComponentUpdate(
) { ) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.shouldComponentUpdate === 'function') { if (inst.shouldComponentUpdate) {
return inst.shouldComponentUpdate(newProps, newState, newContext); return inst.shouldComponentUpdate(newProps, newState, newContext);
} }
@ -91,10 +91,10 @@ export function callConstructor(processing: VNode, ctor: any, props: any): any {
export function callComponentWillMount(processing, inst, newProps?) { export function callComponentWillMount(processing, inst, newProps?) {
const oldState = inst.state; const oldState = inst.state;
if (typeof inst.componentWillMount === 'function') { if (inst.componentWillMount) {
inst.componentWillMount(); inst.componentWillMount();
} }
if (typeof inst.UNSAFE_componentWillMount === 'function') { if (inst.UNSAFE_componentWillMount) {
inst.UNSAFE_componentWillMount(); inst.UNSAFE_componentWillMount();
} }
@ -108,21 +108,21 @@ export function callComponentWillMount(processing, inst, newProps?) {
} }
export function callComponentWillUpdate(inst, newProps, newState, nextContext) { export function callComponentWillUpdate(inst, newProps, newState, nextContext) {
if (typeof inst.componentWillUpdate === 'function') { if (inst.componentWillUpdate) {
inst.componentWillUpdate(newProps, newState, nextContext); inst.componentWillUpdate(newProps, newState, nextContext);
} }
if (typeof inst.UNSAFE_componentWillUpdate === 'function') { if (inst.UNSAFE_componentWillUpdate) {
inst.UNSAFE_componentWillUpdate(newProps, newState, nextContext); inst.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
} }
} }
export function callComponentWillReceiveProps(inst, newProps: object, newContext: object) { export function callComponentWillReceiveProps(inst, newProps: object, newContext: object) {
const oldState = inst.state; const oldState = inst.state;
if (typeof inst.componentWillReceiveProps === 'function') { if (inst.componentWillReceiveProps) {
inst.componentWillReceiveProps(newProps, newContext); inst.componentWillReceiveProps(newProps, newContext);
} }
if (typeof inst.UNSAFE_componentWillReceiveProps === 'function') { if (inst.UNSAFE_componentWillReceiveProps) {
inst.UNSAFE_componentWillReceiveProps(newProps, newContext); inst.UNSAFE_componentWillReceiveProps(newProps, newContext);
} }
if (inst.state !== oldState) { if (inst.state !== oldState) {
@ -132,21 +132,21 @@ export function callComponentWillReceiveProps(inst, newProps: object, newContext
export function markComponentDidMount(processing: VNode) { export function markComponentDidMount(processing: VNode) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.componentDidMount === 'function') { if (inst.componentDidMount) {
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} }
} }
export function markGetSnapshotBeforeUpdate(processing: VNode) { export function markGetSnapshotBeforeUpdate(processing: VNode) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.getSnapshotBeforeUpdate === 'function') { if (inst.getSnapshotBeforeUpdate) {
FlagUtils.markSnapshot(processing); FlagUtils.markSnapshot(processing);
} }
} }
export function markComponentDidUpdate(processing: VNode) { export function markComponentDidUpdate(processing: VNode) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.componentDidUpdate === 'function') { if (inst.componentDidUpdate) {
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} }
} }

67
libs/horizon/src/renderer/submit/LifeCycleHandler.ts
View File

@ -17,7 +17,7 @@ import {
SuspenseComponent, SuspenseComponent,
MemoComponent, MemoComponent,
} from '../vnode/VNodeTags'; } from '../vnode/VNodeTags';
import { FlagUtils, ResetText, Clear, Update } from '../vnode/VNodeFlags'; import { FlagUtils, ResetText, Clear, Update, DirectAddition } from '../vnode/VNodeFlags';
import { mergeDefaultProps } from '../render/LazyComponent'; import { mergeDefaultProps } from '../render/LazyComponent';
import { import {
submitDomUpdate, submitDomUpdate,
@ -39,7 +39,7 @@ import {
travelVNodeTree, travelVNodeTree,
clearVNode, clearVNode,
isDomVNode, isDomVNode,
findDomParent, getSiblingDom, getSiblingDom,
} from '../vnode/VNodeUtils'; } from '../vnode/VNodeUtils';
import { shouldAutoFocus } from '../../dom/utils/Common'; import { shouldAutoFocus } from '../../dom/utils/Common';
@ -147,7 +147,7 @@ function hideOrUnhideAllChildren(vNode, isHidden) {
unHideDom(node.tag, instance, node.props); unHideDom(node.tag, instance, node.props);
} }
} }
}); }, null, vNode, null);
} }
function attachRef(vNode: VNode) { function attachRef(vNode: VNode) {
@ -216,18 +216,36 @@ function unmountNestedVNodes(vNode: VNode): void {
}, node => }, node =>
// 如果是DomPortal，不需要遍历child // 如果是DomPortal，不需要遍历child
node.tag === DomPortal node.tag === DomPortal
); , vNode, null);
} }
function submitAddition(vNode: VNode): void { function submitAddition(vNode: VNode): void {
const { parent, parentDom } = findDomParent(vNode); let parent = vNode.parent;
let parentDom;
let tag;
while (parent !== null) {
tag = parent.tag;
if (tag === DomComponent) {
parentDom = parent.realNode;
break;
} else if (tag === TreeRoot || tag === DomPortal) {
parentDom = parent.outerDom;
break;
}
parent = parent.parent;
}
if ((vNode.flags & ResetText) === ResetText) { if ((parent.flags & ResetText) === ResetText) {
// 在insert之前先reset // 在insert之前先reset
clearText(parentDom); clearText(parentDom);
FlagUtils.removeFlag(parent, ResetText); FlagUtils.removeFlag(parent, ResetText);
} }
if ((vNode.flags & DirectAddition) === DirectAddition) {
insertOrAppendPlacementNode(vNode, null, parentDom);
FlagUtils.removeFlag(vNode, DirectAddition);
return;
}
const before = getSiblingDom(vNode); const before = getSiblingDom(vNode);
insertOrAppendPlacementNode(vNode, before, parentDom); insertOrAppendPlacementNode(vNode, before, parentDom);
} }
@ -270,8 +288,19 @@ function unmountDomComponents(vNode: VNode): void {
travelVNodeTree(vNode, (node) => { travelVNodeTree(vNode, (node) => {
if (!currentParentIsValid) { if (!currentParentIsValid) {
const parentObj = findDomParent(node); let parent = node.parent;
currentParent = parentObj.parentDom; let tag;
while (parent !== null) {
tag = parent.tag;
if (tag === DomComponent) {
currentParent = parent.realNode;
break;
} else if (tag === TreeRoot || tag === DomPortal) {
currentParent = parent.outerDom;
break;
}
parent = parent.parent;
}
currentParentIsValid = true; currentParentIsValid = true;
} }
@ -290,7 +319,7 @@ function unmountDomComponents(vNode: VNode): void {
} }
}, node => }, node =>
// 如果是dom不用再遍历child // 如果是dom不用再遍历child
node.tag === DomComponent || node.tag === DomText, null, (node) => { node.tag === DomComponent || node.tag === DomText, vNode, (node) => {
if (node.tag === DomPortal) { if (node.tag === DomPortal) {
// 当离开portal，需要重新设置parent // 当离开portal，需要重新设置parent
currentParentIsValid = false; currentParentIsValid = false;
@ -315,8 +344,20 @@ function submitClear(vNode: VNode): void {
} }
} }
const parentObj = findDomParent(vNode); let parent = vNode.parent;
const currentParent = parentObj.parentDom; let parentDom;
let tag;
while (parent !== null) {
tag = parent.tag;
if (tag === DomComponent) {
parentDom = parent.realNode;
break;
} else if (tag === TreeRoot || tag === DomPortal) {
parentDom = parent.outerDom;
break;
}
parent = parent.parent;
}
let clearChild = vNode.clearChild as VNode; // 上次渲染的child保存在clearChild属性中 let clearChild = vNode.clearChild as VNode; // 上次渲染的child保存在clearChild属性中
// 卸载 clearChild 和 它的兄弟节点 // 卸载 clearChild 和 它的兄弟节点
while(clearChild) { while(clearChild) {
@ -327,9 +368,9 @@ function submitClear(vNode: VNode): void {
} }
// 在所有子项都卸载后，删除dom树中的节点 // 在所有子项都卸载后，删除dom树中的节点
removeChildDom(currentParent, vNode.realNode); removeChildDom(parentDom, vNode.realNode);
const realNodeNext = getSiblingDom(vNode); const realNodeNext = getSiblingDom(vNode);
insertDom(currentParent, cloneDom, realNodeNext); insertDom(parentDom, cloneDom, realNodeNext);
vNode.realNode = cloneDom; vNode.realNode = cloneDom;
attachRef(vNode); attachRef(vNode);
FlagUtils.removeFlag(vNode, Clear); FlagUtils.removeFlag(vNode, Clear);

33
libs/horizon/src/renderer/submit/Submit.ts
View File

@ -87,7 +87,10 @@ export function submitToRender(treeRoot) {
} }
function beforeSubmit(dirtyNodes: Array<VNode>) { function beforeSubmit(dirtyNodes: Array<VNode>) {
dirtyNodes.forEach(node => { let node;
const nodesLength = dirtyNodes.length;
for(let i = 0; i < nodesLength; i++) {
node = dirtyNodes[i];
try { try {
if ((node.flags & Snapshot) === Snapshot) { if ((node.flags & Snapshot) === Snapshot) {
callBeforeSubmitLifeCycles(node); callBeforeSubmitLifeCycles(node);
@ -95,11 +98,18 @@ function beforeSubmit(dirtyNodes: Array<VNode>) {
} catch (error) { } catch (error) {
handleSubmitError(node, error); handleSubmitError(node, error);
} }
}); }
} }
function submit(dirtyNodes: Array<VNode>) { function submit(dirtyNodes: Array<VNode>) {
dirtyNodes.forEach(node => { let node;
const nodesLength = dirtyNodes.length;
let isAdd;
let isUpdate;
let isDeletion;
let isClear;
for(let i = 0; i < nodesLength; i++) {
node = dirtyNodes[i];
try { try {
if ((node.flags & ResetText) === ResetText) { if ((node.flags & ResetText) === ResetText) {
submitResetTextContent(node); submitResetTextContent(node);
@ -112,8 +122,8 @@ function submit(dirtyNodes: Array<VNode>) {
} }
} }
const isAdd = (node.flags & Addition) === Addition; isAdd = (node.flags & Addition) === Addition;
const isUpdate = (node.flags & Update) === Update; isUpdate = (node.flags & Update) === Update;
if (isAdd && isUpdate) { if (isAdd && isUpdate) {
// Addition // Addition
submitAddition(node); submitAddition(node);
@ -122,8 +132,8 @@ function submit(dirtyNodes: Array<VNode>) {
// Update // Update
submitUpdate(node); submitUpdate(node);
} else { } else {
const isDeletion = (node.flags & Deletion) === Deletion; isDeletion = (node.flags & Deletion) === Deletion;
const isClear = (node.flags & Clear) === Clear; isClear = (node.flags & Clear) === Clear;
if (isAdd) { if (isAdd) {
submitAddition(node); submitAddition(node);
FlagUtils.removeFlag(node, Addition); FlagUtils.removeFlag(node, Addition);
@ -139,11 +149,14 @@ function submit(dirtyNodes: Array<VNode>) {
} catch (error) { } catch (error) {
handleSubmitError(node, error); handleSubmitError(node, error);
} }
}); }
} }
function afterSubmit(dirtyNodes: Array<VNode>) { function afterSubmit(dirtyNodes: Array<VNode>) {
dirtyNodes.forEach(node => { let node;
const nodesLength = dirtyNodes.length;
for(let i = 0; i < nodesLength; i++) {
node = dirtyNodes[i];
try { try {
if ((node.flags & Update) === Update || (node.flags & Callback) === Callback) { if ((node.flags & Update) === Update || (node.flags & Callback) === Callback) {
callAfterSubmitLifeCycles(node); callAfterSubmitLifeCycles(node);
@ -155,7 +168,7 @@ function afterSubmit(dirtyNodes: Array<VNode>) {
} catch (error) { } catch (error) {
handleSubmitError(node, error); handleSubmitError(node, error);
} }
}); }
} }
export function setRootThrowError(error: any) { export function setRootThrowError(error: any) {

2
libs/horizon/src/renderer/vnode/VNode.ts
View File

@ -136,6 +136,8 @@ export class VNode {
case LazyComponent: case LazyComponent:
this.realNode = null; this.realNode = null;
this.stateCallbacks = null; this.stateCallbacks = null;
this.isLazyComponent = true;
this.lazyType = null;
break; break;
case Fragment: case Fragment:
break; break;

48
libs/horizon/src/renderer/vnode/VNodeCreator.ts
View File

@ -84,28 +84,6 @@ export function updateVNode(vNode: VNode, vNodeProps?: any): VNode {
return vNode; return vNode;
} }
function getVNodeTag(type: any) {
let vNodeTag = ClsOrFunComponent;
let isLazy = false;
const componentType = typeof type;
if (componentType === 'function') {
if (isClassComponent(type)) {
vNodeTag = ClassComponent;
}
} else if (componentType === 'string') {
vNodeTag = DomComponent;
} else if (type === TYPE_SUSPENSE) {
vNodeTag = SuspenseComponent;
} else if (componentType === 'object' && type !== null && typeMap[type.vtype]) {
vNodeTag = typeMap[type.vtype];
isLazy = type.vtype === TYPE_LAZY;
} else {
throw Error(`Component type is invalid, got: ${type == null ? type : componentType}`);
}
return { vNodeTag, isLazy };
}
export function createFragmentVNode(fragmentKey, fragmentProps) { export function createFragmentVNode(fragmentKey, fragmentProps) {
const vNode = newVirtualNode(Fragment, fragmentKey, fragmentProps); const vNode = newVirtualNode(Fragment, fragmentKey, fragmentProps);
vNode.shouldUpdate = true; vNode.shouldUpdate = true;
@ -127,14 +105,30 @@ export function createPortalVNode(portal) {
} }
export function createUndeterminedVNode(type, key, props) { export function createUndeterminedVNode(type, key, props) {
const { vNodeTag, isLazy } = getVNodeTag(type); let vNodeTag = ClsOrFunComponent;
let isLazy = false;
const componentType = typeof type;
if (componentType === 'function') {
if (isClassComponent(type)) {
vNodeTag = ClassComponent;
}
} else if (componentType === 'string') {
vNodeTag = DomComponent;
} else if (type === TYPE_SUSPENSE) {
vNodeTag = SuspenseComponent;
} else if (componentType === 'object' && type !== null && typeMap[type.vtype]) {
vNodeTag = typeMap[type.vtype];
isLazy = type.vtype === TYPE_LAZY;
} else {
throw Error(`Component type is invalid, got: ${type == null ? type : componentType}`);
}
const vNode = newVirtualNode(vNodeTag, key, props); const vNode = newVirtualNode(vNodeTag, key, props);
vNode.type = type; vNode.type = type;
vNode.shouldUpdate = true; vNode.shouldUpdate = true;
if (isLazy) { if (isLazy) {
vNode.isLazyComponent = isLazy;
vNode.lazyType = type; vNode.lazyType = type;
} }
return vNode; return vNode;
@ -163,10 +157,6 @@ export function createVNode(tag: VNodeTag | string, ...secondArg) {
return vNode; return vNode;
} }
export function updateVNodePath(vNode: VNode) {
vNode.path = vNode.parent.path + vNode.cIndex;
}
export function createVNodeFromElement(element: JSXElement): VNode { export function createVNodeFromElement(element: JSXElement): VNode {
const type = element.type; const type = element.type;
const key = element.key; const key = element.key;
@ -189,7 +179,7 @@ export function onlyUpdateChildVNodes(processing: VNode): VNode | null {
let child: VNode | null = processing.child; let child: VNode | null = processing.child;
while (child !== null) { while (child !== null) {
updateVNode(child, child.props); updateVNode(child, child.props);
updateVNodePath(child); child.path = child.parent.path + child.cIndex;
child = child.next; child = child.next;
} }
} }

31
libs/horizon/src/renderer/vnode/VNodeFlags.ts
View File

@ -5,20 +5,21 @@
import type { VNode } from '../Types'; import type { VNode } from '../Types';
export const InitFlag = /** */ 0b000000000000; export const InitFlag = /** */ 0;
// vNode节点的flags // vNode节点的flags
export const Addition = /** */ 0b100000000000; export const DirectAddition = /** */ 1 << 0; // 在本次更新前入股父dom没有子节点，说明本次可以直接添加至父节点，不需要通过 getSiblingDom 找到 before 节点
export const Update = /** */ 0b010000000000; export const Addition = /** */ 1 << 1;
export const Deletion = /** */ 0b001000000000; export const Update = /** */ 1 << 2;
export const ResetText =/** */ 0b000100000000; export const Deletion = /** */ 1 << 3;
export const Callback = /** */ 0b000010000000; export const ResetText =/** */ 1 << 4;
export const DidCapture =/** */ 0b000001000000; export const Callback = /** */ 1 << 5;
export const Ref = /** */ 0b000000100000; export const DidCapture =/** */ 1 << 6;
export const Snapshot = /** */ 0b000000010000; export const Ref = /** */ 1 << 7;
export const Interrupted = /** */ 0b000000001000; // 被中断了，抛出错误的vNode以及它的父vNode export const Snapshot = /** */ 1 << 8;
export const ShouldCapture =/** */ 0b000000000100; export const Interrupted = /** */ 1 << 9; // 被中断了，抛出错误的vNode以及它的父vNode
export const ForceUpdate = /** */ 0b000000000010; // For suspense export const ShouldCapture =/** */ 1 << 11;
export const Clear = /** */ 0b000000000001; export const ForceUpdate = /** */ 1 << 12; // For suspense
export const Clear = /** */ 1 << 13;
const LifecycleEffectArr = Update | Callback | Ref | Snapshot; const LifecycleEffectArr = Update | Callback | Ref | Snapshot;
export class FlagUtils { export class FlagUtils {
@ -44,6 +45,10 @@ export class FlagUtils {
static setAddition(node: VNode) { static setAddition(node: VNode) {
node.flags = Addition; node.flags = Addition;
} }
static markDirectAddition(node: VNode) {
node.flags |= DirectAddition;
}
static markUpdate(node: VNode) { static markUpdate(node: VNode) {
node.flags |= Update; node.flags |= Update;
} }

39
libs/horizon/src/renderer/vnode/VNodeUtils.ts
View File

@ -27,11 +27,11 @@ export function travelChildren(beginVNode: VNode, handleVNode: Function, isFinis
export function travelVNodeTree( export function travelVNodeTree(
beginVNode: VNode, beginVNode: VNode,
handleVNode: Function, handleVNode: Function,
childFilter: Function = () => false, // 返回true不处理child childFilter: ((node: VNode) => boolean) | null, // 返回true不处理child
finishVNode?: VNode, // 结束遍历节点，有时候和beginVNode不相同 finishVNode: VNode, // 结束遍历节点，有时候和beginVNode不相同
handleWhenToParent?: Function handleWhenToParent: Function | null
): VNode | null { ): VNode | null {
const overVNode = finishVNode || beginVNode; const filter = childFilter === null;
let node = beginVNode; let node = beginVNode;
while (true) { while (true) {
@ -43,20 +43,20 @@ export function travelVNodeTree(
// 找子节点 // 找子节点
const childVNode = node.child; const childVNode = node.child;
if (childVNode !== null && !childFilter(node)) { if (childVNode !== null && (filter || !childFilter(node))) {
childVNode.parent = node; childVNode.parent = node;
node = childVNode; node = childVNode;
continue; continue;
} }
// 回到开始节点 // 回到开始节点
if (node === overVNode) { if (node === finishVNode) {
return null; return null;
} }
// 找兄弟，没有就往上再找兄弟 // 找兄弟，没有就往上再找兄弟
while (node.next === null) { while (node.next === null) {
if (node.parent === null || node.parent === overVNode) { if (node.parent === null || node.parent === finishVNode) {
return null; return null;
} }
node = node.parent; node = node.parent;
@ -93,7 +93,6 @@ export function clearVNode(vNode: VNode) {
vNode.oldState = null; vNode.oldState = null;
vNode.oldRef = null; vNode.oldRef = null;
vNode.oldChild = null; vNode.oldChild = null;
vNode.flags = InitFlag;
vNode.toUpdateNodes = null; vNode.toUpdateNodes = null;
@ -114,31 +113,13 @@ function isDomContainer(vNode: VNode): boolean {
); );
} }
// 找到DOM类型的父
export function findDomParent(vNode: VNode) {
let parent = vNode.parent;
while (parent !== null) {
switch (parent.tag) {
case DomComponent:
return {parent, parentDom: parent.realNode};
case TreeRoot:
case DomPortal:
return {parent, parentDom: parent.outerDom};
}
parent = parent.parent;
}
return null;
}
export function findDomVNode(vNode: VNode): VNode | null { export function findDomVNode(vNode: VNode): VNode | null {
return travelVNodeTree(vNode, (node) => { return travelVNodeTree(vNode, (node) => {
if (node.tag === DomComponent || node.tag === DomText) { if (node.tag === DomComponent || node.tag === DomText) {
return node; return node;
} }
return null; return null;
}); }, null, vNode, null);
} }
export function findDOMByClassInst(inst) { export function findDOMByClassInst(inst) {
@ -188,7 +169,7 @@ export function getSiblingDom(vNode: VNode): Element | null {
// 如果不是dom节点，往下找 // 如果不是dom节点，往下找
while (!isDomVNode(node)) { while (!isDomVNode(node)) {
// 如果节点也是Addition // 如果节点也是Addition
if ((node.flags & Addition) ===Addition) { if ((node.flags & Addition) === Addition) {
continue findSibling; continue findSibling;
} }
@ -202,7 +183,7 @@ export function getSiblingDom(vNode: VNode): Element | null {
} }
} }
if ((node.flags & Addition) ===InitFlag) { if ((node.flags & Addition) === InitFlag) {
// 找到 // 找到
return node.realNode; return node.realNode;
} }