From e3715080437c898ed76708bd70f224209409faed Mon Sep 17 00:00:00 2001 From: * <8> Date: Sat, 19 Mar 2022 13:50:48 +0800 Subject: [PATCH 1/2] Match-id-ddc04393535a21d690fbfe2f977d3107d3c8ed23 --- .eslintrc.js | 183 ++++++--------------------------------------------- package.json | 4 +- tslint.json | 106 ----------------------------- 3 files changed, 23 insertions(+), 270 deletions(-) delete mode 100644 tslint.json diff --git a/.eslintrc.js b/.eslintrc.js index 990b19eb..cbc6dfd8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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,36 @@ 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, - }, - - 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', - ], - parser: 'babel-eslint', - parserOptions: { - ecmaVersion: 8, - sourceType: 'module', - }, - rules: { - 'no-var': ERROR, - 'prefer-const': ERROR, - strict: OFF, - }, - }, - { - 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, + 'no-for-of-loops/no-for-of-loops': 'error', + 'no-function-declare-after-return/no-function-declare-after-return': 'error', }, }; diff --git a/package.json b/package.json index ed7b0107..d3da90aa 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/tslint.json b/tslint.json deleted file mode 100644 index e751c823..00000000 --- a/tslint.json +++ /dev/null @@ -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" -} From d3260a4d9492a2ae753d7e8daee001afee733adc Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 21 Mar 2022 14:54:32 +0800 Subject: [PATCH 2/2] Match-id-1da48726eef4a520b10fbe5a29d1b869a4b29678 --- .eslintrc.js | 11 +- babel.config.js | 7 +- .../HookTest/UseCallback.test.js | 10 +- .../ComponentTest/HookTest/UseContext.test.js | 14 +-- .../ComponentTest/HookTest/UseEffect.test.js | 110 +++++++++--------- .../HookTest/UseImperativeHandle.test.js | 26 ++--- .../HookTest/UseLayoutEffect.test.js | 18 ++- .../ComponentTest/HookTest/UseMemo.test.js | 24 ++-- .../ComponentTest/HookTest/UseReducer.test.js | 10 +- .../ComponentTest/HookTest/UseRef.test.js | 10 +- .../ComponentTest/HookTest/UseState.test.js | 26 ++--- scripts/__tests__/jest/Text.js | 2 +- scripts/webpack/webpack.pro.js | 4 +- 13 files changed, 133 insertions(+), 139 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index cbc6dfd8..79557bf5 100644 --- 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 + }, + }, + ], }; diff --git a/babel.config.js b/babel.config.js index b7da15b0..37c7ac9e 100644 --- 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', ], }; diff --git a/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js b/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js index 071c4512..e2d51e9d 100644 --- 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(, container); + Horizon.render(, 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(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('1'); // 依赖项有变化，点击按钮num增加 container.querySelector('button').click(); diff --git a/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js b/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js index 89482aff..d94443b7 100644 --- 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', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); // 测试当Provider未提供时，获取到的默认值'JavaScript'。 expect(container.querySelector('p').innerHTML).toBe('JavaScript'); unmountComponentAtNode(container); - HorizonDOM.render(, container); + Horizon.render(, container); // 测试当Provider提供时，可以获取到Provider的值'Java'。 expect(container.querySelector('p').innerHTML).toBe('Java'); // 测试当Provider改变时，可以获取到最新Provider的值。 diff --git a/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js b/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js index e4a52d65..b1bc34fe 100644 --- 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(, container); + Horizon.render(, 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(, container, () => { + Horizon.render(, 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 = ; // 必须设置key值，否则在diff的时候na会被视为不同组件 - HorizonDOM.render([, na], container); + Horizon.render([, 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 ; } // 必须设置key值，否则在diff的时候na会被视为不同组件 - HorizonDOM.render([, ], container); + Horizon.render([, ], 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(, newContainer); + Horizon.render(, newContainer); }); return ; } @@ -133,7 +131,7 @@ describe('useEffect Hook Test', () => { return ; } // 必须设置key值，否则在diff的时候na会被视为不同组件 - HorizonDOM.render([, ], container); + Horizon.render([, ], container); expect(LogUtils.getAndClear()).toEqual([ 'App', 'NewApp', @@ -153,13 +151,13 @@ describe('useEffect Hook Test', () => { return ; } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }) // 此时异步执行，act执行完后会执行新render的useEffect @@ -182,13 +180,13 @@ describe('useEffect Hook Test', () => { return ; } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }) // 第二次render时异步执行，act保证所有效果都已更新，所以先常规记录日志 // 然后记录useEffect的日志 @@ -231,7 +229,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'callback effect' @@ -296,7 +294,7 @@ describe('useEffect Hook Test', () => { ]); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'callback effect' @@ -343,7 +341,7 @@ describe('useEffect Hook Test', () => { ]); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'num Layouteffect [0]', @@ -415,7 +413,7 @@ describe('useEffect Hook Test', () => { return ; } - HorizonDOM.render(, container, () => LogUtils.log('App callback effect')); + Horizon.render(, 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 ; }) act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 0, 'callback effect' @@ -456,7 +454,7 @@ describe('useEffect Hook Test', () => { // 不会重新渲染 act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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 ; }, compare) act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 0, 'callback effect' @@ -508,7 +506,7 @@ describe('useEffect Hook Test', () => { // 不会重新渲染 act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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 ; } act(() => { - HorizonDOM.render(, container, () => + Horizon.render(, 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(, container, () => LogUtils.log('num effect')); + Horizon.render(, 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 ; } - HorizonDOM.render(, container, () => LogUtils.log('num effect')); + Horizon.render(, 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(, container, () => LogUtils.log('num effect')); + Horizon.render(, 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(, container, () => LogUtils.log('num effect')); + Horizon.render(, 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(, container, () => LogUtils.log('num effect')); + Horizon.render(, 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']); diff --git a/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js b/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js index 10ce8623..b7f5d6e8 100644 --- 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(, container); + const counter = Horizon.createRef(null); + const counter1 = Horizon.createRef(null); + Horizon.render(, 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(, container); + Horizon.render(, 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(, container); + const counter = Horizon.createRef(null); + const counter1 = Horizon.createRef(null); + Horizon.render(, 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(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([0]); expect(counter1.current.num1).toBe(0); act(() => { diff --git a/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js b/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js index ec7eda11..84226eac 100644 --- 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(, container); + Horizon.render(, 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 ; } - HorizonDOM.render(, container, () => LogUtils.log('Sync effect')); + Horizon.render(, 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(, container, () => LogUtils.log('Sync effect')); + Horizon.render(, container, () => LogUtils.log('Sync effect')); expect(LogUtils.getAndClear()).toEqual([ 2, 'LayoutEffect', @@ -74,7 +72,7 @@ describe('useLayoutEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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(, container, () => LogUtils.log('callback effect')); + Horizon.render(, 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销毁 diff --git a/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js b/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js index 294ae787..41882449 100644 --- 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(, container); + Horizon.render(, 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 ; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([ 0, 1 ]); expect(container.textContent).toBe('1'); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([ 1, 2 ]); expect(container.textContent).toBe('2'); - HorizonDOM.render(, container); + Horizon.render(, container); // 不会触发useMemo expect(LogUtils.getAndClear()).toEqual([2]); expect(container.textContent).toBe('2'); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([ 2, 3 @@ -92,16 +90,16 @@ describe('useMemo Hook Test', () => { return 2; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 2', 2]); }); }); diff --git a/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js b/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js index 29c228c1..a6a427ba 100644 --- 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', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe(''); expect(container.querySelector('#senP').innerHTML).toBe('0'); // 触发bmw diff --git a/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js b/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js index 39e663bb..b2bab667 100644 --- 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(, container); + Horizon.render(, 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(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([1]); expect(container.querySelector('p').innerHTML).toBe('1'); // 点击按钮触发ref.current加1 diff --git a/scripts/__tests__/ComponentTest/HookTest/UseState.test.js b/scripts/__tests__/ComponentTest/HookTest/UseState.test.js index adccf421..b9e1d950 100644 --- 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(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); // 点击按钮触发num加1 container.querySelector('button').click(); @@ -45,7 +43,7 @@ describe('useState Hook Test', () => {

); } - HorizonDOM.render(, container); + Horizon.render(, 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', () => {

); } - HorizonDOM.render(, container); + Horizon.render(, 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 ; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); expect(LogUtils.getAndClear()).toEqual([0]); // useState修改state 时，设置相同的值，函数组件不会重新渲染 @@ -101,8 +99,8 @@ describe('useState Hook Test', () => { return

{num}

; }) - const ref = React.createRef(null); - HorizonDOM.render(, container); + const ref = Horizon.createRef(null); + Horizon.render(, 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 ; }) - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([0]); expect(container.querySelector('p').innerHTML).toBe('0'); // 不会重新渲染 - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([]); expect(container.querySelector('p').innerHTML).toBe('0'); // 会重新渲染 @@ -153,7 +151,7 @@ describe('useState Hook Test', () => { return ; } - HorizonDOM.render(, container); + Horizon.render(, 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(, container); + Horizon.render(, container); }).toThrow( 'Hooks are less than expected, please check whether the hook is written in the condition.', ); diff --git a/scripts/__tests__/jest/Text.js b/scripts/__tests__/jest/Text.js index 24d63cf8..781c6d5a 100644 --- 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) => { diff --git a/scripts/webpack/webpack.pro.js b/scripts/webpack/webpack.pro.js index b57b8eba..3494e99e 100644 --- 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'), } ])