feat(preset-umi): customize component in micro generator (#10978)

* feat(preset-umi): use dir mode instead file * chore(preset-umi): typo
umijs · Apr 19, 2023 · 5b684e9 · 5b684e9 · vercel · Apr 19, 2023
1 parent 8df3299
commit 5b684e9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 81 deletions.
diff --git a/docs/docs/guides/generator.md b/docs/docs/guides/generator.md
@@ -213,6 +213,8 @@ $umi g component foo --msg "Hello World"
 
 自定义组件模板可以省略 `.tpl` 后缀名。你可以将 `index.ts.tpl` 简写为 `index.ts`，`component.tsx.tpl` 简写为 `component.tsx`。
 
+组件生成器将生成与你的自定义模板文件夹相一致的内容，你可以根据需要添加更多的自定义模板文件。
+
 ##### 预设变量
 
 |参数|默认值|说明|

diff --git a/packages/preset-umi/src/commands/generators/component.test.ts b/packages/preset-umi/src/commands/generators/component.test.ts
@@ -1,5 +1,5 @@
-import { join, normalize } from 'path';
 import { generateFile } from '@umijs/utils';
+import { join, normalize } from 'path';
 import { ComponentGenerator } from './component';
 
 jest.mock('@umijs/utils', () => {
@@ -20,19 +20,9 @@ afterEach(() => {
 test('generate component with single name', async () => {
   await runGeneratorWith('foo');
 
-  expect(generateFile).toBeCalledTimes(2);
-  expect(generateFile).toHaveBeenNthCalledWith(
-    1,
-    expect.objectContaining({
-      target: normalize('/my/src/path/components/Foo/index.ts'),
-      baseDir: normalize('/my'),
-      data: { compName: 'Foo' },
-    }),
-  );
-  expect(generateFile).toHaveBeenNthCalledWith(
-    2,
+  expect(generateFile).toBeCalledWith(
     expect.objectContaining({
-      target: normalize('/my/src/path/components/Foo/Foo.tsx'),
+      target: normalize('/my/src/path/components/Foo'),
       baseDir: normalize('/my'),
       data: { compName: 'Foo' },
     }),
@@ -41,18 +31,9 @@ test('generate component with single name', async () => {
 
 test('test generate nested named component foo/bar/qux', async () => {
   await runGeneratorWith('foo/bar/qux');
-  expect(generateFile).toBeCalledTimes(2);
-  expect(generateFile).toHaveBeenNthCalledWith(
-    1,
-    expect.objectContaining({
-      target: normalize('/my/src/path/components/foo/bar/Qux/index.ts'),
-      data: { compName: 'Qux' },
-    }),
-  );
-  expect(generateFile).toHaveBeenNthCalledWith(
-    2,
+  expect(generateFile).toBeCalledWith(
     expect.objectContaining({
-      target: normalize('/my/src/path/components/foo/bar/Qux/Qux.tsx'),
+      target: normalize('/my/src/path/components/foo/bar/Qux'),
       data: { compName: 'Qux' },
     }),
   );
@@ -61,22 +42,9 @@ test('test generate nested named component foo/bar/qux', async () => {
 test('test generate nested named component foo/subPath/tailName', async () => {
   await runGeneratorWith('foo/subPath/tailName');
 
-  expect(generateFile).toBeCalledTimes(2);
-  expect(generateFile).toHaveBeenNthCalledWith(
-    1,
+  expect(generateFile).toBeCalledWith(
     expect.objectContaining({
-      target: normalize(
-        '/my/src/path/components/foo/subPath/TailName/index.ts',
-      ),
-      data: { compName: 'TailName' },
-    }),
-  );
-  expect(generateFile).toHaveBeenNthCalledWith(
-    2,
-    expect.objectContaining({
-      target: normalize(
-        '/my/src/path/components/foo/subPath/TailName/TailName.tsx',
-      ),
+      target: normalize('/my/src/path/components/foo/subPath/TailName'),
       data: { compName: 'TailName' },
     }),
   );
@@ -87,20 +55,10 @@ describe('using custom template', () => {
     const mockProjectPath = join(__dirname, '../../../fixtures/');
     await runGeneratorWith('foo', mockProjectPath);
 
-    expect(generateFile).toBeCalledTimes(2);
-    expect(generateFile).toHaveBeenNthCalledWith(
-      1,
+    expect(generateFile).toBeCalledWith(
       expect.objectContaining({
-        target: normalize('/my/src/path/components/Foo/index.ts'),
-        path: join(mockProjectPath, 'templates/component/index.ts.tpl'),
-        data: { compName: 'Foo' },
-      }),
-    );
-    expect(generateFile).toHaveBeenNthCalledWith(
-      2,
-      expect.objectContaining({
-        target: normalize('/my/src/path/components/Foo/Foo.tsx'),
-        path: join(mockProjectPath, 'templates/component/component.tsx.tpl'),
+        target: normalize('/my/src/path/components/Foo'),
+        path: join(mockProjectPath, 'templates/component'),
         data: { compName: 'Foo' },
       }),
     );
@@ -111,20 +69,10 @@ describe('using custom template', () => {
     const userDefinedArgs = { foo: 'bar', count: 1 };
     await runGeneratorWith('foo', mockProjectPath, userDefinedArgs);
 
-    expect(generateFile).toBeCalledTimes(2);
-    expect(generateFile).toHaveBeenNthCalledWith(
-      1,
-      expect.objectContaining({
-        target: normalize('/my/src/path/components/Foo/index.ts'),
-        path: join(mockProjectPath, 'templates/component/index.ts.tpl'),
-        data: { compName: 'Foo', ...userDefinedArgs },
-      }),
-    );
-    expect(generateFile).toHaveBeenNthCalledWith(
-      2,
+    expect(generateFile).toBeCalledWith(
       expect.objectContaining({
-        target: normalize('/my/src/path/components/Foo/Foo.tsx'),
-        path: join(mockProjectPath, 'templates/component/component.tsx.tpl'),
+        target: normalize('/my/src/path/components/Foo'),
+        path: join(mockProjectPath, 'templates/component'),
         data: { compName: 'Foo', ...userDefinedArgs },
       }),
     );

diff --git a/packages/preset-umi/src/commands/generators/component.ts b/packages/preset-umi/src/commands/generators/component.ts
@@ -6,9 +6,9 @@ import { IApi } from '../../types';
 import {
   ETempDir,
   GeneratorHelper,
-  type IArgsComponent,
   processGenerateFiles,
   tryEject,
+  type IArgsComponent,
 } from './utils';
 
 export default (api: IApi) => {
@@ -85,22 +85,12 @@ export class ComponentGenerator {
     );
     const { _, eject: _eject, fallback, ...restArgs } = args;
 
-    const indexFile = join(base, 'index.ts');
-    const compFile = join(base, `${capitalizeName}.tsx`);
-
     await processGenerateFiles({
       filesMap: [
         {
-          from: join(appRoot, USER_TEMPLATE_COMP_DIR, 'index'),
-          fromFallback: INDEX_TPL,
-          to: indexFile,
-          exts: ['.ts.tpl', '.ts', 'tsx.tpl', 'tsx'],
-        },
-        {
-          from: join(appRoot, USER_TEMPLATE_COMP_DIR, 'component'),
-          fromFallback: COMP_TPL,
-          to: compFile,
-          exts: ['.tsx.tpl', '.tsx'],
+          from: join(appRoot, USER_TEMPLATE_COMP_DIR),
+          fromFallback: COMP_TEMPLATE_DIR,
+          to: base,
         },
       ],
       baseDir: appRoot,
@@ -115,6 +105,5 @@ export class ComponentGenerator {
   }
 }
 
-const INDEX_TPL = join(TEMPLATES_DIR, 'generate/component/index.ts.tpl');
-const COMP_TPL = join(TEMPLATES_DIR, 'generate/component/component.tsx.tpl');
+const COMP_TEMPLATE_DIR = join(TEMPLATES_DIR, 'generate/component');
 const USER_TEMPLATE_COMP_DIR = 'templates/component';