fix: correct prefixed component name (#871)

ilyaliao · web-flow · commit 336b8629d556 · 2025-08-06T14:07:43.000+09:00
diff --git a/src/core/context.ts b/src/core/context.ts
@@ -215,7 +215,10 @@ export class Context {
     Array
       .from(this._componentPaths)
       .forEach((path) => {
-        const name = pascalCase(getNameFromFilePath(path, this.options))
+        const fileName = getNameFromFilePath(path, this.options)
+        const name = this.options.prefix
+          ? `${pascalCase(this.options.prefix)}${pascalCase(fileName)}`
+          : pascalCase(fileName)
         if (isExclude(name, this.options.excludeNames)) {
           debug.components('exclude', name)
           return
diff --git a/src/core/declaration.ts b/src/core/declaration.ts
@@ -38,16 +38,6 @@ export function parseDeclaration(code: string): DeclarationImports | undefined {
   return imports
 }
 
-function addComponentPrefix(component: ComponentInfo, prefix?: string) {
-  if (!component.as || !prefix)
-    return component
-
-  return {
-    ...component,
-    as: `${prefix}${component.as}`,
-  }
-}
-
 /**
  * Converts `ComponentInfo` to an array
  *
@@ -82,10 +72,11 @@ export interface DeclarationImports {
 }
 
 export function getDeclarationImports(ctx: Context, filepath: string): DeclarationImports | undefined {
-  const prefixComponentNameMap = Object.values(ctx.componentNameMap).map(info => addComponentPrefix(info, ctx.options.prefix))
   const component = stringifyComponentsInfo(filepath, [
-    ...Object.values(ctx.componentCustomMap),
-    ...prefixComponentNameMap,
+    ...Object.values({
+      ...ctx.componentNameMap,
+      ...ctx.componentCustomMap,
+    }),
     ...resolveTypeImports(ctx.options.types),
   ], ctx.options.importPathTransform)
 
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
@@ -63,6 +63,28 @@ import __unplugin_components_0 from 'test/component/ElInfiniteScroll';
 }
 `;
 
+exports[`prefix transform > transform with prefix should work 1`] = `
+{
+  "code": "/* unplugin-vue-components disabled */import __unplugin_components_2 from 'test/component/test-comp.vue';
+import __unplugin_components_1 from 'test/component/test-comp.vue';
+import __unplugin_components_0 from 'test/component/test-comp.vue';
+
+    const render = (_ctx, _cache) => {
+      const _component_test_comp = __unplugin_components_0
+      const _component_testComp = __unplugin_components_1
+      const _component_testComp = __unplugin_components_2
+
+      return _withDirectives(
+        (_openBlock(),
+        _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
+        _createBlock(_component_testComp, null, null, 512 /* NEED_PATCH */)),
+        _createBlock(_component_TestComp, null, null, 512 /* NEED_PATCH */))
+      )
+    }
+    ",
+}
+`;
+
 exports[`transform > vue2 transform should work 1`] = `
 {
   "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/Loading';
diff --git a/test/transform.test.ts b/test/transform.test.ts
@@ -1,5 +1,6 @@
 import type { ComponentResolver } from '../src'
 import { describe, expect, it } from 'vitest'
+import { pascalCase } from '../src'
 import { Context } from '../src/core/context'
 
 const resolver: ComponentResolver[] = [
@@ -173,3 +174,38 @@ describe('component and directive as same name', () => {
     expect(await ctx.transform(code, '')).toMatchSnapshot()
   })
 })
+
+describe('prefix transform', () => {
+  it('transform with prefix should work', async () => {
+    const code = `
+    const render = (_ctx, _cache) => {
+      const _component_test_comp = _resolveComponent("custom-prefix-test-comp")
+      const _component_testComp = _resolveComponent("CustomPrefixTestComp")
+      const _component_testComp = _resolveComponent("customPrefixTestComp")
+
+      return _withDirectives(
+        (_openBlock(),
+        _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
+        _createBlock(_component_testComp, null, null, 512 /* NEED_PATCH */)),
+        _createBlock(_component_TestComp, null, null, 512 /* NEED_PATCH */))
+      )
+    }
+    `
+
+    const ctx = new Context({
+      prefix: 'CustomPrefix',
+      directives: true,
+    })
+    ctx.sourcemap = false
+    const componentName = 'TestComp'
+    const name = `${pascalCase(ctx.options.prefix)}${pascalCase(componentName)}`
+    // @ts-expect-error for test
+    ctx._componentNameMap = {
+      [name]: {
+        as: name,
+        from: 'test/component/test-comp.vue',
+      },
+    }
+    expect(await ctx.transform(code, '')).toMatchSnapshot()
+  })
+})
