feat(vue-colada): Pinia Colada integration (#65)

* wip

* e2e tests

* lint fixed

* docs

* docs

* update pnpm lock

* fix docs

Author: dinwwwh

apps/content/content/docs/client/vue-colada.mdx

@@ -0,0 +1,71 @@
+---
+title: Vue Colada
+description: Simplify oRPC usage with minimal integration Pinia Colada
+---
+
+## Installation
+
+```package-install
+@orpc/client @orpc/vue-colada @pinia/colada
+```
+
+## Setup
+
+```ts twoslash
+import { createORPCVueColadaUtils } from '@orpc/vue-colada';
+import { createORPCClient } from '@orpc/client';
+import { ORPCLink } from '@orpc/client/fetch';
+import type { router } from 'examples/server';
+
+const orpcLink = new ORPCLink({
+  url: 'http://localhost:3000/api',
+  // fetch: optional override for the default fetch function
+  // headers: provide additional headers
+});
+
+// Create an ORPC client
+export const client = createORPCClient<typeof router>(orpcLink);
+
+// Create Vue Query utilities for ORPC
+export const orpc = createORPCVueColadaUtils(client);
+
+// @noErrors
+orpc.getting.
+//           ^|
+```
+
+## Multiple ORPC Instances
+
+To prevent conflicts when using multiple ORPC instances, you can provide a unique base path to `createORPCVueColadaUtils`.
+
+```tsx twoslash
+import { createORPCVueColadaUtils } from '@orpc/vue-colada'
+
+// Create separate ORPC instances with unique base paths
+const userORPC = createORPCVueColadaUtils('fake-client' as any, ['__user-api__'])
+const postORPC = createORPCVueColadaUtils('fake-client' as any, ['__post-api__'])
+```
+
+This ensures that each instance manages its own set of query keys and avoids any conflicts.
+
+## Usage
+
+### Standard Queries and Mutations
+
+```ts twoslash
+import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
+import { orpc } from 'examples/vue-colada'
+
+// Fetch data
+const { data: gettingData } = useQuery(orpc.getting.queryOptions({ input: { name: 'unnoq' } }))
+
+// Perform mutations
+const { mutate: postMutate } = useMutation(orpc.post.create.mutationOptions())
+
+// Invalidate queries
+const queryCache = useQueryCache()
+queryCache.invalidateQueries({ key: orpc.key() }) // Invalidate all queries
+queryCache.invalidateQueries({ key: orpc.post.find.key({ input: { id: 'example' } }) }) // Specific queries
+```
+
+> **Note**: This library enhances [Pinia Colada](https://pinia-colada.esm.dev/) by managing keys and functions for you, providing a seamless developer experience.

apps/content/content/home/landing.mdx

@@ -83,7 +83,7 @@ mutate({
 });
 ```
 
-We now support [React Query Integration](/docs/client/react-query) and [Vue Query Integration](/docs/client/vue-query).
+We now support [React Query Integration](/docs/client/react-query), [Vue Query Integration](/docs/client/vue-query), and [Pinia Colada Integration](/docs/client/vue-colada).
 
 ## Access via OpenAPI Standard
 

apps/content/examples/vue-colada.ts

@@ -0,0 +1,5 @@
+import type { RouterClient } from '@orpc/server'
+import type { router } from 'examples/server'
+import { createORPCVueColadaUtils } from '@orpc/vue-colada'
+
+export const orpc = createORPCVueColadaUtils({} as RouterClient<typeof router /** or contract router */, unknown>)

apps/content/package.json

@@ -28,6 +28,7 @@
     "@orpc/react": "workspace:*",
     "@orpc/react-query": "workspace:*",
     "@orpc/server": "workspace:*",
+    "@orpc/vue-colada": "workspace:*",
     "@orpc/vue-query": "workspace:*",
     "@orpc/zod": "workspace:*",
     "@tanstack/react-query": "^5.62.7",

apps/content/tsconfig.json

@@ -32,6 +32,7 @@
     { "path": "../../packages/react" },
     { "path": "../../packages/react-query" },
     { "path": "../../packages/vue-query" },
+    { "path": "../../packages/vue-colada" },
     { "path": "../../packages/zod" },
     { "path": "../../packages/next" }
   ],

packages/server/src/fetch/index.ts

@@ -2,4 +2,5 @@ export * from './composite-handler'
 export * from './orpc-handler'
 export * from './orpc-payload-codec'
 export * from './orpc-procedure-matcher'
+export * as SuperJSON from './super-json'
 export * from './types'

packages/vue-colada/.gitignore

@@ -0,0 +1,26 @@
+# Hidden folders and files
+.*
+!.gitignore
+!.*.example
+
+# Common generated folders
+logs/
+node_modules/
+out/
+dist/
+dist-ssr/
+build/
+coverage/
+temp/
+
+# Common generated files
+*.log
+*.log.*
+*.tsbuildinfo
+*.vitest-temp.json
+vite.config.ts.timestamp-*
+vitest.config.ts.timestamp-*
+
+# Common manual ignore files
+*.local
+*.pem

packages/vue-colada/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@orpc/vue-colada",
+  "type": "module",
+  "version": "0.21.0",
+  "license": "MIT",
+  "homepage": "https://orpc.unnoq.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unnoq/orpc.git",
+    "directory": "packages/vue-colada"
+  },
+  "keywords": [
+    "unnoq",
+    "orpc",
+    "vue",
+    "vue-colada",
+    "pinia-colada",
+    "tanstack"
+  ],
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/src/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      },
+      "./🔒/*": {
+        "types": "./dist/src/*.d.ts"
+      }
+    }
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./🔒/*": {
+      "types": "./src/*.ts"
+    }
+  },
+  "files": [
+    "!**/*.map",
+    "!**/*.tsbuildinfo",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup --clean --sourcemap --entry.index=src/index.ts --format=esm --onSuccess='tsc -b --noCheck'",
+    "build:watch": "pnpm run build --watch",
+    "type:check": "tsc -b"
+  },
+  "peerDependencies": {
+    "@orpc/client": "workspace:*",
+    "@orpc/contract": "workspace:*",
+    "@orpc/server": "workspace:*",
+    "@pinia/colada": ">=0.13.1",
+    "vue": ">=3.3.0"
+  },
+  "dependencies": {
+    "@orpc/server": "workspace:*"
+  },
+  "devDependencies": {
+    "@pinia/colada": "^0.13.1",
+    "@vue/test-utils": "^2.4.6",
+    "pinia": "^2.3.0"
+  }
+}

packages/vue-colada/src/index.ts

@@ -0,0 +1,9 @@
+import { createRouterUtils } from './utils-router'
+
+export * from './key'
+export * from './types'
+export * from './utils-general'
+export * from './utils-procedure'
+export * from './utils-router'
+
+export const createORPCVueColadaUtils = createRouterUtils

packages/vue-colada/src/key.test.ts

@@ -0,0 +1,15 @@
+import { buildKey } from './key'
+
+describe('buildKey', () => {
+  it('works', () => {
+    expect(buildKey(['path'])).toEqual(['__ORPC__', 'path'])
+    expect(buildKey(['path', 'path2'], { input: { a: 1 } }))
+      .toEqual(['__ORPC__', 'path', 'path2', { input: '{"data":{"a":1},"meta":[]}' }])
+    expect(buildKey(['path'], { input: undefined }))
+      .toEqual(['__ORPC__', 'path'])
+
+    const date = new Date()
+    expect(buildKey(['path', 'path2'], { input: { a: date } }))
+      .toEqual(['__ORPC__', 'path', 'path2', { input: `{"data":{"a":"${date.toISOString()}"},"meta":[["date",["a"]]]}` }])
+  })
+})