fix(nuxt): add runtime and plugin dts (#9)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: userquin

packages/nuxt/nuxt.d.ts

@@ -0,0 +1,4 @@
+// only to resolve runtime plugin types on local, not shipped
+declare module '#imports' {
+  export { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app'
+}

packages/nuxt/package.json

@@ -20,10 +20,9 @@
   "sideEffects": false,
   "exports": {
     ".": "./dist/index.mjs",
-    "./runtime/plugin.client": "./dist/runtime/plugin.client.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist"
   ],
@@ -33,11 +32,14 @@
     "prepack": "pnpm run build"
   },
   "peerDependencies": {
-    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "@nuxt/kit": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
     "devframe": "workspace:*"
   },
   "devDependencies": {
     "@nuxt/kit": "catalog:build",
+    "@types/node": "catalog:types",
+    "devframe": "workspace:*",
+    "nuxt": "catalog:build",
     "tsdown": "catalog:build"
   }
 }

packages/nuxt/src/index.ts

@@ -113,8 +113,14 @@ export default defineNuxtModule<DevframeNuxtModuleOptions>({
       baseURL: options.baseURL,
     }
 
+    const runtimeDir = resolve('./runtime')
+
+    nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ path: resolve(runtimeDir, 'types') })
+    })
+
     addPlugin({
-      src: resolve('./runtime/plugin.client'),
+      src: resolve(runtimeDir, 'plugin.client'),
       mode: 'client',
     })
 

packages/nuxt/src/runtime/plugin.client.ts

@@ -1,19 +1,19 @@
-import type { DevToolsRpcClient } from 'devframe/client'
 import { connectDevframe } from 'devframe/client'
-// `#app` is a Nuxt virtual module; types resolve via `@nuxt/schema`.
-import { defineNuxtPlugin, useRuntimeConfig } from '#app'
+import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
 
 /**
  * Nuxt client plugin that calls `connectDevframe()` once on the client
  * and provides the RPC client as `$rpc` / `useNuxtApp().$rpc`.
  */
-export default defineNuxtPlugin(async () => {
-  const config = useRuntimeConfig()
-  const baseURL = (config.public as any)?.devframe?.baseURL ?? './'
-  const rpc = await connectDevframe({ baseURL })
-  return {
-    provide: {
-      rpc: rpc as DevToolsRpcClient,
-    },
-  }
+export default defineNuxtPlugin({
+  async setup() {
+    const config = useRuntimeConfig()
+    const baseURL = (config.public as any)?.devframe?.baseURL ?? './'
+    const rpc = await connectDevframe({ baseURL })
+    return {
+      provide: {
+        rpc: rpc as import('devframe/client').DevToolsRpcClient,
+      },
+    }
+  },
 })

packages/nuxt/tsconfig.json

@@ -2,6 +2,8 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "composite": true,
-    "lib": ["esnext", "dom"]
-  }
+    "lib": ["esnext", "dom"],
+    "types": ["node"]
+  },
+  "include": ["nuxt.d.ts", "src/**/*.ts", "../devframe/src/**/*.ts"]
 }

packages/nuxt/tsdown.config.ts

@@ -1,11 +1,9 @@
+import fs from 'node:fs/promises'
 import { defineConfig } from 'tsdown'
 
-export default defineConfig({
-  entry: {
-    'index': 'src/index.ts',
-    'runtime/plugin.client': 'src/runtime/plugin.client.ts',
-  },
-  tsconfig: '../../tsconfig.base.json',
+export default defineConfig([{
+  entry: './src/index.ts',
+  // tsconfig: '../../tsconfig.base.json',
   clean: true,
   dts: true,
   exports: true,
@@ -21,4 +19,37 @@ export default defineConfig({
       'scule',
     ],
   },
-})
+}, {
+  // just transpile the plugin to esm: we don't need the runtime at subpackage exports
+  entry: {
+    'runtime/plugin.client': 'src/runtime/plugin.client.ts',
+  },
+  outExtensions: () => ({
+    js: '.js',
+  }),
+  platform: 'browser',
+  clean: false,
+  dts: false,
+  exports: false,
+  deps: {
+    neverBundle: [
+      '#imports',
+      'nuxt/app',
+    ],
+  },
+  hooks: {
+    'build:done': async () => {
+      // copy types and generate plugin dts
+      await Promise.all([
+        fs.cp('src/runtime/types.d.ts', 'dist/runtime/types.d.ts'),
+        fs.writeFile('dist/runtime/plugin.client.d.ts', `import type { Plugin } from '#app';
+import type { DevToolsRpcClient } from 'devframe/client';
+declare const plugin: Plugin<{
+  rpc: DevToolsRpcClient;
+}>;
+export default plugin;
+`, 'utf-8'),
+      ])
+    },
+  },
+}])