From 4de444c87a9ee23738d852feb09289cc9fe6e955 Mon Sep 17 00:00:00 2001 From: azaleta <24407500@qq.com> Date: Wed, 29 Jun 2022 21:56:36 +0800 Subject: [PATCH 1/2] feat:support component and directive in same name --- src/core/constants.ts | 1 + src/core/context.ts | 3 +- src/core/transforms/directive/index.ts | 3 +- test/__snapshots__/transform.test.ts.snap | 42 ++++++++++++++++++ test/transform.test.ts | 52 +++++++++++++++++++++++ 5 files changed, 99 insertions(+), 2 deletions(-) diff --git a/src/core/constants.ts b/src/core/constants.ts index feacd2ac..32c918e4 100644 --- a/src/core/constants.ts +++ b/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-' diff --git a/src/core/context.ts b/src/core/context.ts index de33329a..3fdfafb7 100644 --- a/src/core/context.ts +++ b/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 = { diff --git a/src/core/transforms/directive/index.ts b/src/core/transforms/directive/index.ts index 79b018af..30c07d29 100644 --- a/src/core/transforms/directive/index.ts +++ b/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]) diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap index 249c9797..816bf836 100644 --- a/test/__snapshots__/transform.test.ts.snap +++ b/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'; diff --git a/test/transform.test.ts b/test/transform.test.ts index 3e52cf63..21846ca6 100644 --- a/test/transform.test.ts +++ b/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() + }) +}) + From 1ee65764516b60253f8be231378e9a368a56c777 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Fri, 1 Jul 2022 13:05:25 +0800 Subject: [PATCH 2/2] Update src/core/constants.ts --- src/core/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/constants.ts b/src/core/constants.ts index 32c918e4..410a49b7 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -1,4 +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-' +export const DIRECTIVE_IMPORT_PREFIX = 'v'