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

Match-id-7acb2be199fe6acf434203e79bb147823f4b3d8a

This commit is contained in:
* 2022-07-15 17:35:38 +08:00 committed by *
parent d087bf644f d820471f30
commit 2f5d5fa80e
31 changed files with 373 additions and 18760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -45,6 +45,7 @@ module.exports = {
},
globals: {
isDev: true,
isTest: true,
},
overrides: [
{

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ build/
.vscode
package-lock.json
libs/**/dist
scripts/*.ejs

8
CHANGELOG.md
View File

@ -1,3 +1,11 @@
## 0.0.10 (2022-07-14)
- **core**: #24 修复lazy包裹memo时，卸载错误
- **core**: #21 修复异步更新时路径错误
## 0.0.9 (2022-07-12)
### Bug Fixes
- **horizonX**: 修复对store进行deepClone时循环克隆
## 0.0.8 (2022-07-08)
### Features
- 增加HorizonX提供状态管理能力

2
babel.config.js
View File

@ -6,7 +6,6 @@ module.exports = {
],
plugins: [
['@babel/plugin-proposal-class-properties', { loose: true }],
'syntax-trailing-function-commas',
[
'@babel/plugin-proposal-object-rest-spread',
{ loose: true, useBuiltIns: true },
@ -34,6 +33,5 @@ module.exports = {
pragma: 'Horizon.createElement',
pragmaFrag: 'Horizon.Fragment'
}],
'@babel/plugin-transform-flow-strip-types',
],
};

165
jest.config.js
View File

@ -1,183 +1,18 @@
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html
module.exports = {
// All imported modules in your tests should be mocked automatically
// automock: false,
// Stop running tests after `n` failures
// bail: 0,
// Respect "browser" field in package.json when resolving modules
// browser: false,
// The directory where Jest should store its cached dependency information
// cacheDirectory: "",
// Automatically clear mock calls and instances between every test
// clearMocks: false,
// Indicates whether the coverage information should be collected while executing the test
// collectCoverage: false,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,
// The directory where Jest should output its coverage files
coverageDirectory: 'coverage',
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,
// A path to a custom dependency extractor
// dependencyExtractor: undefined,
// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,
// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],
// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,
// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,
// A set of global variables that need to be available in all test environments
// globals: {},
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",
// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],
// An array of file extensions your modules use
// moduleFileExtensions: [
// 'js',
// 'ts'
// ],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
// moduleNameMapper: {},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],
// Activates notifications for test results
// notify: false,
// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",
// A preset that is used as a base for Jest's configuration
// preset: undefined,
// Run tests from one or more projects
// projects: undefined,
// Use this configuration option to add custom reporters to Jest
// reporters: undefined,
// Automatically reset mock state between every test
// resetMocks: false,
// Reset the module registry before running each individual test
resetModules: true,
// A path to a custom resolver
// resolver: undefined,
// Automatically restore mock state between every test
// restoreMocks: false,
// The root directory that Jest should scan for tests and modules within
rootDir: process.cwd(),
// A list of paths to directories that Jest should use to search for files in
// roots: [
// '<rootDir>/scripts'
// ],
// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",
// The paths to modules that run some code to configure or set up the testing environment before each test
setupFiles: [require.resolve('./scripts/__tests__/jest/jestEnvironment.js')],
// A list of paths to modules that run some code to configure or set up the testing framework before each test
setupFilesAfterEnv: [require.resolve('./scripts/__tests__/jest/jestSetting.js')],
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],
// The test environment that will be used for testing
testEnvironment: 'jest-environment-jsdom-sixteen',
// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},
// Adds a location field to test results
// testLocationInResults: false,
// The glob patterns Jest uses to detect test files
testMatch: [
'<rootDir>/scripts/__tests__/**/*.test.js'
],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// The regexp pattern or array of patterns that Jest uses to detect test files
//testRegex: ['/scripts/jest/dont-run-jest-directly\\.js$'],
// This option allows the use of a custom results processor
// testResultsProcessor: undefined,
// This option allows use of a custom test runner
// testRunner: "jasmine2",
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
// testURL: "http://localhost",
// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
timers: 'fake',
// A map from regular expressions to paths to transformers
// transform: undefined,
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
// transformIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,
// Indicates whether each individual test should be reported during the run
// verbose: undefined,
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],
// Whether to use watchman for file crawling
// watchman: true,
};

1
libs/horizon-jsx-transform-babel-plugin/package.json
View File

@ -29,6 +29,7 @@
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-modules-commonjs": "^7.2.0",
"@babel/traverse": "^7.11.0",
"@babel/preset-env": "^7.16.11",
"@babel/types": "^7.0.0",
"babel-plugin-tester": "^10.1.0"

1
libs/horizon/global.d.ts vendored
View File

@ -2,4 +2,5 @@
区分是否开发者模式
*/
declare var isDev: boolean;
declare var isTest: boolean;
declare const __VERSION__: string;

2
libs/horizon/package.json
View File

@ -4,7 +4,7 @@
"keywords": [
"horizon"
],
"version": "0.0.8",
"version": "0.0.10",
"homepage": "",
"bugs": "",
"main": "index.js",

2
libs/horizon/src/horizonx/Constants.ts
View File

@ -1,3 +1,5 @@
// The two constants must be the same as those in horizon.
export const FunctionComponent = 'FunctionComponent';
export const ClassComponent = 'ClassComponent';
export const OBSERVER_KEY = Symbol('_horizonObserver');

4
libs/horizon/src/horizonx/proxy/HooklessObserver.ts
View File

@ -10,7 +10,7 @@ export class HooklessObserver implements IObserver {
listeners:(() => void)[] = [];
useProp(key: string): void {
useProp(key: string | symbol): void {
}
addListener(listener: () => void) {
@ -21,7 +21,7 @@ export class HooklessObserver implements IObserver {
this.listeners = this.listeners.filter(item => item != listener);
}
setProp(key: string): void {
setProp(key: string | symbol): void {
this.triggerChangeListeners();
}

6
libs/horizon/src/horizonx/proxy/Observer.ts
View File

@ -16,7 +16,7 @@ export class Observer implements IObserver {
listeners:(()=>void)[] = [];
useProp(key: string): void {
useProp(key: string | symbol): void {
const processingVNode = getProcessingVNode();
if (processingVNode === null || !processingVNode.observers) {
return;
@ -50,7 +50,7 @@ export class Observer implements IObserver {
this.listeners = this.listeners.filter(item => item != listener);
}
setProp(key: string): void {
setProp(key: string | symbol): void {
const vNodes = this.keyVNodes.get(key);
vNodes?.forEach((vNode: VNode) => {
if (vNode.isStoreChange) {
@ -85,7 +85,7 @@ export class Observer implements IObserver {
}
}
clearByVNode(vNode: Vnode): void {
clearByVNode(vNode: VNode): void {
const keys = this.vNodeKeys.get(vNode);
if (keys) {
keys.forEach((key: any) => {

18
libs/horizon/src/horizonx/proxy/ProxyHandler.ts
View File

@ -1,12 +1,11 @@
import {createObjectProxy} from './handlers/ObjectProxyHandler';
import {Observer} from './Observer';
import {HooklessObserver} from './HooklessObserver';
import {isArray, isCollection, isObject} from '../CommonUtils';
import {createArrayProxy} from './handlers/ArrayProxyHandler';
import {createCollectionProxy} from './handlers/CollectionProxyHandler';
import { createObjectProxy } from './handlers/ObjectProxyHandler';
import { Observer } from './Observer';
import { HooklessObserver } from './HooklessObserver';
import { isArray, isCollection, isObject } from '../CommonUtils';
import { createArrayProxy } from './handlers/ArrayProxyHandler';
import { createCollectionProxy } from './handlers/CollectionProxyHandler';
import { IObserver } from '../types';
const OBSERVER_KEY = Symbol('_horizonObserver');
import { OBSERVER_KEY } from '../Constants';
const proxyMap = new WeakMap();
@ -29,7 +28,7 @@ export function createProxy(rawObj: any, hookObserver = true): any {
}
// 创建Observer
let observer:IObserver = getObserver(rawObj);
let observer: IObserver = getObserver(rawObj);
if (!observer) {
observer = hookObserver ? new Observer() : new HooklessObserver();
rawObj[OBSERVER_KEY] = observer;
@ -59,4 +58,3 @@ export function createProxy(rawObj: any, hookObserver = true): any {
export function getObserver(rawObj: any): Observer {
return rawObj[OBSERVER_KEY];
}

6
libs/horizon/src/horizonx/proxy/handlers/ArrayProxyHandler.ts
View File

@ -26,14 +26,14 @@ function set(rawObj: any[], key: string, value: any, receiver: any) {
const ret = Reflect.set(rawObj, key, newValue, receiver);
const newLength = rawObj.length;
const tracker = getObserver(rawObj);
const observer = getObserver(rawObj);
if (!isSame(newValue, oldValue)) {
tracker.setProp(key);
observer.setProp(key);
}
if (oldLength !== newLength) {
tracker.setProp('length');
observer.setProp('length');
}
return ret;

44
libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts
View File

@ -40,8 +40,8 @@ function get(rawObj: { size: number }, key: any, receiver: any): any {
}
function getFun(rawObj: { get: (key: any) => any }, key: any) {
const tracker = getObserver(rawObj);
tracker.useProp(key);
const observer = getObserver(rawObj);
observer.useProp(key);
const value = rawObj.get(key);
// 对于value也需要进一步代理
@ -60,14 +60,14 @@ function set(
const newValue = value;
rawObj.set(key, newValue);
const valChange = !isSame(newValue, oldValue);
const tracker = getObserver(rawObj);
const observer = getObserver(rawObj);
if (valChange || !rawObj.has(key)) {
tracker.setProp(COLLECTION_CHANGE);
observer.setProp(COLLECTION_CHANGE);
}
if (valChange) {
tracker.setProp(key);
observer.setProp(key);
}
return rawObj;
@ -78,17 +78,17 @@ function add(rawObj: { add: (any) => void; set: (string, any) => any; has: (any)
if (!rawObj.has(value)) {
rawObj.add(value);
const tracker = getObserver(rawObj);
tracker.setProp(value);
tracker.setProp(COLLECTION_CHANGE);
const observer = getObserver(rawObj);
observer.setProp(value);
observer.setProp(COLLECTION_CHANGE);
}
return rawObj;
}
function has(rawObj: { has: (string) => boolean }, key: any): boolean {
const tracker = getObserver(rawObj);
tracker.useProp(key);
const observer = getObserver(rawObj);
observer.useProp(key);
return rawObj.has(key);
}
@ -98,8 +98,8 @@ function clear(rawObj: { size: number; clear: () => void }) {
rawObj.clear();
if (oldSize > 0) {
const tracker = getObserver(rawObj);
tracker.allChange();
const observer = getObserver(rawObj);
observer.allChange();
}
}
@ -107,9 +107,9 @@ function deleteFun(rawObj: { has: (key: any) => boolean; delete: (key: any) => v
if (rawObj.has(key)) {
rawObj.delete(key);
const tracker = getObserver(rawObj);
tracker.setProp(key);
tracker.setProp(COLLECTION_CHANGE);
const observer = getObserver(rawObj);
observer.setProp(key);
observer.setProp(COLLECTION_CHANGE);
return true;
}
@ -118,8 +118,8 @@ function deleteFun(rawObj: { has: (key: any) => boolean; delete: (key: any) => v
}
function size(rawObj: { size: number }) {
const tracker = getObserver(rawObj);
tracker.useProp(COLLECTION_CHANGE);
const observer = getObserver(rawObj);
observer.useProp(COLLECTION_CHANGE);
return rawObj.size;
}
@ -148,8 +148,8 @@ function forEach(
rawObj: { forEach: (callback: (value: any, key: any) => void) => void },
callback: (valProxy: any, keyProxy: any, rawObj: any) => void
) {
const tracker = getObserver(rawObj);
tracker.useProp(COLLECTION_CHANGE);
const observer = getObserver(rawObj);
observer.useProp(COLLECTION_CHANGE);
rawObj.forEach((value, key) => {
const valProxy = createProxy(value, hookObserverMap.get(rawObj));
const keyProxy = createProxy(key, hookObserverMap.get(rawObj));
@ -159,9 +159,9 @@ function forEach(
}
function wrapIterator(rawObj: Object, rawIt: { next: () => { value: any; done: boolean } }, isPair = false) {
const tracker = getObserver(rawObj);
const observer = getObserver(rawObj);
const hookObserver = hookObserverMap.get(rawObj);
tracker.useProp(COLLECTION_CHANGE);
observer.useProp(COLLECTION_CHANGE);
return {
next() {
@ -170,7 +170,7 @@ function wrapIterator(rawObj: Object, rawIt: { next: () => { value: any; done: b
return { value: createProxy(value, hookObserver), done };
}
tracker.useProp(COLLECTION_CHANGE);
observer.useProp(COLLECTION_CHANGE);
let newVal;
if (isPair) {

19
libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts
View File

@ -1,5 +1,6 @@
import { isSame } from '../../CommonUtils';
import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
import { OBSERVER_KEY } from '../../Constants';
export function createObjectProxy<T extends object>(rawObj: T): ProxyHandler<T> {
const proxy = new Proxy(rawObj, {
@ -10,7 +11,12 @@ export function createObjectProxy<T extends object>(rawObj: T): ProxyHandler<T>
return proxy;
}
export function get(rawObj: object, key: string, receiver: any): any {
export function get(rawObj: object, key: string | symbol, receiver: any): any {
// The observer object of symbol ('_horizonObserver') cannot be accessed from Proxy to prevent errors caused by clonedeep.
if (key === OBSERVER_KEY) {
return undefined;
}
const observer = getObserver(rawObj);
if (key === 'addListener') {
@ -25,10 +31,15 @@ export function get(rawObj: object, key: string, receiver: any): any {
const value = Reflect.get(rawObj, key, receiver);
// 对于value也需要进一步代理
const valProxy = createProxy(value, hookObserverMap.get(rawObj));
// 对于prototype不做代理
if (key !== 'prototype') {
// 对于value也需要进一步代理
const valProxy = createProxy(value, hookObserverMap.get(rawObj));
return valProxy;
return valProxy;
}
return value;
}
export function set(rawObj: object, key: string, value: any, receiver: any): boolean {

4
libs/horizon/src/horizonx/types.d.ts vendored
View File

@ -1,12 +1,12 @@
export interface IObserver {
useProp: (key: string) => void;
useProp: (key: string | symbol) => void;
addListener: (listener: () => void) => void;
removeListener: (listener: () => void) => void;
setProp: (key: string) => void;
setProp: (key: string | symbol) => void;
triggerChangeListeners: () => void;

2
libs/horizon/src/renderer/ErrorHandler.ts
View File

@ -15,7 +15,7 @@ import {updateShouldUpdateOfTree} from './vnode/VNodeShouldUpdate';
import {BuildErrored, setBuildResult} from './GlobalVar';
function consoleError(error: any): void {
if (isDev) {
if (isTest) {
// 只打印message为了让测试用例能pass
console['error']('The codes throw the error: ' + error.message);
} else {

4
libs/horizon/src/renderer/TreeBuilder.ts
View File

@ -199,6 +199,10 @@ export function calcStartUpdateVNode(treeRoot: VNode) {
for (let i = 1; i < startNodePath.length; i++) {
const pathIndex = Number(startNodePath[i]);
node = getChildByIndex(node, pathIndex)!;
// 路径错误时，回退到从根更新
if (node == null) {
return treeRoot;
}
}
return node;

1
libs/horizon/src/renderer/render/LazyComponent.ts
View File

@ -61,6 +61,7 @@ function captureLazyComponent(
if (lazyRender) {
if (lazyVNodeTag === MemoComponent) {
// Memo要特殊处理
processing.effectList = null;
const memoVNodeProps = mergeDefaultProps(Component.type, lazyVNodeProps); // 需要整合defaultProps
return lazyRender(processing, Component, memoVNodeProps, shouldUpdate);
} else {

94
package.json
View File

@ -15,85 +15,49 @@
"watch-test": "yarn test --watch --dev"
},
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/code-frame": "^7.10.4",
"@babel/core": "^7.11.1",
"@babel/eslint-parser": "^7.11.4",
"@babel/helper-module-imports": "^7.10.4",
"@babel/parser": "^7.11.3",
"@babel/plugin-external-helpers": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/plugin-proposal-optional-chaining": "^7.16.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.10.4",
"@babel/plugin-transform-arrow-functions": "^7.10.4",
"@babel/plugin-transform-async-to-generator": "^7.10.4",
"@babel/plugin-transform-block-scoped-functions": "^7.10.4",
"@babel/plugin-transform-block-scoping": "^7.11.1",
"@babel/plugin-transform-classes": "^7.14.2",
"@babel/plugin-transform-computed-properties": "^7.10.4",
"@babel/plugin-transform-destructuring": "^7.10.4",
"@babel/plugin-transform-for-of": "^7.10.4",
"@babel/plugin-transform-literals": "^7.10.4",
"@babel/plugin-transform-modules-commonjs": "^7.10.4",
"@babel/plugin-transform-object-super": "^7.10.4",
"@babel/plugin-transform-parameters": "^7.10.5",
"@babel/plugin-transform-react-jsx-source": "^7.10.5",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/plugin-transform-shorthand-properties": "^7.10.4",
"@babel/plugin-transform-spread": "^7.11.0",
"@babel/plugin-transform-template-literals": "^7.10.5",
"@babel/preset-env": "^7.16.11",
"@babel/preset-flow": "^7.10.4",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@babel/register": "^7.14.5",
"@babel/traverse": "^7.11.0",
"@mattiasbuelens/web-streams-polyfill": "^0.3.2",
"@babel/core": "7.16.7",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
"@babel/plugin-proposal-object-rest-spread": "7.16.7",
"@babel/plugin-proposal-optional-chaining": "7.16.7",
"@babel/plugin-syntax-jsx": "7.16.7",
"@babel/plugin-transform-arrow-functions": "7.16.7",
"@babel/plugin-transform-block-scoped-functions": "7.16.7",
"@babel/plugin-transform-block-scoping": "7.16.7",
"@babel/plugin-transform-classes": "7.16.7",
"@babel/plugin-transform-computed-properties": "7.16.7",
"@babel/plugin-transform-destructuring": "7.16.7",
"@babel/plugin-transform-for-of": "7.16.7",
"@babel/plugin-transform-literals": "7.16.7",
"@babel/plugin-transform-object-super": "7.16.7",
"@babel/plugin-transform-parameters": "7.16.7",
"@babel/plugin-transform-runtime": "7.16.7",
"@babel/plugin-transform-shorthand-properties": "7.16.7",
"@babel/plugin-transform-spread": "7.16.7",
"@babel/plugin-transform-template-literals": "7.16.7",
"@babel/preset-env": "7.16.7",
"@babel/preset-react": "7.16.7",
"@babel/preset-typescript": "7.16.7",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^4.0.0",
"@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",
"@typescript-eslint/eslint-plugin": "4.8.0",
"@typescript-eslint/parser": "4.8.0",
"babel-jest": "^27.5.1",
"babel-plugin-syntax-trailing-function-commas": "^6.5.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"chalk": "^3.0.0",
"confusing-browser-globals": "^1.0.9",
"core-js": "^3.6.4",
"danger": "^9.2.10",
"ejs": "^3.1.6",
"error-stack-parser": "^2.0.6",
"eslint": "^7.32.0",
"eslint": "7.13.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-flowtype": "^2.25.0",
"eslint-plugin-jest": "^22.15.0",
"eslint-plugin-no-for-of-loops": "^1.0.0",
"eslint-plugin-no-function-declare-after-return": "^1.0.0",
"eslint-plugin-react": "^6.7.1",
"eslint-plugin-react": "7.14.3",
"jest": "^25.5.4",
"jest-cli": "^25.2.7",
"jest-diff": "^25.2.6",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-react": "^0.12.0",
"jest-snapshot-serializer-raw": "^1.1.0",
"minimist": "^1.2.3",
"object-assign": "^4.1.1",
"prettier": "1.19.1",
"react-lifecycles-compat": "^3.0.4",
"regenerator-runtime": "^0.13.9",
"rimraf": "^3.0.0",
"prettier": "2.6.2",
"rollup": "^2.75.5",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^3.9.7"
"typescript": "4.2.3"
},
"engines": {
"node": ">=10.x",

45
scripts/__tests__/ComponentTest/ForwardRef.test.js Normal file
View File

@ -0,0 +1,45 @@
import * as Horizon from '@cloudsop/horizon/index.ts';
import { getLogUtils } from '../jest/testUtils';
describe('ForwardRef', () => {
const LogUtils = getLogUtils();
it('ForwardRef包裹的函数组件应该正常触发effect', () => {
function App(props, ref) {
Horizon.useEffect(() => {
LogUtils.log('effect');
return () => {
LogUtils.log('effect remove');
};
});
return <button ref={ref}></button>;
}
const Wrapper = Horizon.forwardRef(App);
Horizon.act(() => {
Horizon.render(<Wrapper />, container);
});
expect(LogUtils.getAndClear()).toEqual(['effect']);
Horizon.act(() => {
Horizon.render(<Wrapper />, container);
});
expect(LogUtils.getAndClear()).toEqual(['effect remove', 'effect']);
});
it('memo组件包裹的类组件', () => {
class Component extends Horizon.Component {
render() {
return <button>123</button>;
}
}
const Wrapper = Horizon.memo(Component);
Horizon.act(() => {
Horizon.render(<Wrapper />, container);
});
Horizon.act(() => {
Horizon.render(<Wrapper />, container);
});
});
});

26
scripts/__tests__/ComponentTest/LazyComponent.test.js
View File

@ -184,4 +184,30 @@ describe('LazyComponent Test', () => {
container.querySelector('button').click();
expect(container.textContent).toBe('Error: num is 2');
});
it('#24 配合memo', async () => {
const fnComp = () => {
return <h1>horizon</h1>;
};
const LazyApp = Horizon.lazy(() => ({
then(cb) {
cb({ default: Horizon.memo(() => fnComp, false) });
},
}));
expect(() => {
Horizon.render(
<Horizon.Suspense fallback={<div>Loading...</div>}>
<LazyApp text="Lazy" />
</Horizon.Suspense>,
container
);
Horizon.render(
<Horizon.Suspense fallback={<div>Loading...</div>}>
<LazyApp text="Lazy" />
</Horizon.Suspense>,
container
);
}).not.toThrow();
});
});

8
scripts/__tests__/EventTest/EventMain.test.js
View File

@ -10,14 +10,6 @@ function dispatchChangeEvent(input) {
describe('事件', () => {
const LogUtils = TestUtils.getLogUtils();
it('根节点挂载全量事件', () => {
const App = () => {
return <div />;
};
Horizon.render(<App />, container);
console.log(TestUtils.getEventListeners(container));
//expect(TestUtils.getEventListeners(container)).toBe(true);
});
it('事件捕获与冒泡', () => {
const App = () => {

106
scripts/__tests__/HorizonXText/StoreFunctionality/cloneDeep.test.js Normal file
View File

@ -0,0 +1,106 @@
import * as Horizon from '@cloudsop/horizon/index.ts';
import { clearStore, createStore, useStore } from '../../../../libs/horizon/src/horizonx/store/StoreHandler';
import { OBSERVER_KEY } from '../../../../libs/horizon/src/horizonx/Constants';
import { App, Text, triggerClickEvent } from '../../jest/commonComponents';
describe('测试对store.state对象进行深度克隆', () => {
const { unmountComponentAtNode } = Horizon;
let container = null;
beforeEach(() => {
// 创建一个 DOM 元素作为渲染目标
container = document.createElement('div');
document.body.appendChild(container);
createStore({
id: 'user',
state: {
type: 'bing dun dun',
persons: [
{ name: 'p1', age: 1 },
{ name: 'p2', age: 2 },
],
},
actions: {
addOnePerson: (state, person) => {
state.persons.push(person);
},
delOnePerson: state => {
state.persons.pop();
},
clearPersons: state => {
state.persons = null;
},
},
});
});
afterEach(() => {
// 退出时进行清理
unmountComponentAtNode(container);
container.remove();
container = null;
clearStore('user');
});
const newPerson = { name: 'p3', age: 3 };
function Parent({ children }) {
const userStore = useStore('user');
const addOnePerson = function() {
userStore.addOnePerson(newPerson);
};
const delOnePerson = function() {
userStore.delOnePerson();
};
return (
<div>
<button id={'addBtn'} onClick={addOnePerson}>
add person
</button>
<button id={'delBtn'} onClick={delOnePerson}>
delete person
</button>
<div>{children}</div>
</div>
);
}
it('The observer object of symbol (\'_horizonObserver\') cannot be accessed to from Proxy', () => {
let userStore = null;
function Child(props) {
userStore = useStore('user');
return (
<div>
<Text id={'hasPerson'} text={`has new person: ${userStore.persons.length}`} />
</div>
);
}
Horizon.render(<App parent={Parent} child={Child} />, container);
// The observer object of symbol ('_horizonObserver') cannot be accessed to from Proxy prevent errors caused by clonedeep.
expect(userStore.persons[0][OBSERVER_KEY]).toBe(undefined);
});
it('The observer object of symbol (\'_horizonObserver\') cannot be accessed to from Proxy', () => {
let userStore = null;
function Child(props) {
userStore = useStore('user');
return (
<div>
<Text id={'hasPerson'} text={`has new person: ${userStore.persons.length}`} />
</div>
);
}
Horizon.render(<App parent={Parent} child={Child} />, container);
// NO throw this Exception, TypeError: 'get' on proxy: property 'prototype' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value
const proxyObj = userStore.persons[0].constructor;
expect(proxyObj.prototype !== undefined).toBeTruthy();
});
});

146
scripts/__tests__/HorizonXText/adapters/ReduxAdapter.test.js
View File

@ -2,7 +2,7 @@ import {
createStore,
applyMiddleware,
combineReducers,
bindActionCreators
bindActionCreators,
} from '../../../../libs/horizon/src/horizonx/adapters/redux';
describe('Redux adapter', () => {
@ -12,21 +12,21 @@ describe('Redux adapter', () => {
}, 0);
expect(reduxStore.getState()).toBe(0);
})
});
it('Should use default state, dispatch action and update state', async () => {
const reduxStore = createStore((state, action) => {
switch (action.type) {
case('ADD'):
return {counter: state.counter + 1}
case 'ADD':
return { counter: state.counter + 1 };
default:
return {counter: 0};
return { counter: 0 };
}
});
expect(reduxStore.getState().counter).toBe(0);
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({ type: 'ADD' });
expect(reduxStore.getState().counter).toBe(1);
});
@ -35,37 +35,37 @@ describe('Redux adapter', () => {
let counter = 0;
const reduxStore = createStore((state = 0, action) => {
switch (action.type) {
case('ADD'):
return state + 1
case 'ADD':
return state + 1;
default:
return state;
}
});
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({ type: 'ADD' });
expect(counter).toBe(0);
expect(reduxStore.getState()).toBe(1);
const unsubscribe = reduxStore.subscribe(() => {
counter++;
});
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({ type: 'ADD' });
reduxStore.dispatch({ type: 'ADD' });
expect(counter).toBe(2);
expect(reduxStore.getState()).toBe(3);
unsubscribe();
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({ type: 'ADD' });
reduxStore.dispatch({ type: 'ADD' });
expect(counter).toBe(2);
expect(reduxStore.getState()).toBe(5);
});
it('Should bind action creators', async () => {
const addTodo = (text) => {
const addTodo = text => {
return {
type: 'ADD_TODO',
text
}
}
text,
};
};
const reduxStore = createStore((state = [], action) => {
if (action.type === 'ADD_TODO') {
@ -74,7 +74,7 @@ describe('Redux adapter', () => {
return state;
});
const actions = bindActionCreators({addTodo}, reduxStore.dispatch);
const actions = bindActionCreators({ addTodo }, reduxStore.dispatch);
actions.addTodo('todo');
@ -84,57 +84,57 @@ describe('Redux adapter', () => {
it('Should replace reducer', async () => {
const reduxStore = createStore((state, action) => {
switch (action.type) {
case('ADD'):
return {counter: state.counter + 1}
case 'ADD':
return { counter: state.counter + 1 };
default:
return {counter: 0};
return { counter: 0 };
}
});
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({ type: 'ADD' });
expect(reduxStore.getState().counter).toBe(1);
reduxStore.replaceReducer((state, action) => {
switch (action.type) {
case('SUB'):
return {counter: state.counter - 1}
case 'SUB':
return { counter: state.counter - 1 };
default:
return {counter: 0};
return { counter: 0 };
}
});
reduxStore.dispatch({type: 'SUB'});
reduxStore.dispatch({ type: 'SUB' });
expect(reduxStore.getState().counter).toBe(0);
})
});
it('Should combine reducers', async () => {
const booleanReducer = (state = false, action) => {
switch (action.type) {
case('TOGGLE'):
return !state
default:
return state;
}
}
const addReducer = (state = 0, action) => {
switch (action.type) {
case('ADD'):
return state + 1
case 'TOGGLE':
return !state;
default:
return state;
}
};
const reduxStore = createStore(combineReducers({check: booleanReducer, counter: addReducer}));
const addReducer = (state = 0, action) => {
switch (action.type) {
case 'ADD':
return state + 1;
default:
return state;
}
};
const reduxStore = createStore(combineReducers({ check: booleanReducer, counter: addReducer }));
expect(reduxStore.getState().counter).toBe(0);
expect(reduxStore.getState().check).toBe(false);
reduxStore.dispatch({type: 'ADD'});
reduxStore.dispatch({type: 'TOGGLE'});
reduxStore.dispatch({ type: 'ADD' });
reduxStore.dispatch({ type: 'TOGGLE' });
expect(reduxStore.getState().counter).toBe(1);
expect(reduxStore.getState().check).toBe(true);
@ -149,21 +149,25 @@ describe('Redux adapter', () => {
counter++;
let result = next(action);
return result;
}
};
const reduxStore = createStore((state, action) => {
switch (action.type) {
case('toggle'):
return {
check: !state.check
}
default:
return state;
}
}, {check: false}, applyMiddleware(callCounter));
const reduxStore = createStore(
(state, action) => {
switch (action.type) {
case 'toggle':
return {
check: !state.check,
};
default:
return state;
}
},
{ check: false },
applyMiddleware(callCounter)
);
reduxStore.dispatch({type: 'toggle'});
reduxStore.dispatch({type: 'toggle'});
reduxStore.dispatch({ type: 'toggle' });
reduxStore.dispatch({ type: 'toggle' });
expect(counter).toBe(3); // NOTE: first action is always store initialization
});
@ -178,31 +182,35 @@ describe('Redux adapter', () => {
counter++;
let result = next(action);
return result;
}
};
const lastFunctionStorage = store => next => action => {
middlewareCallList.push('lastFunctionStorage');
lastAction = action.type;
let result = next(action);
return result;
}
};
const reduxStore = createStore((state, action) => {
switch (action.type) {
case('toggle'):
return {
check: !state.check
}
default:
return state;
}
}, {check: false}, applyMiddleware(callCounter, lastFunctionStorage));
const reduxStore = createStore(
(state, action) => {
switch (action.type) {
case 'toggle':
return {
check: !state.check,
};
default:
return state;
}
},
{ check: false },
applyMiddleware(callCounter, lastFunctionStorage)
);
reduxStore.dispatch({type: 'toggle'});
reduxStore.dispatch({ type: 'toggle' });
expect(counter).toBe(2); // NOTE: first action is always store initialization
expect(lastAction).toBe('toggle');
expect(middlewareCallList[0]).toBe("callCounter");
expect(middlewareCallList[1]).toBe("lastFunctionStorage");
expect(middlewareCallList[0]).toBe('callCounter');
expect(middlewareCallList[1]).toBe('lastFunctionStorage');
});
});

3
scripts/__tests__/jest/jestSetting.js
View File

@ -1,10 +1,9 @@
import { unmountComponentAtNode } from '../../../libs/horizon/src/dom/DOMExternal';
import { getLogUtils } from './testUtils';
//import failOnConsole from 'jest-fail-on-console';
//failOnConsole();
const LogUtils = getLogUtils();
global.isDev = process.env.NODE_ENV === 'development';
global.isTest = true;
global.container = null;
global.beforeEach(() => {
LogUtils.clear();

59
scripts/__tests__/jest/testUtils.js
View File

@ -1,68 +1,9 @@
import { allDelegatedNativeEvents } from '@cloudsop/horizon/src/event/EventHub';
//import * as LogUtils from './logUtils';
export const stopBubbleOrCapture = (e, value) => {
const LogUtils = getLogUtils();
LogUtils.log(value);
e.stopPropagation();
};
function listAllEventListeners() {
const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
allElements.push(document);
allElements.push(window);
const types = [];
for (let ev in window) {
if (/^on/.test(ev)) types[types.length] = ev;
}
let elements = [];
for (let i = 0; i < allElements.length; i++) {
const currentElement = allElements[i];
for (let j = 0; j < types.length; j++) {
if (typeof currentElement[types[j]] === 'function') {
elements.push({
'node': currentElement,
'type': types[j],
'func': currentElement[types[j]].toString(),
});
}
}
}
return elements.sort(function(a,b) {
return a.type.localeCompare(b.type);
});
}
export const getEventListeners = (dom) => {
console.table(listAllEventListeners());
// let ret = true;
// let keyArray = [];
// for (let key in dom) {
// if (/^on/.test(key)) keyArray.push(key);
// }
// console.log(getEventListeners);
// console.log('---------------------------------');
// console.log(allDelegatedNativeEvents);
// try {
// allDelegatedNativeEvents.forEach(event => {
// if (!keyArray.includes(event)) {
// ret = false;
// throw new Error('没有挂载全量事件');
// }
// });
// } catch (error) {
// console.log(error);
// }
// return ret;
};
export function triggerClickEvent(container, id) {
const event = new MouseEvent('click', {
bubbles: true,

5
scripts/gen3rdLib.js
View File

@ -10,6 +10,11 @@ const argv = require('minimist')(process.argv.slice(2));
const libPathPrefix = '../build';
const suffix = argv.dev ? 'development.js' : 'production.js';
const template = argv.type === 'horizon' ? 'horizon3rdTemplate.ejs' : 'template.ejs';
const templatePath = path.resolve(__dirname, `./${template}`);
if (!fs.existsSync(templatePath)) {
console.log(chalk.yellow('Failed: Template file not exist'));
return;
}
const readLib = lib => {
const libName = lib.split('.')[0];
const libPath = path.resolve(__dirname, `${libPathPrefix}/${libName}/umd/${lib}`);

17568
scripts/horizon3rdTemplate.ejs
View File

File diff suppressed because it is too large Load Diff

6
scripts/rollup/rollup.config.js
View File

@ -23,7 +23,8 @@ if (!fs.existsSync(outDir)) {
const outputResolve = (...p) => path.resolve(outDir, ...p);
function genConfig(mode) {
const sourcemap = mode === 'development' ? 'inline' : false;
const isDev = mode === 'development';
const sourcemap = isDev ? 'inline' : false;
return {
input: path.resolve(libDir, 'index.ts'),
output: [
@ -53,7 +54,8 @@ function genConfig(mode) {
replace({
values: {
'process.env.NODE_ENV': `"${mode}"`,
isDev: 'true',
isDev: isDev.toString(),
isTest: false,
__VERSION__: `"${horizonVersion}"`,
},
preventAssignment: true,

768
scripts/template.ejs
View File

File diff suppressed because one or more lines are too long