fix(nuxt): auto import for components with external template (#6053)

This commit is contained in:
Anthony Fu 2022-07-22 16:28:16 +08:00 committed by GitHub
parent 82dab419a4
commit 416f98b6b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 9 deletions

View File

@ -11,7 +11,7 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: {ctx
enforce: 'post',
transformInclude (id) {
const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
const { type, macro } = parseQuery(search)
const query = parseQuery(search)
// Included
if (options.transform?.include?.some(pattern => id.match(pattern))) {
@ -24,8 +24,9 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: {ctx
// Vue files
if (
pathname.endsWith('.vue') &&
(type === 'template' || type === 'script' || macro || !search)
id.endsWith('.vue') ||
'macro' in query ||
('vue' in query && (query.type === 'template' || query.type === 'script' || 'setup' in query))
) {
return true
}

View File

@ -13,6 +13,33 @@ interface LoaderOptions {
transform?: ComponentsOptions['transform']
}
function isVueTemplate (id: string) {
// Bare `.vue` file (in Vite)
if (id.endsWith('.vue')) {
return true
}
const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
if (!search) {
return false
}
const query = parseQuery(search)
// Macro
if (query.macro) {
return true
}
// Non-Vue or Styles
if (!('vue' in query) || query.type === 'style') {
return false
}
// Query `?vue&type=template` (in Webpack or external template)
return true
}
export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
const exclude = options.transform?.exclude || []
const include = options.transform?.include || []
@ -27,12 +54,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
if (include.some(pattern => id.match(pattern))) {
return true
}
const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
const query = parseQuery(search)
// we only transform render functions
// from `type=template` (in Webpack), bare `.vue` file and setup=true (Vite 2/3)
return pathname.endsWith('.vue') && (query.type === 'template' || !!query.macro || !!query.setup || !search)
return isVueTemplate(id)
},
transform (code, id) {
const components = options.getComponents()