diff --git a/.eslintrc.js b/.eslintrc.js index 46239631..1a425fc3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,6 +32,9 @@ module.exports = { es6: true, }, rules: { + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + 'semi': ["error", "always"], 'accessor-pairs': 'off', 'brace-style': ['error', '1tbs'], 'func-style': ['warn', 'declaration', { allowArrowFunctions: true }], diff --git a/libs/horizon/src/renderer/hooks/BaseHook.ts b/libs/horizon/src/renderer/hooks/BaseHook.ts index 8c3f3605..54e180c8 100644 --- a/libs/horizon/src/renderer/hooks/BaseHook.ts +++ b/libs/horizon/src/renderer/hooks/BaseHook.ts @@ -1,7 +1,7 @@ import type { VNode } from '../Types'; import type { Hook } from './HookType'; -let processingVNode: VNode = null; +let processingVNode: VNode | null = null; // lastTimeHook是上一次执行func时产生的hooks中，与currentHook对应的hook let lastTimeHook: Hook | null = null; @@ -13,7 +13,7 @@ export function getProcessingVNode() { return processingVNode; } -export function setProcessingVNode(vNode: VNode) { +export function setProcessingVNode(vNode: VNode | null) { processingVNode = vNode; } @@ -21,11 +21,11 @@ export function getLastTimeHook() { return lastTimeHook; } -export function setLastTimeHook(hook: Hook) { +export function setLastTimeHook(hook: Hook | null) { lastTimeHook = hook; } -export function setCurrentHook(hook: Hook) { +export function setCurrentHook(hook: Hook | null) { currentHook = hook; } diff --git a/libs/horizon/src/renderer/hooks/HookMain.ts b/libs/horizon/src/renderer/hooks/HookMain.ts index e8992e5a..f4c568ea 100644 --- a/libs/horizon/src/renderer/hooks/HookMain.ts +++ b/libs/horizon/src/renderer/hooks/HookMain.ts @@ -15,17 +15,17 @@ import { setProcessingVNode, setCurrentHook, getNextHook } from './BaseHook'; -import {useStateImpl,} from './UseStateHook'; -import {useReducerImpl,} from './UseReducerHook'; +import {useStateImpl} from './UseStateHook'; +import {useReducerImpl} from './UseReducerHook'; import {HookStage, setHookStage} from './HookStage'; // hook对外入口 -export function exeFunctionHook( - funcComp: (props: Object, arg: Object) => any, - props: Object, - arg: Object, +export function exeFunctionHook, Arg>( + funcComp: (props: Props, arg: Arg) => any, + props: Props, + arg: Arg, processing: VNode, -): any { +) { // 重置全局变量 resetGlobalVariable(); @@ -39,13 +39,13 @@ export function exeFunctionHook( processing.effectList = []; // 设置hook阶段 - if (processing.isCreated || !processing.oldHooks.length) { + if (processing.isCreated || !processing.oldHooks!.length) { setHookStage(HookStage.Init); } else { setHookStage(HookStage.Update); } - let comp = funcComp(props, arg); + const comp = funcComp(props, arg); // 设置hook阶段为null，用于判断hook是否在函数组件中调用 setHookStage(null); diff --git a/libs/horizon/src/renderer/hooks/HookStage.ts b/libs/horizon/src/renderer/hooks/HookStage.ts index c3e9622a..5f0a5a65 100644 --- a/libs/horizon/src/renderer/hooks/HookStage.ts +++ b/libs/horizon/src/renderer/hooks/HookStage.ts @@ -10,6 +10,6 @@ export function getHookStage() { return hookStage; } -export function setHookStage(phase: HookStage) { +export function setHookStage(phase: HookStage | null) { hookStage = phase; } diff --git a/libs/horizon/src/renderer/render/ClsOrFunComponent.ts b/libs/horizon/src/renderer/render/ClsOrFunComponent.ts deleted file mode 100644 index fd342fac..00000000 --- a/libs/horizon/src/renderer/render/ClsOrFunComponent.ts +++ /dev/null @@ -1,36 +0,0 @@ -import type {VNode} from '../Types'; - -import {FunctionComponent} from '../vnode/VNodeTags'; -import {resetDepContexts} from '../components/context/Context'; -import {getOldContext} from '../components/context/CompatibleContext'; -import {FlagUtils} from '../vnode/VNodeFlags'; -import {exeFunctionHook} from '../hooks/HookMain'; -import { createChildrenByDiff } from '../diff/nodeDiffComparator'; - -function captureIndeterminateComponent( - processing: VNode, -): VNode | null { - const funcComp = processing.type; - - if (!processing.isCreated) { - processing.isCreated = true; - FlagUtils.markAddition(processing); - } - - const props = processing.props; - const context = getOldContext(processing, funcComp, false); - - resetDepContexts(processing); - - const newElements = exeFunctionHook(funcComp, props, context, processing); - - processing.tag = FunctionComponent; - processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated); - return processing.child; -} - -export function captureRender(processing: VNode): VNode | null { - return captureIndeterminateComponent(processing); -} - -export function bubbleRender() {} diff --git a/libs/horizon/src/renderer/render/index.ts b/libs/horizon/src/renderer/render/index.ts index 29637aa3..4497627a 100644 --- a/libs/horizon/src/renderer/render/index.ts +++ b/libs/horizon/src/renderer/render/index.ts @@ -10,7 +10,6 @@ import * as DomPortalRender from './DomPortal'; import * as TreeRootRender from './TreeRoot'; import * as DomTextRender from './DomText'; import * as IncompleteClassComponentRender from './IncompleteClassComponent'; -import * as ClsOrFunComponentRender from './ClsOrFunComponent'; import * as LazyComponentRender from './LazyComponent'; import * as MemoComponentRender from './MemoComponent'; import * as SuspenseComponentRender from './SuspenseComponent'; @@ -27,7 +26,6 @@ import { TreeRoot, DomText, IncompleteClassComponent, - ClsOrFunComponent, LazyComponent, MemoComponent, SuspenseComponent, @@ -49,7 +47,6 @@ export default { [TreeRoot]: TreeRootRender, [DomText]: DomTextRender, [IncompleteClassComponent]: IncompleteClassComponentRender, - [ClsOrFunComponent]: ClsOrFunComponentRender, [LazyComponent]: LazyComponentRender, [MemoComponent]: MemoComponentRender, [SuspenseComponent]: SuspenseComponentRender, diff --git a/libs/horizon/src/renderer/vnode/VNode.ts b/libs/horizon/src/renderer/vnode/VNode.ts index b076a3eb..6386fd98 100644 --- a/libs/horizon/src/renderer/vnode/VNode.ts +++ b/libs/horizon/src/renderer/vnode/VNode.ts @@ -1,7 +1,7 @@ /** * 虚拟DOM结构体 */ -import { TreeRoot, FunctionComponent, ClassComponent, DomPortal, DomText, ContextConsumer, ForwardRef, SuspenseComponent, LazyComponent, ClsOrFunComponent, DomComponent, Fragment, ContextProvider, Profiler, MemoComponent, IncompleteClassComponent } from './VNodeTags'; +import { TreeRoot, FunctionComponent, ClassComponent, DomPortal, DomText, ContextConsumer, ForwardRef, SuspenseComponent, LazyComponent, DomComponent, Fragment, ContextProvider, Profiler, MemoComponent, IncompleteClassComponent } from './VNodeTags'; import type { VNodeTag } from './VNodeTags'; import type { RefType, ContextType } from '../Types'; import type { Hook } from '../hooks/HookType'; @@ -18,8 +18,8 @@ export class VNode { parent: VNode | null = null; // 父节点 child: VNode | null = null; // 子节点 next: VNode | null = null; // 兄弟节点 - cIndex: number = 0; // 节点在children数组中的位置 - eIndex: number = 0; // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致 + cIndex = 0; // 节点在children数组中的位置 + eIndex = 0; // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致 ref: RefType | ((handle: any) => void) | null = null; // 包裹一个函数，submit阶段使用，比如将外部useRef生成的对象赋值到ref上 oldProps: any = null; @@ -33,12 +33,12 @@ export class VNode { state: any; // ClassComponent和TreeRoot的状态 hooks: Array> | null; // 保存hook - suspenseChildStatus: string = ''; // Suspense的Children是否显示 + suspenseChildStatus = ''; // Suspense的Children是否显示 depContexts: Array> | null; // FunctionComponent和ClassComponent对context的依赖列表 isDepContextChange: boolean; // context是否变更 dirtyNodes: Array | null = null; // 需要改动的节点数组 - shouldUpdate: boolean = false; - childShouldUpdate: boolean = false; + shouldUpdate = false; + childShouldUpdate = false; task: any; // 使用这个变量来记录修改前的值，用于恢复。 @@ -51,7 +51,7 @@ export class VNode { flags = InitFlag; clearChild: VNode | null; // one tree相关属性 - isCreated: boolean = true; + isCreated = true; oldHooks: Array> | null; // 保存上一次执行的hook oldState: any; oldRef: RefType | ((handle: any) => void) | null = null; @@ -61,7 +61,7 @@ export class VNode { suspenseDidCapture: boolean; // suspense是否捕获了异常 promiseResolve: boolean; // suspense的promise是否resolve - path: string = ''; // 保存从根到本节点的路径 + path = ''; // 保存从根到本节点的路径 toUpdateNodes: Set | null; // 保存要更新的节点 belongClassVNode: VNode | null = null; // 记录JSXElement所属class vNode，处理ref的时候使用 @@ -84,6 +84,7 @@ export class VNode { this.contexts = null; break; case FunctionComponent: + this.realNode = null; this.effectList = null; this.hooks = null; this.depContexts = null; @@ -101,10 +102,6 @@ export class VNode { this.oldState = null; this.contexts = null; break; - case ClsOrFunComponent: - this.realNode = null; - this.contexts = null; - break; case DomPortal: this.realNode = null; this.contexts = null; diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index 8c76d63c..457a1000 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -11,7 +11,6 @@ import { DomPortal, TreeRoot, DomText, - ClsOrFunComponent, LazyComponent, MemoComponent, SuspenseComponent, @@ -52,13 +51,12 @@ function isClassComponent(comp: Function) { // 解析懒组件的tag export function getLazyVNodeTag(lazyComp: any): string { - let vNodeTag = ClsOrFunComponent; if (typeof lazyComp === 'function') { - vNodeTag = isClassComponent(lazyComp) ? ClassComponent : FunctionComponent; + return isClassComponent(lazyComp) ? ClassComponent : FunctionComponent; } else if (lazyComp !== undefined && lazyComp !== null && typeLazyMap[lazyComp.vtype]) { - vNodeTag = typeLazyMap[lazyComp.vtype]; + return typeLazyMap[lazyComp.vtype]; } - return vNodeTag; + throw Error("Horizon can't resolve the content of lazy "); } // 创建processing @@ -105,7 +103,7 @@ export function createPortalVNode(portal) { } export function createUndeterminedVNode(type, key, props) { - let vNodeTag = ClsOrFunComponent; + let vNodeTag = FunctionComponent; let isLazy = false; const componentType = typeof type; diff --git a/libs/horizon/src/renderer/vnode/VNodeTags.ts b/libs/horizon/src/renderer/vnode/VNodeTags.ts index 2ec1db13..6e02e450 100644 --- a/libs/horizon/src/renderer/vnode/VNodeTags.ts +++ b/libs/horizon/src/renderer/vnode/VNodeTags.ts @@ -6,7 +6,6 @@ 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'; diff --git a/package.json b/package.json index d3da90aa..5ef9d520 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "libs/*" ], "scripts": { + "lint": "eslint . --ext .ts", "build": " webpack --config ./scripts/webpack/webpack.config.js", "build-3rdLib": "node ./scripts/gen3rdLib.js", "build-3rdLib-dev": "npm run build & node ./scripts/gen3rdLib.js --dev",