fix: enhance api design

packages/code-generator/src/plugins/component/rax/containerInitState.ts

@@ -34,8 +34,8 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       const state = ir.state;
       const fields = Object.keys(state).map<string>((stateName) => {
         // TODO: 这里用什么 handlers?
-        const [isString, value] = generateCompositeType(state[stateName], {});
+        const value = generateCompositeType(state[stateName], {});
-        return `${stateName}: ${isString ? `'${value}'` : value},`;
+        return `${stateName}: ${value}`;
       });
 
       if (cfg.implementType === 'inConstructor') {
@@ -43,7 +43,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           type: ChunkType.STRING,
           fileType: cfg.fileType,
           name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
-          content: `this.state = { ${fields.join('')} };`,
+          content: `this.state = { ${fields.join(',')} };`,
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorContent]],
         });
       } else if (cfg.implementType === 'insMember') {
@@ -51,7 +51,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           type: ChunkType.STRING,
           fileType: cfg.fileType,
           name: CLASS_DEFINE_CHUNK_NAME.InsVar,
-          content: `state = { ${fields.join('')} };`,
+          content: `state = { ${fields.join(',')} };`,
           linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsVar]],
         });
       }

packages/code-generator/src/plugins/component/recore/pageDataSource.ts

@@ -35,8 +35,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
 
       const extConfigs = Object.keys(rest).map((extConfigName) => {
         const value = (rest as Record<string, CompositeValue>)[extConfigName];
-        const [isString, valueStr] = generateCompositeType(value);
+        const valueStr = generateCompositeType(value);
-        return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`;
+        return `${extConfigName}: ${valueStr}`;
       });
 
       attrs = [...attrs, ...extConfigs];

packages/code-generator/src/types/core.ts

@@ -186,13 +186,8 @@ export interface CompositeValueCustomHandlerSet {
   function?: CompositeValueCustomHandler;
 }
 
-export interface CompositeTypeContainerHandlerSet {
-  default?: CompositeTypeContainerHandler;
-  string?: CompositeTypeContainerHandler;
-}
-
 export type CompositeValueGeneratorOptions = {
   handlers?: CompositeValueCustomHandlerSet;
-  containerHandlers?: CompositeTypeContainerHandlerSet;
+  containerHandler?: (value: string, isString: boolean, valStr: string) => string;
   nodeGenerator?: NodeGenerator;
 };

packages/code-generator/src/utils/compositeType.ts

@@ -6,17 +6,14 @@ import {
   isJSFunction,
   isJSSlot,
 } from '@ali/lowcode-types';
+import _ from 'lodash';
+
 import { generateExpression, generateFunction } from './jsExpression';
 import { generateJsSlot } from './jsSlot';
 import { isValidIdentifier } from './validate';
 import { camelize } from './common';
 
-import { CompositeValueGeneratorOptions, CompositeTypeContainerHandlerSet, CodeGeneratorError } from '../types';
+import { CompositeValueGeneratorOptions, CompositeTypeContainerHandler, CodeGeneratorError } from '../types';
-
-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(',');
@@ -52,67 +49,77 @@ function generateObject(value: CompositeObject, options: CompositeValueGenerator
 }
 
 function generateUnknownType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
-  if (Array.isArray(value)) {
+  if (_.isUndefined(value)) {
-    if (options.handlers && options.handlers.array) {
+    return 'undefined';
+  }
+
+  if (_.isNull(value)) {
+    return 'null';
+  }
+
+  if (_.isArray(value)) {
+    if (options.handlers?.array) {
       return options.handlers.array(value);
     }
     return generateArray(value, options);
-  } else if (typeof value === 'object') {
+  }
-    if (value === null) {
-      return 'null';
-    }
 
-    if (isJSExpression(value)) {
+  if (isJSExpression(value)) {
-      if (options.handlers && options.handlers.expression) {
+    if (options.handlers?.expression) {
-        return options.handlers.expression(value);
+      return options.handlers.expression(value);
-      }
-      return generateExpression(value);
     }
+    return generateExpression(value);
+  }
 
-    if (isJSFunction(value)) {
+  if (isJSFunction(value)) {
-      if (options.handlers && options.handlers.function) {
+    if (options.handlers?.function) {
-        return options.handlers.function(value);
+      return options.handlers.function(value);
-      }
-      return generateFunction(value, { isArrow: true });
     }
+    return generateFunction(value, { isArrow: true });
+  }
 
-    if (isJSSlot(value)) {
+  if (isJSSlot(value)) {
-      if (options.nodeGenerator) {
+    if (options.nodeGenerator) {
-        return generateJsSlot(value, options.nodeGenerator);
+      return generateJsSlot(value, options.nodeGenerator);
-      }
-      throw new CodeGeneratorError("Can't find Node Generator");
     }
+    throw new CodeGeneratorError("Can't find Node Generator");
+  }
 
-    if (options.handlers && options.handlers.object) {
+  if (_.isObject(value)) {
+    if (options.handlers?.object) {
       return options.handlers.object(value);
     }
     return generateObject(value as CompositeObject, options);
-  } else if (typeof value === 'string') {
+  }
-    if (options.handlers && options.handlers.string) {
+
+  if (_.isString(value)) {
+    if (options.handlers?.string) {
       return options.handlers.string(value);
     }
     return `'${value}'`;
-  } else if (typeof value === 'number' && options.handlers && options.handlers.number) {
+  }
+
+  if (_.isNumber(value) && options.handlers?.number) {
     return options.handlers.number(value);
-  } else if (typeof value === 'boolean' && options.handlers && options.handlers.boolean) {
+  }
+
+  if (_.isBoolean(value) && options.handlers?.boolean) {
     return options.handlers.boolean(value);
-  } else if (typeof value === 'undefined') {
-    return 'undefined';
   }
 
   return JSON.stringify(value);
 }
 
-export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
+const defaultContainer: CompositeTypeContainerHandler = (v: string) => v;
-  const result = generateUnknownType(value, options);
-  const containerHandlers = {
-    ...defaultContainerHandlers,
-    ...(options.containerHandlers || {}),
-  };
 
-  const isStringType = result.substr(0, 1) === "'" && result.substr(-1, 1) === "'";
+export function generateCompositeType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
-  if (isStringType) {
+  const isStringType = _.isString(value);
-    return (containerHandlers.string && containerHandlers.string(result.substring(1, result.length - 1))) || '';
+  const result = generateUnknownType(value, options);
+  const handler: CompositeTypeContainerHandler = options.containerHandler || defaultContainer;
+
+  if (isStringType && result.length >= 2) {
+    return handler(result, true, result.substring(1, result.length - 1));
   }
-  return (containerHandlers.default && containerHandlers.default(result)) || '';
+
+  return handler(result, false, result);
 }

packages/code-generator/src/utils/nodeToJSX.ts

@@ -114,10 +114,7 @@ export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrV
     return [];
   }
   const valueStr = generateCompositeType(attrValue, {
-    containerHandlers: {
+    containerHandler: (v, isStr, vStr) => (isStr ? `"${vStr}"` : `{${v}}`),
-      default: (v) => `{${v}}`,
-      string: (v) => `"${v}"`,
-    },
     nodeGenerator: ctx.generator,
   });
   return [