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

Match-id-5d829761be3cdb27d99f9e2f53042f9c7f21acb9

This commit is contained in:
* 2022-03-29 16:26:03 +08:00 committed by *
parent eaa13a6ad1 bc59541e0c
commit b2814558e8
12 changed files with 42 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.js
View File

@ -34,7 +34,8 @@ module.exports = {
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'semi': ["error", "always"],
'semi': ['warn', 'always'],
'quotes': ['warn', 'single'],
'accessor-pairs': 'off',
'brace-style': ['error', '1tbs'],
'func-style': ['warn', 'declaration', { allowArrowFunctions: true }],

68
libs/horizon/src/renderer/ContextSaver.ts
View File

@ -3,11 +3,11 @@
* 在深度遍历过程中，begin阶段会修改一些全局的值，在complete阶段会恢复。
*/
import type {VNode, ContextType} from './Types';
import type {Container} from '../dom/DOMOperator';
import type { VNode, ContextType } from './Types';
import type { Container } from '../dom/DOMOperator';
import {getNSCtx} from '../dom/DOMOperator';
import {ContextProvider} from './vnode/VNodeTags';
import { getNSCtx } from '../dom/DOMOperator';
import { ContextProvider } from './vnode/VNodeTags';
// 保存的是“http://www.w3.org/1999/xhtml”或“http://www.w3.org/2000/svg”，
// 用于识别是使用document.createElement()还是使用document.createElementNS()创建DOM
@ -18,16 +18,8 @@ const CTX_CONTEXT = 'CTX_CONTEXT';
// 旧版context API,是否更改。
const CTX_OLD_CHANGE = 'CTX_OLD_CHANGE';
// 旧版context API，保存的是的当前组件提供给子组件使用的context。
const CTX_OLD_CONTEXT = 'CTX_OLD_CONTEXT';
// 旧版context API，保存的是的上一个提供者提供给后代组件使用的context。
const CTX_OLD_PREVIOUS_CONTEXT = 'CTX_OLD_PREVIOUS_CONTEXT';
let ctxNamespace: string = '';
let ctxOldContext: Object = {};
let ctxOldChange: Boolean = false;
let ctxOldPreviousContext: Object = {};
let ctxOldChange = false;
let ctxNamespace = '';
function setContext(vNode: VNode, contextName, value) {
if (vNode.contexts === null) {
@ -38,6 +30,7 @@ function setContext(vNode: VNode, contextName, value) {
vNode.contexts[contextName] = value;
}
}
function getContext(vNode: VNode, contextName) {
if (vNode.contexts !== null) {
return vNode.contexts[contextName];
@ -87,44 +80,6 @@ function recoverParentsContextCtx(vNode: VNode) {
}
}
// ctxOldContext是 旧context提供者的context
function setVNodeOldContext(providerVNode: VNode, context: Object) {
setContext(providerVNode, CTX_OLD_CONTEXT, context);
}
function getVNodeOldContext(vNode: VNode) {
return getContext(vNode, CTX_OLD_CONTEXT);
}
function setOldContextCtx(providerVNode: VNode, context: Object) {
setVNodeOldContext(providerVNode, context);
ctxOldContext = context;
}
function getOldContextCtx() {
return ctxOldContext;
}
function resetOldContextCtx(vNode: VNode) {
ctxOldContext = getVNodeOldContext(vNode);
}
function setVNodeOldPreviousContext(providerVNode: VNode, context: Object) {
setContext(providerVNode, CTX_OLD_PREVIOUS_CONTEXT, context);
}
function getVNodeOldPreviousContext(vNode: VNode) {
return getContext(vNode, CTX_OLD_PREVIOUS_CONTEXT);
}
function setOldPreviousContextCtx(context: Object) {
ctxOldPreviousContext = context;
}
function getOldPreviousContextCtx() {
return ctxOldPreviousContext;
}
function setContextChangeCtx(providerVNode: VNode, didChange: boolean) {
setContext(providerVNode, CTX_OLD_CHANGE, didChange);
ctxOldChange = didChange;
@ -145,18 +100,9 @@ export {
setContextCtx,
resetContextCtx,
recoverParentsContextCtx,
setOldContextCtx,
getOldContextCtx,
resetOldContextCtx,
setContextChangeCtx,
getContextChangeCtx,
resetContextChangeCtx,
setOldPreviousContextCtx,
getOldPreviousContextCtx,
setVNodeOldContext,
getVNodeOldContext,
setVNodeOldPreviousContext,
getVNodeOldPreviousContext,
};

101
libs/horizon/src/renderer/components/context/CompatibleContext.ts
View File

@ -1,101 +0,0 @@
import type {VNode} from '../../Types';
import {
setOldContextCtx,
setContextChangeCtx,
getOldContextCtx,
resetOldContextCtx,
resetContextChangeCtx,
setOldPreviousContextCtx,
getOldPreviousContextCtx,
setVNodeOldContext,
getVNodeOldContext,
setVNodeOldPreviousContext,
getVNodeOldPreviousContext,
} from '../../ContextSaver';
const emptyObject = {};
// 判断是否是过时的context的提供者
export function isOldProvider(comp: Function): boolean {
// @ts-ignore
const childContextTypes = comp.childContextTypes;
return childContextTypes !== null && childContextTypes !== undefined;
}
// 判断是否是过时的context的消费者
export function isOldConsumer(comp: Function): boolean {
// @ts-ignore
const contextTypes = comp.contextTypes;
return contextTypes !== null && contextTypes !== undefined;
}
// 如果是旧版context提供者，则缓存两个全局变量，上一个提供者提供的context和当前提供者提供的context
export function cacheOldCtx(processing: VNode, hasOldContext: any): void {
// 每一个context提供者都会更新ctxOldContext
if (hasOldContext) {
setOldPreviousContextCtx(getOldContextCtx());
const vNodeContext = getVNodeOldContext(processing) || emptyObject;
setOldContextCtx(processing, vNodeContext);
}
}
// 获取当前组件可以消费的context
export function getOldContext(processing: VNode, clazz: Function, ifProvider: boolean) {
const type = processing.type;
// 不是context消费者， 则直接返回空对象
if (!isOldConsumer(type)) {
return emptyObject;
}
// 当组件既是提供者，也是消费者时，取上一个context，不能直接取最新context，因为已经被更新为当前组件的context；
// 当组件只是消费者时，则取最新context
const parentContext = (ifProvider && isOldProvider(clazz)) ?
getOldPreviousContextCtx() :
getOldContextCtx();
// 除非父级context更改，否则不需要重新创建子context，直接取对应节点上存的。
if (getVNodeOldPreviousContext(processing) === parentContext) {
return getVNodeOldContext(processing);
}
// 从父的context中取出子定义的context
const context = {};
for (const key in type.contextTypes) {
context[key] = parentContext[key];
}
// 缓存当前组件的context，最近祖先传递下来context，当前可消费的context
setVNodeOldPreviousContext(processing, parentContext);
setVNodeOldContext(processing, context);
return context;
}
// 重置context
export function resetOldCtx(vNode: VNode): void {
resetOldContextCtx(vNode);
resetContextChangeCtx(vNode);
}
// 当前组件是提供者，则需要合并祖先context和当前组件提供的context
function handleContext(vNode: VNode, parentContext: Object): Object {
const instance = vNode.realNode;
if (typeof instance.getChildContext !== 'function') {
return parentContext;
}
// 合并祖先提供的context和当前组件提供的context
return {...parentContext, ...instance.getChildContext()};
}
// 当前组件是context提供者，更新时，需要合并祖先context和当前组件提供的context
export function updateOldContext(vNode: VNode): void {
const ctx = handleContext(vNode, getOldPreviousContextCtx());
// 更新context，给子组件用的context
setOldContextCtx(vNode, ctx);
// 标记更改
setContextChangeCtx(vNode, true);
}

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

@ -1,8 +1,6 @@
import type { VNode } from '../Types';
import {cacheOldCtx, isOldProvider} from '../components/context/CompatibleContext';
import {
ClassComponent,
ContextProvider,
DomComponent,
DomPortal,
@ -23,11 +21,6 @@ function handlerContext(processing: VNode) {
case DomComponent:
setNamespaceCtx(processing);
break;
case ClassComponent: {
const isOldCxtExist = isOldProvider(processing.type);
cacheOldCtx(processing, isOldCxtExist);
break;
}
case DomPortal:
setNamespaceCtx(processing, processing.realNode);
break;

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

@ -2,13 +2,6 @@ import type { VNode } from '../Types';
import { mergeDefaultProps } from './LazyComponent';
import { getNewContext, resetDepContexts } from '../components/context/Context';
import {
cacheOldCtx,
getOldContext,
isOldProvider,
resetOldCtx,
updateOldContext,
} from '../components/context/CompatibleContext';
import {
callComponentWillMount,
callComponentWillReceiveProps,
@ -25,17 +18,18 @@ import { markRef } from './BaseComponent';
import {
processUpdates,
} from '../UpdateHandler';
import { getContextChangeCtx, setContextChangeCtx } from '../ContextSaver';
import { getContextChangeCtx } from '../ContextSaver';
import { setProcessingClassVNode } from '../GlobalVar';
import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
const emptyContextObj = {};
// 获取当前节点的context
export function getCurrentContext(clazz, processing: VNode) {
const context = clazz.contextType;
return typeof context === 'object' && context !== null
? getNewContext(processing, context)
: getOldContext(processing, clazz, true);
: emptyContextObj;
}
// 挂载实例
@ -112,8 +106,6 @@ export function captureRender(processing: VNode): VNode | null {
clazz = clazz._load(clazz._content);
}
}
const isOldCxtExist = isOldProvider(clazz);
cacheOldCtx(processing, isOldCxtExist);
resetDepContexts(processing);
@ -170,24 +162,13 @@ export function captureRender(processing: VNode): VNode | null {
// 不复用
if (shouldUpdate) {
// 更新context
if (isOldCxtExist) {
updateOldContext(processing);
}
return createChildren(clazz, processing);
} else {
if (isOldCxtExist) {
setContextChangeCtx(processing, false);
}
return onlyUpdateChildVNodes(processing);
}
}
export function bubbleRender(processing: VNode) {
if (isOldProvider(processing.type)) {
resetOldCtx(processing);
}
}
export function bubbleRender(processing: VNode) {}
// 用于未完成的类组件
export function getIncompleteClassComponent(clazz, processing: VNode, nextProps: object): VNode | null {

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

@ -1,19 +1,19 @@
import type {VNode} from '../Types';
import type { VNode } from '../Types';
import {mergeDefaultProps} from './LazyComponent';
import {getOldContext} from '../components/context/CompatibleContext';
import {resetDepContexts} from '../components/context/Context';
import {exeFunctionHook} from '../hooks/HookMain';
import {ForwardRef} from '../vnode/VNodeTags';
import {FlagUtils, Update} from '../vnode/VNodeFlags';
import {getContextChangeCtx} from '../ContextSaver';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import { mergeDefaultProps } from './LazyComponent';
import { resetDepContexts } from '../components/context/Context';
import { exeFunctionHook } from '../hooks/HookMain';
import { ForwardRef } from '../vnode/VNodeTags';
import { FlagUtils, Update } from '../vnode/VNodeFlags';
import { getContextChangeCtx } from '../ContextSaver';
import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 在useState, useReducer的时候，会触发state变化
let stateChange = false;
export function bubbleRender() {}
export function bubbleRender() {
}
// 判断children是否可以复用
function checkIfCanReuseChildren(processing: VNode, shouldUpdate?: boolean) {
@ -52,13 +52,16 @@ export function captureFunctionComponent(
processing: VNode,
funcComp: any,
nextProps: any,
shouldUpdate?: boolean
shouldUpdate?: boolean,
) {
let context;
if (processing.tag !== ForwardRef) {
context = getOldContext(processing, funcComp, true);
}
// 函数组件内已完成异步动作
if (processing.isSuspended) {
// 由于首次被打断，应仍为首次渲染
processing.isCreated = true;
FlagUtils.markAddition(processing);
processing.isSuspended = false;
}
resetDepContexts(processing);
const isCanReuse = checkIfCanReuseChildren(processing, shouldUpdate);
@ -68,7 +71,7 @@ export function captureFunctionComponent(
const newElements = exeFunctionHook(
processing.tag === ForwardRef ? funcComp.render : funcComp,
nextProps,
processing.tag === ForwardRef ? processing.ref : context,
processing.tag === ForwardRef ? processing.ref : undefined,
processing,
);
@ -95,7 +98,7 @@ export function captureRender(processing: VNode, shouldUpdate?: boolean): VNode
processing,
Component,
resolvedProps,
shouldUpdate
shouldUpdate,
);
}

16
libs/horizon/src/renderer/render/IncompleteClassComponent.ts
View File

@ -4,18 +4,10 @@ import {mergeDefaultProps} from './LazyComponent';
import {ClassComponent} from '../vnode/VNodeTags';
import {resetDepContexts} from '../components/context/Context';
import {getIncompleteClassComponent} from './ClassComponent';
import {
isOldProvider,
resetOldCtx,
cacheOldCtx,
} from '../components/context/CompatibleContext';
function captureIncompleteClassComponent(processing, Component, nextProps) {
processing.tag = ClassComponent;
const hasOldContext = isOldProvider(Component);
cacheOldCtx(processing, hasOldContext);
resetDepContexts(processing);
return getIncompleteClassComponent(Component, processing, nextProps);
@ -32,10 +24,4 @@ export function captureRender(processing: VNode): VNode | null {
return captureIncompleteClassComponent(processing, Component, resolvedProps);
}
export function bubbleRender(processing: VNode) {
// 处理与类组件相同。
const Component = processing.type;
if (isOldProvider(Component)) {
resetOldCtx(processing);
}
}
export function bubbleRender(processing: VNode) {}

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

@ -4,6 +4,7 @@ import {FlagUtils, Interrupted} from '../vnode/VNodeFlags';
import {onlyUpdateChildVNodes, updateVNode, createFragmentVNode} from '../vnode/VNodeCreator';
import {
ClassComponent,
FunctionComponent,
IncompleteClassComponent,
SuspenseComponent,
} from '../vnode/VNodeTags';
@ -21,7 +22,7 @@ export enum SuspenseChildStatus {
// 创建fallback子节点
function createFallback(processing: VNode, fallbackChildren) {
const childFragment: VNode = processing.child;
const childFragment: VNode = processing.child!;
let fallbackFragment;
childFragment.childShouldUpdate = false;
@ -185,6 +186,9 @@ export function handleSuspenseChildThrowError(parent: VNode, processing: VNode,
}
}
if(processing.tag === FunctionComponent) {
processing.isSuspended = true;
}
// 应该抛出promise未完成更新，标志待更新
processing.shouldUpdate = true;
@ -223,7 +227,6 @@ export function listenToPromise(suspenseVNode: VNode) {
// 记录已经监听的 promise
let promiseCache = suspenseVNode.realNode;
if (promiseCache === null) {
// @ts-ignore
promiseCache = new PossiblyWeakSet();
suspenseVNode.realNode = new PossiblyWeakSet();
}

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

@ -2,13 +2,11 @@ import type {VNode} from '../Types';
import {throwIfTrue} from '../utils/throwIfTrue';
import {processUpdates} from '../UpdateHandler';
import {resetNamespaceCtx, setNamespaceCtx} from '../ContextSaver';
import {resetOldCtx} from '../components/context/CompatibleContext';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
export function bubbleRender(processing: VNode) {
resetNamespaceCtx(processing);
resetOldCtx(processing);
}
function updateTreeRoot(processing) {

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

@ -30,7 +30,7 @@ export class VNode {
updates: any[] | null; // TreeRoot和ClassComponent使用的更新数组
stateCallbacks: any[] | null; // 存放存在setState的第二个参数和HorizonDOM.render的第三个参数所在的node数组
isForceUpdate: boolean; // 是否使用强制更新
isSuspended = false; // 是否被suspense打断更新
state: any; // ClassComponent和TreeRoot的状态
hooks: Array<Hook<any, any>> | null; // 保存hook
suspenseChildStatus = ''; // Suspense的Children是否显示

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

@ -56,7 +56,7 @@ export function getLazyVNodeTag(lazyComp: any): string {
} else if (lazyComp !== undefined && lazyComp !== null && typeLazyMap[lazyComp.vtype]) {
return typeLazyMap[lazyComp.vtype];
}
throw Error("Horizon can't resolve the content of lazy ");
throw Error('Horizon can\'t resolve the content of lazy');
}
// 创建processing

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

@ -2,7 +2,7 @@
* vNode结构的变化标志
*/
import type { VNode } from '../Types';
import type { VNode } from './VNode';
export const InitFlag = /** */ 0;