Custom errors on frontend

.gitignore

@@ -41,4 +41,6 @@ demo.bindings.ts
 demo2.bindings.ts
 
 # /_ - I use it for stashing WIP stuff
-/_
+/_
+
+.svelte-kit/

Cargo.toml

@@ -76,7 +76,7 @@ tauri = { version = "1.4.1", features = ["api-all"] }
 # Benchmark
 criterion = { version = "0.5", features = ["async_tokio", "html_reports"] }
 pprof = { version = "0.12.0", features = ["flamegraph", "criterion", "protobuf-codec", "frame-pointer"] }
-rspc_legacy = { package = "rspc", version = "0.1.3" }
+# rspc_legacy = { package = "rspc", version = "0.1.3" }
 
 [workspace]
 members = ["./crates/*", "./examples", "./examples/axum", "./examples/vercel", "./examples/tauri/src-tauri"]

examples/astro/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/astro/README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

examples/astro/astro.config.mjs

@@ -1,8 +1,22 @@
 import { defineConfig } from "astro/config";
-
 import react from "@astrojs/react";
 import solid from "@astrojs/solid-js";
+import svelte from "@astrojs/svelte";
+import tailwind from "@astrojs/tailwind";
 
+// https://astro.build/config
 export default defineConfig({
-  integrations: [react(), solid()],
+  integrations: [
+    react({
+      include: ["**/react/*"],
+    }),
+    solid({
+      include: ["**/solid/*"],
+    }),
+    svelte(),
+    tailwind(),
+  ],
+  server: {
+    port: 3000,
+  },
 });

examples/astro/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@rspc/examples-astro",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "A project to test the RSPC frontend libraries",
-  "keywords": [],
-  "author": "Oscar Beaumont",
-  "license": "MIT",
-  "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "astro dev"
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^3.0.0",
+    "@astrojs/solid-js": "^3.0.0",
+    "@astrojs/svelte": "^4.0.0",
+    "@astrojs/tailwind": "^5.0.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^3.0.7",
+    "tailwindcss": "^3.0.24"
   },
   "dependencies": {
     "@rspc/client": "workspace:*",
     "@rspc/react-query": "workspace:*",
     "@rspc/solid-query": "workspace:*",
+    "@rspc/svelte-query": "workspace:*",
     "@rspc/tauri": "workspace:^",
-    "@tanstack/react-query": "^4.29.25",
-    "@tanstack/solid-query": "^4.29.25",
-    "astro": "2.8.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "solid-js": "^1.7.8"
-  },
-  "devDependencies": {
-    "@astrojs/react": "^2.2.1",
-    "@astrojs/solid-js": "^2.2.0",
-    "@types/react": "^18.2.15",
-    "typescript": "^5.1.6"
-  },
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@babel/core"
-      ]
-    }
+    "@tanstack/react-query": "^4.33.0",
+    "@tanstack/solid-query": "^4.33.0",
+    "@tanstack/svelte-query": "^4.33.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "solid-js": "^1.4.3",
+    "svelte": "^4.0.0"
   }
 }

examples/astro/src/components/react.tsx → examples/astro/src/components/react/index.tsx

@@ -1,19 +1,21 @@
+/** @jsxImportSource react */
+
 import { initRspc, httpLink, wsLink } from "@rspc/client";
 import { tauriLink } from "@rspc/tauri";
 import { createReactQueryHooks } from "@rspc/react-query";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { useState } from "react";
 
 // Export from Rust. Run `cargo run -p example-axum` to start server and export it!
-import type { Procedures } from "../../../bindings";
+import type { Procedures } from "../../../../bindings";
 
 const fetchQueryClient = new QueryClient();
 const fetchClient = initRspc<Procedures>({
   links: [
     // loggerLink(),
 
     httpLink({
-      url: "http://[::]:4000/rspc",
+      url: "http://localhost:4000/rspc",
 
       // You can enable batching -> This is generally a good idea unless your doing HTTP caching
       // batch: true,
@@ -57,21 +59,22 @@ const tauriClient = initRspc<Procedures>({
 
 // TODO: Allowing one of these to be used for multiple clients! -> Issue is with key mapper thing
 // TODO: Right now we are abusing it not working so plz don't do use one of these with multiple clients in your own apps.
-export const rspc = createReactQueryHooks<Procedures>(fetchClient);
+export const rspc = createReactQueryHooks<Procedures>();
 // export const rspc2 = createReactQueryHooks<Procedures>(wsClient);
 
 function Example({ name }: { name: string }) {
   const [rerenderProp, setRendererProp] = useState(Date.now().toString());
-  const { data: version } = rspc.useQuery(["version"]);
-  const { data: transformMe } = rspc.useQuery(["transformMe"]);
-  const { data: echo } = rspc.useQuery(["echo", "Hello From Frontend!"]);
-  const { mutate, isLoading } = rspc.useMutation("sendMsg");
-  const { error } = rspc.useQuery(["error"], {
+  const version = rspc.useQuery(["version"]);
+  const transformMe = rspc.useQuery(["transformMe"]);
+  const echo = rspc.useQuery(["echo", "Hello From Frontend!"]);
+  const sendMsg = rspc.useMutation("sendMsg");
+  const errorQuery = rspc.useQuery(["error"], {
     retry: false,
   });
 
   const [subId, setSubId] = useState<number | null>(null);
   const [enabled, setEnabled] = useState(true);
+
   rspc.useSubscription(["testSubscriptionShutdown"], {
     enabled,
     onData(msg) {
@@ -86,17 +89,18 @@ function Example({ name }: { name: string }) {
       }}
     >
       <h1>{name}</h1>
-      <p>Using rspc version: {version}</p>
-      <p>Echo response: {echo}</p>
-      <p>
-        Error returned: {error?.code} {error?.message}
-      </p>
-      <p>Transformed Query: {transformMe}</p>
+      <p>Using rspc version: {version.data}</p>
+      <p>Echo response: {echo.data}</p>
+      <p>Error returned: {JSON.stringify(errorQuery.error)} </p>
+      <p>Transformed Query: {transformMe.data}</p>
       <ExampleSubscription key={rerenderProp} rerenderProp={rerenderProp} />
       <button onClick={() => setRendererProp(Date.now().toString())}>
         Rerender subscription
       </button>
-      <button onClick={() => mutate("Hello!")} disabled={isLoading}>
+      <button
+        onClick={() => sendMsg.mutate("Hello!")}
+        disabled={sendMsg.isLoading}
+      >
         Send Msg!
       </button>
       <br />
@@ -136,7 +140,6 @@ export default function App() {
       >
         <h1>React</h1>
         <QueryClientProvider client={fetchQueryClient}>
-          {/* TODO: rspc.Provider implies fetchClient??? */}
           <rspc.Provider client={fetchClient} queryClient={fetchQueryClient}>
             <Example name="Fetch Transport" />
           </rspc.Provider>