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

Match-id-5608cee07a41134ad23611516e51dd2f801e2781

This commit is contained in:
* 2022-03-21 15:36:23 +08:00 committed by *
parent 886237cfb7 5dded5b4af
commit 35139caead
15 changed files with 148 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
.eslintrc.js
View File

@ -1,12 +1,8 @@
const restrictedGlobals = require('confusing-browser-globals');
const OFF = 0;
const ERROR = 2;
module.exports = {
extends: ['fbjs', 'prettier'],
// Stop ESLint from looking for a configuration file in parent folders
extends: [
'eslint:recommended',
'prettier',
],
root: true,
plugins: [
@ -14,173 +10,45 @@ module.exports = {
'no-for-of-loops',
'no-function-declare-after-return',
'react',
'@typescript-eslint',
],
parser: 'babel-eslint',
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 8,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
modules: true,
experimentalObjectRestSpread: true,
},
},
env: {
'mocha': true,
'node': true,
browser: true,
jest: true,
node: true,
es6: true,
},
// We're stricter than the default config, mostly. We'll override a few rules
// and then enable some React specific ones.
rules: {
'accessor-pairs': OFF,
'brace-style': [ERROR, '1tbs'],
'consistent-return': OFF,
'dot-location': [ERROR, 'property'],
// We use console['error']() as a signal to not transform it:
'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
'eol-last': ERROR,
eqeqeq: [ERROR, 'allow-null'],
indent: OFF,
'jsx-quotes': [ERROR, 'prefer-double'],
'keyword-spacing': [ERROR, {after: true, before: true}],
'no-bitwise': OFF,
'no-inner-declarations': [ERROR, 'functions'],
'no-multi-spaces': ERROR,
'no-restricted-globals': [ERROR].concat(restrictedGlobals),
'no-restricted-syntax': [ERROR, 'WithStatement'],
'no-shadow': ERROR,
'no-unused-expressions': ERROR,
'no-unused-vars': [ERROR, {args: 'none'}],
'no-use-before-define': OFF,
'no-useless-concat': OFF,
quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
'space-before-blocks': ERROR,
'space-before-function-paren': OFF,
'valid-typeof': [ERROR, {requireStringLiterals: true}],
'accessor-pairs': 'off',
'brace-style': ['error', '1tbs'],
'func-style': ['warn', 'declaration', { allowArrowFunctions: true }],
'max-lines-per-function': 'off',
'object-curly-newline': 'off',
// 尾随逗号
'comma-dangle': ['error', 'only-multiline'],
// We apply these settings to files that should run on Node.
// They can't use JSX or ES6 modules, and must be in strict mode.
// They can, however, use other ES6 features.
// (Note these rules are overridden later for source files.)
'no-var': ERROR,
strict: ERROR,
// Enforced by Prettier
// TODO: Prettier doesn't handle long strings or long comments. Not a big
// deal. But I turned it off because loading the plugin causes some obscure
// syntax error and it didn't seem worth investigating.
'max-len': OFF,
// React & JSX
// Our transforms set this automatically
'react/jsx-boolean-value': [ERROR, 'always'],
'react/jsx-no-undef': ERROR,
// We don't care to do this
'react/jsx-sort-prop-types': OFF,
'react/jsx-space-before-closing': ERROR,
'react/jsx-uses-react': ERROR,
'react/no-is-mounted': OFF,
// This isn't useful in our test code
'react/react-in-jsx-scope': ERROR,
'react/self-closing-comp': ERROR,
// We don't care to do this
'react/jsx-wrap-multilines': [
ERROR,
{declaration: false, assignment: false},
],
// Prevent for...of loops because they require a Symbol polyfill.
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
'no-for-of-loops/no-for-of-loops': ERROR,
// Prevent function declarations after return statements
'no-function-declare-after-return/no-function-declare-after-return': ERROR,
'no-for-of-loops/no-for-of-loops': 'error',
'no-function-declare-after-return/no-function-declare-after-return': 'error',
},
overrides: [
{
// We apply these settings to the source files that get compiled.
// They can use all features including JSX (but shouldn't use `var`).
files: [
// Internal forwarding modules
'libs/*/*.js',
// Source files
'libs/*/src/**/*.js',
'scripts/__tests__/**/*.js'
],
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 8,
sourceType: 'module',
},
rules: {
'no-var': ERROR,
'prefer-const': ERROR,
strict: OFF,
globals: {
container: true
},
},
{
files: ['**/__tests__/*.js'],
rules: {
// https://github.com/jest-community/eslint-plugin-jest
'jest/no-focused-tests': ERROR,
'jest/valid-expect': ERROR,
'jest/valid-expect-in-promise': ERROR,
},
},
{
files: [
'**/__tests__/**/*.js',
'scripts/**/*.js',
'libs/*/npm/**/*.js',
'libs/dom-event-testing-library/**/*.js',
'libs/react-devtools*/**/*.js',
],
rules: {
'react-internal/no-production-logging': OFF,
'react-internal/warning-args': OFF,
},
},
{
files: ['libs/react-native-renderer/**/*.js'],
globals: {
nativeFabricUIManager: true,
},
},
{
files: ['libs/react-transport-dom-webpack/**/*.js'],
globals: {
__webpack_chunk_load__: true,
__webpack_require__: true,
},
},
{
files: ['libs/scheduler/**/*.js'],
globals: {
TaskController: true,
},
},
{
files: [
'scripts/e2e-test/**/*.js',
'scripts/e2e-test/**/*.jsx',
],
parserOptions: {
sourceType: 'module',
},
}
],
globals: {
SharedArrayBuffer: true,
spyOnDev: true,
spyOnDevAndProd: true,
spyOnProd: true,
__PROFILE__: true,
__UMD__: true,
__EXPERIMENTAL__: true,
__VARIANT__: true,
gate: true,
trustedTypes: true,
},
};

5
babel.config.js
View File

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

4
package.json
View File

@ -51,6 +51,8 @@
"@mattiasbuelens/web-streams-polyfill": "^0.3.2",
"@types/jest": "^26.0.24",
"@types/node": "^17.0.18",
"@typescript-eslint/eslint-plugin": "^5.15.0",
"@typescript-eslint/parser": "^5.15.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.3",
"babel-jest": "^27.5.1",
@ -66,7 +68,6 @@
"ejs": "^3.1.6",
"error-stack-parser": "^2.0.6",
"eslint": "^7.32.0",
"eslint-config-fbjs": "^1.1.1",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-flowtype": "^2.25.0",
@ -87,7 +88,6 @@
"react-lifecycles-compat": "^3.0.4",
"regenerator-runtime": "^0.13.9",
"rimraf": "^3.0.0",
"tslint": "^6.0.0",
"typescript": "^3.9.7",
"webpack": "^4.46.0",
"webpack-cli": "^4.7.2"

10
scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js
View File

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

14
scripts/__tests__/ComponentTest/HookTest/UseContext.test.js
View File

@ -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的值。

98
scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js
View File

@ -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';
@ -12,7 +10,7 @@ describe('useEffect Hook Test', () => {
useState,
memo,
forwardRef
} = React;
} = 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']);

24
scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js
View File

@ -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,8 +8,8 @@ describe('useImperativeHandle Hook Test', () => {
useState,
useImperativeHandle,
forwardRef
} = React;
const { unmountComponentAtNode } = HorizonDOM;
} = Horizon;
const { unmountComponentAtNode } = Horizon;
it('测试useImperativeHandle', () => {
@ -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(() => {

18
scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js
View File

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

24
scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js
View File

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

8
scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js
View File

@ -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('useReducer Hook Test', () => {
const { useReducer } = React;
const { useReducer } = Horizon;
it('简单使用useReducer', () => {
const intlCar = { logo: '', price: 0 };
@ -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

10
scripts/__tests__/ComponentTest/HookTest/UseRef.test.js
View File

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

26
scripts/__tests__/ComponentTest/HookTest/UseState.test.js
View File

@ -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.',
);

2
scripts/__tests__/jest/Text.js
View File

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

4
scripts/webpack/webpack.pro.js
View File

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

106
tslint.json
View File

@ -1,106 +0,0 @@
{
"rules": {
"deprecation": true,
"use-isnan": true,
"max-line-length": [
true,
{
"limit": 120,
"ignore-pattern": "^import |^export {(.*?)}",
"check-strings": false,
"check-regex": true
}
],
"member-ordering": [true, { "order": "fields-first" }],
"no-unnecessary-type-assertion": true,
"no-parameter-reassignment": true,
"no-string-throw": true,
"no-unused-expression": true,
"no-duplicate-variable": true,
"no-for-in-array": true,
"no-arg": true,
"no-any": [true, { "ignore-rest-args": true }],
"no-shadowed-variable": [
true,
{
"class": true,
"enum": true,
"function": true,
"interface": false,
"namespace": true,
"typeAlias": false,
"typeParameter": false,
"underscore": false
}
],
"no-sparse-arrays": true,
"no-string-literal": true,
"no-for-in": true,
"no-invalid-this": true,
"no-switch-case-fall-through": true,
"no-inferrable-types": [true, "ignore-params", "ignore-properties"],
"no-non-null-assertion": true,
"no-this-assignment": [
true,
{ "allowed-names": ["^self$"], "allow-destructuring": true }
],
"no-var-keyword": true,
"no-require-imports": true,
"prefer-for-of": true,
"prefer-conditional-expression": [true, "check-else-if"],
"prefer-object-spread": true,
"typeof-compare": true,
"cyclomatic-complexity": [true, 20],
"prefer-readonly": true,
"prefer-const": true,
"radix": true,
"space-before-function-paren": [
true,
{
"anonymous": "never",
"named": "never",
"asyncArrow": "always",
"method": "never",
"constructor": "never"
}
],
"space-within-parens": 1,
"type-literal-delimiter": true,
"variable-name": {
"options": [
"ban-keywords",
"check-format",
"require-const-for-all-caps",
"allow-pascal-case"
]
},
"curly": true,
"class-name": true,
"one-line": [true, "check-catch", "check-finally", "check-else"],
"arrow-parens": [true, "ban-single-arg-parens"],
"indent": [true, "spaces", 4],
"one-variable-per-declaration": true,
"ban-comma-operator": true,
"function-constructor": true,
"semicolon": [true, "always", "ignore-bound-class-methods"],
"jsdoc-format": [true, "check-multiline-start"],
"no-irregular-whitespace": true,
"no-trailing-whitespace": [
true,
"ignore-comments",
"ignore-jsdoc",
"ignore-template-strings",
"ignore-blank-lines"
],
"triple-equals": true,
"prefer-template": [true, "allow-single-concat"],
"quotemark": [
true,
"single",
"jsx-double",
"avoid-template",
"avoid-escape"
]
},
"defaultSeverity": "warning"
}