fix(nuxt3): share scanned components with loader (#3396)

* fix(nuxt3): share scanned components with loader

* refactor: remove `src` type from input

* fix: remove old `src: ''` option

* fix: use shared context for extending components too

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

packages/bridge/src/vite/templates.ts

@@ -12,7 +12,6 @@ type TemplateContext = {
 // TODO: Use an alias
 export const middlewareTemplate = {
   filename: 'middleware.js',
-  src: '',
   getContents (ctx: TemplateContext) {
     const { dir, router: { middleware }, srcDir } = ctx.nuxt.options
     const _middleware = ((typeof middleware !== 'undefined' && middleware) || []).map((m) => {
@@ -33,7 +32,6 @@ export default middleware`
 
 export const storeTemplate = {
   filename: 'store.js',
-  src: '',
   getContents (ctx: TemplateContext) {
     const { dir, srcDir } = ctx.nuxt.options
     const { templateVars: { storeModules = [] } } = ctx.app

packages/kit/src/plugin.ts

@@ -68,13 +68,11 @@ export function addPlugin (_plugin: NuxtPlugin | string, opts: AddPluginOptions
 /**
  * Adds a template and registers as a nuxt plugin.
  */
-export function addPluginTemplate (plugin: NuxtPluginTemplate | string, opts: AddPluginOptions = {}): NuxtPluginTemplate {
+export function addPluginTemplate (plugin: Omit<NuxtPluginTemplate, 'src'> | string, opts: AddPluginOptions = {}): NuxtPluginTemplate {
-  if (typeof plugin === 'string') {
+  const normalizedPlugin: NuxtPluginTemplate = typeof plugin === 'string'
-    plugin = { src: plugin }
+    ? { src: plugin }
-  }
+    // Update plugin src to template destination
+    : { ...plugin, src: addTemplate(plugin).dst }
 
-  // Update plugin src to template destination
+  return addPlugin(normalizedPlugin, opts)
-  plugin.src = addTemplate(plugin).dst
-
-  return addPlugin(plugin, opts)
 }

packages/nuxt3/src/auto-imports/module.ts

@@ -52,7 +52,6 @@ export default defineNuxtModule<AutoImportsOptions>({
       // Add all imports to globalThis in development mode
       addPluginTemplate({
         filename: 'auto-imports.mjs',
-        src: '',
         getContents: () => {
           const imports = toImports(ctx.autoImports)
           const globalThisSet = ctx.autoImports.map(i => `globalThis.${i.as} = ${i.as};`).join('\n')

packages/nuxt3/src/components/module.ts

@@ -1,6 +1,6 @@
 import { statSync } from 'fs'
 import { resolve, basename } from 'pathe'
-import { defineNuxtModule, resolveAlias, addVitePlugin, addWebpackPlugin, addTemplate, addPlugin } from '@nuxt/kit'
+import { defineNuxtModule, resolveAlias, addVitePlugin, addWebpackPlugin, addTemplate, addPluginTemplate } from '@nuxt/kit'
 import type { Component, ComponentsDir, ComponentsOptions } from '@nuxt/schema'
 import { componentsTemplate, componentsTypeTemplate } from './templates'
 import { scanComponents } from './scan'
@@ -106,17 +106,15 @@ export default defineNuxtModule<ComponentsOptions>({
       options
     })
 
-    addTemplate({
+    addPluginTemplate({
       ...componentsTemplate,
       options
     })
 
-    addPlugin({ src: '#build/components' })
-
     // Scan components and add to plugin
     nuxt.hook('app:templates', async () => {
       options.components = await scanComponents(componentDirs, nuxt.options.srcDir!)
-      await nuxt.callHook('components:extend', components)
+      await nuxt.callHook('components:extend', options.components)
       await nuxt.callHook('builder:generateApp')
     })
 
@@ -135,7 +133,7 @@ export default defineNuxtModule<ComponentsOptions>({
       }
     })
 
-    const loaderOptions = { getComponents: () => components }
+    const loaderOptions = { getComponents: () => options.components }
     addWebpackPlugin(loaderPlugin.webpack(loaderOptions))
     addVitePlugin(loaderPlugin.vite(loaderOptions))
   }