type exporting + astro demo

Cargo.toml

@@ -1,11 +1,11 @@
 [workspace]
 resolver = "2"
 
-members = ["./rspc", "./integrations/*", "middleware/*", "./examples/*"]
+members = ["./rspc", "./integrations/*", "middleware/*", "./examples/axum"]
 
 [workspace.lints.rust]
 unsafe_code = { level = "forbid", priority = -1 }
-missing_docs = { level = "warn", priority = -1 } # TODO: Enable this
+missing_docs = { level = "warn", priority = -1 }  # TODO: Enable this
 
 [workspace.lints.clippy]
 all = { level = "warn", priority = -1 }

biome.json

@@ -12,7 +12,8 @@
 		"rules": {
 			"recommended": true,
 			"suspicious": {
-				"noExplicitAny": "off"
+				"noExplicitAny": "off",
+				"noConfusingVoidType": "off"
 			},
 			"style": {
 				"noNonNullAssertion": "off"

examples/axum/Cargo.toml

@@ -19,3 +19,4 @@ serde = { version = "1", features = ["derive"] }
 specta = { version = "=2.0.0-rc.15", features = ["derive"] } # TODO: Drop requirement on `derive`
 specta-util = "0.0.2" # TODO: We need this for `TypeCollection` which is cringe
 specta-typescript = "0.0.2"
+futures = "0.3.30"

examples/axum/src/api.rs

@@ -1,7 +1,7 @@
 use std::{error, marker::PhantomData, path::PathBuf, sync::Arc};
 
 use rspc::{
-    procedure::{Procedure, ProcedureBuilder, ResolverInput, ResolverOutput},
+    procedure::{Procedure, ProcedureBuilder, ProcedureKind, ResolverInput, ResolverOutput},
     Infallible,
 };
 use specta_typescript::Typescript;

examples/axum/src/api/store.rs

@@ -7,7 +7,7 @@ pub fn mount() -> Router {
         .procedure("get", {
             <BaseProcedure>::builder()
                 .with(OpenAPI::get("/api/get").build())
-                .mutation(|ctx, _: ()| async move {
+                .query(|ctx, _: ()| async move {
                     // TODO
 
                     Ok("Hello From rspc!")

examples/axum/src/main.rs

@@ -24,7 +24,7 @@ async fn main() {
         .route("/", get(|| async { "Hello, World!" }))
         .nest(
             "/rspc",
-            rspc_axum::Endpoint::new(router.clone(), ctx_fn.clone()),
+            rspc_axum::Endpoint::new(router.clone(), ctx_fn.clone()).build(),
         )
         .nest("/", rspc_openapi::mount(router, ctx_fn));
 

examples/web/.gitignore

@@ -0,0 +1,24 @@
+# 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
+
+# jetbrains setting folder
+.idea/

examples/web/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/web/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/web/README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+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:
+
+```text
+/
+├── 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/web/astro.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config';
+import solidJs from "@astrojs/solid-js";
+import react from "@astrojs/react";
+import svelte from "@astrojs/svelte";
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [solidJs(), react(), svelte(), tailwind()]
+});

examples/web/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "web",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.8.2",
+		"@astrojs/react": "^3.6.0",
+		"@astrojs/solid-js": "^4.4.0",
+		"@astrojs/svelte": "^5.6.0",
+		"@astrojs/tailwind": "^5.1.0",
+		"@rspc/client": "workspace:*",
+		"@rspc/react-query": "workspace:*",
+		"@rspc/solid-query": "workspace:*",
+		"@rspc/svelte-query": "workspace:*",
+		"@tanstack/react-query": "^5.51.1",
+		"@tanstack/solid-query": "^5.51.2",
+		"@tanstack/svelte-query": "^5.51.1",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"astro": "^4.11.6",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"solid-js": "^1.8.18",
+		"svelte": "^4.2.18",
+		"tailwindcss": "^3.4.6",
+		"typescript": "^5.5.3"
+	}
+}

examples/web/src/components/react/Component.tsx

@@ -0,0 +1,3 @@
+export function Component() {
+	return <div>Hello from React!</div>;
+}

examples/web/src/components/react/Provider.tsx

@@ -0,0 +1,12 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { PropsWithChildren } from "react";
+
+import { client, queryClient, rspc } from ".";
+
+export function Provider({ children }: PropsWithChildren) {
+	return (
+		<rspc.Provider client={client} queryClient={queryClient}>
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		</rspc.Provider>
+	);
+}

examples/web/src/components/react/index.ts

@@ -0,0 +1,12 @@
+import { createClient } from "@rspc/client";
+import { createReactQueryProxy } from "@rspc/react-query";
+import { QueryClient } from "@tanstack/react-query";
+
+import type { Procedures } from "../../../../axum/bindings";
+
+export const client = createClient<Procedures>();
+export const rspc = createReactQueryProxy<Procedures>();
+export const queryClient = new QueryClient();
+
+export * from "./Provider";
+export * from "./Component";

examples/web/src/components/solid/Component.tsx

@@ -0,0 +1,5 @@
+/** @jsxImportSource solid-js */
+
+export function Component() {
+	return <div>Hello from Solid!</div>;
+}

examples/web/src/components/solid/Provider.tsx

@@ -0,0 +1,16 @@
+/** @jsxImportSource solid-js */
+
+import { QueryClientProvider } from "@tanstack/solid-query";
+import { ParentProps } from "solid-js";
+
+import { client, queryClient, rspc } from ".";
+
+export function Provider(props: ParentProps) {
+	return (
+		<rspc.Provider client={client} queryClient={queryClient}>
+			<QueryClientProvider client={queryClient}>
+				{props.children}
+			</QueryClientProvider>
+		</rspc.Provider>
+	);
+}

examples/web/src/components/solid/index.ts

@@ -0,0 +1,12 @@
+import { createClient } from "@rspc/client";
+import { createSolidQueryProxy } from "@rspc/solid-query";
+import { QueryClient } from "@tanstack/solid-query";
+
+import type { Procedures } from "../../../../axum/bindings";
+
+export const client = createClient<Procedures>();
+export const rspc = createSolidQueryProxy<Procedures>();
+export const queryClient = new QueryClient();
+
+export * from "./Provider";
+export * from "./Component";

examples/web/src/components/svelte.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { createClient } from "@rspc/client";
+	import { createSvelteQueryProxy } from "@rspc/svelte-query";
+	import type { Procedures } from "../../../axum/bindings";
+
+	const client = createClient<Procedures>();
+
+	client.store.get.query();
+
+	const rspc = createSvelteQueryProxy<Procedures>();
+
+	rspc.store.get.createQuery();
+	rspc.store.set.createMutation();
+	rspc.chat.subscribe.createSubscription();
+</script>

examples/web/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

examples/web/src/pages/index.astro

@@ -0,0 +1,22 @@
+---
+import * as React from "../components/react";
+import * as Solid from "../components/react";
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<React.Provider>
+			<React.Component />
+		</React.Provider>
+		<Solid.Provider>
+			<Solid.Component />
+		</Solid.Provider>
+	</body>
+</html>

examples/web/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}

examples/web/tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

examples/web/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "astro/tsconfigs/strict",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "react"
+	},
+	"include": ["src/components/react/*"],
+	"exclude": ["src/components/solid/*"]
+}

packages/client/src/UntypedClient.ts

@@ -1,4 +1,4 @@
-import type { ProcedureVariant } from "./types";
+import type { ProcedureKind } from "./types";
 
 export interface SubscriptionObserver<TValue, TError> {
 	onStarted: () => void;
@@ -10,15 +10,15 @@ export interface SubscriptionObserver<TValue, TError> {
 
 export class UntypedClient {
 	private $request(args: {
-		type: ProcedureVariant;
+		type: ProcedureKind;
 		input: unknown;
 		path: string;
 	}) {
 		console.log(args);
 	}
 
 	private $requestAsPromise(args: {
-		type: ProcedureVariant;
+		type: ProcedureKind;
 		path: string;
 		input: unknown;
 	}) {

packages/client/src/index.test.ts

@@ -5,19 +5,19 @@ type NestedProcedures = {
 	nested: {
 		procedures: {
 			one: {
-				variant: "query";
+				kind: "query";
 				input: string;
 				result: number;
 				error: boolean;
 			};
 			two: {
-				variant: "mutation";
+				kind: "mutation";
 				input: string;
 				result: { id: string; name: string };
 				error: { status: "NOT_FOUND" };
 			};
 			three: {
-				variant: "subscription";
+				kind: "subscription";
 				input: string;
 				result: { id: string; name: string };
 				error: { status: "NOT_FOUND" };