Match-id-52f4df6a91e64babf85d2b4fe312dff944c9a1b2

libs/horizon/index.ts

@@ -23,6 +23,9 @@ import {
   createElement,
   cloneElement,
   isValidElement,
+  act,
+  launchUpdateFromVNode as _launchUpdateFromVNode,
+  getProcessingVNode as _getProcessingVNode,
 } from './src/external/Horizon';
 
 import {
@@ -63,6 +66,9 @@ const Horizon = {
   unstable_batchedUpdates,
   findDOMNode,
   unmountComponentAtNode,
+  act,
+  _launchUpdateFromVNode,
+  _getProcessingVNode,
 };
 
 export {
@@ -95,6 +101,9 @@ export {
   unstable_batchedUpdates,
   findDOMNode,
   unmountComponentAtNode,
+  act,
+  _launchUpdateFromVNode,
+  _getProcessingVNode,
 };
 
 export default Horizon;

libs/horizon/src/external/Horizon.ts

@@ -17,7 +17,6 @@ import {createContext} from '../renderer/components/context/CreateContext';
 import {lazy} from '../renderer/components/Lazy';
 import {forwardRef} from '../renderer/components/ForwardRef';
 import {memo} from '../renderer/components/Memo';
-import hookMapping from '../renderer/hooks/HookMapping';
 
 import {
   useCallback,
@@ -30,6 +29,16 @@ import {
   useRef,
   useState,
 } from '../renderer/hooks/HookExternal';
+import {launchUpdateFromVNode, asyncUpdates} from '../renderer/TreeBuilder';
+import {callRenderQueueImmediate} from '../renderer/taskExecutor/RenderQueue';
+import {runAsyncEffects} from '../renderer/submit/HookEffectHandler';
+import { getProcessingVNode } from '../renderer/hooks/BaseHook';
+
+const act = (fun) => {
+  asyncUpdates(fun);
+  callRenderQueueImmediate();
+  runAsyncEffects();
+}
 
 export {
   Children,
@@ -56,5 +65,7 @@ export {
   createElement,
   cloneElement,
   isValidElement,
-  hookMapping,
+  act,
+  launchUpdateFromVNode,
+  getProcessingVNode,
 };

libs/horizon/src/renderer/hooks/HookExternal.ts

@@ -1,17 +1,15 @@
 import type {ContextType} from '../Types';
 
-import hookMapping from './HookMapping';
 import {useRefImpl} from './UseRefHook';
 import {useEffectImpl, useLayoutEffectImpl} from './UseEffectHook';
 import {useCallbackImpl} from './UseCallbackHook';
 import {useMemoImpl} from './UseMemoHook';
 import {useImperativeHandleImpl} from './UseImperativeHook';
-
+import {useReducerImpl} from './UseReducerHook';
-const {
+import {useStateImpl} from './UseStateHook';
-  UseContextHookMapping,
+import {getNewContext} from '../components/context/Context';
-  UseReducerHookMapping,
+import {getProcessingVNode} from './BaseHook';
-  UseStateHookMapping
+import {Ref, Trigger} from './HookType';
-} = hookMapping;
 
 type BasicStateAction<S> = ((S) => S) | S;
 type Dispatch<A> = (A) => void;
@@ -20,22 +18,23 @@ type Dispatch<A> = (A) => void;
 export function useContext<T>(
   Context: ContextType<T>,
 ): T {
-  return UseContextHookMapping.val.useContext(Context);
+  const processingVNode = getProcessingVNode();
+  return getNewContext(processingVNode!, Context, true);
 }
 
 export function useState<S>(initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] {
-  return UseStateHookMapping.val.useState(initialState);
+  return useStateImpl(initialState);
 }
 
 export function useReducer<S, I, A>(
   reducer: (S, A) => S,
   initialArg: I,
   init?: (I) => S,
-): [S, Dispatch<A>] {
+): [S, Trigger<A>] | void {
-  return UseReducerHookMapping.val.useReducer(reducer, initialArg, init);
+  return useReducerImpl(reducer, initialArg, init);
 }
 
-export function useRef<T>(initialValue: T): {current: T} {
+export function useRef<T>(initialValue: T): Ref<T> {
   return useRefImpl(initialValue);
 }
 

libs/horizon/src/renderer/hooks/HookMain.ts

@@ -1,22 +1,11 @@
 import type {VNode} from '../Types';
-import hookMapping from './HookMapping';
 
-const {
-  UseStateHookMapping,
-  UseReducerHookMapping,
-  UseContextHookMapping,
-} = hookMapping;
-
-import {getNewContext} from '../components/context/Context';
 import {
   getLastTimeHook,
-  getProcessingVNode,
   setLastTimeHook,
   setProcessingVNode,
   setCurrentHook, getNextHook
 } from './BaseHook';
-import {useStateImpl} from './UseStateHook';
-import {useReducerImpl} from './UseReducerHook';
 import {HookStage, setHookStage} from './HookStage';
 
 // hook对外入口
@@ -29,9 +18,6 @@ export function exeFunctionHook<Props extends Record<string, any>, Arg>(
   // 重置全局变量
   resetGlobalVariable();
 
-  // 初始化hook实现函数
-  initHookMapping();
-
   setProcessingVNode(processing);
 
   processing.oldHooks = processing.hooks;
@@ -71,8 +57,3 @@ function resetGlobalVariable() {
   setCurrentHook(null);
 }
 
-export function initHookMapping() {
-  UseContextHookMapping.val = {useContext: context => getNewContext(getProcessingVNode(), context, true)};
-  UseReducerHookMapping.val = {useReducer: useReducerImpl};
-  UseStateHookMapping.val = {useState: useStateImpl};
-}

libs/horizon/src/renderer/hooks/HookMapping.ts

@@ -1,21 +0,0 @@
-/**
- * 暂时用于解决测试代码无法运行问题，估计是：测试代码会循环或者重复依赖
- */
-
-import type {
-  UseContextHookType,
-  UseReducerHookType,
-  UseStateHookType
-} from '../Types';
-
-const UseStateHookMapping: {val: (null | UseStateHookType)} = {val: null};
-const UseReducerHookMapping: {val: (null | UseReducerHookType)} = {val: null};
-const UseContextHookMapping: {val: (null | UseContextHookType)} = {val: null};
-
-const hookMapping = {
-  UseStateHookMapping,
-  UseReducerHookMapping,
-  UseContextHookMapping,
-}
-
-export default hookMapping;

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

@@ -76,12 +76,14 @@ export function captureFunctionComponent(
   );
 
   // 这里需要判断是否可以复用，因为函数组件比起其他组价，多了context和stateChange两个因素
-  if (isCanReuse && !isStateChange()) {
+  if (isCanReuse && !isStateChange() && !processing.isStoreChange) {
     FlagUtils.removeFlag(processing, Update);
 
     return onlyUpdateChildVNodes(processing);
   }
 
+  processing.isStoreChange = false;
+
   processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
   return processing.child;
 }

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

@@ -66,6 +66,10 @@ export class VNode {
 
   belongClassVNode: VNode | null = null; // 记录JSXElement所属class vNode，处理ref的时候使用
 
+  // 状态管理器使用
+  isStoreChange: boolean;
+  functionToObserver: FunctionToObserver | null; // 记录这个函数组件依赖哪些Observer
+
   constructor(tag: VNodeTag, props: any, key: null | string, realNode) {
     this.tag = tag; // 对应组件的类型，比如ClassComponent等
     this.key = key;
@@ -90,6 +94,8 @@ export class VNode {
         this.depContexts = null;
         this.isDepContextChange = false;
         this.oldHooks = null;
+        this.isStoreChange = false;
+        this.functionToObserver = null;
         break;
       case ClassComponent:
         this.realNode = null;

scripts/__tests__/ComponentTest/HookTest/UseContext.test.js

@@ -1,9 +1,7 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
-import { act } from '../../jest/customMatcher';
 
 describe('useContext Hook Test', () => {
-  const { useState, useContext } = Horizon;
+  const { useState, useContext, act, unmountComponentAtNode } = Horizon;
-  const { unmountComponentAtNode } = Horizon;
 
   it('简单使用useContext', () => {
     const LanguageTypes = {

scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js

@@ -1,7 +1,6 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
-import { act } from '../../jest/customMatcher';
+import { Text } from '../../jest/commonComponents';
-import Text from '../../jest/Text';
 
 describe('useEffect Hook Test', () => {
   const {
@@ -9,7 +8,8 @@ describe('useEffect Hook Test', () => {
     useLayoutEffect,
     useState,
     memo,
-    forwardRef
+    forwardRef,
+    act,
   } = Horizon;
 
   it('简单使用useEffect', () => {

scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js

@@ -1,13 +1,13 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
-import { act } from '../../jest/customMatcher';
+import { Text } from '../../jest/commonComponents';
-import Text from '../../jest/Text';
 
 describe('useImperativeHandle Hook Test', () => {
   const {
     useState,
     useImperativeHandle,
-    forwardRef
+    forwardRef,
+    act,
   } = Horizon;
   const { unmountComponentAtNode } = Horizon;
 

scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js

@@ -1,13 +1,13 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
-import { act } from '../../jest/customMatcher';
+import { Text } from '../../jest/commonComponents';
-import Text from '../../jest/Text';
 
 describe('useLayoutEffect Hook Test', () => {
   const {
     useState,
     useEffect,
-    useLayoutEffect
+    useLayoutEffect,
+    act,
   } = Horizon;
 
   it('简单使用useLayoutEffect', () => {

scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js

@@ -1,6 +1,6 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
-import Text from '../../jest/Text';
+import { Text } from '../../jest/commonComponents';
 
 describe('useMemo Hook Test', () => {
   const { useMemo, useState } = Horizon;

scripts/__tests__/ComponentTest/HookTest/UseRef.test.js

@@ -1,6 +1,6 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
-import Text from '../../jest/Text';
+import { Text } from '../../jest/commonComponents';
 
 describe('useRef Hook Test', () => {
   const { useState, useRef } = Horizon;

scripts/__tests__/ComponentTest/HookTest/UseState.test.js

@@ -1,14 +1,14 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
-import { act } from '../../jest/customMatcher';
+import { Text } from '../../jest/commonComponents';
-import Text from '../../jest/Text';
 
 describe('useState Hook Test', () => {
   const {
     useState,
     forwardRef,
     useImperativeHandle,
-    memo
+    memo,
+    act,
   } = Horizon;
 
   it('简单使用useState', () => {

scripts/__tests__/EventTest/FocusEvent.test.js

@@ -1,6 +1,5 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../jest/logUtils';
-import { act } from '../jest/customMatcher';
 
 describe('合成焦点事件', () => {
 
@@ -43,4 +42,4 @@ describe('合成焦点事件', () => {
       'onBlur: blur',
     ]);
   })
-})
+})

scripts/__tests__/jest/Text.js

@@ -1,9 +0,0 @@
-import * as Horizon from '@cloudsop/horizon/index.ts';
-import * as LogUtils from '../jest/logUtils';
-
-const Text = (props) => {
-    LogUtils.log(props.text);
-    return <p>{props.text}</p>;
-};
-
-export default Text;

scripts/__tests__/jest/commonComponents.js

@@ -0,0 +1,20 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import * as LogUtils from './logUtils';
+
+export const App = (props) => {
+  const Parent = props.parent;
+  const Child = props.child;
+
+  return (
+    <div>
+      <Parent>
+        <Child />
+      </Parent>
+    </div>
+  );
+}
+
+export const Text = (props) => {
+  LogUtils.log(props.text);
+  return <p id={props.id}>{props.text}</p>;
+}

scripts/__tests__/jest/customMatcher.js

@@ -1,33 +0,0 @@
-import { runAsyncEffects } from '../../../libs/horizon/src/renderer/submit/HookEffectHandler';
-import { callRenderQueueImmediate } from '../../../libs/horizon/src/renderer/taskExecutor/RenderQueue';
-import { asyncUpdates } from '../../../libs/horizon/src/renderer/TreeBuilder';
-
-function runAssertion(fn) {
-  try {
-    fn();
-  } catch (error) {
-    return {
-      pass: false,
-      message: () => error.message,
-    };
-  }
-  return { pass: true };
-}
-
-function toMatchValue(LogUtils, expectedValues) {
-  return runAssertion(() => {
-    const actualValues = LogUtils.getAndClear();
-    expect(actualValues).toEqual(expectedValues);
-  });
-}
-
-const act = (fun) => {
-  asyncUpdates(fun);
-  callRenderQueueImmediate();
-  runAsyncEffects();
-}
-
-module.exports = {
-  toMatchValue,
-  act
-};

scripts/__tests__/jest/jestSetting.js

@@ -17,7 +17,27 @@ global.afterEach(() => {
   LogUtils.clear();
 });
 
+
+function runAssertion(fn) {
+  try {
+    fn();
+  } catch (error) {
+    return {
+      pass: false,
+      message: () => error.message,
+    };
+  }
+  return { pass: true };
+}
+
+function toMatchValue(LogUtils, expectedValues) {
+  return runAssertion(() => {
+    const actualValues = LogUtils.getAndClear();
+    expect(actualValues).toEqual(expectedValues);
+  });
+}
+
 // 使Jest感知自定义匹配器
 expect.extend({
-  ...require('./customMatcher'),
+  toMatchValue,
 });

scripts/__tests__/jest/testUtils.js

@@ -9,7 +9,7 @@ export const stopBubbleOrCapture = (e, value) => {
 export const getEventListeners = (dom) => {
   let ret = true
   let keyArray = [];
-  for (var key in dom) {
+  for (let key in dom) {
     keyArray.push(key);
   }
   try {
@@ -23,4 +23,11 @@ export const getEventListeners = (dom) => {
 
   }
   return ret;
-};
+};
+
+export function triggerClickEvent(container, id) {
+  const event = new MouseEvent('click', {
+    bubbles: true,
+  });
+  container.querySelector(`#${id}`).dispatchEvent(event);
+}