github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-13 04:03:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: minor refactors for render-core/renderer/base. remove useless logic about __ignoreParse

Browse Source
This commit is contained in:
JackLian 2022-07-12 10:51:56 +08:00 committed by 刘菊萍(絮黎)
parent 1135a30780
commit 282a30afa4
3 changed files with 70 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ import {
isVariable, isVariable,
isJSSlot, isJSSlot,
} from '../utils'; } from '../utils';
import { IBaseRendererProps, IInfo, IBaseRenderComponent, IBaseRendererContext, IGeneralConstructor, IRendererAppHelper, DataSource } from '../types'; import { IBaseRendererProps, INodeInfo, IBaseRenderComponent, IBaseRendererContext, IGeneralConstructor, IRendererAppHelper, DataSource } from '../types';
import { compWrapper } from '../hoc'; import { compWrapper } from '../hoc';
import { IComponentConstruct, IComponentHoc, leafWrapper } from '../hoc/leaf'; import { IComponentConstruct, IComponentHoc, leafWrapper } from '../hoc/leaf';
import logger from '../utils/logger'; import logger from '../utils/logger';
@ -59,6 +59,8 @@ export default function baseRendererFactory(): IBaseRenderComponent {
PREVIEW: 'preview', PREVIEW: 'preview',
}; };
const OVERLAY_LIST = ['Dialog', 'Overlay', 'Animate', 'ConfigProvider']; const OVERLAY_LIST = ['Dialog', 'Overlay', 'Animate', 'ConfigProvider'];
const DEFAULT_LOOP_ARG_ITEM = 'item';
const DEFAULT_LOOP_ARG_INDEX = 'index';
let scopeIdx = 0; let scopeIdx = 0;
return class BaseRenderer extends Component { return class BaseRenderer extends Component {
@ -377,7 +379,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
if (engine) { if (engine) {
engine.props.onCompGetCtx(schema, this); engine.props.onCompGetCtx(schema, this);
// 画布场景才需要每次渲染bind自定义方法 // 画布场景才需要每次渲染bind自定义方法
if (engine.props.designMode === 'design') { if (this.__designModeIsDesign) {
this.__bindCustomMethods(this.props); this.__bindCustomMethods(this.props);
this.dataSourceMap = this.__dataHelper?.updateConfig(schema.dataSource); this.dataSourceMap = this.__dataHelper?.updateConfig(schema.dataSource);
} }
@ -432,7 +434,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
return this.__createVirtualDom(_children, scope, ({ return this.__createVirtualDom(_children, scope, ({
schema: __schema, schema: __schema,
Comp: this.__getHocComp(Comp, __schema, scope), Comp: this.__getHocComp(Comp, __schema, scope),
} as IInfo)); } as INodeInfo));
}; };
/** /**
@ -442,7 +444,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
* @param parentInfo 父组件的信息，包含schema和Comp * @param parentInfo 父组件的信息，包含schema和Comp
* @param idx 为循环渲染的循环Index * @param idx 为循环渲染的循环Index
*/ */
__createVirtualDom = (originalSchema: NodeData | NodeData[] | undefined, originalScope: any, parentInfo: IInfo, idx: string | number = ''): any => { __createVirtualDom = (originalSchema: NodeData | NodeData[] | undefined, originalScope: any, parentInfo: INodeInfo, idx: string | number = ''): any => {
if (!originalSchema) { if (!originalSchema) {
return null; return null;
} }
@ -527,7 +529,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
if (schema.loop != null) { if (schema.loop != null) {
const loop = this.__parseData(schema.loop, scope); const loop = this.__parseData(schema.loop, scope);
const useLoop = isUseLoop(loop, this._designModeIsDesign); const useLoop = isUseLoop(loop, this.__designModeIsDesign);
if (useLoop) { if (useLoop) {
return this.__createLoopVirtualDom( return this.__createLoopVirtualDom(
{ {
@ -543,7 +545,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
const condition = schema.condition == null ? true : this.__parseData(schema.condition, scope); const condition = schema.condition == null ? true : this.__parseData(schema.condition, scope);
// DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册 // DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册
const displayInHook = engine.props?.designMode === 'design'; const displayInHook = this.__designModeIsDesign;
if (!condition && !displayInHook) { if (!condition && !displayInHook) {
return null; return null;
} }
@ -579,7 +581,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
if (engine.props?.designMode) { if (engine.props?.designMode) {
otherProps.__designMode = engine.props.designMode; otherProps.__designMode = engine.props.designMode;
} }
if (this._designModeIsDesign) { if (this.__designModeIsDesign) {
otherProps.__tag = Math.random(); otherProps.__tag = Math.random();
} }
const componentInfo: any = {}; const componentInfo: any = {};
@ -588,7 +590,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
props: transformArrayToMap(componentInfo.props, 'name'), props: transformArrayToMap(componentInfo.props, 'name'),
}) || {}; }) || {};
this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => { this.__componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
Comp = ComponentConstruct(Comp, { Comp = ComponentConstruct(Comp, {
schema, schema,
componentInfo, componentInfo,
@ -671,7 +673,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
} }
}; };
get componentHoc(): IComponentConstruct[] { get __componentHoc(): IComponentConstruct[] {
const componentHoc: IComponentHoc[] = [ const componentHoc: IComponentHoc[] = [
{ {
designMode: 'design', designMode: 'design',
@ -691,18 +693,18 @@ export default function baseRendererFactory(): IBaseRenderComponent {
} }
__getSchemaChildrenVirtualDom = (schema: NodeSchema | undefined, scope: any, Comp: any) => { __getSchemaChildrenVirtualDom = (schema: NodeSchema | undefined, scope: any, Comp: any) => {
let _children = this.__getSchemaChildren(schema); let children = this.__getSchemaChildren(schema);
// @todo 补完这里的 Element 定义 @承虎 // @todo 补完这里的 Element 定义 @承虎
let children: any = []; let result: any = [];
if (/*! isFileSchema(schema) && */_children) { if (children) {
if (!Array.isArray(_children)) { if (!Array.isArray(children)) {
_children = [_children]; children = [children];
} }
_children.forEach((_child: any) => { children.forEach((child: any) => {
const _childVirtualDom = this.__createVirtualDom( const childVirtualDom = this.__createVirtualDom(
isJSExpression(_child) ? this.parseExpression(_child, scope) : _child, isJSExpression(child) ? this.parseExpression(child, scope) : child,
scope, scope,
{ {
schema, schema,
@ -710,12 +712,12 @@ export default function baseRendererFactory(): IBaseRenderComponent {
}, },
); );
children.push(_childVirtualDom); result.push(childVirtualDom);
}); });
} }
if (children && children.length) { if (result && result.length > 0) {
return children; return result;
} }
return null; return null;
}; };
@ -734,14 +736,16 @@ export default function baseRendererFactory(): IBaseRenderComponent {
}) || {}; }) || {};
}; };
__createLoopVirtualDom = (schema: NodeSchema, scope: any, parentInfo: IInfo, idx: number | string) => { __createLoopVirtualDom = (schema: NodeSchema, scope: any, parentInfo: INodeInfo, idx: number | string) => {
if (isFileSchema(schema)) { if (isFileSchema(schema)) {
console.warn('file type not support Loop'); console.warn('file type not support Loop');
return null; return null;
} }
if (!Array.isArray(schema.loop)) return null; if (!Array.isArray(schema.loop)) {
const itemArg = (schema.loopArgs && schema.loopArgs[0]) || 'item'; return null;
const indexArg = (schema.loopArgs && schema.loopArgs[1]) || 'index'; }
const itemArg = (schema.loopArgs && schema.loopArgs[0]) || DEFAULT_LOOP_ARG_ITEM;
const indexArg = (schema.loopArgs && schema.loopArgs[1]) || DEFAULT_LOOP_ARG_INDEX;
const { loop } = schema; const { loop } = schema;
return loop.map((item: JSONValue | CompositeValue, i: number) => { return loop.map((item: JSONValue | CompositeValue, i: number) => {
const loopSelf: any = { const loopSelf: any = {
@ -761,26 +765,29 @@ export default function baseRendererFactory(): IBaseRenderComponent {
}); });
}; };
get _designModeIsDesign() { get __designModeIsDesign() {
const { engine } = this.context || {}; const { engine } = this.context || {};
return engine?.props?.designMode === 'design'; return engine?.props?.designMode === 'design';
} }
__parseProps = (originalProps: any, scope: any, path: string, info: IInfo): any => { __parseProps = (originalProps: any, scope: any, path: string, info: INodeInfo): any => {
let props = originalProps; let props = originalProps;
const { schema, Comp, componentInfo = {} } = info; const { schema, Comp, componentInfo = {} } = info;
const propInfo = getValue(componentInfo.props, path); const propInfo = getValue(componentInfo.props, path);
// FIXME! 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义 // FIXME: 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
const propType = propInfo?.extra?.propType; const propType = propInfo?.extra?.propType;
const ignoreParse = schema?.__ignoreParse || [];
const checkProps = (value: any) => { const checkProps = (value: any) => {
if (!propType) return value; if (!propType) {
return value;
}
return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined; return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined;
}; };
const parseReactNode = (data: any, params: any) => { const parseReactNode = (data: any, params: any) => {
if (isEmpty(params)) { if (isEmpty(params)) {
return checkProps(this.__createVirtualDom(data, scope, ({ schema, Comp } as IInfo))); const virtualDom = this.__createVirtualDom(data, scope, ({ schema, Comp } as INodeInfo));
return checkProps(virtualDom);
} }
return checkProps((...argValues: any[]) => { return checkProps((...argValues: any[]) => {
const args: any = {}; const args: any = {};
@ -794,32 +801,23 @@ export default function baseRendererFactory(): IBaseRenderComponent {
}); });
} }
args.__proto__ = scope; args.__proto__ = scope;
return scope.__createVirtualDom(data, args, { schema, Comp }); return scope.__createVirtualDom(data, args, ({ schema, Comp } as INodeInfo));
}); });
}; };
// 判断是否需要解析变量
if (
ignoreParse.some((item: any) => {
if (item instanceof RegExp) {
return item.test(path);
}
return item === path;
})
) {
return checkProps(props);
}
if (isJSExpression(props)) { if (isJSExpression(props)) {
props = this.parseExpression(props, scope); props = this.parseExpression(props, scope);
// 只有当变量解析出来为模型结构的时候才会继续解析 // 只有当变量解析出来为模型结构的时候才会继续解析
if (!isSchema(props) && !isJSSlot(props)) return checkProps(props); if (!isSchema(props) && !isJSSlot(props)) {
return checkProps(props);
}
} }
const handleLegaoI18n = (innerProps: any) => innerProps[innerProps.use || 'zh_CN']; const handleI18nData = (innerProps: any) => innerProps[innerProps.use || 'zh_CN'];
// 兼容乐高设计态 i18n 数据 // @LEGACY 兼容老平台设计态 i18n 数据
if (isI18nData(props)) { if (isI18nData(props)) {
const i18nProp = handleLegaoI18n(props); const i18nProp = handleI18nData(props);
if (i18nProp) { if (i18nProp) {
props = i18nProp; props = i18nProp;
} else { } else {
@ -827,11 +825,11 @@ export default function baseRendererFactory(): IBaseRenderComponent {
} }
} }
// 兼容乐高设计态的变量绑定 // @LEGACY 兼容老平台设计态的变量绑定
if (isVariable(props)) { if (isVariable(props)) {
props = props.value; props = props.value;
if (isI18nData(props)) { if (isI18nData(props)) {
props = handleLegaoI18n(props); props = handleI18nData(props);
} }
} }
@ -840,15 +838,15 @@ export default function baseRendererFactory(): IBaseRenderComponent {
} }
if (isJSSlot(props)) { if (isJSSlot(props)) {
const { params, value } = props; const { params, value } = props;
if (!isSchema(value) || isEmpty(value)) return undefined; if (!isSchema(value) || isEmpty(value)) {
return undefined;
}
return parseReactNode(value, params); return parseReactNode(value, params);
} }
// 兼容通过componentInfo判断的情况 // 兼容通过componentInfo判断的情况
if (isSchema(props)) { if (isSchema(props)) {
const isReactNodeFunction = !!( const isReactNodeFunction = !!(propInfo?.type === 'ReactNode' && propInfo?.props?.type === 'function');
propInfo?.type === 'ReactNode'
&& propInfo?.props?.type === 'function'
);
const isMixinReactNodeFunction = !!( const isMixinReactNodeFunction = !!(
propInfo?.type === 'Mixin' propInfo?.type === 'Mixin'
@ -874,7 +872,9 @@ export default function baseRendererFactory(): IBaseRenderComponent {
return checkProps(props.bind(scope)); return checkProps(props.bind(scope));
} }
if (props && typeof props === 'object') { if (props && typeof props === 'object') {
if (props.$$typeof) return checkProps(props); if (props.$$typeof) {
return checkProps(props);
}
const res: any = {}; const res: any = {};
forEach(props, (val: any, key: string) => { forEach(props, (val: any, key: string) => {
if (key.startsWith('__')) { if (key.startsWith('__')) {
@ -921,7 +921,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
__getHocComp(OriginalComp: any, schema: any, scope: any) { __getHocComp(OriginalComp: any, schema: any, scope: any) {
let Comp = OriginalComp; let Comp = OriginalComp;
this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => { this.__componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
Comp = ComponentConstruct(Comp || Div, { Comp = ComponentConstruct(Comp || Div, {
schema, schema,
componentInfo: {}, componentInfo: {},
@ -935,8 +935,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
__renderComp(OriginalComp: any, ctxProps: object) { __renderComp(OriginalComp: any, ctxProps: object) {
let Comp = OriginalComp; let Comp = OriginalComp;
const { __schema } = this.props; const { __schema, __ctx } = this.props;
const { __ctx } = this.props;
const scope: any = {}; const scope: any = {};
scope.__proto__ = __ctx || this; scope.__proto__ = __ctx || this;
Comp = this.__getHocComp(Comp, __schema, scope); Comp = this.__getHocComp(Comp, __schema, scope);
@ -952,7 +951,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
return null; return null;
} }
if (this._designModeIsDesign) { if (this.__designModeIsDesign) {
otherProps.__tag = Math.random(); otherProps.__tag = Math.random();
} }
@ -973,13 +972,15 @@ export default function baseRendererFactory(): IBaseRenderComponent {
__renderContent(children: any) { __renderContent(children: any) {
const { __schema } = this.props; const { __schema } = this.props;
const props = this.__parseData(__schema.props); const parsedProps = this.__parseData(__schema.props);
const { id, className, style = {} } = props; const className = classnames(`lce-${this.__namespace}`, getFileCssName(__schema.fileName), parsedProps.className, this.props.className);
const style = { ...(parsedProps.style || {}), ...(typeof this.props.style === 'object' ? this.props.style : {}) };
const id = this.props.id || parsedProps.id;
return createElement('div', { return createElement('div', {
ref: this.__getRef, ref: this.__getRef,
className: classnames(`lce-${this.__namespace}`, getFileCssName(__schema.fileName), className, this.props.className), className,
id: this.props.id || id, id,
style: { ...style, ...(typeof this.props.style === 'object' ? this.props.style : {}) }, style,
}, children); }, children);
} }
@ -989,8 +990,8 @@ export default function baseRendererFactory(): IBaseRenderComponent {
extraComponents = [extraComponents]; extraComponents = [extraComponents];
} }
const buitin = capitalizeFirstLetter(this.__namespace); const builtin = capitalizeFirstLetter(this.__namespace);
const componentNames = [buitin, ...extraComponents]; const componentNames = [builtin, ...extraComponents];
return !isSchema(schema) || !componentNames.includes(schema?.componentName ?? ''); return !isSchema(schema) || !componentNames.includes(schema?.componentName ?? '');
}; };

8
packages/renderer-core/src/types/index.ts
View File

@ -168,7 +168,7 @@ export interface IBaseRendererProps {
device?: 'default' | 'mobile' | string; device?: 'default' | 'mobile' | string;
} }
export interface IInfo { export interface INodeInfo {
schema?: NodeSchema; schema?: NodeSchema;
Comp: any; Comp: any;
componentInfo?: any; componentInfo?: any;
@ -254,9 +254,9 @@ export type IBaseRendererInstance = IGeneralComponent<
): any; ): any;
__getComponentProps(schema: NodeSchema | undefined, scope: any, Comp: any, componentInfo?: any): any; __getComponentProps(schema: NodeSchema | undefined, scope: any, Comp: any, componentInfo?: any): any;
__createDom(): any; __createDom(): any;
__createVirtualDom(schema: any, self: any, parentInfo: IInfo, idx: string | number): any; __createVirtualDom(schema: any, self: any, parentInfo: INodeInfo, idx: string | number): any;
__createLoopVirtualDom(schema: any, self: any, parentInfo: IInfo, idx: number | string): any; __createLoopVirtualDom(schema: any, self: any, parentInfo: INodeInfo, idx: number | string): any;
__parseProps(props: any, self: any, path: string, info: IInfo): any; __parseProps(props: any, self: any, path: string, info: INodeInfo): any;
__initDebug?(): void; __initDebug?(): void;
__debug(...args: any[]): void; __debug(...args: any[]): void;
__renderContextProvider(customProps?: object, children?: any): any; __renderContextProvider(customProps?: object, children?: any): any;

2
packages/types/src/schema.ts
View File

@ -64,8 +64,6 @@ export interface NodeSchema {
/** @experimental 编辑态内部使用 */ /** @experimental 编辑态内部使用 */
__ctx?: any; __ctx?: any;
/** @experimental 编辑态内部使用 */
__ignoreParse?: any[];
} }
export type PropsMap = CompositeObject; export type PropsMap = CompositeObject;