From 5b684e9d3d8c00400644d0a5d67268d5065b332e Mon Sep 17 00:00:00 2001 From: Wenzhe Wang Date: Wed, 19 Apr 2023 14:49:24 +0800 Subject: [PATCH] feat(preset-umi): customize component in micro generator (#10978) * feat(preset-umi): use dir mode instead file * chore(preset-umi): typo --- docs/docs/guides/generator.md | 2 + .../src/commands/generators/component.test.ts | 78 ++++--------------- .../src/commands/generators/component.ts | 21 ++--- 3 files changed, 20 insertions(+), 81 deletions(-) diff --git a/docs/docs/guides/generator.md b/docs/docs/guides/generator.md index 5123b5db4f10..ab533c953e2d 100644 --- 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 index 91cbc7a9d49c..61e64d88f0f3 100644 --- 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 index 4897530f2176..8d95d2c03561 100644 --- 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';