Merge branch 'components-panel' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into components-panel

packages/code-generator/src/plugins/component/react/containerDataSource.ts

@@ -13,7 +13,7 @@ import {
 
 type PluginConfig = {
   fileType: string;
-}
+};
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -30,9 +30,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.state) {
       const state = ir.state;
-      const fields = Object.keys(state).map<string>(stateName => {
-        const [isString, value] = generateCompositeType(state[stateName]);
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
+      const fields = Object.keys(state).map<string>((stateName) => {
+        const value = generateCompositeType(state[stateName]);
+        return `${stateName}: ${value},`;
       });
 
       next.chunks.push({

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<PluginConfig> = (config?) => {
   const cfg: PluginConfig = {
@@ -32,9 +32,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
 
     if (ir.state) {
       const state = ir.state;
-      const fields = Object.keys(state).map<string>(stateName => {
-        const [isString, value] = generateCompositeType(state[stateName]);
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
+      const fields = Object.keys(state).map<string>((stateName) => {
+        const value = generateCompositeType(state[stateName]);
+        return `${stateName}: ${value},`;
       });
 
       if (cfg.implementType === 'inConstructor') {

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<unknown> = () => {
 
       const extConfigs = Object.keys(rest).map((extConfigName) => {
         const value = (rest as Record<string, CompositeValue>)[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}`);
 

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}}`,

packages/code-generator/src/plugins/project/constants.ts

@@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     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,

packages/code-generator/src/plugins/project/i18n.ts

@@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
     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,

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

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

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({

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 = () => {

packages/editor-skeleton/src/components/array-setter/index.tsx

@@ -57,6 +57,7 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
         itemsMap.delete(item.id);
       });
     }
+
     return {
       items,
       itemsMap,
@@ -72,7 +73,7 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
 
   onSort(sortedIds: Array<string | number>) {
     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<ArraySetterProps, ArraySetterState> {
     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
     });
   }
 

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