From 358ecb3c54c96bff3707d01c53da1641e732d84b Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Tue, 29 Jun 2021 16:28:16 +0800 Subject: [PATCH] =?UTF-8?q?refactor(perf):=20=E5=BD=BB=E5=BA=95=E6=8E=92?= =?UTF-8?q?=E9=99=A4=20next=20=E4=BB=A5=E5=8F=8A=E9=83=A8=E5=88=86=20lodas?= =?UTF-8?q?h.xxx=20=E6=96=B9=E5=BC=8F=E5=BC=95=E5=85=A5=E7=9A=84=20lodash,?= =?UTF-8?q?=20=E4=B8=8D=E5=86=8D=E7=9B=B4=E6=8E=A5=E5=BC=95=E5=85=A5=20ve-?= =?UTF-8?q?icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/jest.config.js | 2 +- .../designer/tests/utils-ut/invariant.test.ts | 7 + packages/designer/tests/utils-ut/misc.test.ts | 150 ++++++++++++++++++ packages/designer/tests/utils-ut/slot.test.ts | 37 +++++ .../src/components/stage-box/stage.tsx | 7 +- packages/editor-skeleton/src/icons/arrow.tsx | 11 ++ packages/editor-skeleton/src/icons/exit.tsx | 11 ++ packages/engine/build.cloud.json | 1 + packages/engine/package.json | 4 +- packages/engine/src/engine-core.ts | 1 - packages/ignitor/build.json | 3 +- .../react-simulator-renderer/build.cloud.json | 35 ++++ .../react-simulator-renderer/package.json | 13 +- packages/utils/package.json | 1 + packages/vision-polyfill/build.cloud.json | 4 +- packages/vision-polyfill/package.json | 4 +- .../src/bundle/upgrade-metadata.ts | 2 +- 17 files changed, 269 insertions(+), 24 deletions(-) create mode 100644 packages/designer/tests/utils-ut/invariant.test.ts create mode 100644 packages/designer/tests/utils-ut/misc.test.ts create mode 100644 packages/designer/tests/utils-ut/slot.test.ts create mode 100644 packages/editor-skeleton/src/icons/arrow.tsx create mode 100644 packages/editor-skeleton/src/icons/exit.tsx create mode 100644 packages/react-simulator-renderer/build.cloud.json diff --git a/packages/designer/jest.config.js b/packages/designer/jest.config.js index 2ad52d058..7ba1f361a 100644 --- a/packages/designer/jest.config.js +++ b/packages/designer/jest.config.js @@ -6,7 +6,7 @@ module.exports = { // // '^.+\\.(ts|tsx)$': 'ts-jest', // // '^.+\\.(js|jsx)$': 'babel-jest', // }, - // testMatch: ['**/setting-field.test.ts'], + // testMatch: ['**/utils-ut/*.test.ts'], // testMatch: ['(/tests?/.*(test))\\.[jt]s$'], transformIgnorePatterns: [ `/node_modules/(?!${esModules})/`, diff --git a/packages/designer/tests/utils-ut/invariant.test.ts b/packages/designer/tests/utils-ut/invariant.test.ts new file mode 100644 index 000000000..1d19cebf6 --- /dev/null +++ b/packages/designer/tests/utils-ut/invariant.test.ts @@ -0,0 +1,7 @@ +// @ts-nocheck +import { invariant } from '../../src/utils/invariant'; + +it('invariant', () => { + expect(() => invariant(true)).not.toThrow(); + expect(() => invariant(false, 'abc', 'xxx')).toThrow(/Invariant failed:/); +}); \ No newline at end of file diff --git a/packages/designer/tests/utils-ut/misc.test.ts b/packages/designer/tests/utils-ut/misc.test.ts new file mode 100644 index 000000000..a9dcfeeb5 --- /dev/null +++ b/packages/designer/tests/utils-ut/misc.test.ts @@ -0,0 +1,150 @@ +// @ts-nocheck +import { isElementNode, isDOMNodeVisible } from '../../src/utils/misc'; + +it('isElementNode', () => { + expect(isElementNode(document.createElement('div'))).toBeTruthy(); + expect(isElementNode(1)).toBeFalsy(); +}); + +/** + * const domNodeRect = domNode.getBoundingClientRect(); + const { width, height } = viewport.contentBounds; + const { left, right, top, bottom, width: nodeWidth, height: nodeHeight } = domNodeRect; + return ( + left >= -nodeWidth && + top >= -nodeHeight && + bottom <= height + nodeHeight && + right <= width + nodeWidth + ); + */ + +const genMockNode = ({ left, right, top, bottom, width, height }) => { + return { getBoundingClientRect: () => { + if (width === undefined || height === undefined) throw new Error('width and height is required.'); + const base = { width, height }; + let coordinate = {}; + if (left !== undefined) { + coordinate = top !== undefined ? { + left, + right: left + width, + top, + bottom: top + height, + } : { + left, + right: left + width, + bottom, + top: bottom - height, + } + } else if (right !== undefined) { + coordinate = top !== undefined ? { + left: right - width, + right, + top, + bottom: top + height, + } : { + left: right - width, + right, + bottom, + top: bottom - height, + } + } + return { ...base, ...coordinate }; + } }; +}; +const mockViewport = { + contentBounds: { + width: 300, + height: 300, + }, +}; +describe('isDOMNodeVisible', () => { + it('isDOMNodeVisible', () => { + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + left: 0, + top: 0, + }), + mockViewport, + ), + ).toBeTruthy(); + + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + left: -100, + top: 0, + }), + mockViewport, + ), + ).toBeTruthy(); + + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + left: 50, + top: 50, + }), + mockViewport, + ), + ).toBeTruthy(); + + // 左侧出界了 + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + left: -101, + top: 0, + }), + mockViewport, + ), + ).toBeFalsy(); + + // 右侧出界了 + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + right: 401, + top: 0, + }), + mockViewport, + ), + ).toBeFalsy(); + + // 上侧出界了 + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + left: 50, + top: -101, + }), + mockViewport, + ), + ).toBeFalsy(); + + // 下侧出界了 + expect( + isDOMNodeVisible( + genMockNode({ + width: 100, + height: 100, + left: 50, + bottom: 401, + }), + mockViewport, + ), + ).toBeFalsy(); + }); +}); diff --git a/packages/designer/tests/utils-ut/slot.test.ts b/packages/designer/tests/utils-ut/slot.test.ts new file mode 100644 index 000000000..d69f65c22 --- /dev/null +++ b/packages/designer/tests/utils-ut/slot.test.ts @@ -0,0 +1,37 @@ +// @ts-nocheck +import { includeSlot, removeSlot } from '../../src/utils/slot'; + +const genGetExtraProp = (val: string) => () => { + return { + getAsString() { + return val; + }, + }; +}; + +const remove = () => {}; + +const mockNode = { + slots: [{ + getExtraProp: genGetExtraProp('haha'), + remove, + }, { + getExtraProp: genGetExtraProp('heihei'), + remove, + }] +}; + +it('includeSlot', () => { + expect(includeSlot(mockNode, 'haha')).toBeTruthy(); + expect(includeSlot(mockNode, 'heihei')).toBeTruthy(); + expect(includeSlot(mockNode, 'xixi')).toBeFalsy(); +}); + +it('removeSlot', () => { + expect(removeSlot(mockNode, 'xixi')).toBeFalsy(); + expect(mockNode.slots).toHaveLength(2); + expect(removeSlot(mockNode, 'haha')).toBeTruthy(); + expect(mockNode.slots).toHaveLength(1); + expect(removeSlot(mockNode, 'heihei')).toBeTruthy(); + expect(mockNode.slots).toHaveLength(0); +}); diff --git a/packages/editor-skeleton/src/components/stage-box/stage.tsx b/packages/editor-skeleton/src/components/stage-box/stage.tsx index 1d3d3cea0..569d318c2 100644 --- a/packages/editor-skeleton/src/components/stage-box/stage.tsx +++ b/packages/editor-skeleton/src/components/stage-box/stage.tsx @@ -1,7 +1,8 @@ // @todo 改成 hooks import React, { Component } from 'react'; import classNames from 'classnames'; -import Icons from '@ali/ve-icons'; +import { IconArrow } from '../../icons/arrow'; +import { IconExit } from '../../icons/exit'; import { Stage as StageWidget } from '../../widget/stage'; import { isTitleConfig } from '@ali/lowcode-types'; @@ -77,9 +78,9 @@ export default class Stage extends Component { const stageBacker = stage?.hasBack() ? (
- + {newTitle} - +
) : null; diff --git a/packages/editor-skeleton/src/icons/arrow.tsx b/packages/editor-skeleton/src/icons/arrow.tsx new file mode 100644 index 000000000..aaef4b35d --- /dev/null +++ b/packages/editor-skeleton/src/icons/arrow.tsx @@ -0,0 +1,11 @@ + +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; + +export function IconArrow(props: IconProps) { + return ( + + + + ); +} +IconArrow.displayName = 'Arrow'; \ No newline at end of file diff --git a/packages/editor-skeleton/src/icons/exit.tsx b/packages/editor-skeleton/src/icons/exit.tsx new file mode 100644 index 000000000..04f7336cd --- /dev/null +++ b/packages/editor-skeleton/src/icons/exit.tsx @@ -0,0 +1,11 @@ + +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; + +export function IconExit(props: IconProps) { + return ( + + + + ); +} +IconExit.displayName = 'Exit'; \ No newline at end of file diff --git a/packages/engine/build.cloud.json b/packages/engine/build.cloud.json index 70b22a8bf..874152eed 100644 --- a/packages/engine/build.cloud.json +++ b/packages/engine/build.cloud.json @@ -25,6 +25,7 @@ "plugins": [ "build-plugin-react-app", ["build-plugin-fusion", { + "externalNext": "umd" }], ["build-plugin-moment-locales", { "locales": ["zh-cn"] diff --git a/packages/engine/package.json b/packages/engine/package.json index 4e346c917..1611bc5b0 100644 --- a/packages/engine/package.json +++ b/packages/engine/package.json @@ -13,7 +13,7 @@ "start": "build-scripts start", "version:update": "node ./scripts/version.js", "build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo", - "cloud-build": "build-scripts build --config build.cloud.json && tnpm run version:update", + "cloud-build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.cloud.json && tnpm run version:update", "test": "build-scripts test --config build.test.json --jest-passWithNoTests" }, "license": "MIT", @@ -49,7 +49,7 @@ "@types/events": "^3.0.0", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", - "build-plugin-fusion": "^0.1.0", + "build-plugin-fusion": "0.1.17-beta.0", "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.8.0", "fs-extra": "^9.0.1", diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 81f582b36..3adf939a2 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -162,7 +162,6 @@ plugins.register((ctx: ILowCodePluginContext) => { }, }; }); - export async function init(container?: Element, options?: EngineOptions) { let engineOptions = null; let engineContainer = null; diff --git a/packages/ignitor/build.json b/packages/ignitor/build.json index 9262596f3..dc36702c1 100644 --- a/packages/ignitor/build.json +++ b/packages/ignitor/build.json @@ -33,7 +33,8 @@ [ "build-plugin-fusion", { - "themePackage": "@alife/theme-lowcode-light" + "themePackage": "@alife/theme-lowcode-light", + "externalNext": "umd" } ], [ diff --git a/packages/react-simulator-renderer/build.cloud.json b/packages/react-simulator-renderer/build.cloud.json new file mode 100644 index 000000000..60a93f548 --- /dev/null +++ b/packages/react-simulator-renderer/build.cloud.json @@ -0,0 +1,35 @@ +{ + "entry": { + "react-simulator-renderer": "src/index" + }, + "library": "___ReactSimulatorRenderer___", + "libraryTarget": "umd", + "externals": { + "react": "var window.React", + "react-dom": "var window.ReactDOM", + "prop-types": "var window.PropTypes", + "@ali/visualengine": "var window.VisualEngine", + "@ali/visualengine-utils": "var window.VisualEngineUtils", + "rax": "var window.Rax", + "monaco-editor/esm/vs/editor/editor.api": "var window.monaco", + "monaco-editor/esm/vs/editor/editor.main.js": "var window.monaco", + "@alifd/next": "var Next", + "@ali/lowcode-engine-ext": "var window.AliLowCodeEngineExt", + "moment": "var moment", + "lodash": "var _" + }, + "polyfill": false, + "outputDir": "dist", + "vendor": false, + "ignoreHtmlTemplate": true, + "plugins": [ + "build-plugin-react-app", + ["build-plugin-fusion", { + "externalNext": "umd" + }], + ["build-plugin-moment-locales", { + "locales": ["zh-cn"] + }], + "./build.plugin.js" + ] +} diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json index 16b44f27b..a2d8adf7e 100644 --- a/packages/react-simulator-renderer/package.json +++ b/packages/react-simulator-renderer/package.json @@ -10,8 +10,7 @@ "lib" ], "scripts": { - "cloud-build": "build-scripts build --skip-demo", - "build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo" + "cloud-build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo" }, "dependencies": { "@ali/lowcode-designer": "1.0.56", @@ -33,16 +32,6 @@ "@types/react-dom": "^16", "build-plugin-component": "^0.2.11" }, - "ava": { - "compileEnhancements": false, - "snapshotDir": "test/fixtures/__snapshots__", - "extensions": [ - "ts" - ], - "require": [ - "ts-node/register" - ] - }, "publishConfig": { "registry": "https://registry.npm.alibaba-inc.com" }, diff --git a/packages/utils/package.json b/packages/utils/package.json index 2641ee7da..1cc7d1891 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@ali/lowcode-types": "1.0.56", + "@ali/ve-inline-tip": "^3.0.2", "@alifd/next": "^1.19.16", "lodash.get": "^4.4.2", "react": "^16" diff --git a/packages/vision-polyfill/build.cloud.json b/packages/vision-polyfill/build.cloud.json index 90e74a3af..afca37200 100644 --- a/packages/vision-polyfill/build.cloud.json +++ b/packages/vision-polyfill/build.cloud.json @@ -17,7 +17,9 @@ "@ali/lowcode-engine-ext": "var window.AliLowCodeEngineExt", "@alifd/next": "var Next", "moment": "var moment", - "lodash": "var _" + "lodash": "var _", + "lodash.get": "var _.get", + "lodash.some": "var _.some" }, "polyfill": false, "outputDir": "dist", diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json index 234ad6655..a38ed8938 100644 --- a/packages/vision-polyfill/package.json +++ b/packages/vision-polyfill/package.json @@ -13,7 +13,7 @@ "start": "build-scripts start", "version:update": "node ./scripts/version.js", "build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo", - "cloud-build": "build-scripts build --config build.cloud.json", + "cloud-build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.cloud.json", "test": "build-scripts test --config build.test.json" }, "license": "MIT", @@ -45,7 +45,7 @@ "@types/events": "^3.0.0", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", - "build-plugin-fusion": "^0.1.0", + "build-plugin-fusion": "0.1.17-beta.0", "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.1.2", "fs-extra": "^9.0.1", diff --git a/packages/vision-polyfill/src/bundle/upgrade-metadata.ts b/packages/vision-polyfill/src/bundle/upgrade-metadata.ts index 997dd2637..5817a7b5d 100644 --- a/packages/vision-polyfill/src/bundle/upgrade-metadata.ts +++ b/packages/vision-polyfill/src/bundle/upgrade-metadata.ts @@ -1,5 +1,5 @@ import { ComponentType, ReactElement, isValidElement, ComponentClass } from 'react'; -import omit from 'lodash/omit'; +import { omit } from 'lodash'; import { isPlainObject, uniqueId, isVariable } from '@ali/lowcode-utils'; import { isI18nData,