fix(components): types generation (#416)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

examples/with-components/nuxt.d.ts

@@ -0,0 +1,11 @@
+// This file is auto generated by `nuxt prepare`
+// Please do not manually modify this file.
+
+/// <reference types="@nuxt/kit" />
+/// <reference types="@nuxt/app" />
+/// <reference types="@nuxt/nitro" />
+/// <reference types="@nuxt/pages" />
+/// <reference types="@nuxt/meta" />
+/// <reference types="@nuxt/component-discovery" />
+/// <reference path=".nuxt/components.d.ts" />
+export {}

packages/cli/src/commands/prepare.ts

@@ -45,7 +45,12 @@ export default defineNuxtCommand({
       '// This file is auto generated by `nuxt prepare`',
       '// Please do not manually modify this file.',
       '',
-      ...references.map(ref => `/// <reference ${renderAttrs(ref)} />`),
+      ...references.map((ref) => {
+        if ('path' in ref) {
+          ref.path = relative(rootDir, ref.path)
+        }
+        return `/// <reference ${renderAttrs(ref)} />`
+      }),
       ...declarations,
       'export {}',
       ''

packages/components/src/module.ts

@@ -1,12 +1,12 @@
-import fs from 'fs'
+import { statSync } from 'fs'
+import { resolve, relative } from 'upath'
 import { defineNuxtModule, resolveAlias, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
-import { resolve } from 'upath'
 import { scanComponents } from './scan'
 import type { Component, ComponentsDir } from './types'
 import { loaderPlugin } from './loader'
 
 const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
-const isDirectory = (p: string) => { try { return fs.statSync(p).isDirectory() } catch (_e) { return false } }
+const isDirectory = (p: string) => { try { return statSync(p).isDirectory() } catch (_e) { return false } }
 
 export default defineNuxtModule({
   name: 'components',
@@ -72,13 +72,21 @@ export default defineNuxtModule({
 
       app.templates.push({
         filename: 'components.d.ts',
-        src: resolve(__dirname, 'runtime/components.tmpl.d.ts'),
-        options: { components }
+        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 {}`
       })
 
       app.plugins.push({ src: '#build/components' })
     })
 
+    nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ path: resolve(nuxt.options.buildDir, 'components.d.ts') })
+    })
+
     // Watch for changes
     nuxt.hook('builder:watch', async (event, path) => {
       if (!['add', 'unlink'].includes(event)) {

packages/components/src/runtime/components.tmpl.d.ts

@@ -1,10 +0,0 @@
-declare module 'vue' {
-  export interface GlobalComponents {
-<%= components.map(c => {
-  return `    '${c.pascalName}': typeof import('${c.filePath}')['${c.export}']`
-}).join(',\n') %>
-  }
-}
-
-// export required to turn this into a module for TS augmentation purposes
-export { }