convert to pnpm workspace

.npmrc

@@ -1,2 +1,2 @@
-shamefully-hoist=true
 ignore-workspace-root-check=true
+shamefully-hoist=true

package.json

@@ -1,46 +1,18 @@
 {
-  "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"
-    }
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
+  "name": "monorepo",
+  "packageManager": "pnpm@7.0.0",
   "scripts": {
-    "prepack": "nuxt-module-build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev": "nr --parallel --filter trpc-nuxt --filter playground dev",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.3",
-    "@trpc/server": "^9.23.2",
-    "fs-extra": "^10.1.0",
-    "pathe": "^0.3.0",
-    "ufo": "^0.8.4"
+    "lint:fix": "eslint . --fix",
+    "prepare": "nr --filter playground prepare"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.23.1",
+    "@antfu/ni": "^0.16.2",
     "@nuxt/module-builder": "latest",
-    "@types/fs-extra": "^9.0.13",
-    "eslint": "latest",
-    "nuxt": "^3.0.0-rc.3",
-    "zod": "^3.16.0"
+    "eslint": "^8.14.0",
+    "pnpm": "^7.1.0"
   },
   "eslintConfig": {
     "extends": "@antfu"

packages/playground/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env

packages/playground/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.

packages/playground/app.vue

@@ -0,0 +1,18 @@
+<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/nuxt.config.ts

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

packages/playground/package.json

@@ -0,0 +1,18 @@
+{
+  "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

@@ -0,0 +1,11 @@
+// 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

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

packages/trpc/client.d.ts

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

packages/trpc/package.json

@@ -0,0 +1,45 @@
+{
+  "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/module.ts

@@ -0,0 +1,93 @@
+import { dirname, join, resolve } from 'pathe'
+import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
+import fs from 'fs-extra'
+
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'trpc-nuxt',
+    configKey: 'trpc',
+  },
+  defaults: {},
+  async setup(_options, nuxt) {
+    const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
+    const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
+
+    nuxt.hook('config', () => {
+      nuxt.options.build.transpile.push('trpc-nuxt/client')
+    })
+
+    addServerHandler({
+      route: '/trpc/*',
+      handler: handlerPath,
+    })
+
+    nuxt.hook('autoImports:extend', (imports) => {
+      imports.push(
+        { name: 'useTrpcQuery', from: clientPath },
+        { name: 'useTrpcLazyQuery', from: clientPath },
+        { name: 'useTrpcMutation', from: clientPath },
+      )
+    })
+
+    const srcDir = nuxt.options.srcDir
+    const optionsPath = resolve(srcDir, 'server/fn/index.ts')
+
+    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'
+      import { router } from '~/server/fn'
+
+      const client = trpc.createTRPCClient<typeof router>({
+        url: process.browser ? '/trpc' : 'http://localhost:3000/trpc',
+      })
+
+      const {
+        useTrpcQuery,
+        useTrpcLazyQuery,
+        useTrpcMutation
+      } = createTRPCComposables(client)
+
+      export {
+        useTrpcQuery,
+        useTrpcLazyQuery,
+        useTrpcMutation
+      }
+    `)
+
+    await fs.writeFile(handlerPath, `
+      import { createTRPCHandler } from 'trpc-nuxt/api'
+      import * as functions from '~/server/fn'
+      export default createTRPCHandler({
+        router: functions.router
+      })
+    `)
+
+    if (!fs.existsSync(optionsPath)) {
+      await fs.writeFile(optionsPath, `
+      // Generated by trpc-nuxt
+      import * as trpc from '@trpc/server'
+      
+      export const router = trpc
+        .router()
+        .query('hello', {
+          resolve: () => 'world',
+        });
+      
+      export type Router = typeof router
+    `.trimStart())
+    }
+  },
+})

src/runtime/api.ts → packages/trpc/src/runtime/api.ts

@@ -51,7 +51,7 @@ export function createTRPCHandler<Router extends AnyRouter>({
         body: isMethod(event, 'GET') ? null : await useBody(event),
         query: $url.searchParams,
       },
-      path: $url.pathname.substring(url.length + 5),
+      path: $url.pathname.substring(url.length + 1),
       createContext: async () => createContext?.(req),
       responseMeta,
     })

packages/trpc/src/runtime/client.ts

@@ -0,0 +1,33 @@
+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

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