refactor(nuxt): rework and use isJS and isVue utilities consistently (#20344)

packages/nuxt/src/components/client-fallback-auto-id.ts

@@ -3,7 +3,7 @@ import type { ComponentsOptions } from '@nuxt/schema'
 import MagicString from 'magic-string'
 import { isAbsolute, relative } from 'pathe'
 import { hash } from 'ohash'
-import { isVueTemplate } from './helpers'
+import { isVue } from '../core/utils'
 interface LoaderOptions {
   sourcemap?: boolean
   transform?: ComponentsOptions['transform'],
@@ -25,7 +25,7 @@ export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions
       if (include.some(pattern => id.match(pattern))) {
         return true
       }
-      return isVueTemplate(id)
+      return isVue(id, { type: ['template'] })
     },
     transform (code, id) {
       if (!CLIENT_FALLBACK_RE.test(code)) { return }

packages/nuxt/src/components/helpers.ts

@@ -1,29 +0,0 @@
-import { pathToFileURL } from 'node:url'
-import { parseQuery, parseURL } from 'ufo'
-
-export 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
-}

packages/nuxt/src/components/loader.ts

@@ -6,7 +6,7 @@ import { resolve } from 'pathe'
 import type { Component, ComponentsOptions } from 'nuxt/schema'
 
 import { distDir } from '../dirs'
-import { isVueTemplate } from './helpers'
+import { isVue } from '../core/utils'
 
 interface LoaderOptions {
   getComponents (): Component[]
@@ -31,7 +31,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
       if (include.some(pattern => id.match(pattern))) {
         return true
       }
-      return isVueTemplate(id)
+      return isVue(id, { type: ['template', 'script'] })
     },
     transform (code) {
       const components = options.getComponents()

packages/nuxt/src/core/plugins/tree-shake.ts

@@ -1,8 +1,7 @@
-import { pathToFileURL } from 'node:url'
 import { stripLiteral } from 'strip-literal'
-import { parseQuery, parseURL } from 'ufo'
 import MagicString from 'magic-string'
 import { createUnplugin } from 'unplugin'
+import { isJS, isVue } from '../utils'
 
 type ImportPath = string
 
@@ -22,18 +21,7 @@ export const TreeShakeComposablesPlugin = createUnplugin((options: TreeShakeComp
     name: 'nuxt:tree-shake-composables:transform',
     enforce: 'post',
     transformInclude (id) {
-      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
-      const { type } = parseQuery(search)
-
-      // vue files
-      if (pathname.endsWith('.vue') && (type === 'script' || !search)) {
-        return true
-      }
-
-      // js files
-      if (pathname.match(/\.((c|m)?j|t)sx?$/g)) {
-        return true
-      }
+      return isVue(id, { type: ['script'] }) || isJS(id)
     },
     transform (code) {
       if (!code.match(COMPOSABLE_RE)) { return }

packages/nuxt/src/core/plugins/unctx.ts

@@ -1,9 +1,9 @@
-import { pathToFileURL } from 'node:url'
-import { parseQuery, parseURL } from 'ufo'
 import type { TransformerOptions } from 'unctx/transform'
 import { createTransformer } from 'unctx/transform'
 import { createUnplugin } from 'unplugin'
 
+import { isJS, isVue } from '../utils'
+
 const TRANSFORM_MARKER = '/* _processed_nuxt_unctx_transform */\n'
 
 interface UnctxTransformPluginOptions {
@@ -17,22 +17,7 @@ export const UnctxTransformPlugin = createUnplugin((options: UnctxTransformPlugi
     name: 'unctx:transform',
     enforce: 'post',
     transformInclude (id) {
-      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
-      const query = parseQuery(search)
-
-      // Vue files
-      if (
-        pathname.endsWith('.vue') ||
-        'macro' in query ||
-        ('vue' in query && (query.type === 'template' || query.type === 'script' || 'setup' in query))
-      ) {
-        return true
-      }
-
-      // JavaScript files
-      if (pathname.match(/\.((c|m)?j|t)sx?$/g)) {
-        return true
-      }
+      return isVue(id) || isJS(id)
     },
     transform (code) {
       // TODO: needed for webpack - update transform in unctx/unplugin?

packages/nuxt/src/core/utils/index.ts

@@ -0,0 +1,13 @@
+export * from './names'
+export * from './plugins'
+
+export function uniqueBy<T, K extends keyof T> (arr: T[], key: K) {
+  const res: T[] = []
+  const seen = new Set<T[K]>()
+  for (const item of arr) {
+    if (seen.has(item[key])) { continue }
+    seen.add(item[key])
+    res.push(item)
+  }
+  return res
+}

packages/nuxt/src/core/utils/names.ts

@@ -5,17 +5,6 @@ export function getNameFromPath (path: string) {
   return kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
 }
 
-export function uniqueBy <T, K extends keyof T> (arr: T[], key: K) {
-  const res: T[] = []
-  const seen = new Set<T[K]>()
-  for (const item of arr) {
-    if (seen.has(item[key])) { continue }
-    seen.add(item[key])
-    res.push(item)
-  }
-  return res
-}
-
 export function hasSuffix (path: string, suffix: string) {
   return basename(path).replace(extname(path), '').endsWith(suffix)
 }

packages/nuxt/src/core/utils/plugins.ts

@@ -0,0 +1,38 @@
+import { pathToFileURL } from 'node:url'
+import { parseQuery, parseURL } from 'ufo'
+
+export function isVue (id: string, opts: { type?: Array<'template' | 'script' | 'style'> } = {}) {
+  // Bare `.vue` file (in Vite)
+  const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+  if (id.endsWith('.vue') && !search) {
+    return true
+  }
+
+  if (!search) {
+    return false
+  }
+
+  const query = parseQuery(search)
+
+  // Macro
+  if (query.macro && (!opts.type || opts.type.includes('script'))) {
+    return true
+  }
+
+  // Non-Vue or Styles
+  const type = 'setup' in query ? 'script' : query.type as 'script' | 'template' | 'style'
+  if (!('vue' in query) || (opts.type && !opts.type.includes(type))) {
+    return false
+  }
+
+  // Query `?vue&type=template` (in Webpack or external template)
+  return true
+}
+
+const JS_RE = /\.((c|m)?j|t)sx?$/
+
+export function isJS (id: string) {
+  // JavaScript files
+  const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+  return JS_RE.test(pathname)
+}

packages/nuxt/src/imports/transform.ts

@@ -1,18 +1,14 @@
-import { pathToFileURL } from 'node:url'
 import { createUnplugin } from 'unplugin'
-import { parseQuery, parseURL } from 'ufo'
 import type { Unimport } from 'unimport'
 import { normalize } from 'pathe'
 import type { ImportsOptions } from 'nuxt/schema'
+import { isJS, isVue } from '../core/utils'
 
 export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: { ctx: Unimport, options: Partial<ImportsOptions>, sourcemap?: boolean }) => {
   return {
     name: 'nuxt:imports-transform',
     enforce: 'post',
     transformInclude (id) {
-      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
-      const query = parseQuery(search)
-
       // Included
       if (options.transform?.include?.some(pattern => id.match(pattern))) {
         return true
@@ -23,18 +19,12 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: { ct
       }
 
       // Vue files
-      if (
-        id.endsWith('.vue') ||
-        'macro' in query ||
-        ('vue' in query && (query.type === 'template' || query.type === 'script' || 'setup' in query))
-      ) {
+      if (isVue(id, { type: ['script', 'template'] })) {
         return true
       }
 
       // JavaScript files
-      if (pathname.match(/\.((c|m)?j|t)sx?$/g)) {
-        return true
-      }
+      return isJS(id)
     },
     async transform (code, id) {
       id = normalize(id)

packages/vite/src/plugins/pure-annotations.ts

@@ -1,8 +1,7 @@
-import { pathToFileURL } from 'node:url'
 import MagicString from 'magic-string'
-import { parseQuery, parseURL } from 'ufo'
 import { createUnplugin } from 'unplugin'
 import { stripLiteral } from 'strip-literal'
+import { isJS, isVue } from '../../../nuxt/src/core/utils/plugins'
 
 export interface PureAnnotationsOptions {
   sourcemap: boolean
@@ -16,18 +15,7 @@ export const pureAnnotationsPlugin = createUnplugin((options: PureAnnotationsOpt
     name: 'nuxt:pure-annotations',
     enforce: 'post',
     transformInclude (id) {
-      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
-      const { type } = parseQuery(search)
-
-      // vue files
-      if (pathname.endsWith('.vue') && (type === 'script' || !search)) {
-        return true
-      }
-
-      // js files
-      if (pathname.match(/\.((c|m)?j|t)sx?$/g)) {
-        return true
-      }
+      return isVue(id, { type: ['script'] }) || isJS(id)
     },
     transform (code) {
       if (!FUNCTION_RE_SINGLE.test(code)) { return }

test/fixtures/basic/pages/index.vue

@@ -46,6 +46,11 @@ const config = useRuntimeConfig()
 
 const someValue = useState('val', () => 1)
 
+const NestedSugarCounter = resolveComponent('NestedSugarCounter')
+if (!NestedSugarCounter) {
+  throw new Error('Component not found')
+}
+
 definePageMeta({
   alias: '/some-alias',
   other: ref('test'),