github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-20 15:38:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit 'f2658e1dc5a90469c500fa1ff037ca5fa07db535' into def_releases_2021092316393939_ali-lowcode_ali-lowcode-engine/1.0.69

Browse Source
This commit is contained in:
tbfed 2021-10-09 10:27:09 +08:00
commit a3ee8f0527
4 changed files with 87 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/designer/tests/document/document-model/__snapshots__/document-model.test.ts.snap
View File

@ -72,7 +72,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbd", "id": "node_k1ow3cbd",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__slot__action": false, "__slot__action": false,
"__slot__content": false, "__slot__content": false,
@ -121,7 +120,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cba", "id": "node_k1ow3cba",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object {}, "props": Object {},
"title": "", "title": "",
}, },
@ -144,7 +142,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbz", "id": "node_k1ow3cbz",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -223,7 +220,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc1", "id": "node_k1ow3cc1",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -298,7 +294,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc3", "id": "node_k1ow3cc3",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -373,7 +368,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbx", "id": "node_k1ow3cbx",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"colSpan": "", "colSpan": "",
@ -390,7 +384,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc2", "id": "node_k1ow3cc2",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -465,7 +458,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc0", "id": "node_k1ow3cc0",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -560,7 +552,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cby", "id": "node_k1ow3cby",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"colSpan": "", "colSpan": "",
@ -575,7 +566,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbw", "id": "node_k1ow3cbw",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"columnGap": "20", "columnGap": "20",
@ -592,7 +582,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbk", "id": "node_k1ow3cbk",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object {}, "props": Object {},
"title": "", "title": "",
}, },
@ -603,7 +592,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbj", "id": "node_k1ow3cbj",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__slot__extra": false, "__slot__extra": false,
"__slot__subTitle": false, "__slot__subTitle": false,
@ -648,7 +636,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc4", "id": "node_k1ow3cc4",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -727,7 +714,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc8", "id": "node_k1ow3cc8",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -802,7 +788,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc6", "id": "node_k1ow3cc6",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"colSpan": "", "colSpan": "",
@ -819,7 +804,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc9", "id": "node_k1ow3cc9",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__category__": "form", "__category__": "form",
"__style__": Object {}, "__style__": Object {},
@ -894,7 +878,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc7", "id": "node_k1ow3cc7",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"colSpan": "", "colSpan": "",
@ -909,7 +892,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cc5", "id": "node_k1ow3cc5",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"columnGap": "20", "columnGap": "20",
@ -926,7 +908,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbm", "id": "node_k1ow3cbm",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object {}, "props": Object {},
"title": "", "title": "",
}, },
@ -937,7 +918,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbl", "id": "node_k1ow3cbl",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__slot__extra": false, "__slot__extra": false,
"__slot__subTitle": false, "__slot__subTitle": false,
@ -980,7 +960,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbn", "id": "node_k1ow3cbn",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": ":root { "__style__": ":root {
margin-right: 16px; margin-right: 16px;
@ -1025,7 +1004,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbp", "id": "node_k1ow3cbp",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": ":root { "__style__": ":root {
width: 80px; width: 80px;
@ -1063,7 +1041,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbo", "id": "node_k1ow3cbo",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": ":root { "__style__": ":root {
display: flex; display: flex;
@ -1089,7 +1066,6 @@ Object {
"hidden": false, "hidden": false,
"id": "form", "id": "form",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"__style__": Object {}, "__style__": Object {},
"autoUnmount": true, "autoUnmount": true,
@ -1120,7 +1096,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbb", "id": "node_k1ow3cbb",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object { "props": Object {
"contentBgColor": "transparent", "contentBgColor": "transparent",
"contentMargin": "20", "contentMargin": "20",
@ -1135,7 +1110,6 @@ Object {
"hidden": false, "hidden": false,
"id": "node_k1ow3cbc", "id": "node_k1ow3cbc",
"isLocked": false, "isLocked": false,
"loop": undefined,
"props": Object {}, "props": Object {},
"title": "", "title": "",
}, },
@ -1203,7 +1177,6 @@ Object.keys(module.exports).forEach(function(item) {
"type": "js", "type": "js",
}, },
}, },
"loop": undefined,
"methods": Object { "methods": Object {
"__initMethods__": Object { "__initMethods__": Object {
"compiled": "function (exports, module) { /*set actions code here*/ }", "compiled": "function (exports, module) { /*set actions code here*/ }",

14
packages/react-simulator-renderer/src/renderer.ts
View File

@ -16,9 +16,8 @@ import {
isPlainObject, isPlainObject,
AssetLoader, AssetLoader,
getProjectUtils, getProjectUtils,
applyActivities,
} from '@ali/lowcode-utils'; } from '@ali/lowcode-utils';
import { RootSchema, ComponentSchema, TransformStage, NodeSchema, ActivityType, ActivityData } from '@ali/lowcode-types'; import { ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types';
// just use types // just use types
import { BuiltinSimulatorRenderer, NodeInstance, Component, DocumentModel, Node } from '@ali/lowcode-designer'; import { BuiltinSimulatorRenderer, NodeInstance, Component, DocumentModel, Node } from '@ali/lowcode-designer';
import LowCodeRenderer from '@ali/lowcode-react-renderer'; import LowCodeRenderer from '@ali/lowcode-react-renderer';
@ -28,8 +27,6 @@ import Leaf from './builtin-components/leaf';
import { withQueryParams, parseQuery } from './utils/url'; import { withQueryParams, parseQuery } from './utils/url';
const loader = new AssetLoader(); const loader = new AssetLoader();
const DELAY_THRESHOLD = 10;
const FULL_RENDER_THRESHOLD = 500;
configure({ enforceActions: 'never' }); configure({ enforceActions: 'never' });
export class DocumentInstance { export class DocumentInstance {
@ -447,16 +444,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
class LowCodeComp extends React.Component<any, any> { class LowCodeComp extends React.Component<any, any> {
render() { render() {
const newSchema = host.designer.transformProps(_schema as any, {
componentMeta: {
prototype: 'lowcodeComp',
},
isRoot: () => false,
} as Node, TransformStage.Render);
const extraProps = getLowCodeComponentProps(this.props); const extraProps = getLowCodeComponentProps(this.props);
return createElement(LowCodeRenderer, { return createElement(LowCodeRenderer, {
...extraProps, // 防止覆盖下面内置属性 ...extraProps, // 防止覆盖下面内置属性
schema: newSchema, // 使用 _schema 为了使低代码组件在页面设计中使用变量，同 react 组件使用效果一致
schema: _schema,
components: renderer.components, components: renderer.components,
designMode: renderer.designMode, designMode: renderer.designMode,
device: renderer.device, device: renderer.device,

82
packages/renderer-core/src/hoc/leaf.tsx
View File

@ -26,7 +26,6 @@ export type IComponentHoc = {
}; };
export type IComponentConstruct = (Comp: types.IBaseRenderer, info: IComponentHocInfo) => types.Constructor; export type IComponentConstruct = (Comp: types.IBaseRenderer, info: IComponentHocInfo) => types.Constructor;
// const whitelist: string[] = []; // const whitelist: string[] = [];
interface IProps { interface IProps {
@ -50,6 +49,63 @@ enum RerenderType {
I18nChanged = 'I18nChanged', I18nChanged = 'I18nChanged',
} }
// 缓存 Leaf 层组件，防止重新渲染问题
const leafComponentCache: {
[componentName: string]: any;
} = {};
// 缓存导致 rerender 的订阅事件
const rerenderEventCache: {
[componentId: string]: any;
} = {};
/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
function makeRerenderEvent({
schema,
__debug,
container,
getNode,
}: any) {
const leaf = getNode?.(schema.id);
if (!leaf
|| rerenderEventCache[schema.id]?.clear
|| leaf === rerenderEventCache[schema.id]?.leaf
) {
return;
}
rerenderEventCache[schema.id]?.dispose.forEach((d: any) => d && d());
rerenderEventCache[schema.id] = {
clear: false,
leaf,
dispose: [
leaf?.onPropChange?.(() => {
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`);
container.rerender();
}),
leaf?.onChildrenChange?.(() => {
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`);
container.rerender();
}) as Function,
leaf?.onVisibleChange?.(() => {
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`);
container.rerender();
}),
],
};
}
/** 渲染的 node 节点全局注册事件清除 */
function clearRerenderEvent(id: string): void {
if (!rerenderEventCache[id]) {
rerenderEventCache[id] = {
clear: true,
};
return;
}
rerenderEventCache[id].dispose.forEach((d: any) => d && d());
rerenderEventCache[id].dispose = [];
rerenderEventCache[id].clear = true;
}
// 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染 // 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染
export function leafWrapper(Comp: types.IBaseRenderer, { export function leafWrapper(Comp: types.IBaseRenderer, {
schema, schema,
@ -72,16 +128,15 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
console.error(`${schema.componentName} component may be has errors: `, Comp); console.error(`${schema.componentName} component may be has errors: `, Comp);
} }
/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */ makeRerenderEvent({
let wrapDisposeFunctions: Function[] = []; schema,
if (getNode) { __debug,
const leaf = getNode(schema.id); container,
getNode,
});
wrapDisposeFunctions = [ if (leafComponentCache[schema.componentName]) {
leaf?.onPropsChange?.(() => container.rerender()), return leafComponentCache[schema.componentName];
leaf?.onChildrenChange?.(() => container.rerender()),
leaf?.onVisibleChange?.(() => container.rerender()),
];
} }
class LeafWrapper extends Component { class LeafWrapper extends Component {
@ -94,6 +149,8 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
disposeFunctions: ((() => void) | Function)[] = []; disposeFunctions: ((() => void) | Function)[] = [];
__component_tag = 'leafWrapper';
recordTime = () => { recordTime = () => {
if (!this.recordInfo.startTime) { if (!this.recordInfo.startTime) {
return; return;
@ -117,10 +174,11 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
constructor(props: IProps, context: any) { constructor(props: IProps, context: any) {
super(props, context); super(props, context);
// 监听以下事件，当变化时更新自己 // 监听以下事件，当变化时更新自己
clearRerenderEvent(schema.id);
this.initOnPropsChangeEvent(); this.initOnPropsChangeEvent();
this.initOnChildrenChangeEvent(); this.initOnChildrenChangeEvent();
this.initOnVisibleChangeEvent(); this.initOnVisibleChangeEvent();
wrapDisposeFunctions.forEach(d => d && d()); __debug(`${schema.componentName}[${schema.id}] leaf render in SimulatorRendererView`);
this.state = { this.state = {
nodeChildren: null, nodeChildren: null,
childrenInState: false, childrenInState: false,
@ -324,5 +382,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
LeafWrapper.displayName = (Comp as any).displayName; LeafWrapper.displayName = (Comp as any).displayName;
leafComponentCache[schema.componentName] = LeafWrapper;
return LeafWrapper; return LeafWrapper;
} }

17
packages/renderer-core/src/renderer/base.tsx
View File

@ -62,8 +62,6 @@ export default function baseRenererFactory() {
static contextType = AppContext; static contextType = AppContext;
__hoc_components: any = {};
__namespace = 'base'; __namespace = 'base';
_self: any = null; _self: any = null;
@ -481,7 +479,6 @@ export default function baseRenererFactory() {
props: transformArrayToMap(componentInfo.props, 'name'), props: transformArrayToMap(componentInfo.props, 'name'),
}) || {}; }) || {};
if (!this.__hoc_components[schema.componentName]) {
this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => { this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
Comp = ComponentConstruct(Comp, { Comp = ComponentConstruct(Comp, {
schema, schema,
@ -489,20 +486,13 @@ export default function baseRenererFactory() {
baseRenderer: this, baseRenderer: this,
}); });
}); });
}
// 对于可以获取到ref的组件做特殊处理 // 对于可以获取到ref的组件做特殊处理
if (!acceptsRef(Comp) && !this.__hoc_components[schema.componentName]) { if (!acceptsRef(Comp)) {
Comp = compWrapper(Comp); Comp = compWrapper(Comp);
components[schema.componentName] = Comp; components[schema.componentName] = Comp;
} }
if (!this.__hoc_components[schema.componentName]) {
this.__hoc_components[schema.componentName] = Comp;
} else {
Comp = this.__hoc_components[schema.componentName];
}
otherProps.ref = (ref: any) => { otherProps.ref = (ref: any) => {
this.$(props.fieldId || props.ref, ref); // 收集ref this.$(props.fieldId || props.ref, ref); // 收集ref
const refProps = props.ref; const refProps = props.ref;
@ -824,7 +814,6 @@ export default function baseRenererFactory() {
}; };
__getHocComp(Comp: any, schema: any) { __getHocComp(Comp: any, schema: any) {
if (!this.__hoc_components[schema.componentName]) {
this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => { this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
Comp = ComponentConstruct(Comp || Div, { Comp = ComponentConstruct(Comp || Div, {
schema, schema,
@ -832,10 +821,6 @@ export default function baseRenererFactory() {
baseRenderer: this, baseRenderer: this,
}); });
}); });
this.__hoc_components[schema.componentName] = Comp;
} else {
Comp = this.__hoc_components[schema.componentName];
}
return Comp; return Comp;
} }