From 32af3d3a3ca4d5aca15be25e05c840c8ea0cb6ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=98=A5=E5=B8=8C?= Date: Tue, 17 Mar 2020 19:02:06 +0800 Subject: [PATCH] feat: fix gaps --- packages/code-generator/src/demo/main.ts | 12 ++++---- .../src/generator/ProjectBuilder.ts | 2 +- .../code-generator/src/parse/SchemaParser.ts | 11 ++++--- .../src/plugins/common/esmodule.ts | 21 ++++++++++---- .../plugins/component/react/containerClass.ts | 14 +++++++++ .../src/plugins/component/react/jsx.ts | 29 ++++++++++++++----- .../framework/icejs/plugins/globalStyle.ts | 6 ++-- .../code-generator/src/solutions/icejs.ts | 6 ++-- packages/code-generator/src/types/core.ts | 1 + packages/code-generator/src/types/deps.ts | 6 ++-- 10 files changed, 75 insertions(+), 33 deletions(-) diff --git a/packages/code-generator/src/demo/main.ts b/packages/code-generator/src/demo/main.ts index 2b1bbcc08..15d011fdb 100644 --- a/packages/code-generator/src/demo/main.ts +++ b/packages/code-generator/src/demo/main.ts @@ -17,12 +17,14 @@ function flatFiles(rootName: string | null, dir: IResultDir): IResultFile[] { return result; } -function displayResultInConsole(root: IResultDir): void { +function displayResultInConsole(root: IResultDir, fileName?: string): void { const files = flatFiles('.', root); files.forEach(file => { - console.log(`========== ${file.name} Start ==========`); - console.log(file.content); - console.log(`========== ${file.name} End ==========`); + if (!fileName || fileName === file.name) { + console.log(`========== ${file.name} Start ==========`); + console.log(file.content); + console.log(`========== ${file.name} End ==========`); + } }); } @@ -41,7 +43,7 @@ function main() { const createIceJsProjectBuilder = CodeGenerator.solutions.icejs; const builder = createIceJsProjectBuilder(); builder.generateProject(demoSchema).then(result => { - // displayResultInConsole(result); + // displayResultInConsole(result, '././src/routes.js'); writeResultToDisk(result, '/Users/armslave/lowcodeDemo').then(response => console.log('Write to disk: ', JSON.stringify(response)), ); diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts index 8071a2fdb..bc3513603 100644 --- a/packages/code-generator/src/generator/ProjectBuilder.ts +++ b/packages/code-generator/src/generator/ProjectBuilder.ts @@ -100,7 +100,7 @@ export class ProjectBuilder implements IProjectBuilder { ); buildResult.push({ - path: this.template.slots.pages.path, + path: this.template.slots.router.path, files, }); } diff --git a/packages/code-generator/src/parse/SchemaParser.ts b/packages/code-generator/src/parse/SchemaParser.ts index b1880e49e..3104e01f3 100644 --- a/packages/code-generator/src/parse/SchemaParser.ts +++ b/packages/code-generator/src/parse/SchemaParser.ts @@ -118,10 +118,13 @@ class SchemaParser implements ISchemaParser { // 分析容器内部组件依赖 containers.forEach(container => { if (container.children) { - const depNames = this.getComponentNames(container.children); - container.deps = uniqueArray(depNames) - .map(depName => internalDeps[depName] || compDeps[depName]) - .filter(dep => !!dep); + // const depNames = this.getComponentNames(container.children); + // container.deps = uniqueArray(depNames) + // .map(depName => internalDeps[depName] || compDeps[depName]) + // .filter(dep => !!dep); + container.deps = Object.keys(compDeps).map( + depName => compDeps[depName], + ); } }); diff --git a/packages/code-generator/src/plugins/common/esmodule.ts b/packages/code-generator/src/plugins/common/esmodule.ts index 55853f96c..7043a4aa9 100644 --- a/packages/code-generator/src/plugins/common/esmodule.ts +++ b/packages/code-generator/src/plugins/common/esmodule.ts @@ -38,7 +38,11 @@ function groupDepsByPack(deps: IDependency[]): Record { return depMap; } -function buildPackageImport(pkg: string, deps: IDependency[]): ICodeChunk[] { +function buildPackageImport( + pkg: string, + deps: IDependency[], + isJSX: boolean, +): ICodeChunk[] { const chunks: ICodeChunk[] = []; let defaultImport: string = ''; let defaultImportAs: string = ''; @@ -47,11 +51,14 @@ function buildPackageImport(pkg: string, deps: IDependency[]): ICodeChunk[] { deps.forEach(dep => { const srcName = dep.exportName; let targetName = dep.importName || dep.exportName; + if (dep.subName) { + return; + } if (dep.subName) { chunks.push({ type: ChunkType.STRING, - fileType: FileType.JSX, + fileType: isJSX ? FileType.JSX : FileType.JS, name: COMMON_CHUNK_NAME.FileVarDefine, content: `const ${targetName} = ${srcName}.${dep.subName};`, linkAfter: [ @@ -93,10 +100,10 @@ function buildPackageImport(pkg: string, deps: IDependency[]): ICodeChunk[] { if (deps[0].dependencyType === DependencyType.Internal) { // TODO: Internal Deps path use project slot setting - statementL.push(`'@src/${(deps[0] as IInternalDependency).type}/${pkg}';`); + statementL.push(`'@/${(deps[0] as IInternalDependency).type}/${pkg}';`); chunks.push({ type: ChunkType.STRING, - fileType: FileType.JSX, + fileType: isJSX ? FileType.JSX : FileType.JS, name: COMMON_CHUNK_NAME.InternalDepsImport, content: statementL.join(' '), linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport], @@ -105,7 +112,7 @@ function buildPackageImport(pkg: string, deps: IDependency[]): ICodeChunk[] { statementL.push(`'${pkg}';`); chunks.push({ type: ChunkType.STRING, - fileType: FileType.JSX, + fileType: isJSX ? FileType.JSX : FileType.JS, name: COMMON_CHUNK_NAME.ExternalDepsImport, content: statementL.join(' '), linkAfter: [], @@ -120,13 +127,15 @@ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => { ...pre, }; + const isJSX = next.chunks.some(chunk => chunk.fileType === FileType.JSX); + const ir = next.ir as IWithDependency; if (ir && ir.deps && ir.deps.length > 0) { const packs = groupDepsByPack(ir.deps); Object.keys(packs).forEach(pkg => { - const chunks = buildPackageImport(pkg, packs[pkg]); + const chunks = buildPackageImport(pkg, packs[pkg], isJSX); next.chunks.push.apply(next.chunks, chunks); }); } diff --git a/packages/code-generator/src/plugins/component/react/containerClass.ts b/packages/code-generator/src/plugins/component/react/containerClass.ts index 65b11dd57..ddf1ef337 100644 --- a/packages/code-generator/src/plugins/component/react/containerClass.ts +++ b/packages/code-generator/src/plugins/component/react/containerClass.ts @@ -81,6 +81,20 @@ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => { ], }); + next.chunks.push({ + type: ChunkType.STRING, + fileType: FileType.JSX, + name: COMMON_CHUNK_NAME.FileExport, + content: `export default ${ir.componentName};`, + linkAfter: [ + COMMON_CHUNK_NAME.ExternalDepsImport, + COMMON_CHUNK_NAME.InternalDepsImport, + COMMON_CHUNK_NAME.FileVarDefine, + COMMON_CHUNK_NAME.FileUtilDefine, + REACT_CHUNK_NAME.ClassEnd, + ], + }); + return next; }; diff --git a/packages/code-generator/src/plugins/component/react/jsx.ts b/packages/code-generator/src/plugins/component/react/jsx.ts index 7dad9c0b3..ed02499f6 100644 --- a/packages/code-generator/src/plugins/component/react/jsx.ts +++ b/packages/code-generator/src/plugins/component/react/jsx.ts @@ -30,35 +30,48 @@ function generateInlineStyle(style: IInlineStyle): string | null { } function generateAttr(attrName: string, attrValue: any): string { + if (attrName === 'initValue' || attrName === 'labelCol') { + return ''; + } const [isString, valueStr] = generateCompositeType(attrValue); return `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`; } +function mapNodeName(src: string): string { + if (src === 'Div') { + return 'div'; + } + return src; +} + function generateNode(nodeItem: IComponentNodeItem): string { const codePieces: string[] = []; + let propLines: string[] = []; const { className, style, ...props } = nodeItem.props; - codePieces.push(`<${nodeItem.componentName}`); + codePieces.push(`<${mapNodeName(nodeItem.componentName)}`); if (className) { - codePieces.push(`className="${className}"`); + propLines.push(`className="${className}"`); } if (style) { const inlineStyle = generateInlineStyle(style); if (inlineStyle !== null) { - codePieces.push(`style={${inlineStyle}}`); + propLines.push(`style={${inlineStyle}}`); } } - const propLines = Object.keys(props).map((propName: string) => - generateAttr(propName, props[propName]), + propLines = propLines.concat( + Object.keys(props).map((propName: string) => + generateAttr(propName, props[propName]), + ), ); - codePieces.push.apply(codePieces, propLines); + codePieces.push(` ${propLines.join(' ')} `); if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) { codePieces.push('>'); const childrenLines = generateChildren(nodeItem.children); codePieces.push.apply(codePieces, childrenLines); - codePieces.push(``); + codePieces.push(``); } else { codePieces.push('/>'); } @@ -86,7 +99,7 @@ function generateNode(nodeItem: IComponentNodeItem): string { codePieces.push('}'); } - return codePieces.join(' '); + return codePieces.join(''); } function generateChildren(children: ChildNodeType): string[] { diff --git a/packages/code-generator/src/plugins/project/framework/icejs/plugins/globalStyle.ts b/packages/code-generator/src/plugins/project/framework/icejs/plugins/globalStyle.ts index 9f3bbf142..d0e923968 100644 --- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/globalStyle.ts +++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/globalStyle.ts @@ -18,7 +18,7 @@ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => { next.chunks.push({ type: ChunkType.STRING, - fileType: FileType.CSS, + fileType: FileType.SCSS, name: COMMON_CHUNK_NAME.StyleDepsImport, content: ` // 引入默认全局样式 @@ -29,7 +29,7 @@ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => { next.chunks.push({ type: ChunkType.STRING, - fileType: FileType.CSS, + fileType: FileType.SCSS, name: COMMON_CHUNK_NAME.StyleCssContent, content: ` body { @@ -41,7 +41,7 @@ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => { next.chunks.push({ type: ChunkType.STRING, - fileType: FileType.CSS, + fileType: FileType.SCSS, name: COMMON_CHUNK_NAME.StyleCssContent, content: ir.css || '', linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport], diff --git a/packages/code-generator/src/solutions/icejs.ts b/packages/code-generator/src/solutions/icejs.ts index 8e296f994..d778fabac 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,7 +29,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder { reactCommonDeps, esmodule, containerClass, - containerInjectUtils, + // containerInjectUtils, containerInitState, containerLifeCycle, containerMethod, @@ -40,7 +40,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder { reactCommonDeps, esmodule, containerClass, - containerInjectUtils, + // containerInjectUtils, containerInitState, containerLifeCycle, containerMethod, diff --git a/packages/code-generator/src/types/core.ts b/packages/code-generator/src/types/core.ts index 39e2a08c7..fbe5ac151 100644 --- a/packages/code-generator/src/types/core.ts +++ b/packages/code-generator/src/types/core.ts @@ -8,6 +8,7 @@ import { export enum FileType { CSS = 'css', + SCSS = 'scss', HTML = 'html', JS = 'js', JSX = 'jsx', diff --git a/packages/code-generator/src/types/deps.ts b/packages/code-generator/src/types/deps.ts index 8833b1dde..b803aff8f 100644 --- a/packages/code-generator/src/types/deps.ts +++ b/packages/code-generator/src/types/deps.ts @@ -10,9 +10,9 @@ export interface IExternalDependency extends IDependency { } export enum InternalDependencyType { - PAGE = 'page', - BLOCK = 'block', - COMPONENT = 'component', + PAGE = 'pages', + BLOCK = 'components', + COMPONENT = 'components', UTILS = 'utils', }