diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts index 8419f1b5a..1b9911dbf 100644 --- a/packages/rax-simulator-renderer/src/renderer.ts +++ b/packages/rax-simulator-renderer/src/renderer.ts @@ -1,6 +1,6 @@ import { BuiltinSimulatorRenderer, Component, DocumentModel, Node, NodeInstance } from '@ali/lowcode-designer'; import { ComponentSchema, NodeSchema, NpmInfo, RootSchema, TransformStage } from '@ali/lowcode-types'; -import { Asset, cursor, isElement, isESModule, isReactComponent, setNativeSelection } from '@ali/lowcode-utils'; +import { Asset, compatibleLegaoSchema, cursor, isElement, isESModule, isPlainObject, isReactComponent, setNativeSelection } from '@ali/lowcode-utils'; import LowCodeRenderer from '@ali/lowcode-rax-renderer'; import { computed, obx } from '@recore/obx'; import DriverUniversal from 'driver-universal'; @@ -493,7 +493,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { createComponent(schema: NodeSchema): Component | null { const _schema: any = { - ...schema, + ...compatibleLegaoSchema(schema), }; _schema.methods = {}; _schema.lifeCycles = {}; @@ -513,8 +513,10 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { class LowCodeComp extends Rax.Component { render() { + const extraProps = getLowCodeComponentProps(this.props); // @ts-ignore return createElement(LowCodeRenderer, { + ...extraProps, schema: _schema, components, designMode: renderer.designMode, @@ -620,4 +622,18 @@ function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmI return getSubComponent(library, paths); } +function getLowCodeComponentProps(props: any) { + if (!props || !isPlainObject(props)) { + return props; + } + const newProps: any = {}; + Object.keys(props).forEach(k => { + if (['children', 'componentId', '__designMode', '_componentName', '_leaf'].includes(k)) { + return; + } + newProps[k] = props[k]; + }); + return newProps; +} + export default new SimulatorRendererContainer(); diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index 991172974..b031b6f02 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -12,6 +12,8 @@ import { setNativeSelection, buildComponents, getSubComponent, + compatibleLegaoSchema, + isPlainObject, } from '@ali/lowcode-utils'; import { RootSchema, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types'; // import { isESModule, isElement, acceptsRef, wrapReactClass, cursor, setNativeSelection } from '@ali/lowcode-utils'; @@ -396,7 +398,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { createComponent(schema: NodeSchema): Component | null { const _schema: any = { - ...schema, + ...compatibleLegaoSchema(schema), }; _schema.methods = {}; _schema.lifeCycles = {}; @@ -415,8 +417,10 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { class LowCodeComp extends React.Component { render() { + const extraProps = getLowCodeComponentProps(this.props); // @ts-ignore return createElement(LowCodeRenderer, { + ...extraProps, // 防止覆盖下面内置属性 schema: _schema, components, designMode: renderer.designMode, @@ -543,4 +547,18 @@ function checkInstanceMounted(instance: any): boolean { return true; } +function getLowCodeComponentProps(props: any) { + if (!props || !isPlainObject(props)) { + return props; + } + const newProps: any = {}; + Object.keys(props).forEach(k => { + if (['children', 'componentId', '__designMode', '_componentName', '_leaf'].includes(k)) { + return; + } + newProps[k] = props[k]; + }); + return newProps; +} + export default new SimulatorRendererContainer(); diff --git a/packages/renderer-core/src/utils/common.ts b/packages/renderer-core/src/utils/common.ts index bdad9b93f..adb09080d 100644 --- a/packages/renderer-core/src/utils/common.ts +++ b/packages/renderer-core/src/utils/common.ts @@ -412,7 +412,7 @@ export function parseData(schema: any, self: any): any { return schema; } -/* 全匹配{{开头,}}结尾的变量表达式,或者对象类型JSExpression,且均不支持省略this */ +/* 全匹配{{开头,}}结尾的变量表达式,或者对象类型JSExpression,支持省略this */ export function parseExpression(str: any, self: any) { try { const contextArr = ['"use strict";', 'var __self = arguments[0];']; @@ -431,7 +431,8 @@ export function parseExpression(str: any, self: any) { if (inSameDomain() && (window.parent as any).__newFunc) { return (window.parent as any).__newFunc(tarStr)(self); } - return new Function(tarStr)(self); + const code = `with($scope || {}) { ${tarStr} }`; + return new Function('$scope', code)(self); } catch (err) { debug('parseExpression.error', err, str, self); return undefined; diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index c78274e14..ca211fd36 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -21,3 +21,4 @@ export * from './unique-id'; export * from './build-components'; export * from './appHelper'; export * from './misc'; +export * from './schema'; diff --git a/packages/utils/src/misc.ts b/packages/utils/src/misc.ts index e5c8731df..236aa071f 100644 --- a/packages/utils/src/misc.ts +++ b/packages/utils/src/misc.ts @@ -2,6 +2,15 @@ import { isI18NObject } from './is-object'; import get from 'lodash.get'; import { ComponentMeta } from '@ali/lowcode-designer'; +interface Variable { + type: 'variable'; + variable: string; + value: any; +} + +export function isVariable(obj: any): obj is Variable { + return obj && obj.type === 'variable'; +} export function isUseI18NSetter(prototype: any, propName: string) { const configure = prototype?.options?.configure; diff --git a/packages/utils/src/schema.ts b/packages/utils/src/schema.ts new file mode 100644 index 000000000..fdf8a1c8a --- /dev/null +++ b/packages/utils/src/schema.ts @@ -0,0 +1,45 @@ +import { isJSBlock } from '@ali/lowcode-types'; +import { isVariable } from './misc'; +import { isPlainObject } from './is-plain-object'; + +export function compatibleLegaoSchema(props: any) { + if (!props) { + return props; + } + + if (Array.isArray(props)) { + return props.map(k => compatibleLegaoSchema(k)); + } + + if (!isPlainObject(props)) { + return props; + } + + if (isJSBlock(props)) { + if (props.value.componentName === 'Slot') { + return { + type: 'JSSlot', + title: (props.value.props as any)?.slotTitle, + name: (props.value.props as any)?.slotName, + value: props.value.children, + }; + } else { + return props.value; + } + } + if (isVariable(props)) { + return { + type: 'JSExpression', + value: props.variable, + mock: props.value, + }; + } + const newProps: any = {}; + Object.keys(props).forEach((key) => { + if (/^__slot__/.test(key) && props[key] === true) { + return; + } + newProps[key] = compatibleLegaoSchema(props[key]); + }); + return newProps; +} diff --git a/packages/vision-polyfill/src/props-reducers/upgrade-reducer.ts b/packages/vision-polyfill/src/props-reducers/upgrade-reducer.ts index 3a7f66d37..61f8d17e7 100644 --- a/packages/vision-polyfill/src/props-reducers/upgrade-reducer.ts +++ b/packages/vision-polyfill/src/props-reducers/upgrade-reducer.ts @@ -1,45 +1,10 @@ -import { - isPlainObject, -} from '@ali/lowcode-utils'; import { Node } from '@ali/lowcode-designer'; -import { isJSBlock } from '@ali/lowcode-types'; -import { isVariable } from '../utils'; +import { compatibleLegaoSchema } from '@ali/lowcode-utils'; import { designerCabin } from '@ali/lowcode-engine'; const { getConvertedExtraKey } = designerCabin; -export function upgradePropsReducer(props: any) { - if (!props || !isPlainObject(props)) { - return props; - } - if (isJSBlock(props)) { - if (props.value.componentName === 'Slot') { - return { - type: 'JSSlot', - title: (props.value.props as any)?.slotTitle, - name: (props.value.props as any)?.slotName, - value: props.value.children, - }; - } else { - return props.value; - } - } - if (isVariable(props)) { - return { - type: 'JSExpression', - value: props.variable, - mock: props.value, - }; - } - const newProps: any = {}; - Object.keys(props).forEach((key) => { - if (/^__slot__/.test(key) && props[key] === true) { - return; - } - newProps[key] = upgradePropsReducer(props[key]); - }); - return newProps; -} +export const upgradePropsReducer = compatibleLegaoSchema; export function upgradePageLifeCyclesReducer(props: any, node: Node) { const lifeCycleNames = ['didMount', 'willUnmount']; diff --git a/packages/vision-polyfill/src/utils/index.ts b/packages/vision-polyfill/src/utils/index.ts index b80a66a64..aca4a0154 100644 --- a/packages/vision-polyfill/src/utils/index.ts +++ b/packages/vision-polyfill/src/utils/index.ts @@ -1,14 +1,5 @@ import { designer } from '@ali/lowcode-engine'; - -interface Variable { - type: 'variable'; - variable: string; - value: any; -} - -export function isVariable(obj: any): obj is Variable { - return obj && obj.type === 'variable'; -} +export { isVariable } from '@ali/lowcode-utils'; export function getCurrentFieldIds() { const fieldIds: any = [];