update types

README.md

@@ -1 +0,0 @@
-packages/trpc/README.md

api.d.ts

@@ -0,0 +1 @@
+export * from './dist/runtime/api'

package.json

@@ -1,18 +1,59 @@
 {
-  "name": "monorepo",
+  "name": "trpc-nuxt",
-  "packageManager": "pnpm@7.0.0",
+  "type": "module",
+  "version": "0.0.3",
+  "packageManager": "pnpm@7.1.0",
+  "license": "MIT",
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    },
+    "./api": {
+      "import": "./dist/runtime/api.mjs",
+      "types": "./dist/runtime/api.d.ts"
+    },
+    "./client": {
+      "import": "./dist/runtime/client.mjs",
+      "types": "./dist/runtime/client.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
   "scripts": {
-    "dev": "nr --parallel --filter trpc-nuxt --filter playground dev",
+    "prepublishOnly": "nr build",
+    "build": "nuxt-module-build",
+    "play": "nr build && nuxi dev playground",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "release": "bumpp --commit --push --tag && pnpm publish",
-    "prepare": "nr --filter playground prepare"
+    "prepare": "nuxi prepare playground"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.0.0-rc.3",
+    "@trpc/client": "^9.23.3",
+    "@trpc/server": "^9.23.2",
+    "fs-extra": "^10.1.0",
+    "h3": "^0.7.8",
+    "ohash": "^0.1.0",
+    "pathe": "^0.3.0",
+    "ufo": "^0.8.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.23.1",
     "@antfu/ni": "^0.16.2",
     "@nuxt/module-builder": "latest",
+    "@types/fs-extra": "^9.0.13",
+    "bumpp": "^7.1.1",
     "eslint": "^8.14.0",
-    "pnpm": "^7.1.0"
+    "nuxt": "^3.0.0-rc.3",
+    "pnpm": "^7.1.0",
+    "trpc-nuxt": "workspace:*",
+    "zod": "^3.16.0"
   },
   "eslintConfig": {
     "extends": "@antfu"

packages/playground/app.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const { data, error } = useTrpcQuery('hello')
-
-// const d = useLazyAsyncData('asd', () => $fetch('/api/hello'))
-
-watch(data, (val) => {
-  console.log('val', val)
-  console.log('error', error.value)
-}, {
-  immediate: true,
-})
-</script>
-
-<template>
-  <div>
-    {{ data }}
-  </div>
-</template>

packages/playground/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "playground",
-  "private": true,
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "prepare": "nuxt prepare"
-  },
-  "dependencies": {
-    "trpc-nuxt": "link:../trpc",
-    "zod": "^3.16.0"
-  },
-  "devDependencies": {
-    "nuxt": "3.0.0-rc.3"
-  }
-}

packages/playground/server/fn/index.ts

@@ -1,11 +0,0 @@
-// generated by trpc-nuxt
-      import * as trpc from '@trpc/server'
-      
-      export const router = trpc
-        .router()
-        .query('hello', {
-          resolve: () => 'world',
-        });
-      
-      export type Router = typeof router
-    

packages/playground/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "./.nuxt/tsconfig.json"
-}

packages/trpc/README.md

@@ -1,6 +0,0 @@
-# Nuxt Module
-
-## Development
-
-- Run `npm run dev:prepare` to generate type stubs.
-- Use `npm run dev` to start [playground](./playground) in development mode.

packages/trpc/handler.d.ts

@@ -1 +0,0 @@
-export * from './dist/runtime/handler'

packages/trpc/package.json

@@ -1,45 +0,0 @@
-{
-  "name": "trpc-nuxt",
-  "type": "module",
-  "version": "0.0.3",
-  "license": "MIT",
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
-    },
-    "./api": {
-      "import": "./dist/runtime/api.mjs",
-      "types": "./dist/runtime/api.d.ts"
-    },
-    "./client": {
-      "import": "./dist/runtime/client.mjs",
-      "types": "./dist/runtime/client.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
-  "scripts": {
-    "build": "nuxt-module-build",
-    "dev": "nuxt-module-build --stub"
-  },
-  "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.3",
-    "@trpc/client": "^9.23.3",
-    "@trpc/server": "^9.23.2",
-    "fs-extra": "^10.1.0",
-    "h3": "^0.7.8",
-    "ohash": "^0.1.0",
-    "pathe": "^0.3.0",
-    "ufo": "^0.8.4"
-  },
-  "devDependencies": {
-    "@nuxt/module-builder": "latest",
-    "@types/fs-extra": "^9.0.13",
-    "nuxt": "^3.0.0-rc.3"
-  }
-}

packages/trpc/src/runtime/client.ts

@@ -1,33 +0,0 @@
-import { objectHash } from 'ohash'
-import type { TRPCClient } from '@trpc/client'
-import { useAsyncData, useLazyAsyncData } from '#imports'
-
-// type ReturnType<T> = T extends (...args: any) => infer R ? R : never
-
-export function createTRPCComposables<T extends TRPCClient<any>>(client: T): {
-  useTrpcQuery: (...args: Parameters<typeof client['query']>) => ReturnType<typeof useAsyncData>
-  useTrpcLazyQuery: (...args: Parameters<typeof client['query']>) => ReturnType<typeof useLazyAsyncData>
-  useTrpcMutation: (...args: Parameters<typeof client['mutation']>) => ReturnType<typeof useAsyncData>
-}
-
-export function createTRPCComposables<
-  T extends TRPCClient<any>,
->(client: T) {
-  const useTrpcQuery = (...args: Parameters<typeof client.query>) => {
-    return useAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args))
-  }
-
-  const useTrpcLazyQuery = (...args: Parameters<typeof client.query>) => {
-    return useLazyAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args))
-  }
-
-  const useTrpcMutation = (...args: Parameters<typeof client.mutation>) => {
-    return useAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.mutation(...args))
-  }
-
-  return {
-    useTrpcQuery,
-    useTrpcLazyQuery,
-    useTrpcMutation,
-  }
-}

packages/trpc/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "lib": ["esnext"],
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true
-  }
-}

playground/app.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { data, error } = await useTrpcQuery('getUser', {
+  name: 'john',
+})
+
+watchEffect(() => {
+  console.log(data.value)
+  console.log('err', error.value)
+})
+</script>
+
+<template>
+  <div>hello</div>
+</template>

playground/nuxt.config.ts

@@ -1,6 +1,10 @@
 import { defineNuxtConfig } from 'nuxt'
+import Module from '..'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['trpc-nuxt'],
+  modules: [Module],
+  typescript: {
+    strict: true,
+  },
 })

playground/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "playground",
+  "private": true
+}

playground/server/fn/index.ts

@@ -0,0 +1,16 @@
+import * as trpc from '@trpc/server'
+import { z } from 'zod'
+
+export const router = trpc
+  .router()
+  .query('getUser', {
+    input: z.object({ name: z.string().min(5) }),
+    async resolve(req) {
+      return { id: 1, name: req.input.name }
+    },
+  })
+  .query('hello', {
+    resolve: () => 'world',
+  })
+
+export type Router = typeof router

pnpm-workspace.yaml

@@ -1,2 +1,2 @@
 packages:
-  - packages/*
+  - playground/*

src/module.ts

@@ -14,8 +14,8 @@ export default defineNuxtModule<ModuleOptions>({
     const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
 
-    nuxt.hook('config', () => {
+    nuxt.hook('config', (options) => {
-      nuxt.options.build.transpile.push('trpc-nuxt/client')
+      options?.build?.transpile?.push('trpc-nuxt/client')
     })
 
     addServerHandler({
@@ -26,7 +26,7 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hook('autoImports:extend', (imports) => {
       imports.push(
         { name: 'useTrpcQuery', from: clientPath },
-        { name: 'useTrpcLazyQuery', from: clientPath },
+        { name: 'useLazyTrpcQuery', from: clientPath },
         { name: 'useTrpcMutation', from: clientPath },
       )
     })
@@ -36,15 +36,6 @@ export default defineNuxtModule<ModuleOptions>({
 
     await fs.ensureDir(dirname(clientPath))
 
-    nuxt.options.build.transpile.push('trpc-nuxt/client')
-    nuxt.hook('autoImports:extend', (imports) => {
-      imports.push(
-        { name: 'useTrpcQuery', as: 'useTrpcQuery', from: clientPath },
-        { name: 'useTrpcLazyQuery', as: 'useTrpcLazyQuery', from: clientPath },
-        { name: 'useTrpcMutation', as: 'useTrpcMutation', from: clientPath },
-      )
-    })
-
     await fs.writeFile(clientPath, `
       import * as trpc from '@trpc/client'
       import { createTRPCComposables } from 'trpc-nuxt/client'
@@ -56,13 +47,13 @@ export default defineNuxtModule<ModuleOptions>({
 
       const {
         useTrpcQuery,
-        useTrpcLazyQuery,
+        useLazyTrpcQuery,
         useTrpcMutation
-      } = createTRPCComposables(client)
+      } = createTRPCComposables<typeof router>(client)
 
       export {
         useTrpcQuery,
-        useTrpcLazyQuery,
+        useLazyTrpcQuery,
         useTrpcMutation
       }
     `)

src/runtime/client.ts

@@ -0,0 +1,81 @@
+import { objectHash } from 'ohash'
+import type { TRPCClient } from '@trpc/client'
+import type { AnyRouter, inferProcedureInput, inferProcedureOutput } from '@trpc/server'
+import type { AsyncData, KeyOfRes, PickFrom, _Transform } from 'nuxt/dist/app/composables/asyncData'
+// @ts-expect-error: Resolved by Nuxt
+import { useAsyncData, useLazyAsyncData } from '#imports'
+
+export function createTRPCComposables<
+  Router extends AnyRouter,
+  Client extends TRPCClient<Router> = TRPCClient<Router>,
+  TQuery extends keyof Router['_def']['queries'] = keyof Router['_def']['queries'],
+  TMutation extends keyof Router['_def']['mutations'] = keyof Router['_def']['mutations'],
+>(
+  client: Client
+): {
+  useTrpcQuery: <TRouteKey extends TQuery>(
+    args_0: TRouteKey,
+    args_1: inferProcedureInput<Router['_def']['queries'][TRouteKey]>
+  ) => AsyncData<
+    PickFrom<
+      inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
+      KeyOfRes<
+        _Transform<
+          inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
+          inferProcedureOutput<Router['_def']['queries'][TRouteKey]>
+        >
+      >
+    >,
+    true | Error
+  >
+  useLazyTrpcQuery: <TRouteKey extends TQuery>(
+    args_0: TRouteKey,
+    args_1: inferProcedureInput<Router['_def']['queries'][TRouteKey]>
+  ) => AsyncData<
+    PickFrom<
+      inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
+      KeyOfRes<
+        _Transform<
+          inferProcedureOutput<Router['_def']['queries'][TRouteKey]>,
+          inferProcedureOutput<Router['_def']['queries'][TRouteKey]>
+        >
+      >
+    >,
+    true | Error
+  >
+  useTrpcMutation: <TRouteKey extends TMutation>(
+    args_0: TRouteKey,
+    args_1: inferProcedureInput<Router['_def']['mutations'][TRouteKey]>
+  ) => AsyncData<
+    PickFrom<
+      inferProcedureOutput<Router['_def']['mutations'][TRouteKey]>,
+      KeyOfRes<
+        _Transform<
+          inferProcedureOutput<Router['_def']['mutations'][TRouteKey]>,
+          inferProcedureOutput<Router['_def']['mutations'][TRouteKey]>
+        >
+      >
+    >,
+    true | Error
+  >
+}
+
+export function createTRPCComposables(client: any) {
+  const useTrpcQuery = (...args) => {
+    return useAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args))
+  }
+
+  const useLazyTrpcQuery = (...args) => {
+    return useLazyAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.query(...args))
+  }
+
+  const useTrpcMutation = (...args) => {
+    return useAsyncData(`trpc-${objectHash(args[0] + (args[1] ? JSON.stringify(args[1]) : ''))}`, () => client.mutation(...args))
+  }
+
+  return {
+    useTrpcQuery,
+    useLazyTrpcQuery,
+    useTrpcMutation,
+  }
+}

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "types": ["nuxt/dist/app/composables/asyncData"]
+  }
+}