feat: 🎸 add node type mapping config for jsx plugin

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

@@ -12,16 +12,18 @@ import { REACT_CHUNK_NAME } from './const';
 import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
 
 type PluginConfig = {
-  fileType: string;
+  fileType?: string;
+  nodeTypeMapping?: Record<string, string>;
 }
 
 const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
-  const cfg: PluginConfig = {
+  const cfg = {
     fileType: FileType.JSX,
+    nodeTypeMapping: {},
     ...config,
   };
 
-  const generator = createReactNodeGenerator();
+  const generator = createReactNodeGenerator({ nodeTypeMapping: cfg.nodeTypeMapping });
 
   const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
     const next: ICodeStruct = {

packages/code-generator/src/solutions/icejs.ts

@@ -5,7 +5,7 @@ import { createProjectBuilder } from '../generator/ProjectBuilder';
 import esmodule from '../plugins/common/esmodule';
 import containerClass from '../plugins/component/react/containerClass';
 import containerInitState from '../plugins/component/react/containerInitState';
-import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
+// import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
 import containerLifeCycle from '../plugins/component/react/containerLifeCycle';
 import containerMethod from '../plugins/component/react/containerMethod';
 import jsx from '../plugins/component/react/jsx';
@@ -29,11 +29,18 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
           fileType: 'jsx',
         }),
         containerClass(),
-        containerInjectUtils(),
+        // containerInjectUtils(),
         containerInitState(),
         containerLifeCycle(),
         containerMethod(),
-        jsx(),
+        jsx({
+          nodeTypeMapping: {
+            Div: 'div',
+            Component: 'div',
+            Page: 'div',
+            Block: 'div',
+          },
+        }),
         css(),
       ],
       pages: [
@@ -42,11 +49,18 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
           fileType: 'jsx',
         }),
         containerClass(),
-        containerInjectUtils(),
+        // containerInjectUtils(),
         containerInitState(),
         containerLifeCycle(),
         containerMethod(),
-        jsx(),
+        jsx({
+          nodeTypeMapping: {
+            Div: 'div',
+            Component: 'div',
+            Page: 'div',
+            Block: 'div',
+          },
+        }),
         css(),
       ],
       router: [esmodule(), icejs.plugins.router()],

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

@@ -170,6 +170,10 @@ export interface HandlerSet<T> {
 
 export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem) => CodePiece[];
 
+export interface INodeGeneratorConfig {
+  nodeTypeMapping?: Record<string, string>;
+}
+
 // export interface InteratorScope {
 //   [$item: string]: string;           // $item 默认取值 "item"
 //   [$index: string]: string | number; // $index 默认取值 "index"

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

@@ -8,6 +8,7 @@ import {
   CodePiece,
   HandlerSet,
   ExtGeneratorPlugin,
+  INodeGeneratorConfig,
 } from '../types';
 import { generateCompositeType } from './compositeType';
 import { generateExpression } from './jsExpression';
@@ -37,7 +38,7 @@ export function handleChildren<T>(
 }
 
 export function generateAttr(attrName: string, attrValue: any): CodePiece[] {
-  if (attrName === 'initValue' || attrName === 'labelCol') {
+  if (attrName === 'initValue') {
     return [];
   }
   const [isString, valueStr] = generateCompositeType(attrValue);
@@ -58,17 +59,17 @@ export function generateAttrs(nodeItem: IComponentNodeItem): CodePiece[] {
   return pieces;
 }
 
-export function mapNodeName(src: string): string {
-  if (src === 'Div') {
-    return 'div';
+function mapNodeName(src: string, mapping: Record<string, string>): string {
+  if (mapping[src]) {
+    return mapping[src];
   }
   return src;
 }
 
-export function generateBasicNode(nodeItem: IComponentNodeItem): CodePiece[] {
+export function generateBasicNode(nodeItem: IComponentNodeItem, mapping: Record<string, string>): CodePiece[] {
   const pieces: CodePiece[] = [];
   pieces.push({
-    value: mapNodeName(nodeItem.componentName),
+    value: mapNodeName(nodeItem.componentName, mapping),
     type: PIECE_TYPE.TAG,
   });
 
@@ -157,14 +158,23 @@ export function linkPieces(pieces: CodePiece[]): string {
   return `${beforeParts}<${tagName}${attrsParts} />${afterParts}`;
 }
 
-export function createNodeGenerator(handlers: HandlerSet<string>, plugins: ExtGeneratorPlugin[]) {
+export function createNodeGenerator(
+  handlers: HandlerSet<string>,
+  plugins: ExtGeneratorPlugin[],
+  cfg?: INodeGeneratorConfig,
+) {
+  let nodeTypeMapping: Record<string, string> = {};
+  if (cfg && cfg.nodeTypeMapping) {
+    nodeTypeMapping = cfg.nodeTypeMapping;
+  }
+
   const generateNode = (nodeItem: IComponentNodeItem): string => {
     let pieces: CodePiece[] = [];
 
     plugins.forEach(p => {
       pieces = pieces.concat(p(nodeItem));
     });
-    pieces = pieces.concat(generateBasicNode(nodeItem));
+    pieces = pieces.concat(generateBasicNode(nodeItem, nodeTypeMapping));
     pieces = pieces.concat(generateAttrs(nodeItem));
     if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
       pieces = pieces.concat(handleChildren<string>(nodeItem.children, handlers).map(l => ({
@@ -183,11 +193,11 @@ export function createNodeGenerator(handlers: HandlerSet<string>, plugins: ExtGe
 
 export const generateString = (input: string) => [input];
 
-export function createReactNodeGenerator() {
+export function createReactNodeGenerator(cfg?: INodeGeneratorConfig) {
   return createNodeGenerator({
     string: generateString,
     expression: (input) => [generateExpression(input)],
   }, [
     generateReactCtrlLine,
-  ]);
+  ], cfg);
 }