Match-id-5d829761be3cdb27d99f9e2f53042f9c7f21acb9

.eslintrc.js

@@ -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 }],

libs/horizon/src/renderer/ContextSaver.ts

@@ -3,11 +3,11 @@
  * 在深度遍历过程中，begin阶段会修改一些全局的值，在complete阶段会恢复。
  */
 
-import type {VNode, ContextType} from './Types';
+import type { VNode, ContextType } from './Types';
-import type {Container} from '../dom/DOMOperator';
+import type { Container } from '../dom/DOMOperator';
 
-import {getNSCtx} from '../dom/DOMOperator';
+import { getNSCtx } from '../dom/DOMOperator';
-import {ContextProvider} from './vnode/VNodeTags';
+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。
+let ctxOldChange = false;
-const CTX_OLD_CONTEXT = 'CTX_OLD_CONTEXT';
+let ctxNamespace = '';
-// 旧版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 = {};
 
 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,
 };
 
 

libs/horizon/src/renderer/components/context/CompatibleContext.ts

@@ -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);
-}

libs/horizon/src/renderer/render/BaseComponent.ts

@@ -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;

libs/horizon/src/renderer/render/ClassComponent.ts

@@ -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) {
+export function bubbleRender(processing: VNode) {}
-  if (isOldProvider(processing.type)) {
-    resetOldCtx(processing);
-  }
-}
 
 // 用于未完成的类组件
 export function getIncompleteClassComponent(clazz, processing: VNode, nextProps: object): VNode | null {

libs/horizon/src/renderer/render/FunctionComponent.ts

@@ -1,19 +1,19 @@
-import type {VNode} from '../Types';
+import type { VNode } from '../Types';
 
-import {mergeDefaultProps} from './LazyComponent';
+import { mergeDefaultProps } from './LazyComponent';
-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 { 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变化
 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) {
+  if (processing.isSuspended) {
-    context = getOldContext(processing, funcComp, true);
+    // 由于首次被打断，应仍为首次渲染
-  }
+    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,
   );
 }
 

libs/horizon/src/renderer/render/IncompleteClassComponent.ts

@@ -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) {
+export function bubbleRender(processing: VNode) {}
-  // 处理与类组件相同。
-  const Component = processing.type;
-  if (isOldProvider(Component)) {
-    resetOldCtx(processing);
-  }
-}

libs/horizon/src/renderer/render/SuspenseComponent.ts

@@ -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();
     }

libs/horizon/src/renderer/render/TreeRoot.ts

@@ -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) {

libs/horizon/src/renderer/vnode/VNode.ts

@@ -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是否显示

libs/horizon/src/renderer/vnode/VNodeCreator.ts

@@ -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

libs/horizon/src/renderer/vnode/VNodeFlags.ts

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