Match-id-1da48726eef4a520b10fbe5a29d1b869a4b29678

2022-03-21 14:54:32 +08:00 · 2022-03-21 14:54:32 +08:00 · d3260a4d94
parent e371508043
commit d3260a4d94
13 changed files with 133 additions and 139 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -29,7 +29,6 @@ module.exports = {
    node: true,
    es6: true,
  },
-
  rules: {
    'accessor-pairs': 'off',
    'brace-style': ['error', '1tbs'],
@ -42,4 +41,14 @@ module.exports = {
    'no-for-of-loops/no-for-of-loops': 'error',
    'no-function-declare-after-return/no-function-declare-after-return': 'error',
  },
+  overrides: [
+    {
+      files: [
+        'scripts/__tests__/**/*.js'
+      ],
+      globals: {
+        container: true
+      },
+    },
+  ],
 };
--- a/babel.config.js
+++ b/babel.config.js
@ -1,6 +1,6 @@
 module.exports = {
  presets: [
-    '@babel/react', 
+    '@babel/react',
    '@babel/preset-typescript',
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ],
@ -30,7 +30,10 @@ module.exports = {
    ['@babel/plugin-proposal-private-methods', { 'loose': true }],
    ['@babel/plugin-proposal-private-property-in-object', { 'loose': true }],
    '@babel/plugin-syntax-jsx',
-    '@babel/plugin-transform-react-jsx',
+    ['@babel/plugin-transform-react-jsx', {
+      pragma: 'Horizon.createElement',
+      pragmaFrag: 'Horizon.Fragment'
+    }],
    '@babel/plugin-transform-flow-strip-types',
  ],
 };
--- a/scripts/tests/ComponentTest/HookTest/UseCallback.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseCallback.test.js
@ -1,9 +1,7 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';

 describe('useCallback Hook Test', () => {
-  const { useState, useCallback } = React;
+  const { useState, useCallback } = Horizon;

  it('测试useCallback', () => {
    const App = (props) => {
@ -18,7 +16,7 @@ describe('useCallback Hook Test', () => {
        </>
      )
    }
-    HorizonDOM.render(<App text={1} />, container);
+    Horizon.render(<App text={1} />, container);
    expect(container.querySelector('p').innerHTML).toBe('0');
    // 点击按钮触发num加1
    container.querySelector('button').click();
@ -27,7 +25,7 @@ describe('useCallback Hook Test', () => {
    container.querySelector('button').click();
    expect(container.querySelector('p').innerHTML).toBe('1');

-    HorizonDOM.render(<App text={2} />, container);
+    Horizon.render(<App text={2} />, container);
    expect(container.querySelector('p').innerHTML).toBe('1');
    // 依赖项有变化，点击按钮num增加
    container.querySelector('button').click();
--- a/scripts/tests/ComponentTest/HookTest/UseContext.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseContext.test.js
@ -1,11 +1,9 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import { act } from '../../jest/customMatcher';

 describe('useContext Hook Test', () => {
-  const { useState, useContext } = React;
-  const { unmountComponentAtNode } = HorizonDOM;
+  const { useState, useContext } = Horizon;
+  const { unmountComponentAtNode } = Horizon;

  it('简单使用useContext', () => {
    const LanguageTypes = {
@ -13,7 +11,7 @@ describe('useContext Hook Test', () => {
      JAVASCRIPT: 'JavaScript',
    };
    const defaultValue = { type: LanguageTypes.JAVASCRIPT };
-    const SystemLanguageContext = React.createContext(defaultValue);
+    const SystemLanguageContext = Horizon.createContext(defaultValue);

    const SystemLanguageProvider = ({ type, children }) => {
      return (
@ -38,11 +36,11 @@ describe('useContext Hook Test', () => {
        </div>
      )
    }
-    HorizonDOM.render(<TestFunction />, container);
+    Horizon.render(<TestFunction />, container);
    // 测试当Provider未提供时，获取到的默认值'JavaScript'。
    expect(container.querySelector('p').innerHTML).toBe('JavaScript');
    unmountComponentAtNode(container);
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    // 测试当Provider提供时，可以获取到Provider的值'Java'。
    expect(container.querySelector('p').innerHTML).toBe('Java');
    // 测试当Provider改变时，可以获取到最新Provider的值。
--- a/scripts/tests/ComponentTest/HookTest/UseEffect.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseEffect.test.js
@ -1,18 +1,16 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
 import { act } from '../../jest/customMatcher';
 import Text from '../../jest/Text';

 describe('useEffect Hook Test', () => {
-  const { 
-    useEffect, 
-    useLayoutEffect, 
-    useState, 
-    memo, 
-    forwardRef 
-  } = React;
+  const {
+    useEffect,
+    useLayoutEffect,
+    useState,
+    memo,
+    forwardRef
+  } = Horizon;

  it('简单使用useEffect', () => {
    const App = () => {
@ -27,7 +25,7 @@ describe('useEffect Hook Test', () => {
        </>
      )
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(document.getElementById('p').style.display).toBe('block');
    // 点击按钮触发num加1
    container.querySelector('button').click();
@ -42,7 +40,7 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App />, container, () => {
+      Horizon.render(<App />, container, () => {
        LogUtils.log('num effect');
      });
      // 第一次渲染为同步，所以同步执行的可以写在act里做判断
@ -50,7 +48,7 @@ describe('useEffect Hook Test', () => {
      expect(container.textContent).toBe('op');
    });
    act(() => {
-      HorizonDOM.render(null, container, () => {
+      Horizon.render(null, container, () => {
        LogUtils.log('num effect89');
      });
      // 第二次渲染为异步，所以同步执行的不可以写在act里做判断，act里拿到的为空数组
@ -72,7 +70,7 @@ describe('useEffect Hook Test', () => {
    }
    const na = <NewApp />;
    // <App />必须设置key值，否则在diff的时候na会被视为不同组件
-    HorizonDOM.render([<App key="app" />, na], container);
+    Horizon.render([<App key="app" />, na], container);
    expect(LogUtils.getAndClear()).toEqual([
      'App',
      'NewApp'
@ -80,7 +78,7 @@ describe('useEffect Hook Test', () => {
    expect(container.textContent).toBe('AppNewApp');
    expect(LogUtils.getAndClear()).toEqual([]);
    // 在执行新的render前，会执行完上一次render的useEffect，所以LogUtils会加入'NewApp effect'。
-    HorizonDOM.render([na], container);
+    Horizon.render([na], container);
    expect(LogUtils.getAndClear()).toEqual(['NewApp effect']);
    expect(container.textContent).toBe('NewApp');
    expect(LogUtils.getAndClear()).toEqual([]);
@ -104,7 +102,7 @@ describe('useEffect Hook Test', () => {
      return <Text text="NewApp" />;
    }
    // <App />必须设置key值，否则在diff的时候na会被视为不同组件
-    HorizonDOM.render([<App key="app" />, <NewApp />], container);
+    Horizon.render([<App key="app" />, <NewApp />], container);
    expect(LogUtils.getAndClear()).toEqual([
      'App',
      'NewApp',
@ -122,7 +120,7 @@ describe('useEffect Hook Test', () => {
    const App = () => {
      useLayoutEffect(() => {
        LogUtils.log('App Layout effect');
-        HorizonDOM.render(<Text text="NewContainer" />, newContainer);
+        Horizon.render(<Text text="NewContainer" />, newContainer);
      });
      return <Text text="App" />;
    }
@ -133,7 +131,7 @@ describe('useEffect Hook Test', () => {
      return <Text text="NewApp" />;
    }
    // <App />必须设置key值，否则在diff的时候na会被视为不同组件
-    HorizonDOM.render([<App key="app" />, <NewApp />], container);
+    Horizon.render([<App key="app" />, <NewApp />], container);
    expect(LogUtils.getAndClear()).toEqual([
      'App',
      'NewApp',
@ -153,13 +151,13 @@ describe('useEffect Hook Test', () => {
      return <Text text={'num: ' + props.num} />;
    }
    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
      expect(container.textContent).toEqual('num: 0');
    })
    expect(LogUtils.getAndClear()).toEqual(['First effect [0]']);
    act(() => {
-      HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));

    })
    // 此时异步执行，act执行完后会执行新render的useEffect
@ -182,13 +180,13 @@ describe('useEffect Hook Test', () => {
      return <Text text={'num: ' + props.num} />;
    }
    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
      expect(container.textContent).toEqual('num: 0');
    })
    expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']);
    act(() => {
-      HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
    })
    // 第二次render时异步执行，act保证所有效果都已更新，所以先常规记录日志
    // 然后记录useEffect的日志
@ -231,7 +229,7 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App num={0} word={'App'} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} word={'App'} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'num: 0,word: App',
        'num Layouteffect [0]',
@ -246,21 +244,21 @@ describe('useEffect Hook Test', () => {

    act(() => {
      // 此时word改变，num不变
-      HorizonDOM.render(<App num={0} word={'React'} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} word={'Horizon'} />, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
-      'num: 0,word: React',
+      'num: 0,word: Horizon',
      'word Layouteffect destroy',
-      'word Layouteffect [React]',
+      'word Layouteffect [Horizon]',
      'callback effect',
      // 最后执行异步的
      'word effect destroy',
-      'word effect [React]',
+      'word effect [Horizon]',
    ]);

    act(() => {
      // 此时num和word的所有effect都销毁
-      HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
+      Horizon.render(null, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      'num Layouteffect destroy',
@ -284,7 +282,7 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'num: 0',
        'callback effect'
@ -296,7 +294,7 @@ describe('useEffect Hook Test', () => {
    ]);

    act(() => {
-      HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      'num: 1',
@ -309,7 +307,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual([]);

    act(() => {
-      HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
+      Horizon.render(null, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      'callback effect',
@ -331,7 +329,7 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'num: 0',
        'callback effect'
@ -343,7 +341,7 @@ describe('useEffect Hook Test', () => {
    ]);

    act(() => {
-      HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      'num: 1',
@ -354,7 +352,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual([]);

    act(() => {
-      HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
+      Horizon.render(null, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      'callback effect',
@ -367,7 +365,7 @@ describe('useEffect Hook Test', () => {
  it('useEffect里使用useState(1', () => {
    let setNum;
    const App = () => {
-      const [num, _setNum] = React.useState(0);
+      const [num, _setNum] = Horizon.useState(0);
      useEffect(() => {
        LogUtils.log(`num effect [${num}]`);
        setNum = () => _setNum(1);
@ -382,7 +380,7 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'num: 0',
        'num Layouteffect [0]',
@ -415,7 +413,7 @@ describe('useEffect Hook Test', () => {
      return <Text text={'Num: ' + num} />;
    }

-    HorizonDOM.render(<App />, container, () => LogUtils.log('App callback effect'));
+    Horizon.render(<App />, container, () => LogUtils.log('App callback effect'));
    expect(LogUtils.getAndClear()).toEqual(['Num: 0', 'App callback effect']);
    expect(container.textContent).toEqual('Num: 0');
    act(() => {
@ -445,7 +443,7 @@ describe('useEffect Hook Test', () => {
      return <Text text={num} />;
    })
    act(() => {
-      HorizonDOM.render(<App />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        0,
        'callback effect'
@ -456,7 +454,7 @@ describe('useEffect Hook Test', () => {

    // 不会重新渲染
    act(() => {
-      HorizonDOM.render(<App />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App />, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual(['callback effect']);
    expect(container.textContent).toEqual('0');
@ -475,7 +473,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual([]);

    act(() => {
-      HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
+      Horizon.render(null, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      'callback effect',
@ -497,7 +495,7 @@ describe('useEffect Hook Test', () => {
      return <Text text={props.num} />;
    }, compare)
    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        0,
        'callback effect'
@ -508,7 +506,7 @@ describe('useEffect Hook Test', () => {

    // 不会重新渲染
    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual(['callback effect']);
    expect(container.textContent).toEqual('0');
@ -516,7 +514,7 @@ describe('useEffect Hook Test', () => {

    // 会重新渲染
    act(() => {
-      HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual([
      1,
@ -529,7 +527,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual([]);

    act(() => {
-      HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
+      Horizon.render(null, container, () => LogUtils.log('callback effect'));
    });
    expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy 1']);
    expect(container.textContent).toEqual('');
@ -550,7 +548,7 @@ describe('useEffect Hook Test', () => {
      return <Text text={'Number: ' + props.num} />;
    }
    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () =>
+      Horizon.render(<App num={0} />, container, () =>
        LogUtils.log('App callback effect'),
      );
      expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'App callback effect']);
@ -560,7 +558,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual(['throw Error']);

    act(() => {
-      HorizonDOM.render(null, container, () =>
+      Horizon.render(null, container, () =>
        LogUtils.log('App callback effect'),
      );
    });
@ -592,14 +590,14 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('num effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('num effect'));
      expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
      expect(container.textContent).toBe('Number: 0');
    });
    expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);

    act(() => {
-      HorizonDOM.render(null, container, () => LogUtils.log('num effect'));
+      Horizon.render(null, container, () => LogUtils.log('num effect'));
    });
    expect(LogUtils.getAndClear()).toEqual(['num effect', 'num effect destroy 0']);
    expect(container.textContent).toBe('');
@ -618,7 +616,7 @@ describe('useEffect Hook Test', () => {
      return <Text text={`Number: ${num}`} />;
    }

-    HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
+    Horizon.render(<App />, container, () => LogUtils.log('num effect'));
    expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
    expect(container.textContent).toBe('Number: 0');

@ -648,13 +646,13 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
+      Horizon.render(<App />, container, () => LogUtils.log('num effect'));
      expect(LogUtils.getAndClear()).toEqual(['useEffect', 'num effect']);
    });
    expect(LogUtils.getAndClear()).toEqual(['effect']);

    act(() => {
-      HorizonDOM.render(null, container);
+      Horizon.render(null, container);
    });
    // 不会处理setNum(1)
    expect(LogUtils.getAndClear()).toEqual(['effect destroy']);
@ -663,7 +661,7 @@ describe('useEffect Hook Test', () => {
  it('当组件的更新方法在卸载函数中，组件的子组件更新不会告警', () => {
    const App = () => {
      LogUtils.log('App');
-      const appRef = React.createRef(null);
+      const appRef = Horizon.createRef(null);
      useEffect(() => {
        LogUtils.log('App effect');
        return () => {
@ -686,7 +684,7 @@ describe('useEffect Hook Test', () => {
    AppChild = forwardRef(AppChild);

    act(() => {
-      HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
+      Horizon.render(<App />, container, () => LogUtils.log('num effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'App',
        'AppChild',
@ -696,7 +694,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual(['Child effect', 'App effect']);

    act(() => {
-      HorizonDOM.render(null, container);
+      Horizon.render(null, container);
    });
    // 销毁时执行appRef.current(1)不会报错
    expect(LogUtils.getAndClear()).toEqual(['App effect destroy']);
@ -722,7 +720,7 @@ describe('useEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
+      Horizon.render(<App />, container, () => LogUtils.log('num effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'App',
        'AppChild',
@ -732,7 +730,7 @@ describe('useEffect Hook Test', () => {
    expect(LogUtils.getAndClear()).toEqual(['Child effect']);

    act(() => {
-      HorizonDOM.render(null, container);
+      Horizon.render(null, container);
    });
    // 销毁时执行 props.setNum(1);不会报错
    expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']);
--- a/scripts/tests/ComponentTest/HookTest/UseImperativeHandle.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseImperativeHandle.test.js
@ -1,6 +1,4 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
 import { act } from '../../jest/customMatcher';
 import Text from '../../jest/Text';
@ -10,9 +8,9 @@ describe('useImperativeHandle Hook Test', () => {
    useState,
    useImperativeHandle,
    forwardRef
-  } = React;
-  const { unmountComponentAtNode } = HorizonDOM;
-  
+  } = Horizon;
+  const { unmountComponentAtNode } = Horizon;
+
  it('测试useImperativeHandle', () => {

    let App = (props, ref) => {
@ -28,9 +26,9 @@ describe('useImperativeHandle Hook Test', () => {

    App = forwardRef(App);
    App1 = forwardRef(App1);
-    const counter = React.createRef(null);
-    const counter1 = React.createRef(null);
-    HorizonDOM.render(<App ref={counter} />, container);
+    const counter = Horizon.createRef(null);
+    const counter1 = Horizon.createRef(null);
+    Horizon.render(<App ref={counter} />, container);
    expect(counter.current.num).toBe(0);
    act(() => {
      counter.current.setNum(1);
@ -40,7 +38,7 @@ describe('useImperativeHandle Hook Test', () => {
    // 清空container
    unmountComponentAtNode(container);

-    HorizonDOM.render(<App1 ref={counter1} />, container);
+    Horizon.render(<App1 ref={counter1} />, container);
    expect(counter1.current.num1).toBe(0);
    act(() => {
      counter1.current.setNum1(1);
@ -64,9 +62,9 @@ describe('useImperativeHandle Hook Test', () => {

    App = forwardRef(App);
    App1 = forwardRef(App1);
-    const counter = React.createRef(null);
-    const counter1 = React.createRef(null);
-    HorizonDOM.render(<App ref={counter} />, container);
+    const counter = Horizon.createRef(null);
+    const counter1 = Horizon.createRef(null);
+    Horizon.render(<App ref={counter} />, container);
    expect(LogUtils.getAndClear()).toEqual([0]);
    expect(counter.current.num).toBe(0);
    act(() => {
@ -78,7 +76,7 @@ describe('useImperativeHandle Hook Test', () => {
    // 清空container
    unmountComponentAtNode(container);

-    HorizonDOM.render(<App1 ref={counter1} />, container);
+    Horizon.render(<App1 ref={counter1} />, container);
    expect(LogUtils.getAndClear()).toEqual([0]);
    expect(counter1.current.num1).toBe(0);
    act(() => {
--- a/scripts/tests/ComponentTest/HookTest/UseLayoutEffect.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseLayoutEffect.test.js
@ -1,6 +1,4 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
 import { act } from '../../jest/customMatcher';
 import Text from '../../jest/Text';
@ -10,7 +8,7 @@ describe('useLayoutEffect Hook Test', () => {
    useState,
    useEffect,
    useLayoutEffect
-  } = React;
+  } = Horizon;

  it('简单使用useLayoutEffect', () => {
    const App = () => {
@ -25,7 +23,7 @@ describe('useLayoutEffect Hook Test', () => {
        </>
      )
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(document.getElementById('p').style.display).toBe('none');
    container.querySelector('button').click();
    expect(container.querySelector('p').style.display).toBe('inline');
@ -38,7 +36,7 @@ describe('useLayoutEffect Hook Test', () => {
      });
      return <Text text={props.num} />;
    }
-    HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('Sync effect'));
+    Horizon.render(<App num={1} />, container, () => LogUtils.log('Sync effect'));
    expect(LogUtils.getAndClear()).toEqual([
      1,
      // 同步在渲染之后
@ -47,7 +45,7 @@ describe('useLayoutEffect Hook Test', () => {
    ]);
    expect(container.querySelector('p').innerHTML).toBe('1');
    // 更新
-    HorizonDOM.render(<App num={2} />, container, () => LogUtils.log('Sync effect'));
+    Horizon.render(<App num={2} />, container, () => LogUtils.log('Sync effect'));
    expect(LogUtils.getAndClear()).toEqual([
      2,
      'LayoutEffect',
@ -74,7 +72,7 @@ describe('useLayoutEffect Hook Test', () => {
    }

    act(() => {
-      HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
      expect(LogUtils.getAndClear()).toEqual([
        'num: 0',
        'num Layouteffect [0]',
@ -85,7 +83,7 @@ describe('useLayoutEffect Hook Test', () => {

    // 更新
    act(() => {
-      HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
+      Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
    })
    expect(LogUtils.getAndClear()).toEqual([
      // 异步effect
@ -103,7 +101,7 @@ describe('useLayoutEffect Hook Test', () => {
    ]);

    act(() => {
-      HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
+      Horizon.render(null, container, () => LogUtils.log('callback effect'));
    })
    expect(LogUtils.getAndClear()).toEqual([
      // 同步Layouteffect销毁
--- a/scripts/tests/ComponentTest/HookTest/UseMemo.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseMemo.test.js
@ -1,11 +1,9 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
 import Text from '../../jest/Text';

 describe('useMemo Hook Test', () => {
-  const { useMemo, useState } = React;
+  const { useMemo, useState } = Horizon;

  it('测试useMemo', () => {
    let setMemo;
@ -24,7 +22,7 @@ describe('useMemo Hook Test', () => {
        </>
      );
    }
-    HorizonDOM.render(<App words="App" />, container);
+    Horizon.render(<App words="App" />, container);
    expect(container.querySelector('p').innerHTML).toBe('App');
    expect(container.querySelector('#p').innerHTML).toBe('1');
    // 修改useMemo的依赖项，num会加一，text会改变。
@ -49,26 +47,26 @@ describe('useMemo Hook Test', () => {
      }, [props._num]);
      return <Text text={num} />;
    }
-    HorizonDOM.render(<App _num={0} />, container);
+    Horizon.render(<App _num={0} />, container);
    expect(LogUtils.getAndClear()).toEqual([
      0,
      1
    ]);
    expect(container.textContent).toBe('1');

-    HorizonDOM.render(<App _num={1} />, container);
+    Horizon.render(<App _num={1} />, container);
    expect(LogUtils.getAndClear()).toEqual([
      1,
      2
    ]);
    expect(container.textContent).toBe('2');

-    HorizonDOM.render(<App _num={1} />, container);
+    Horizon.render(<App _num={1} />, container);
    // 不会触发useMemo
    expect(LogUtils.getAndClear()).toEqual([2]);
    expect(container.textContent).toBe('2');

-    HorizonDOM.render(<App _num={2} />, container);
+    Horizon.render(<App _num={2} />, container);
    expect(LogUtils.getAndClear()).toEqual([
      2,
      3
@ -92,16 +90,16 @@ describe('useMemo Hook Test', () => {
      return 2;
    }

-    HorizonDOM.render(<App _num={num1} />, container);
+    Horizon.render(<App _num={num1} />, container);
    expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);

-    HorizonDOM.render(<App _num={num1} />, container);
+    Horizon.render(<App _num={num1} />, container);
    expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);

-    HorizonDOM.render(<App _num={num1} />, container);
+    Horizon.render(<App _num={num1} />, container);
    expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);

-    HorizonDOM.render(<App _num={num2} />, container);
+    Horizon.render(<App _num={num2} />, container);
    expect(LogUtils.getAndClear()).toEqual(['num 2', 2]);
  });
 });
--- a/scripts/tests/ComponentTest/HookTest/UseReducer.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseReducer.test.js
@ -1,10 +1,8 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';

 describe('useReducer Hook Test', () => {
-  const { useReducer } = React;
-  
+  const { useReducer } = Horizon;
+
  it('简单使用useReducer', () => {
    const intlCar = { logo: '', price: 0 };
    let dispatch;
@ -46,7 +44,7 @@ describe('useReducer Hook Test', () => {
        </div>
      )
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(container.querySelector('p').innerHTML).toBe('');
    expect(container.querySelector('#senP').innerHTML).toBe('0');
    // 触发bmw
--- a/scripts/tests/ComponentTest/HookTest/UseRef.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseRef.test.js
@ -1,11 +1,9 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
 import Text from '../../jest/Text';

 describe('useRef Hook Test', () => {
-  const { useState, useRef } = React;
+  const { useState, useRef } = Horizon;

  it('测试useRef', () => {
    const App = () => {
@ -22,7 +20,7 @@ describe('useRef Hook Test', () => {
        </>
      )
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(container.querySelector('p').innerHTML).toBe('1');
    expect(container.querySelector('#sp').innerHTML).toBe('1');
    // 点击按钮触发num加1,ref不变
@ -46,7 +44,7 @@ describe('useRef Hook Test', () => {
      )

    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(LogUtils.getAndClear()).toEqual([1]);
    expect(container.querySelector('p').innerHTML).toBe('1');
    // 点击按钮触发ref.current加1
--- a/scripts/tests/ComponentTest/HookTest/UseState.test.js
+++ b/scripts/tests/ComponentTest/HookTest/UseState.test.js
@ -1,6 +1,4 @@
-/* eslint-disable no-undef */
-import * as React from '../../../../libs/horizon/src/external/Horizon';
-import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../../jest/logUtils';
 import { act } from '../../jest/customMatcher';
 import Text from '../../jest/Text';
@ -11,7 +9,7 @@ describe('useState Hook Test', () => {
    forwardRef,
    useImperativeHandle,
    memo
-  } = React;
+  } = Horizon;

  it('简单使用useState', () => {
    const App = () => {
@ -23,7 +21,7 @@ describe('useState Hook Test', () => {
        </>
      )
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(container.querySelector('p').innerHTML).toBe('0');
    // 点击按钮触发num加1
    container.querySelector('button').click();
@ -45,7 +43,7 @@ describe('useState Hook Test', () => {
        </p>
      );
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(container.querySelector('p').innerHTML).toBe('00');
    container.querySelector('p').click();
    expect(container.querySelector('p').innerHTML).toBe('12');
@ -67,7 +65,7 @@ describe('useState Hook Test', () => {
        </p>
      );
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(container.querySelector('p').innerHTML).toBe('0');
    container.querySelector('p').click();
    expect(container.querySelector('p').innerHTML).toBe('2');
@ -82,7 +80,7 @@ describe('useState Hook Test', () => {
      setNum = _setNum;
      return <Text text={num} />;
    }
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(container.querySelector('p').innerHTML).toBe('0');
    expect(LogUtils.getAndClear()).toEqual([0]);
    // useState修改state 时，设置相同的值，函数组件不会重新渲染
@ -101,8 +99,8 @@ describe('useState Hook Test', () => {
      return <p>{num}</p>;

    })
-    const ref = React.createRef(null);
-    HorizonDOM.render(<App initNum={1} ref={ref} />, container);
+    const ref = Horizon.createRef(null);
+    Horizon.render(<App initNum={1} ref={ref} />, container);
    expect(LogUtils.getAndClear()).toEqual([1]);
    expect(container.querySelector('p').innerHTML).toBe('1');
    // 设置num为3
@ -119,11 +117,11 @@ describe('useState Hook Test', () => {
      setNum = _setNum;
      return <Text text={num} />;
    })
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(LogUtils.getAndClear()).toEqual([0]);
    expect(container.querySelector('p').innerHTML).toBe('0');
    // 不会重新渲染
-    HorizonDOM.render(<App />, container);
+    Horizon.render(<App />, container);
    expect(LogUtils.getAndClear()).toEqual([]);
    expect(container.querySelector('p').innerHTML).toBe('0');
    // 会重新渲染
@ -153,7 +151,7 @@ describe('useState Hook Test', () => {
      return <Text text={`Number: ${num}, Count: ${count}`} />;
    }

-    HorizonDOM.render(<App hasCount={true} />, container);
+    Horizon.render(<App hasCount={true} />, container);
    expect(LogUtils.getAndClear()).toEqual(['Number: 0, Count: 0']);
    expect(container.textContent).toBe('Number: 0, Count: 0');
    act(() => {
@ -164,7 +162,7 @@ describe('useState Hook Test', () => {
    expect(container.textContent).toBe('Number: 1, Count: 2');

    expect(() => {
-      HorizonDOM.render(<App hasCount={false} />, container);
+      Horizon.render(<App hasCount={false} />, container);
    }).toThrow(
      'Hooks are less than expected, please check whether the hook is written in the condition.',
    );
--- a/scripts/tests/jest/Text.js
+++ b/scripts/tests/jest/Text.js
@ -1,4 +1,4 @@
-import * as React from '../../../libs/horizon/src/external/Horizon';
+import * as Horizon from '@cloudsop/horizon/index.ts';
 import * as LogUtils from '../jest/logUtils';

 const Text = (props) => {
--- a/scripts/webpack/webpack.pro.js
+++ b/scripts/webpack/webpack.pro.js
@ -45,11 +45,11 @@ const cjs = {
    ...plugins,
    new CopyWebpackPlugin([
      {
-        from: path.join(__dirname, '../../libs/index.js'),
+        from: path.join(__dirname, '../../libs/horizon/index.js'),
        to: path.join(__dirname, '../../build/horizon/index.js'),
      },
      {
-        from: path.join(__dirname, '../../libs/package.json'),
+        from: path.join(__dirname, '../../libs/horizon/package.json'),
        to: path.join(__dirname, '../../build/horizon/package.json'),
      }
    ])