Match-id-a1095c6e547ae06557735fa486ddd1994eed8c20
This commit is contained in:
*
*
parent
d217302bf1
commit
c766853a89
|
|
@ -1,8 +0,0 @@
|
||||||
import type {VNode} from '../Types';
|
|
||||||
|
|
||||||
// 当前所有者是应拥有当前正在构建的任何组件的组件。
|
|
||||||
const ProcessingVNode: { val: VNode | null } = {
|
|
||||||
val: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProcessingVNode;
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
/**
|
|
||||||
* 虚拟DOM结构体
|
|
||||||
*/
|
|
||||||
import {TreeRoot} from './VNodeTags';
|
|
||||||
import type {VNodeTag} from './VNodeTags';
|
|
||||||
import type {RefType, ContextType} from '../Types';
|
|
||||||
import type {Hook} from '../hooks/HookType';
|
|
||||||
|
|
||||||
export class VNode {
|
|
||||||
tag: VNodeTag;
|
|
||||||
key: string | null; // 唯一标识符
|
|
||||||
type: any = null;
|
|
||||||
realNode: any = null; // 如果是类，则存放实例；如果是div这种，则存放真实DOM；
|
|
||||||
|
|
||||||
// 关系结构
|
|
||||||
parent: VNode | null = null; // 父节点
|
|
||||||
children: Array<VNode> | null = null; // 子节点
|
|
||||||
cIndex: number = 0; // 节点在children数组中的位置
|
|
||||||
eIndex: number = 0; // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致
|
|
||||||
|
|
||||||
ref: RefType | ((handle: any) => void) | null = null; // 包裹一个函数，submit阶段使用，比如将外部useRef生成的对象赋值到ref上
|
|
||||||
props: any; // 传给组件的props的值，类组件包含defaultProps，Lazy组件不包含
|
|
||||||
oldProps: any = null;
|
|
||||||
|
|
||||||
suspensePromises: any = null; // suspense组件的promise列表
|
|
||||||
changeList: any = null; // DOM的变更列表
|
|
||||||
effectList: any[] = []; // useEffect 的更新数组
|
|
||||||
updates: any[] = null; // TreeRoot和ClassComponent使用的更新数组
|
|
||||||
stateCallbacks: any[] = []; // 存放存在setState的第二个参数和HorizonDOM.render的第三个参数所在的node数组
|
|
||||||
isForceUpdate: boolean = false; // 是否使用强制更新
|
|
||||||
|
|
||||||
state: any = null; // ClassComponent和TreeRoot的状态
|
|
||||||
hooks: Array<Hook<any, any>> = []; // 保存hook
|
|
||||||
suspenseChildStatus: string = ''; // Suspense的Children是否显示
|
|
||||||
depContexts: Array<ContextType<any>> = []; // FunctionComponent和ClassComponent对context的依赖列表
|
|
||||||
isDepContextChange: boolean = false; // context是否变更
|
|
||||||
dirtyNodes: Array<VNode> = []; // 需要改动的节点数组
|
|
||||||
shouldUpdate: boolean = false;
|
|
||||||
childShouldUpdate: boolean = false;
|
|
||||||
outerDom: any;
|
|
||||||
task: any;
|
|
||||||
|
|
||||||
// 使用这个变量来记录修改前的值，用于恢复。
|
|
||||||
contexts = {};
|
|
||||||
// 因为LazyComponent会修改tag和type属性，为了能识别，增加一个属性
|
|
||||||
isLazyComponent: boolean = false;
|
|
||||||
|
|
||||||
// 因为LazyComponent会修改type属性，为了在diff中判断是否可以复用，需要增加一个lazyType
|
|
||||||
lazyType: any = null;
|
|
||||||
flags: {
|
|
||||||
Addition?: boolean,
|
|
||||||
Update?: boolean,
|
|
||||||
Deletion?: boolean,
|
|
||||||
ResetText?: boolean,
|
|
||||||
Callback?: boolean,
|
|
||||||
DidCapture?: boolean,
|
|
||||||
Ref?: boolean,
|
|
||||||
Snapshot?: boolean,
|
|
||||||
Interrupted?: boolean,
|
|
||||||
ShouldCapture?: boolean,
|
|
||||||
ForceUpdate?: boolean,
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
// one tree相关属性
|
|
||||||
isCreated: boolean = true;
|
|
||||||
oldHooks: Array<Hook<any, any>> = []; // 保存上一次执行的hook
|
|
||||||
oldState: any = null;
|
|
||||||
oldRef: RefType | ((handle: any) => void) | null = null;
|
|
||||||
suspenseChildThrow = false;
|
|
||||||
oldSuspenseChildStatus: string = ''; // 上一次Suspense的Children是否显示
|
|
||||||
oldChildren: Array<VNode> | null = null;
|
|
||||||
suspenseDidCapture: boolean = false; // suspense是否捕获了异常
|
|
||||||
promiseResolve: boolean = false; // suspense的promise是否resolve
|
|
||||||
|
|
||||||
path: Array<number> = []; // 保存从根到本节点的路径
|
|
||||||
toUpdateNodes: Set<VNode> | null = null; // 保存要更新的节点
|
|
||||||
|
|
||||||
constructor(tag: VNodeTag, props: any, key: null | string, outerDom) {
|
|
||||||
this.tag = tag; // 对应组件的类型，比如ClassComponent等
|
|
||||||
this.key = key;
|
|
||||||
|
|
||||||
this.props = props;
|
|
||||||
|
|
||||||
// 根节点
|
|
||||||
if (tag === TreeRoot) {
|
|
||||||
this.outerDom = outerDom;
|
|
||||||
this.task = null;
|
|
||||||
this.toUpdateNodes = new Set<VNode>();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setContext(contextName, value) {
|
|
||||||
this.contexts[contextName] = value;
|
|
||||||
}
|
|
||||||
getContext(contextName) {
|
|
||||||
return this.contexts[contextName];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
import type { VNodeTag } from './VNodeTags';
|
|
||||||
import { FlagUtils } from './VNodeFlags';
|
|
||||||
import {
|
|
||||||
ClassComponent,
|
|
||||||
ContextConsumer,
|
|
||||||
ContextProvider,
|
|
||||||
ForwardRef,
|
|
||||||
Fragment,
|
|
||||||
FunctionComponent,
|
|
||||||
DomComponent,
|
|
||||||
DomPortal,
|
|
||||||
TreeRoot,
|
|
||||||
DomText,
|
|
||||||
ClsOrFunComponent,
|
|
||||||
LazyComponent,
|
|
||||||
MemoComponent,
|
|
||||||
SuspenseComponent,
|
|
||||||
} from './VNodeTags';
|
|
||||||
import { createUpdateArray } from '../UpdateHandler';
|
|
||||||
import {
|
|
||||||
TYPE_CONTEXT,
|
|
||||||
TYPE_FORWARD_REF, TYPE_FRAGMENT,
|
|
||||||
TYPE_LAZY,
|
|
||||||
TYPE_MEMO, TYPE_PROFILER,
|
|
||||||
TYPE_PROVIDER, TYPE_STRICT_MODE,
|
|
||||||
TYPE_SUSPENSE,
|
|
||||||
} from '../utils/elementType';
|
|
||||||
import { VNode } from './VNode';
|
|
||||||
import {HorizonElement} from '../Types';
|
|
||||||
|
|
||||||
const typeLazyMap = {
|
|
||||||
[TYPE_FORWARD_REF]: ForwardRef,
|
|
||||||
[TYPE_MEMO]: MemoComponent,
|
|
||||||
};
|
|
||||||
const typeMap = {
|
|
||||||
...typeLazyMap,
|
|
||||||
[TYPE_PROVIDER]: ContextProvider,
|
|
||||||
[TYPE_CONTEXT]: ContextConsumer,
|
|
||||||
[TYPE_LAZY]: LazyComponent,
|
|
||||||
};
|
|
||||||
|
|
||||||
const newVirtualNode = function(tag: VNodeTag, key?: null | string, vNodeProps?: any, outerDom?: any): VNode {
|
|
||||||
return new VNode(tag, vNodeProps, key, outerDom);
|
|
||||||
};
|
|
||||||
|
|
||||||
function isClassComponent(comp: Function) {
|
|
||||||
// 如果使用 getPrototypeOf 方法获取构造函数，不能兼容业务组组件继承组件的使用方式，会误认为是函数组件
|
|
||||||
// 如果使用静态属性，部分函数高阶组件会将类组件的静态属性复制到自身，导致误判为类组件
|
|
||||||
// 既然已经兼容使用了该标识符，那么继续使用
|
|
||||||
return comp.prototype?.isReactComponent === true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析懒组件的tag
|
|
||||||
export function getLazyVNodeTag(lazyComp: any): string {
|
|
||||||
let vNodeTag = ClsOrFunComponent;
|
|
||||||
if (typeof lazyComp === 'function') {
|
|
||||||
vNodeTag = isClassComponent(lazyComp) ? ClassComponent : FunctionComponent;
|
|
||||||
} else if (lazyComp !== undefined && lazyComp !== null && typeLazyMap[lazyComp.vtype]) {
|
|
||||||
vNodeTag = typeLazyMap[lazyComp.vtype];
|
|
||||||
}
|
|
||||||
return vNodeTag;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建processing
|
|
||||||
export function updateVNode(vNode: VNode, vNodeProps?: any): VNode {
|
|
||||||
if (vNode.tag === ClassComponent) {
|
|
||||||
vNode.oldState = vNode.state;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (vNode.tag === SuspenseComponent) {
|
|
||||||
vNode.oldSuspenseChildStatus = vNode.suspenseChildStatus;
|
|
||||||
vNode.oldChildren = vNode.children;
|
|
||||||
}
|
|
||||||
|
|
||||||
vNode.oldProps = vNode.props;
|
|
||||||
vNode.props = vNodeProps;
|
|
||||||
|
|
||||||
vNode.oldRef = vNode.ref;
|
|
||||||
|
|
||||||
FlagUtils.setNoFlags(vNode);
|
|
||||||
vNode.dirtyNodes = [];
|
|
||||||
vNode.isCreated = false;
|
|
||||||
|
|
||||||
return vNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getVNodeTag(type: any) {
|
|
||||||
let vNodeTag = ClsOrFunComponent;
|
|
||||||
let isLazy = false;
|
|
||||||
|
|
||||||
if (typeof type === 'function') {
|
|
||||||
if (isClassComponent(type)) {
|
|
||||||
vNodeTag = ClassComponent;
|
|
||||||
}
|
|
||||||
} else if (typeof type === 'string') {
|
|
||||||
vNodeTag = DomComponent;
|
|
||||||
} else if (type === TYPE_SUSPENSE) {
|
|
||||||
vNodeTag = SuspenseComponent;
|
|
||||||
} else if (typeof type === '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 : typeof type}`);
|
|
||||||
}
|
|
||||||
return { vNodeTag, isLazy };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createVNode(tag: VNodeTag | string, ...secondArg) {
|
|
||||||
let vNode = null;
|
|
||||||
switch (tag) {
|
|
||||||
case Fragment:
|
|
||||||
const [fragmentKey, fragmentProps] = secondArg;
|
|
||||||
vNode = newVirtualNode(Fragment, fragmentKey, fragmentProps);
|
|
||||||
vNode.shouldUpdate = true;
|
|
||||||
break;
|
|
||||||
case DomText:
|
|
||||||
const content = secondArg[0];
|
|
||||||
vNode = newVirtualNode(DomText, null, content);
|
|
||||||
vNode.shouldUpdate = true;
|
|
||||||
break;
|
|
||||||
case DomPortal:
|
|
||||||
const portal = secondArg[0];
|
|
||||||
const children = portal.children ?? [];
|
|
||||||
vNode = newVirtualNode(DomPortal, portal.key, children);
|
|
||||||
vNode.shouldUpdate = true;
|
|
||||||
vNode.outerDom = portal.outerDom;
|
|
||||||
break;
|
|
||||||
case 'props':
|
|
||||||
const [type, key, props] = secondArg;
|
|
||||||
|
|
||||||
const { vNodeTag, isLazy } = getVNodeTag(type);
|
|
||||||
|
|
||||||
vNode = newVirtualNode(vNodeTag, key, props);
|
|
||||||
vNode.type = type;
|
|
||||||
vNode.shouldUpdate = true;
|
|
||||||
|
|
||||||
// lazy类型的特殊处理
|
|
||||||
vNode.isLazyComponent = isLazy;
|
|
||||||
if (isLazy) {
|
|
||||||
vNode.lazyType = type;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case TreeRoot:
|
|
||||||
// 创建treeRoot
|
|
||||||
vNode = newVirtualNode(TreeRoot, null, null, secondArg[0]);
|
|
||||||
vNode.path.push(0);
|
|
||||||
|
|
||||||
createUpdateArray(vNode);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return vNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateVNodePath(vNode: VNode) {
|
|
||||||
vNode.path = [...vNode.parent.path, vNode.cIndex];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createVNodeFromElement(element: HorizonElement): VNode {
|
|
||||||
const type = element.type;
|
|
||||||
const key = element.key;
|
|
||||||
const props = element.props;
|
|
||||||
|
|
||||||
if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) {
|
|
||||||
return createVNode(Fragment, key, props.children);
|
|
||||||
} else {
|
|
||||||
return createVNode('props', type, key, props);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 直接更新子节点属性即可，不需要diff
|
|
||||||
export function onlyUpdateChildVNodes(processing: VNode): Array<VNode> | null {
|
|
||||||
// 检查子树是否需要更新
|
|
||||||
if (processing.childShouldUpdate) {
|
|
||||||
// 此vNode无需更新，但是子树需要
|
|
||||||
if (!processing.isCreated && processing.children && processing.children.length) {
|
|
||||||
// 更新子节点
|
|
||||||
processing.children.forEach(child => {
|
|
||||||
updateVNode(child, child.props);
|
|
||||||
updateVNodePath(child);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 返回子节点，继续遍历
|
|
||||||
return processing.children;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 子树无需工作
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
/**
|
|
||||||
* vNode结构的变化标志
|
|
||||||
*/
|
|
||||||
|
|
||||||
import type { VNode } from '../Types';
|
|
||||||
|
|
||||||
// vNode节点的flags
|
|
||||||
export const Addition = 'Addition';
|
|
||||||
export const Update = 'Update';
|
|
||||||
export const Deletion = 'Deletion';
|
|
||||||
export const ResetText = 'ResetText';
|
|
||||||
export const Callback = 'Callback';
|
|
||||||
export const DidCapture = 'DidCapture';
|
|
||||||
export const Ref = 'Ref';
|
|
||||||
export const Snapshot = 'Snapshot';
|
|
||||||
// 被中断了，抛出错误的vNode以及它的父vNode
|
|
||||||
export const Interrupted = 'Interrupted';
|
|
||||||
export const ShouldCapture = 'ShouldCapture';
|
|
||||||
// For suspense
|
|
||||||
export const ForceUpdate = 'ForceUpdate';
|
|
||||||
|
|
||||||
const flagArr = [Addition, Update, Deletion, ResetText, Callback, DidCapture, Ref, Snapshot, Interrupted, ShouldCapture, ForceUpdate];
|
|
||||||
|
|
||||||
const LifecycleEffectArr = [Update, Callback, Ref, Snapshot];
|
|
||||||
|
|
||||||
function resetFlag(node) {
|
|
||||||
node.flags = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
export class FlagUtils {
|
|
||||||
static removeFlag(node: VNode, flag: string) {
|
|
||||||
node.flags[flag] = false;
|
|
||||||
}
|
|
||||||
static removeLifecycleEffectFlags(node) {
|
|
||||||
LifecycleEffectArr.forEach(key => {
|
|
||||||
node.flags[key] = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
static hasAnyFlag(node: VNode) { // 有标志位
|
|
||||||
let keyFlag = false;
|
|
||||||
flagArr.forEach(key => {
|
|
||||||
if (node.flags[key]) {
|
|
||||||
keyFlag = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return keyFlag;
|
|
||||||
}
|
|
||||||
|
|
||||||
static setNoFlags(node: VNode) {
|
|
||||||
resetFlag(node);
|
|
||||||
}
|
|
||||||
|
|
||||||
static markAddition(node: VNode) {
|
|
||||||
node.flags.Addition = true;
|
|
||||||
}
|
|
||||||
static setAddition(node: VNode) {
|
|
||||||
resetFlag(node);
|
|
||||||
node.flags.Addition = true;
|
|
||||||
}
|
|
||||||
static markUpdate(node: VNode) {
|
|
||||||
node.flags.Update = true;
|
|
||||||
}
|
|
||||||
static setDeletion(node: VNode) {
|
|
||||||
resetFlag(node);
|
|
||||||
node.flags.Deletion = true;
|
|
||||||
}
|
|
||||||
static markContentReset(node: VNode) {
|
|
||||||
node.flags.ResetText = true;
|
|
||||||
}
|
|
||||||
static markCallback(node: VNode) {
|
|
||||||
node.flags.Callback = true;
|
|
||||||
}
|
|
||||||
static markDidCapture(node: VNode) {
|
|
||||||
node.flags.DidCapture = true;
|
|
||||||
}
|
|
||||||
static markShouldCapture(node: VNode) {
|
|
||||||
node.flags.ShouldCapture = true;
|
|
||||||
}
|
|
||||||
static markRef(node: VNode) {
|
|
||||||
node.flags.Ref = true;
|
|
||||||
}
|
|
||||||
static markSnapshot(node: VNode) {
|
|
||||||
node.flags.Snapshot = true;
|
|
||||||
}
|
|
||||||
static markInterrupted(node: VNode) {
|
|
||||||
node.flags.Interrupted = true;
|
|
||||||
}
|
|
||||||
static markForceUpdate(node: VNode) {
|
|
||||||
node.flags.ForceUpdate = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
// 从当前节点向上遍历，更新shouldUpdate和childShouldUpdate
|
|
||||||
import {VNode} from './VNode';
|
|
||||||
import {TreeRoot} from './VNodeTags';
|
|
||||||
|
|
||||||
export function updateShouldUpdateOfTree(vNode: VNode): VNode | null {
|
|
||||||
vNode.shouldUpdate = true;
|
|
||||||
|
|
||||||
// 一直向上遍历，修改childShouldUpdate
|
|
||||||
let node = vNode;
|
|
||||||
let parent = vNode.parent;
|
|
||||||
while (parent !== null) {
|
|
||||||
parent.childShouldUpdate = true;
|
|
||||||
node = parent;
|
|
||||||
parent = parent.parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.tag === TreeRoot) {
|
|
||||||
node.shouldUpdate = true;
|
|
||||||
// 返回根节点
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置节点的childShouldUpdate
|
|
||||||
export function updateChildShouldUpdate(vNode: VNode) {
|
|
||||||
const children = vNode.children || [];
|
|
||||||
|
|
||||||
for (let i = 0; i < children.length; i++) {
|
|
||||||
const child = children[i];
|
|
||||||
if (child && (child.shouldUpdate || child.childShouldUpdate)) {
|
|
||||||
vNode.childShouldUpdate = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vNode.childShouldUpdate = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置节点的所有父节点的childShouldUpdate
|
|
||||||
export function updateParentsChildShouldUpdate(vNode: VNode) {
|
|
||||||
let node = vNode.parent;
|
|
||||||
let isShouldUpdate = vNode.shouldUpdate || vNode.childShouldUpdate;
|
|
||||||
|
|
||||||
if (isShouldUpdate) { // 开始节点是shouldUpdate或childShouldUpdate
|
|
||||||
setParentsChildShouldUpdate(node);
|
|
||||||
} else {
|
|
||||||
while (node !== null) {
|
|
||||||
updateChildShouldUpdate(node);
|
|
||||||
node = node.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新从当前节点到根节点的childShouldUpdate为true
|
|
||||||
export function setParentsChildShouldUpdate(parent: VNode | null) {
|
|
||||||
let node = parent;
|
|
||||||
while (node !== null) {
|
|
||||||
if (node.childShouldUpdate) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
node.childShouldUpdate = true;
|
|
||||||
|
|
||||||
node = node.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
/**
|
|
||||||
* 定义vNode的类型
|
|
||||||
*/
|
|
||||||
export type VNodeTag = string;
|
|
||||||
|
|
||||||
export const TreeRoot = 'TreeRoot'; // tree的根节点，用于存放一些tree级的变量
|
|
||||||
export const FunctionComponent = 'FunctionComponent';
|
|
||||||
export const ClassComponent = 'ClassComponent';
|
|
||||||
export const ClsOrFunComponent = 'ClsOrFunComponent';
|
|
||||||
export const DomPortal = 'DomPortal';
|
|
||||||
export const DomComponent = 'DomComponent';
|
|
||||||
export const DomText = 'DomText';
|
|
||||||
export const Fragment = 'Fragment';
|
|
||||||
export const ContextConsumer = 'ContextConsumer';
|
|
||||||
export const ContextProvider = 'ContextProvider';
|
|
||||||
export const ForwardRef = 'ForwardRef';
|
|
||||||
export const Profiler = 'Profiler';
|
|
||||||
export const SuspenseComponent = 'SuspenseComponent';
|
|
||||||
export const MemoComponent = 'MemoComponent';
|
|
||||||
export const LazyComponent = 'LazyComponent';
|
|
||||||
export const IncompleteClassComponent = 'IncompleteClassComponent';
|
|
||||||
|
|
@ -1,278 +0,0 @@
|
||||||
/**
|
|
||||||
* 提供：vNode的“遍历”，“查找”，“判断”的相关工具方法
|
|
||||||
*/
|
|
||||||
|
|
||||||
import type {VNode} from '../Types';
|
|
||||||
|
|
||||||
import {DomComponent, DomPortal, DomText, TreeRoot} from './VNodeTags';
|
|
||||||
import {isComment} from '../../dom/utils/Common';
|
|
||||||
import {getNearestVNode} from '../../dom/DOMInternalKeys';
|
|
||||||
|
|
||||||
export function getSiblingVNode(node) {
|
|
||||||
let siblingVNode = null;
|
|
||||||
const index = node.cIndex;
|
|
||||||
if (node && node.parent && node.parent.children && node.parent.children.length > index + 1) {
|
|
||||||
siblingVNode = node.parent.children[index + 1];
|
|
||||||
}
|
|
||||||
return siblingVNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getFirstChild(vNode: VNode) {
|
|
||||||
return (vNode.children && vNode.children.length) ? vNode.children[0] : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从beginVNode开始深度遍历vNode树，对每个vNode调用handleVNode方法
|
|
||||||
export function travelVNodeTree(
|
|
||||||
beginVNode: VNode,
|
|
||||||
handleVNode: Function,
|
|
||||||
childFilter: Function = () => false, // 返回true不处理child
|
|
||||||
finishVNode?: VNode, // 结束遍历节点，有时候和beginVNode不相同
|
|
||||||
handleWhenToParent?: Function
|
|
||||||
): VNode | null {
|
|
||||||
const overVNode = finishVNode || beginVNode;
|
|
||||||
let node = beginVNode;
|
|
||||||
|
|
||||||
while (true) {
|
|
||||||
const ret = handleVNode(node);
|
|
||||||
// 如果处理一个vNode时有返回值，则中断遍历
|
|
||||||
if (ret) {
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找子节点
|
|
||||||
const childVNode = getFirstChild(node);
|
|
||||||
if (childVNode !== null && !childFilter(node)) {
|
|
||||||
childVNode.parent = node;
|
|
||||||
node = childVNode;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 回到开始节点
|
|
||||||
if (node === overVNode) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找兄弟，没有就往上再找兄弟
|
|
||||||
while (getSiblingVNode(node) === null) {
|
|
||||||
if (node.parent === null || node.parent === overVNode) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
node = node.parent;
|
|
||||||
|
|
||||||
if (typeof handleWhenToParent === 'function') {
|
|
||||||
handleWhenToParent(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 找到兄弟
|
|
||||||
const siblingVNode = getSiblingVNode(node);
|
|
||||||
siblingVNode.parent = node.parent;
|
|
||||||
node = siblingVNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 置空vNode
|
|
||||||
export function clearVNode(vNode: VNode) {
|
|
||||||
clearOneVNode(vNode);
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearOneVNode(vNode: VNode) {
|
|
||||||
vNode.children = [];
|
|
||||||
vNode.depContexts = [];
|
|
||||||
vNode.dirtyNodes = [];
|
|
||||||
vNode.oldProps = null;
|
|
||||||
vNode.state = null;
|
|
||||||
vNode.hooks = [];
|
|
||||||
vNode.suspenseChildStatus = '';
|
|
||||||
vNode.props = null;
|
|
||||||
vNode.parent = null;
|
|
||||||
vNode.suspensePromises = null;
|
|
||||||
vNode.changeList = null;
|
|
||||||
vNode.effectList = [];
|
|
||||||
vNode.updates = null;
|
|
||||||
|
|
||||||
vNode.oldHooks = [];
|
|
||||||
vNode.oldState = null;
|
|
||||||
vNode.oldRef = null;
|
|
||||||
vNode.suspenseChildThrow = false;
|
|
||||||
vNode.oldSuspenseChildStatus = '';
|
|
||||||
vNode.oldChildren = null;
|
|
||||||
|
|
||||||
vNode.path = [];
|
|
||||||
vNode.toUpdateNodes = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 是dom类型的vNode
|
|
||||||
export function isDomVNode(node: VNode) {
|
|
||||||
return node.tag === DomComponent || node.tag === DomText;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 是容器类型的vNode
|
|
||||||
function isDomContainer(vNode: VNode): boolean {
|
|
||||||
return (
|
|
||||||
vNode.tag === DomComponent ||
|
|
||||||
vNode.tag === TreeRoot ||
|
|
||||||
vNode.tag === DomPortal
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找到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 {
|
|
||||||
return travelVNodeTree(vNode, (node) => {
|
|
||||||
if (node.tag === DomComponent || node.tag === DomText) {
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function findDOMByClassInst(inst) {
|
|
||||||
const vNode = inst._vNode;
|
|
||||||
if (vNode === undefined) {
|
|
||||||
throw new Error('Unable to find the vNode by class instance.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const domVNode = findDomVNode(vNode);
|
|
||||||
|
|
||||||
return domVNode !== null ? domVNode.realNode : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断dom树是否已经挂载
|
|
||||||
export function isMounted(vNode: VNode) {
|
|
||||||
const rootNode = getTreeRootVNode(vNode);
|
|
||||||
// 如果根节点是 Dom 类型节点，表示已经挂载
|
|
||||||
return rootNode.tag === TreeRoot;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTreeRootVNode(vNode) {
|
|
||||||
let node = vNode;
|
|
||||||
while (node.parent) {
|
|
||||||
node = node.parent;
|
|
||||||
}
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找到相邻的DOM
|
|
||||||
export function getSiblingDom(vNode: VNode): Element | null {
|
|
||||||
let node: VNode = vNode;
|
|
||||||
|
|
||||||
findSibling: while (true) {
|
|
||||||
// 没有兄弟节点，找父节点
|
|
||||||
while (getSiblingVNode(node) === null) {
|
|
||||||
// 没父节点，或父节点已经是根节点，则返回
|
|
||||||
if (node.parent === null || isDomContainer(node.parent)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
node = node.parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
const siblingVNode = getSiblingVNode(node);
|
|
||||||
siblingVNode.parent = node.parent;
|
|
||||||
node = siblingVNode;
|
|
||||||
|
|
||||||
// 如果不是dom节点，往下找
|
|
||||||
while (!isDomVNode(node)) {
|
|
||||||
// 如果节点也是Addition
|
|
||||||
if (node.flags.Addition) {
|
|
||||||
continue findSibling;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 没有子节点，或是DomPortal
|
|
||||||
if (!node.children || !node.children.length || node.tag === DomPortal) {
|
|
||||||
continue findSibling;
|
|
||||||
} else {
|
|
||||||
const childVNode = getFirstChild(node);
|
|
||||||
childVNode.parent = node;
|
|
||||||
node = childVNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!node.flags.Addition) {
|
|
||||||
// 找到
|
|
||||||
return node.realNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isSameContainer(
|
|
||||||
container: Element,
|
|
||||||
targetContainer: EventTarget,
|
|
||||||
): boolean {
|
|
||||||
if (container === targetContainer) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
// 注释类型的节点
|
|
||||||
if (isComment(container) && container.parentNode === targetContainer) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isPortalRoot(vNode, targetContainer) {
|
|
||||||
if (vNode.tag === DomPortal) {
|
|
||||||
let topVNode = vNode.parent;
|
|
||||||
while (topVNode !== null) {
|
|
||||||
const grandTag = topVNode.tag;
|
|
||||||
if (grandTag === TreeRoot || grandTag === DomPortal) {
|
|
||||||
const topContainer = topVNode.outerDom;
|
|
||||||
// 如果topContainer是targetContainer，不需要在这里处理
|
|
||||||
if (isSameContainer(topContainer, targetContainer)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
topVNode = topVNode.parent;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取根vNode节点
|
|
||||||
export function getExactNode(targetVNode, targetContainer) {
|
|
||||||
// 确认vNode节点是否准确，portal场景下可能祖先节点不准确
|
|
||||||
let vNode = targetVNode;
|
|
||||||
while (vNode !== null) {
|
|
||||||
if (vNode.tag === TreeRoot || vNode.tag === DomPortal) {
|
|
||||||
let container = vNode.outerDom;
|
|
||||||
if (isSameContainer(container, targetContainer)) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (isPortalRoot(vNode, targetContainer)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
while (container !== null) {
|
|
||||||
const parentNode = getNearestVNode(container);
|
|
||||||
if (parentNode === null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
if (parentNode.tag === DomComponent || parentNode.tag === DomText) {
|
|
||||||
vNode = parentNode;
|
|
||||||
return getExactNode(vNode, targetContainer);
|
|
||||||
}
|
|
||||||
container = container.parentNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vNode = vNode.parent;
|
|
||||||
}
|
|
||||||
if (vNode === null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return targetVNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue