diff --git a/packages/code-generator/src/plugins/component/react/containerDataSource.ts b/packages/code-generator/src/plugins/component/react/containerDataSource.ts index 72d7efd6b..b60cb9539 100644 --- a/packages/code-generator/src/plugins/component/react/containerDataSource.ts +++ b/packages/code-generator/src/plugins/component/react/containerDataSource.ts @@ -13,7 +13,7 @@ import { type PluginConfig = { fileType: string; -} +}; const pluginFactory: BuilderComponentPluginFactory = (config?) => { const cfg: PluginConfig = { @@ -30,9 +30,9 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => if (ir.state) { const state = ir.state; - const fields = Object.keys(state).map(stateName => { - const [isString, value] = generateCompositeType(state[stateName]); - return `${stateName}: ${isString ? `'${value}'` : value},`; + const fields = Object.keys(state).map((stateName) => { + const value = generateCompositeType(state[stateName]); + return `${stateName}: ${value},`; }); next.chunks.push({ diff --git a/packages/code-generator/src/plugins/component/react/containerInitState.ts b/packages/code-generator/src/plugins/component/react/containerInitState.ts index 50984c961..9550244f1 100644 --- a/packages/code-generator/src/plugins/component/react/containerInitState.ts +++ b/packages/code-generator/src/plugins/component/react/containerInitState.ts @@ -14,7 +14,7 @@ import { type PluginConfig = { fileType: string; implementType: 'inConstructor' | 'insMember' | 'hooks'; -} +}; const pluginFactory: BuilderComponentPluginFactory = (config?) => { const cfg: PluginConfig = { @@ -32,9 +32,9 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => if (ir.state) { const state = ir.state; - const fields = Object.keys(state).map(stateName => { - const [isString, value] = generateCompositeType(state[stateName]); - return `${stateName}: ${isString ? `'${value}'` : value},`; + const fields = Object.keys(state).map((stateName) => { + const value = generateCompositeType(state[stateName]); + return `${stateName}: ${value},`; }); if (cfg.implementType === 'inConstructor') { diff --git a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts index 2c580e72f..8464ff180 100644 --- a/packages/code-generator/src/plugins/component/recore/pageDataSource.ts +++ b/packages/code-generator/src/plugins/component/recore/pageDataSource.ts @@ -11,7 +11,7 @@ import { CompositeValue, } from '../../../types'; -import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType'; +import { generateCompositeType } from '../../../utils/compositeType'; import { generateExpression } from '../../../utils/jsExpression'; function packJsExpression(exp: unknown): string { @@ -35,19 +35,17 @@ const pluginFactory: BuilderComponentPluginFactory = () => { const extConfigs = Object.keys(rest).map((extConfigName) => { const value = (rest as Record)[extConfigName]; - const [isString, valueStr] = generateCompositeType(value); - return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`; + const valueStr = generateCompositeType(value); + return `${extConfigName}: ${valueStr}`; }); attrs = [...attrs, ...extConfigs]; - const listProp = handleStringValueDefault( - generateCompositeType((list as unknown) as CompositeValue, { - handlers: { - expression: packJsExpression, - }, - }), - ); + const listProp = generateCompositeType((list as unknown) as CompositeValue, { + handlers: { + expression: packJsExpression, + }, + }); attrs.push(`list: ${listProp}`); diff --git a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts index ce09d5e50..9f5a33d7c 100644 --- a/packages/code-generator/src/plugins/component/recore/pageVmBody.ts +++ b/packages/code-generator/src/plugins/component/recore/pageVmBody.ts @@ -13,7 +13,7 @@ import { COMMON_CHUNK_NAME } from '../../../const/generator'; import { createNodeGenerator, generateString } from '../../../utils/nodeToJSX'; import { generateExpression } from '../../../utils/jsExpression'; -import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType'; +import { generateCompositeType } from '../../../utils/compositeType'; const generateGlobalProps = (ctx: INodeGeneratorContext, nodeItem: IComponentNodeItem): CodePiece[] => { return [ @@ -28,7 +28,7 @@ const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: IComponentNodeIt const pieces: CodePiece[] = []; if (nodeItem.loop && nodeItem.loopArgs) { - const loopDataExp = handleStringValueDefault(generateCompositeType(nodeItem.loop)); + const loopDataExp = generateCompositeType(nodeItem.loop); pieces.push({ type: PIECE_TYPE.ATTR, value: `x-for={${loopDataExp}}`, @@ -41,7 +41,7 @@ const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: IComponentNodeIt } if (nodeItem.condition) { - const conditionExp = handleStringValueDefault(generateCompositeType(nodeItem.condition)); + const conditionExp = generateCompositeType(nodeItem.condition); pieces.push({ type: PIECE_TYPE.ATTR, value: `x-if={${conditionExp}}`, diff --git a/packages/code-generator/src/plugins/project/constants.ts b/packages/code-generator/src/plugins/project/constants.ts index 392a0b96d..d274499b4 100644 --- a/packages/code-generator/src/plugins/project/constants.ts +++ b/packages/code-generator/src/plugins/project/constants.ts @@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { const ir = next.ir as IProjectInfo; if (ir.constants) { - const [, constantStr] = generateCompositeType(ir.constants); + const constantStr = generateCompositeType(ir.constants); next.chunks.push({ type: ChunkType.STRING, diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts index cada1fd96..4e4675a04 100644 --- a/packages/code-generator/src/plugins/project/i18n.ts +++ b/packages/code-generator/src/plugins/project/i18n.ts @@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { const ir = next.ir as IProjectInfo; if (ir.i18n) { - const [, i18nStr] = generateCompositeType(ir.i18n); + const i18nStr = generateCompositeType(ir.i18n); next.chunks.push({ type: ChunkType.STRING, diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts index 489bf17d9..c50d8cd61 100644 --- a/packages/code-generator/src/types/core.ts +++ b/packages/code-generator/src/types/core.ts @@ -179,6 +179,7 @@ export interface INodeGeneratorContext { // } export type CompositeValueCustomHandler = (data: unknown) => string; +export type CompositeTypeContainerHandler = (value: string) => string; export interface CompositeValueCustomHandlerSet { boolean?: CompositeValueCustomHandler; number?: CompositeValueCustomHandler; @@ -188,7 +189,13 @@ export interface CompositeValueCustomHandlerSet { expression?: CompositeValueCustomHandler; } +export interface CompositeTypeContainerHandlerSet { + default?: CompositeTypeContainerHandler; + string?: CompositeValueCustomHandler; +} + export interface CompositeValueGeneratorOptions { handlers?: CompositeValueCustomHandlerSet; + containerHandlers?: CompositeTypeContainerHandlerSet; nodeGenerator?: NodeGenerator; } diff --git a/packages/code-generator/src/utils/compositeType.ts b/packages/code-generator/src/utils/compositeType.ts index 0bb6891b8..edab55873 100644 --- a/packages/code-generator/src/utils/compositeType.ts +++ b/packages/code-generator/src/utils/compositeType.ts @@ -3,10 +3,18 @@ import { CompositeValue, ICompositeObject, CompositeValueGeneratorOptions, + CompositeTypeContainerHandlerSet, CodeGeneratorError, } from '../types'; import { generateExpression, generateFunction, isJsExpression, isJsFunction } from './jsExpression'; import { isJsSlot, generateJsSlot } from './jsSlot'; +import { isValidIdentifier } from './validate'; +import { camelize } from './common'; + +const defaultContainerHandlers: CompositeTypeContainerHandlerSet = { + default: (v) => v, + string: (v) => `'${v}'`, +}; function generateArray(value: CompositeArray, options: CompositeValueGeneratorOptions = {}): string { const body = value.map((v) => generateUnknownType(v, options)).join(','); @@ -34,8 +42,25 @@ function generateObject(value: ICompositeObject, options: CompositeValueGenerato const body = Object.keys(value) .map((key) => { + let propName = key; + + // TODO: 可以增加更多智能修复的方法 + const fixMethods: Array<(v: string) => string> = [camelize]; + // Try to fix propName + while (!isValidIdentifier(propName)) { + const fixMethod = fixMethods.pop(); + if (fixMethod) { + try { + propName = fixMethod(propName); + } catch (error) { + throw new CodeGeneratorError(error.message); + } + } else { + throw new CodeGeneratorError(`Propname: ${key} is not a valid identifier.`); + } + } const v = generateUnknownType(value[key], options); - return `${key}: ${v}`; + return `${propName}: ${v}`; }) .join(',\n'); @@ -66,22 +91,16 @@ export function generateUnknownType(value: CompositeValue, options: CompositeVal return `${value}`; } -export function generateCompositeType( - value: CompositeValue, - options: CompositeValueGeneratorOptions = {}, -): [boolean, string] { +export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string { const result = generateUnknownType(value, options); + const containerHandlers = { + ...defaultContainerHandlers, + ...(options.containerHandlers || {}), + }; - if (result.substr(0, 1) === "'" && result.substr(-1, 1) === "'") { - return [true, result.substring(1, result.length - 1)]; + const isStringType = result.substr(0, 1) === "'" && result.substr(-1, 1) === "'"; + if (isStringType) { + return (containerHandlers.string && containerHandlers.string(result.substring(1, result.length - 1))) || ''; } - - return [false, result]; -} - -export function handleStringValueDefault([isString, result]: [boolean, string]) { - if (isString) { - return `'${result}'`; - } - return result; + return (containerHandlers.default && containerHandlers.default(result)) || ''; } diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts index 428a9aed9..018eac1d4 100644 --- a/packages/code-generator/src/utils/nodeToJSX.ts +++ b/packages/code-generator/src/utils/nodeToJSX.ts @@ -104,12 +104,16 @@ export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrV if (attrName === 'initValue') { return []; } - const [isString, valueStr] = generateCompositeType(attrValue, { + const valueStr = generateCompositeType(attrValue, { + containerHandlers: { + default: (v) => `{${v}}`, + string: (v) => `"${v}"`, + }, nodeGenerator: ctx.generator, }); return [ { - value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`, + value: `${attrName}=${valueStr}`, type: PIECE_TYPE.ATTR, }, ]; @@ -180,12 +184,12 @@ export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: ICom } if (nodeItem.condition) { - const [isString, value] = generateCompositeType(nodeItem.condition, { + const value = generateCompositeType(nodeItem.condition, { nodeGenerator: ctx.generator, }); pieces.unshift({ - value: `(${isString ? `'${value}'` : value}) && (`, + value: `(${value}) && (`, type: PIECE_TYPE.BEFORE, }); pieces.push({ diff --git a/packages/demo/src/editor/plugins/codeout.tsx b/packages/demo/src/editor/plugins/codeout.tsx index 75cf6ff24..7d2c127f4 100644 --- a/packages/demo/src/editor/plugins/codeout.tsx +++ b/packages/demo/src/editor/plugins/codeout.tsx @@ -21,7 +21,7 @@ interface BasicSection { [k: string]: any; } -const CODEOUT_SERVICE_HOST = '30.13.90.55:3000'; +const CODEOUT_SERVICE_HOST = '30.13.88.126:3000'; const Codeout = ({ editor }: PluginProps) => { const handleClick = () => { diff --git a/packages/editor-skeleton/src/components/array-setter/index.tsx b/packages/editor-skeleton/src/components/array-setter/index.tsx index 997237e9e..34d53dc42 100644 --- a/packages/editor-skeleton/src/components/array-setter/index.tsx +++ b/packages/editor-skeleton/src/components/array-setter/index.tsx @@ -57,6 +57,7 @@ export class ListSetter extends Component { itemsMap.delete(item.id); }); } + return { items, itemsMap, @@ -72,7 +73,7 @@ export class ListSetter extends Component { onSort(sortedIds: Array) { const { itemsMap } = this.state; - const { onChange } = this.props; + const { onChange ,itemSetter,field} = this.props; const items = sortedIds.map((id, index) => { const item = itemsMap.get(id)!; // item.setKey(index); @@ -82,10 +83,26 @@ export class ListSetter extends Component { const values = items.map((item) => { return item.getValue(); }); - console.log('values',values); + + // 对itemsMap重新生成并刷新当前setter数据 + let newItems = [],newItemsMap = {} + itemsMap.clear(); + for (let i = 0; i < items.length; i++) { + const newItem = field.createField({ + name: i, + setter: itemSetter, + // FIXME: + forceInline: 1, + }); + newItems[i] = newItem; + + itemsMap.set(newItem.id, newItem); + } + onChange(values); this.setState({ - items, + items:newItems, + itemsMap }); } diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json index b529d7274..f1c21c3fe 100644 --- a/packages/react-renderer/package.json +++ b/packages/react-renderer/package.json @@ -53,5 +53,5 @@ "publishConfig": { "registry": "http://registry.npm.alibaba-inc.com" }, - "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@0.8.13/build/index.html" + "homepage": "https:/unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@0.8.13/build/index.html" }