feat: breat trpc-react-query into its own package

Signed-off-by: Marc MacLeod <[email protected]>

README.md

@@ -172,6 +172,7 @@ See the [streaming-kitchen-sink](examples/streaming-kitchen-sink/README.md) and
 | [@ssrx/react](packages/react)                                   | [![@ssrx/react version](https://img.shields.io/npm/v/@ssrx/react.svg?label=%20)](packages/react/CHANGELOG.md)                                                    |
 | [@ssrx/remix](packages/remix)                                   | [![@ssrx/remix version](https://img.shields.io/npm/v/@ssrx/remix.svg?label=%20)](packages/remix/CHANGELOG.md)                                                    |
 | [@ssrx/solid](packages/solid)                                   | [![@ssrx/solid version](https://img.shields.io/npm/v/@ssrx/solid.svg?label=%20)](packages/solid/CHANGELOG.md)                                                    |
+| [@ssrx/trpc-react-query](packages/trpc-react-query)             | [![@ssrx/trpc-react-query version](https://img.shields.io/npm/v/@ssrx/trpc-react-query.svg?label=%20)](packages/trpc-react-query/CHANGELOG.md)                   |
 | [@ssrx/plugin-react-router](packages/plugin-react-router)       | [![@ssrx/plugin-react-router version](https://img.shields.io/npm/v/@ssrx/plugin-react-router.svg?label=%20)](packages/solid/CHANGELOG.md)                        |
 | [@ssrx/plugin-solid-router](packages/plugin-solid-router)       | [![@ssrx/plugin-solid-router version](https://img.shields.io/npm/v/@ssrx/plugin-solid-router.svg?label=%20)](packages/plugin-solid-router/CHANGELOG.md)          |
 | [@ssrx/plugin-tanstack-query](packages/plugin-tanstack-query)   | [![@ssrx/plugin-tanstack-query version](https://img.shields.io/npm/v/@ssrx/plugin-tanstack-query.svg?label=%20)](packages/plugin-tanstack-query/CHANGELOG.md)    |

packages/plugin-trpc-react/package.json

@@ -30,12 +30,13 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5",
-    "@trpc/client": "^10.40.0",
-    "@trpc/server": "^10.40.0"
+    "@trpc/client": "^10",
+    "@trpc/server": "^10"
   },
   "dependencies": {
     "@ssrx/plugin-tanstack-query": "*",
-    "@ssrx/renderer": "^0.2.0"
+    "@ssrx/renderer": "^0.2.0",
+    "@ssrx/trpc-react-query": "*"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.15.0",

packages/plugin-trpc-react/src/plugin.tsx

@@ -1,15 +1,13 @@
 import type { TanstackQueryPluginCtx } from '@ssrx/plugin-tanstack-query';
 import { PLUGIN_ID as QUERY_PLUGIN_ID } from '@ssrx/plugin-tanstack-query';
 import { defineRenderPlugin } from '@ssrx/renderer';
+import { type CreateTRPCQueryOptions, createTRPCReact } from '@ssrx/trpc-react-query';
 import type { HTTPBatchLinkOptions, TRPCLink } from '@trpc/client';
 import { createTRPCUntypedClient } from '@trpc/client';
 import { httpBatchLink } from '@trpc/client';
 import type { AnyRouter } from '@trpc/server';
 import { observable } from '@trpc/server/observable';
 
-import { createTRPCReact } from './trpc-react/index.ts';
-import type { CreateTRPCQueryOptions } from './trpc-react/types.ts';
-
 export const PLUGIN_ID = 'trpc' as const;
 
 export type TrpcPluginOpts<TRouter extends AnyRouter> = {

packages/trpc-react-query/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['../../.eslintrc.cjs'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+};

packages/trpc-react-query/CHANGELOG.md

@@ -0,0 +1 @@
+# @ssrx/trpc-react

packages/trpc-react-query/README.md

@@ -0,0 +1,33 @@
+# @ssrx/trpc-react
+
+Similar https://github.com/trpc/trpc/tree/main/packages/react-query, with the following major changes:
+
+- Does not rely on global/react context - supports instanced use (for example in SSR where a fresh client per request is
+  required).
+- Scoped + typesafe `.$invalidate()` function on queries, e.g. `trpc.articles.$invalidate({ id })`.
+
+**Example instantiation from a react-query client:**
+
+```ts
+import type { QueryClient } from '@tanstack/react-query';
+import { createTRPCUntypedClient } from '@trpc/client';
+import { type CreateTRPCQueryOptions, createTRPCReact } from '@ssrx/trpc-react-query';
+
+export const createTrpc = ({
+  queryClient,
+  createTRPCQueryOptions,
+}: {
+  queryClient: QueryClient;
+  options?: CreateTRPCQueryOptions;
+}) => {
+  const trpcClient = createTRPCUntypedClient();
+
+  const trpc = createTRPCReact<TRouter>({
+    client: trpcClient,
+    queryClient,
+    ...createTRPCQueryOptions,
+  });
+
+  return trpc;
+};
+```

packages/trpc-react-query/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ssrx/trpc-react-query",
+  "version": "0.0.1",
+  "sideEffects": false,
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "trpc",
+    "react",
+    "react-query"
+  ],
+  "author": "marbemac (https://github.com/marbemac)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marbemac/ssrx",
+    "directory": "packages/trpc-react-query"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5",
+    "react": "*"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.15.0",
+    "@trpc/client": "10.45.0",
+    "@trpc/server": "10.45.0"
+  }
+}

packages/plugin-trpc-react/src/trpc-react/index.ts → packages/trpc-react-query/src/index.ts

@@ -1,2 +1,3 @@
 export { type CreateTRPCReact, createTRPCReact } from './createTRPCReact.ts';
 export { createTRPCProvider } from './provider.ts';
+export type { CreateTRPCQueryOptions } from './types.ts';

packages/trpc-react-query/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}

packages/trpc-react-query/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  dts: true,
+  format: 'esm',
+  sourcemap: true,
+  clean: true,
+  external: ['react'],
+  noExternal: ['@trpc/server', '@trpc/client'],
+  entry: ['src/index.ts'],
+});

yarn.lock

@@ -2615,13 +2615,14 @@ __metadata:
   dependencies:
     "@ssrx/plugin-tanstack-query": "npm:*"
     "@ssrx/renderer": "npm:^0.2.0"
+    "@ssrx/trpc-react-query": "npm:*"
     "@tanstack/react-query": "npm:^5.15.0"
     "@trpc/client": "npm:10.45.0"
     "@trpc/server": "npm:10.45.0"
   peerDependencies:
     "@tanstack/react-query": ^5
-    "@trpc/client": ^10.40.0
-    "@trpc/server": ^10.40.0
+    "@trpc/client": ^10
+    "@trpc/server": ^10
   languageName: unknown
   linkType: soft
 
@@ -2722,6 +2723,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@ssrx/trpc-react-query@npm:*, @ssrx/trpc-react-query@workspace:packages/trpc-react-query":
+  version: 0.0.0-use.local
+  resolution: "@ssrx/trpc-react-query@workspace:packages/trpc-react-query"
+  dependencies:
+    "@tanstack/react-query": "npm:^5.15.0"
+    "@trpc/client": "npm:10.45.0"
+    "@trpc/server": "npm:10.45.0"
+  peerDependencies:
+    "@tanstack/react-query": ^5
+    react: "*"
+  languageName: unknown
+  linkType: soft
+
 "@ssrx/vite@workspace:*, @ssrx/vite@workspace:packages/vite":
   version: 0.0.0-use.local
   resolution: "@ssrx/vite@workspace:packages/vite"
@@ -4252,9 +4266,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565":
-  version: 1.0.30001571
-  resolution: "caniuse-lite@npm:1.0.30001571"
-  checksum: 98a4f82bc969e7037ddafd1d9a8683b14b611b4e471d09e1e5825b0dbe9ea38460aa53538e830912f15f3ed43ce5f3e24133537bbd38ea9a36f263a46ec969b9
+  version: 1.0.30001572
+  resolution: "caniuse-lite@npm:1.0.30001572"
+  checksum: 28f83cd32224c35bb237ec9128ff676bb2cbbf099a45cfe4110ab60fa4ac6245a93579e7f19e048210ac84ea768988b7dfc67feb8768f4fcf7dc70bcaee268f5
   languageName: node
   linkType: hard