feat: support component and directive in same name (#440)

* feat:support component and directive in same name

* Update src/core/constants.ts

Co-authored-by: 三咲智子 <[email protected]>

Author: azaleta

src/core/constants.ts

@@ -1,3 +1,4 @@
 export const MODULE_NAME = 'unplugin-vue-components'
 export const RESOLVER_EXT = '.unplugin-vue-components'
 export const DISABLE_COMMENT = '/* unplugin-vue-components disabled */'
+export const DIRECTIVE_IMPORT_PREFIX = 'v'

src/core/context.ts

@@ -4,6 +4,7 @@ import Debug from 'debug'
 import type { UpdatePayload, ViteDevServer } from 'vite'
 import { slash, throttle, toArray } from '@antfu/utils'
 import type { ComponentInfo, Options, ResolvedOptions, Transformer } from '../types'
+import { DIRECTIVE_IMPORT_PREFIX } from './constants'
 import { getNameFromFilePath, matchGlobs, normalizeComponetInfo, parseId, pascalCase, resolveAlias } from './utils'
 import { resolveOptions } from './options'
 import { searchComponents } from './fs/glob'
@@ -218,7 +219,7 @@ export class Context {
       if (resolver.type !== type)
         continue
 
-      const result = await resolver.resolve(name)
+      const result = await resolver.resolve(type === 'directive' ? name.slice(DIRECTIVE_IMPORT_PREFIX.length) : name)
       if (result) {
         if (typeof result === 'string') {
           info = {

src/core/transforms/directive/index.ts

@@ -3,6 +3,7 @@ import type MagicString from 'magic-string'
 import { pascalCase, stringifyComponentImport } from '../../utils'
 import type { Context } from '../../context'
 import type { SupportedTransformer } from '../../..'
+import { DIRECTIVE_IMPORT_PREFIX } from '../../constants'
 import vue2Resolver from './vue2'
 import vue3Resolver from './vue3'
 
@@ -14,7 +15,7 @@ export default async function transformDirective(code: string, transformer: Supp
   const results = await (transformer === 'vue2' ? vue2Resolver(code, s) : vue3Resolver(code, s))
   for (const { rawName, replace } of results) {
     debug(`| ${rawName}`)
-    const name = pascalCase(rawName)
+    const name = `${DIRECTIVE_IMPORT_PREFIX}${pascalCase(rawName)}`
     ctx.updateUsageMap(sfcPath, [name])
 
     const directive = await ctx.findComponent(name, 'directive', [sfcPath])

test/__snapshots__/transform.test.ts.snap

@@ -1,5 +1,47 @@
 // Vitest Snapshot v1
 
+exports[`Component and directive as same name > vue2 transform should work 1`] = `
+{
+  "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/Loading';
+import __unplugin_components_0 from 'test/component/Loading';
+
+    var render = function () {
+this.$options.directives[\\"loading\\"] = __unplugin_directives_0;
+      var _vm = this
+      var _h = _vm.$createElement
+      var _c = _vm._self._c || _h
+      return _c(__unplugin_components_0, {
+        directives: [
+          { name: \\"loading\\", rawName: \\"v-loading\\", value: 123, expression: \\"123\\" }
+        ]
+      })
+    }
+    var staticRenderFns = []
+    render._withStripped = true
+    export { render, staticRenderFns }
+    ",
+}
+`;
+
+exports[`Component and directive as same name > vue3 transform should work 1`] = `
+{
+  "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/ElInfiniteScroll';
+import __unplugin_components_0 from 'test/component/ElInfiniteScroll';
+
+    const render = (_ctx, _cache) => {
+      const _component_el_infinite_scroll = __unplugin_components_0
+      const _directive_el_infinite_scroll = __unplugin_directives_0
+    
+      return _withDirectives(
+        (_openBlock(),
+        _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
+        [[_directive_loading, 123]]
+      )
+    }
+    ",
+}
+`;
+
 exports[`transform > vue2 transform should work 1`] = `
 {
   "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/Loading';

test/transform.test.ts

@@ -63,3 +63,55 @@ describe('transform', () => {
     expect(await ctx.transform(code, '')).toMatchSnapshot()
   })
 })
+
+describe('Component and directive as same name', () => {
+  it('vue2 transform should work', async () => {
+    const code = `
+    var render = function () {
+      var _vm = this
+      var _h = _vm.$createElement
+      var _c = _vm._self._c || _h
+      return _c("loading", {
+        directives: [
+          { name: "loading", rawName: "v-loading", value: 123, expression: "123" }
+        ]
+      })
+    }
+    var staticRenderFns = []
+    render._withStripped = true
+    export { render, staticRenderFns }
+    `
+
+    const ctx = new Context({
+      resolvers: [resolver],
+      transformer: 'vue2',
+      directives: true,
+    })
+    ctx.sourcemap = false
+    expect(await ctx.transform(code, '')).toMatchSnapshot()
+  })
+
+  it('vue3 transform should work', async () => {
+    const code = `
+    const render = (_ctx, _cache) => {
+      const _component_el_infinite_scroll = _resolveComponent("el-infinite-scroll")
+      const _directive_el_infinite_scroll = _resolveDirective("el-infinite-scroll")
+    
+      return _withDirectives(
+        (_openBlock(),
+        _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
+        [[_directive_loading, 123]]
+      )
+    }
+    `
+
+    const ctx = new Context({
+      resolvers: [resolver],
+      transformer: 'vue3',
+      directives: true,
+    })
+    ctx.sourcemap = false
+    expect(await ctx.transform(code, '')).toMatchSnapshot()
+  })
+})
+