feat: fix gaps

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 => {
+    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)),
     );

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

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<string>(depNames)
-          .map(depName => internalDeps[depName] || compDeps[depName])
-          .filter(dep => !!dep);
+        // const depNames = this.getComponentNames(container.children);
+        // container.deps = uniqueArray<string>(depNames)
+        //   .map(depName => internalDeps[depName] || compDeps[depName])
+        //   .filter(dep => !!dep);
+        container.deps = Object.keys(compDeps).map(
+          depName => compDeps[depName],
+        );
       }
     });
 

packages/code-generator/src/plugins/common/esmodule.ts

@@ -38,7 +38,11 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
   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);
     });
   }

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

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) =>
+  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(`</${nodeItem.componentName}>`);
+    codePieces.push(`</${mapNodeName(nodeItem.componentName)}>`);
   } else {
     codePieces.push('/>');
   }

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],

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,

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',

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