feat(nuxt): allow generating metadata for nuxt components (#26204)

nuxt · Mar 13, 2024 · a9effe9 · a9effe9
1 parent 2baaab9
commit a9effe9
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git a/docs/3.api/5.kit/5.components.md b/docs/3.api/5.kit/5.components.md
@@ -41,6 +41,11 @@ interface ComponentsDir {
   transpile?: 'auto' | boolean
 }
 
+// You can augment this interface (exported from `@nuxt/schema`) if needed
+interface ComponentMeta {
+  [key: string]: unknown
+}
+
 interface Component {
   pascalName: string
   kebabName: string
@@ -54,6 +59,7 @@ interface Component {
   island?: boolean
   mode?: 'client' | 'server' | 'all'
   priority?: number
+  meta?: ComponentMeta
 }
 ```
 

diff --git a/packages/kit/src/components.ts b/packages/kit/src/components.ts
@@ -48,6 +48,7 @@ export async function addComponent (opts: AddComponentOptions) {
     mode: 'all',
     shortPath: opts.filePath,
     priority: 0,
+    meta: {},
     ...opts
   }
 

diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
@@ -5,7 +5,7 @@ import type { Component, ComponentsDir, ComponentsOptions } from 'nuxt/schema'
 
 import { distDir } from '../dirs'
 import { clientFallbackAutoIdPlugin } from './client-fallback-auto-id'
-import { componentNamesTemplate, componentsIslandsTemplate, componentsPluginTemplate, componentsTypeTemplate } from './templates'
+import { componentNamesTemplate, componentsIslandsTemplate, componentsMetadataTemplate, componentsPluginTemplate, componentsTypeTemplate } from './templates'
 import { scanComponents } from './scan'
 import { loaderPlugin } from './loader'
 import { TreeShakeTemplatePlugin } from './tree-shake'
@@ -127,6 +127,10 @@ export default defineNuxtModule<ComponentsOptions>({
       addTemplate({ filename: 'components.islands.mjs', getContents: () => 'export const islandComponents = {}' })
     }
 
+    if (componentOptions.generateMetadata) {
+      addTemplate(componentsMetadataTemplate)
+    }
+
     const unpluginServer = createTransformPlugin(nuxt, getComponents, 'server')
     const unpluginClient = createTransformPlugin(nuxt, getComponents, 'client')
 

diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts
@@ -124,3 +124,9 @@ export const componentNames: string[]
 `
   }
 }
+
+export const componentsMetadataTemplate: NuxtTemplate = {
+  filename: 'components.json',
+  write: true,
+  getContents: ({ app }) => JSON.stringify(app.components, null, 2)
+}
diff --git a/packages/schema/src/types/components.ts b/packages/schema/src/types/components.ts
@@ -1,3 +1,7 @@
+export interface ComponentMeta {
+  [key: string]: unknown
+}
+
 export interface Component {
   pascalName: string
   kebabName: string
@@ -9,6 +13,7 @@ export interface Component {
   preload: boolean
   global?: boolean | 'sync'
   island?: boolean
+  meta?: ComponentMeta
   mode?: 'client' | 'server' | 'all'
   /**
    * This number allows configuring the behavior of overriding Nuxt components.
@@ -114,6 +119,11 @@ export interface ComponentsOptions {
    * @default false
    */
   global?: boolean
+  /**
+   * Whether to write metadata to the build directory with information about the components that
+   * are auto-registered in your app.
+   */
+  generateMetadata?: boolean
   loader?: boolean
 
   transform?: {