refactor(components): use inline templates

packages/nuxt3/src/app/templates/components.ts

@@ -0,0 +1,48 @@
+
+import { relative } from 'upath'
+
+import { createImportMagicComments } from '../../core/template.utils'
+
+import type { Component } from '../../components/types'
+
+type ComponentsTemplateOptions = {
+  buildDir?: string
+  components: Component[]
+}
+
+export const componentsTemplate = {
+  filename: 'components.mjs',
+  getContents (options: ComponentsTemplateOptions) {
+    return `import { defineAsyncComponent } from 'vue'
+
+const components = {
+${options.components.map((c) => {
+  const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
+  const magicComments = createImportMagicComments(c)
+
+  return `  '${c.pascalName}': defineAsyncComponent(() => import('${c.filePath}' /* ${magicComments} */).then(c => ${exp}))`
+}).join(',\n')}
+}
+
+export default function (nuxt) {
+  for (const name in components) {
+    nuxt.app.component(name, components[name])
+    nuxt.app.component('Lazy' + name, components[name])
+  }
+}
+`
+  }
+}
+
+export const componentsTypeTemplate = {
+  filename: 'components.d.ts',
+  write: true,
+  getContents: (options: ComponentsTemplateOptions) => `// Generated by components discovery
+declare module 'vue' {
+  export interface GlobalComponents {
+${options.components.map(c => `    '${c.pascalName}': typeof import('${relative(options.buildDir, c.filePath)}')['${c.export}']`).join(',\n')}
+  }
+
+  export {}
+}`
+}

packages/nuxt3/src/app/templates.ts → packages/nuxt3/src/app/templates/index.ts

@@ -1,12 +1,11 @@
 
 import type { Nuxt, NuxtApp } from '@nuxt/kit'
 
-import * as templateUtils from '../core/template.utils'
+import { importName, importSources } from '../../core/template.utils'
 
 type TemplateContext = {
   nuxt: Nuxt;
   app: NuxtApp;
-  utils: typeof templateUtils
 }
 
 export const appTemplate = {
@@ -26,11 +25,11 @@ export const cssTemplate = {
 export const clientPluginTemplate = {
   filename: 'plugins/client.mjs',
   getContents (ctx: TemplateContext) {
-    const { app, utils } = ctx
+    const { app } = ctx
     return [
-      utils.importSources(app.plugins.filter(p => !p.mode || p.mode !== 'server').map(p => p.src)),
+      importSources(app.plugins.filter(p => !p.mode || p.mode !== 'server').map(p => p.src)),
       'export default [',
-      app.plugins.filter(p => !p.mode || p.mode !== 'server').map(p => utils.importName(p.src)).join(',\n  '),
+      app.plugins.filter(p => !p.mode || p.mode !== 'server').map(p => importName(p.src)).join(',\n  '),
       ']'
     ].join('\n')
   }
@@ -39,13 +38,13 @@ export const clientPluginTemplate = {
 export const serverPluginTemplate = {
   filename: 'plugins/server.mjs',
   getContents (ctx: TemplateContext) {
-    const { app, utils } = ctx
+    const { app } = ctx
     return [
       "import preload from '#app/plugins/preload.server'",
-      utils.importSources(app.plugins.filter(p => !p.mode || p.mode !== 'client').map(p => p.src)),
+      importSources(app.plugins.filter(p => !p.mode || p.mode !== 'client').map(p => p.src)),
       'export default [',
       '  preload,',
-      app.plugins.filter(p => !p.mode || p.mode !== 'client').map(p => utils.importName(p.src)).join(',\n  '),
+      app.plugins.filter(p => !p.mode || p.mode !== 'client').map(p => importName(p.src)).join(',\n  '),
       ']'
     ].join('\n')
   }

packages/nuxt3/src/components/module.ts

@@ -1,7 +1,7 @@
 import { statSync } from 'fs'
-import { resolve, relative } from 'upath'
+import { resolve } from 'upath'
 import { defineNuxtModule, resolveAlias, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
-import { distDir } from '../dirs'
+import { componentsTemplate, componentsTypeTemplate } from '../app/templates/components'
 import { scanComponents } from './scan'
 import type { Component, ComponentsDir } from './types'
 import { loaderPlugin } from './loader'
@@ -66,19 +66,13 @@ export default defineNuxtModule({
       }
 
       app.templates.push({
-        filename: 'components.mjs',
-        src: resolve(distDir, 'components/runtime/components.tmpl.mjs'),
+        ...componentsTemplate,
         options: { components }
       })
 
       app.templates.push({
-        filename: 'components.d.ts',
-        write: true,
-        getContents: () => `// Generated by components discovery
-declare module 'vue' {
-  export interface GlobalComponents {
-${components.map(c => `  '${c.pascalName}': typeof import('${relative(nuxt.options.buildDir, c.filePath)}')['${c.export}']`).join(',\n')}
-  }\n}\n\nexport {}`
+        ...componentsTypeTemplate,
+        options: { components, buildDir: nuxt.options.buildDir }
       })
 
       app.plugins.push({ src: '#build/components' })

packages/nuxt3/src/core/template.utils.ts

@@ -2,6 +2,21 @@ import { basename, extname } from 'upath'
 import hash from 'hash-sum'
 import { camelCase } from 'scule'
 
+export type ImportMagicCommentsOptions = {
+  chunkName:string
+  prefetch?: boolean | number
+  preload?: boolean | number
+}
+
+export const createImportMagicComments = (options: ImportMagicCommentsOptions) => {
+  const { chunkName, prefetch, preload } = options
+  return [
+    `webpackChunkName: "${chunkName}"`,
+    prefetch === true || typeof prefetch === 'number' ? `webpackPrefetch: ${prefetch}` : false,
+    preload === true || typeof preload === 'number' ? `webpackPreload: ${preload}` : false
+  ].filter(Boolean).join(', ')
+}
+
 export const serialize = data => JSON.stringify(data, null, 2).replace(/"{(.+)}"/g, '$1')
 
 export const importName = (src: string) => `${camelCase(basename(src, extname(src))).replace(/[^a-zA-Z?\d\s:]/g, '')}_${hash(src)}`