refactor(perf): 彻底排除 next 以及部分 lodash.xxx 方式引入的 lodash, 不再直接引入 ve-icons

This commit is contained in:
lihao.ylh 2021-06-29 16:28:16 +08:00
parent 2f5db1c532
commit 358ecb3c54
17 changed files with 269 additions and 24 deletions

View File

@ -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})/`,

View File

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

View File

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

View File

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

View File

@ -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<StageProps> {
const stageBacker = stage?.hasBack() ? (
<div className="skeleton-stagebox-stagebacker">
<Icons name="arrow" className="skeleton-stagebox-stage-arrow" size="medium" data-stage-target="stageback" />
<IconArrow className="skeleton-stagebox-stage-IconArrow" size="medium" data-stage-target="stageback" />
<span className="skeleton-stagebox-stage-title">{newTitle}</span>
<Icons name="exit" className="skeleton-stagebox-stage-exit" size="medium" data-stage-target="stageexit" />
<IconExit className="skeleton-stagebox-stage-exit" size="medium" data-stage-target="stageexit" />
</div>
) : null;

View File

@ -0,0 +1,11 @@
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
export function IconArrow(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M512.002047 771.904425c-10.152221 0.518816-20.442588-2.800789-28.202319-10.598382L77.902254 315.937602c-14.548344-14.618952-14.548344-38.318724 0-52.933583 14.544251-14.614859 38.118156-14.614859 52.662407 0l381.437385 418.531212L893.432269 263.004019c14.544251-14.614859 38.125319-14.614859 52.662407 0 14.552437 14.614859 14.552437 38.314631 0 52.933583L540.205389 761.307066C532.451798 769.103636 522.158361 772.424264 512.002047 771.904425z" />
</SVGIcon>
);
}
IconArrow.displayName = 'Arrow';

View File

@ -0,0 +1,11 @@
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
export function IconExit(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M723.872 478.4l-81.12-81.152L688 352l135.776 135.776L846.4 510.4 688 668.8l-45.248-45.28 81.12-81.12H384v-64h339.872zM576 896H256.192A64.16 64.16 0 0 1 192 831.84V192.16c0-35.424 28.704-64.16 64.192-64.16H576v64H288.224A31.968 31.968 0 0 0 256 223.744v576.512C256 817.44 270.4 832 288.224 832H576v64z" />
</SVGIcon>
);
}
IconExit.displayName = 'Exit';

View File

@ -25,6 +25,7 @@
"plugins": [
"build-plugin-react-app",
["build-plugin-fusion", {
"externalNext": "umd"
}],
["build-plugin-moment-locales", {
"locales": ["zh-cn"]

View File

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

View File

@ -162,7 +162,6 @@ plugins.register((ctx: ILowCodePluginContext) => {
},
};
});
export async function init(container?: Element, options?: EngineOptions) {
let engineOptions = null;
let engineContainer = null;

View File

@ -33,7 +33,8 @@
[
"build-plugin-fusion",
{
"themePackage": "@alife/theme-lowcode-light"
"themePackage": "@alife/theme-lowcode-light",
"externalNext": "umd"
}
],
[

View File

@ -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"
]
}

View File

@ -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"
},

View File

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

View File

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

View File

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

View File

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