From 19a51b8d1efc26516d25d227ba7b7f011d6a0a99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= Date: Tue, 21 Jul 2020 11:44:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20node=20type=20mapp?= =?UTF-8?q?ing=20config=20for=20jsx=20plugin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/plugins/component/react/jsx.ts | 8 +++-- .../code-generator/src/solutions/icejs.ts | 24 +++++++++++---- packages/code-generator/src/types/core.ts | 4 +++ .../code-generator/src/utils/nodeToJSX.ts | 30 ++++++++++++------- 4 files changed, 48 insertions(+), 18 deletions(-) diff --git a/packages/code-generator/src/plugins/component/react/jsx.ts b/packages/code-generator/src/plugins/component/react/jsx.ts index bb6b8f383..3f2c7b0e2 100644 --- a/packages/code-generator/src/plugins/component/react/jsx.ts +++ b/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; } const pluginFactory: BuilderComponentPluginFactory = (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 = { diff --git a/packages/code-generator/src/solutions/icejs.ts b/packages/code-generator/src/solutions/icejs.ts index bfb7e28f8..66a865cbe 100644 --- a/packages/code-generator/src/solutions/icejs.ts +++ b/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()], diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts index a370d5641..cf2088f22 100644 --- a/packages/code-generator/src/types/core.ts +++ b/packages/code-generator/src/types/core.ts @@ -170,6 +170,10 @@ export interface HandlerSet { export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem) => CodePiece[]; +export interface INodeGeneratorConfig { + nodeTypeMapping?: Record; +} + // export interface InteratorScope { // [$item: string]: string; // $item 默认取值 "item" // [$index: string]: string | number; // $index 默认取值 "index" diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts index db5f87c1d..2d8403943 100644 --- a/packages/code-generator/src/utils/nodeToJSX.ts +++ b/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( } 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 { + if (mapping[src]) { + return mapping[src]; } return src; } -export function generateBasicNode(nodeItem: IComponentNodeItem): CodePiece[] { +export function generateBasicNode(nodeItem: IComponentNodeItem, mapping: Record): 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, plugins: ExtGeneratorPlugin[]) { +export function createNodeGenerator( + handlers: HandlerSet, + plugins: ExtGeneratorPlugin[], + cfg?: INodeGeneratorConfig, +) { + let nodeTypeMapping: Record = {}; + 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(nodeItem.children, handlers).map(l => ({ @@ -183,11 +193,11 @@ export function createNodeGenerator(handlers: HandlerSet, 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); }