fix: main editor undefined when creating vue project (#26)

nonhana · web-flow · commit 38e225f6e795 · 2026-04-05T01:45:47.000+08:00
* fix: vue project main editor undefined

* chore: changeset

* chore: recast print single quote

* chore: deps version fix
diff --git a/.changeset/goofy-falcons-wave.md b/.changeset/goofy-falcons-wave.md
@@ -0,0 +1,5 @@
+---
+"create-hana": patch
+---
+
+Adjust the way Recast outputs the code; the default is to output single quotes.
diff --git a/.changeset/seven-masks-buy.md b/.changeset/seven-masks-buy.md
@@ -0,0 +1,5 @@
+---
+"create-hana": patch
+---
+
+Fixed the undefined issue caused by the main editor not being created when creating a Vue project.
diff --git a/src/__tests__/integration.test.ts b/src/__tests__/integration.test.ts
@@ -175,4 +175,44 @@ describe('project Generation Integration', () => {
     expect(packageJson.scripts).toHaveProperty('lint')
     expect(packageJson.scripts).toHaveProperty('format')
   }, 60000)
+
+  it('should generate vue + vite feature combinations that modify main entry', async () => {
+    const config: Config = {
+      targetDir: 'vue-vite-feature-combo',
+      projectType: 'vue',
+      language: 'typescript',
+      pkgManager: 'pnpm',
+      buildTool: 'vite',
+      codeQualityTools: 'eslint-prettier',
+      useRouter: true,
+      usePinia: true,
+      cssFramework: 'unocss',
+      cssPreprocessor: 'none',
+      httpLibrary: 'ky',
+      modulePathAliasing: '@',
+      git: false,
+    }
+
+    await generateProject(config, TEST_DIR)
+
+    const projectDir = join(TEST_DIR, 'vue-vite-feature-combo')
+    const packageJson = await readPackageJson(projectDir)
+    const mainFile = await readFile(join(projectDir, 'src/main.ts'), 'utf8')
+    const viteConfig = await readFile(join(projectDir, 'vite.config.ts'), 'utf8')
+
+    expect(mainFile).toContain(`import 'virtual:uno.css'`)
+    expect(mainFile).toContain(`import router from './router'`)
+    expect(mainFile).toContain(`import { createPinia } from 'pinia'`)
+    expect(mainFile).toContain(`createApp(App).use(createPinia()).use(router).mount('#app')`)
+
+    expect(viteConfig).toContain(`import UnoCSS from 'unocss/vite'`)
+    expect(viteConfig).toContain(`import path from 'node:path'`)
+    expect(viteConfig).toContain(`vue()`)
+    expect(viteConfig).toContain(`UnoCSS()`)
+    expect(viteConfig).toContain(`'@': path.resolve(__dirname, "src")`)
+
+    expect(packageJson.dependencies).toHaveProperty('pinia')
+    expect(packageJson.dependencies).toHaveProperty('vue-router')
+    expect(packageJson.dependencies).toHaveProperty('ky')
+  }, 60000)
 })
diff --git a/src/core/generator.ts b/src/core/generator.ts
@@ -1,7 +1,7 @@
 import type { Config, ProjectContext } from '@/types'
 import { join } from 'node:path'
 import { ErrorMessages } from '@/constants/errors'
-import { createReactMainEditor, createViteConfigEditor } from '@/editor'
+import { createReactMainEditor, createViteConfigEditor, createVueMainEditor } from '@/editor'
 import { mainReactRouterProviderTemplate, mainReactTemplate, viteTemplate } from '@/editor/templates'
 import { ErrorFactory } from '@/error/factory'
 import { ErrorHandler } from '@/error/handler'
@@ -92,6 +92,9 @@ async function initializeProjectContext(config: Config, cwd: string) {
       context.mainEditor = createReactMainEditor(mainReactTemplate(context.fileExtension))
     }
   }
+  if (config.projectType === 'vue') {
+    context.mainEditor = createVueMainEditor()
+  }
 
   return context
 }
@@ -149,6 +152,9 @@ function saveEditors(context: ProjectContext) {
   if (context.config.projectType === 'react' && context.mainEditor) {
     context.files[`src/main${context.fileExtension}x`] = context.mainEditor.getContent('main')
   }
+  else if (context.config.projectType === 'vue' && context.mainEditor) {
+    context.files[`src/main${context.fileExtension}`] = context.mainEditor.getContent('main')
+  }
 }
 
 function shouldInstallDependencies(context: ProjectContext) {
diff --git a/src/dependencies/registry.ts b/src/dependencies/registry.ts
@@ -20,7 +20,7 @@ const PATCH_AND_MINOR = {
 export const dependencyRegistry = validateDependencyRegistry({
   'typescript': createManagedDependency({
     packageName: 'typescript',
-    version: '6.0.2',
+    version: '5.9.3',
     prefix: '^',
     scope: 'devDependencies',
     risk: 'medium',
@@ -480,7 +480,7 @@ export const dependencyRegistry = validateDependencyRegistry({
   }),
   'oxlint-tsgolint': createManagedDependency({
     packageName: 'oxlint-tsgolint',
-    version: '0.17.2',
+    version: '0.19.0',
     prefix: '^',
     scope: 'devDependencies',
     risk: 'high',
diff --git a/src/editor/__tests__/vite.test.ts b/src/editor/__tests__/vite.test.ts
@@ -169,7 +169,7 @@ export default defineConfig({})`,
         const generatedCode = editor.getContent('viteConfig')
         expect(generatedCode).toContain('resolve: {')
         expect(generatedCode).toContain('alias: {')
-        expect(generatedCode).toContain('"@": path.resolve(__dirname, "src")')
+        expect(generatedCode).toContain('\'@\': path.resolve(__dirname, "src")')
       })
 
       it('应该在已有 resolve 配置中添加 alias', () => {
@@ -187,7 +187,7 @@ export default defineConfig({
         const generatedCode = editor.getContent('viteConfig')
         expect(generatedCode).toContain('extensions: [')
         expect(generatedCode).toContain('alias: {')
-        expect(generatedCode).toContain('"@": path.resolve(__dirname, "src")')
+        expect(generatedCode).toContain('\'@\': path.resolve(__dirname, "src")')
       })
 
       it('应该在已有 alias 配置中添加新别名', () => {
@@ -207,7 +207,7 @@ export default defineConfig({
         const generatedCode = editor.getContent('viteConfig')
         expect(generatedCode).toContain('resolve: {')
         expect(generatedCode).toContain('alias: {')
-        expect(generatedCode).toContain('"@": path.resolve(__dirname, "src")')
+        expect(generatedCode).toContain('\'@\': path.resolve(__dirname, "src")')
         // 原有的 @utils 应该保持原来的字符串格式
         expect(generatedCode).toContain('\'@utils\': \'path.resolve(__dirname, "src/utils")\'')
         // 或者可以接受任何包含 @utils 和 src/utils 的格式
@@ -225,9 +225,9 @@ export default defineConfig({
         const generatedCode = editor.getContent('viteConfig')
         expect(generatedCode).toContain('resolve: {')
         expect(generatedCode).toContain('alias: {')
-        expect(generatedCode).toContain('"@": path.resolve(__dirname, "src")')
-        expect(generatedCode).toContain('"@components": path.resolve(__dirname, "src/components")')
-        expect(generatedCode).toContain('"@utils": path.resolve(__dirname, "src/utils")')
+        expect(generatedCode).toContain('\'@\': path.resolve(__dirname, "src")')
+        expect(generatedCode).toContain('\'@components\': path.resolve(__dirname, "src/components")')
+        expect(generatedCode).toContain('\'@utils\': path.resolve(__dirname, "src/utils")')
       })
 
       it('应该跳过已存在的别名', () => {
@@ -259,8 +259,8 @@ export default defineConfig({
         const generatedCode = editor.getContent('viteConfig')
         expect(generatedCode).toContain('resolve: {')
         expect(generatedCode).toContain('alias: {')
-        expect(generatedCode).toContain('"@": path.resolve(__dirname, "src")')
-        expect(generatedCode).toContain('"@components": path.resolve(__dirname, "src/components")')
+        expect(generatedCode).toContain('\'@\': path.resolve(__dirname, "src")')
+        expect(generatedCode).toContain('\'@components\': path.resolve(__dirname, "src/components")')
       })
 
       it('应该支持与 addVitePlugin 的链式调用', () => {
@@ -321,7 +321,7 @@ export default defineConfig({
         expect(generatedCode).toContain('build: {')
         expect(generatedCode).toContain('resolve: {')
         expect(generatedCode).toContain('alias: {')
-        expect(generatedCode).toContain('"@": path.resolve(__dirname, "src")')
+        expect(generatedCode).toContain('\'@\': path.resolve(__dirname, "src")')
       })
 
       it('应该处理复杂的别名值表达式', () => {
@@ -344,7 +344,7 @@ export default defineConfig({
         const generatedCode = editor.getContent('viteConfig')
         expect(generatedCode).toContain('path.resolve(__dirname, "src")')
         expect(generatedCode).toContain('path.join(process.cwd(), "src", "api")')
-        expect(generatedCode).toContain('"./src/assets"')
+        expect(generatedCode).toContain('\'./src/assets\'')
       })
     })
   })
diff --git a/src/editor/core-editor.ts b/src/editor/core-editor.ts
@@ -1,5 +1,6 @@
 import * as recast from 'recast'
 import { parser } from '@/utils/parser'
+import { printAst } from '@/utils/recast'
 
 interface CodeDetail {
   source: string
@@ -14,7 +15,7 @@ export interface CoreEditorContents {
 export type EditableFiles = keyof CoreEditorContents
 
 type CoreEditorOptions = {
-  [K in EditableFiles]?: string
+  [K in EditableFiles]?: string // source code for each editable file
 }
 
 export class CoreEditor {
@@ -33,6 +34,6 @@ export class CoreEditor {
   public getContent(key: EditableFiles): string {
     if (!this.contents[key])
       return ''
-    return recast.print(this.contents[key].ast).code
+    return printAst(this.contents[key].ast)
   }
 }
diff --git a/src/editor/features/jsx-provider.ts b/src/editor/features/jsx-provider.ts
@@ -2,6 +2,7 @@ import type { CoreEditor } from '../core-editor'
 import * as recast from 'recast'
 import { ErrorMessages } from '@/constants/errors'
 import { ErrorFactory } from '@/error/factory'
+import { printAst } from '@/utils/recast'
 
 export interface IJsxProviderFeature {
   addJsxProvider: (componentName: string, props?: Record<string, string>) => this
@@ -65,7 +66,7 @@ export function withJsxProviderFeature<T extends new (...args: any[]) => CoreEdi
       })
 
       if (this.contents.main) {
-        this.contents.main.source = recast.print(this.contents.main.ast).code
+        this.contents.main.source = printAst(this.contents.main.ast)
       }
 
       return this
diff --git a/src/editor/features/vite.ts b/src/editor/features/vite.ts
@@ -3,6 +3,7 @@ import * as recast from 'recast'
 import { ErrorMessages } from '@/constants/errors'
 import { ErrorFactory } from '@/error/factory'
 import { parser } from '@/utils/parser'
+import { printAst } from '@/utils/recast'
 
 export interface IViteFeature {
   addVitePlugin: (pluginCode: string) => this
@@ -67,7 +68,7 @@ export function withViteFeature<T extends new (...args: any[]) => CoreEditor>(Ba
       }
 
       // 更新源代码和 AST
-      this.contents.viteConfig.source = recast.print(ast).code
+      this.contents.viteConfig.source = printAst(ast)
       this.contents.viteConfig.ast = recast.parse(this.contents.viteConfig.source, { parser })
 
       return this
@@ -184,7 +185,7 @@ export function withViteFeature<T extends new (...args: any[]) => CoreEditor>(Ba
       }
 
       // 更新源代码和 AST
-      this.contents.viteConfig.source = recast.print(ast).code
+      this.contents.viteConfig.source = printAst(ast)
       this.contents.viteConfig.ast = recast.parse(this.contents.viteConfig.source, { parser })
 
       return this
diff --git a/src/generators/projects/vue/index.ts b/src/generators/projects/vue/index.ts
@@ -1,3 +1,4 @@
+import type { VueMainEditorType } from '@/editor'
 import type { Generator } from '@/types'
 import { ErrorMessages } from '@/constants/errors'
 import { ErrorFactory } from '@/error/factory'
@@ -43,7 +44,10 @@ export const vueGenerator: Generator = {
 
     context.files['src/App.vue'] = generateAppFile(lang, styleLang, !!config.useRouter)
     context.files['src/components/Counter.vue'] = generateCounterFile(lang, styleLang)
-    context.files[`src/main${fileExtension}`] = generateMainFile(!!config.useRouter, !!config.usePinia)
+    ;(context.mainEditor as VueMainEditorType).configureVueApp({
+      useRouter: config.useRouter,
+      usePinia: config.usePinia,
+    })
 
     if (config.language === 'typescript') {
       context.files['src/vite-env.d.ts'] = generateViteEnvFile()
@@ -152,16 +156,3 @@ button:hover {
 </style>
 `
 }
-
-function generateMainFile(useRouter: boolean, usePinia: boolean) {
-  return `import { createApp } from 'vue'
-import App from './App.vue'
-${useRouter ? 'import router from \'./router\'' : ''}
-${usePinia ? 'import { createPinia } from \'pinia\'' : ''}
-
-const app = createApp(App)
-${usePinia ? 'app.use(createPinia())' : ''}
-${useRouter ? 'app.use(router)' : ''}
-app.mount('#app')
-`
-}
diff --git a/src/utils/recast.ts b/src/utils/recast.ts
@@ -0,0 +1,9 @@
+import * as recast from 'recast'
+
+export const RECAST_PRINT_OPTIONS: recast.Options = {
+  quote: 'single',
+}
+
+export function printAst(ast: any): string {
+  return recast.print(ast, RECAST_PRINT_OPTIONS).code
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"create-hana": patch
 +---
++
 +Adjust the way Recast outputs the code; the default is to output single quotes.
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import type { Config, ProjectContext } from '@/types'`
`2`	`2`	`import { join } from 'node:path'`
`3`	`3`	`import { ErrorMessages } from '@/constants/errors'`
`4`		`-import { createReactMainEditor, createViteConfigEditor } from '@/editor'`
	`4`	`+import { createReactMainEditor, createViteConfigEditor, createVueMainEditor } from '@/editor'`
`5`	`5`	`import { mainReactRouterProviderTemplate, mainReactTemplate, viteTemplate } from '@/editor/templates'`
`6`	`6`	`import { ErrorFactory } from '@/error/factory'`
`7`	`7`	`import { ErrorHandler } from '@/error/handler'`
`@@ -92,6 +92,9 @@ async function initializeProjectContext(config: Config, cwd: string) {`
`92`	`92`	`context.mainEditor = createReactMainEditor(mainReactTemplate(context.fileExtension))`
`93`	`93`	`}`
`94`	`94`	`}`
	`95`	`+ if (config.projectType === 'vue') {`
	`96`	`+ context.mainEditor = createVueMainEditor()`
	`97`	`+ }`
`95`	`98`
`96`	`99`	`return context`
`97`	`100`	`}`
`@@ -149,6 +152,9 @@ function saveEditors(context: ProjectContext) {`
`149`	`152`	`if (context.config.projectType === 'react' && context.mainEditor) {`
`150`	`153`	context.files[`src/main${context.fileExtension}x`] = context.mainEditor.getContent('main')
`151`	`154`	`}`
	`155`	`+ else if (context.config.projectType === 'vue' && context.mainEditor) {`
	`156`	+ context.files[`src/main${context.fileExtension}`] = context.mainEditor.getContent('main')
	`157`	`+ }`
`152`	`158`	`}`
`153`	`159`
`154`	`160`	`function shouldInstallDependencies(context: ProjectContext) {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`import * as recast from 'recast'`
`2`	`2`	`import { parser } from '@/utils/parser'`
	`3`	`+import { printAst } from '@/utils/recast'`
`3`	`4`
`4`	`5`	`interface CodeDetail {`
`5`	`6`	`source: string`
`@@ -14,7 +15,7 @@ export interface CoreEditorContents {`
`14`	`15`	`export type EditableFiles = keyof CoreEditorContents`
`15`	`16`
`16`	`17`	`type CoreEditorOptions = {`
`17`		`- [K in EditableFiles]?: string`
	`18`	`+ [K in EditableFiles]?: string // source code for each editable file`
`18`	`19`	`}`
`19`	`20`
`20`	`21`	`export class CoreEditor {`
`@@ -33,6 +34,6 @@ export class CoreEditor {`
`33`	`34`	`public getContent(key: EditableFiles): string {`
`34`	`35`	`if (!this.contents[key])`
`35`	`36`	`return ''`
`36`		`- return recast.print(this.contents[key].ast).code`
	`37`	`+ return printAst(this.contents[key].ast)`
`37`	`38`	`}`
`38`	`39`	`}`