Skip to content

Commit

Permalink
feat: support component and directive in same name (#440)
Browse files Browse the repository at this point in the history
* feat:support component and directive in same name

* Update src/core/constants.ts

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
  • Loading branch information
azaleta and sxzz committed Jul 1, 2022
1 parent f5ddbb4 commit f161f50
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 2 deletions.
1 change: 1 addition & 0 deletions 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'
3 changes: 2 additions & 1 deletion src/core/context.ts
Expand Up @@ -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'
Expand Down Expand Up @@ -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 = {
Expand Down
3 changes: 2 additions & 1 deletion src/core/transforms/directive/index.ts
Expand Up @@ -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'

Expand All @@ -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])
Expand Down
42 changes: 42 additions & 0 deletions 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';
Expand Down
52 changes: 52 additions & 0 deletions test/transform.test.ts
Expand Up @@ -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()
})
})

0 comments on commit f161f50

Please sign in to comment.