@orpc/react 0.27.0 → 1.0.0-beta.5

package/README.md

@@ -0,0 +1,156 @@
+<div align="center">
+  <image align="center" src="https://orpc.unnoq.com/logo.webp" width=280 alt="oRPC logo" />
+</div>
+
+<h1></h1>
+
+<div align="center">
+  <a href="https://codecov.io/gh/unnoq/orpc">
+    <img alt="codecov" src="https://codecov.io/gh/unnoq/orpc/branch/main/graph/badge.svg">
+  </a>
+  <a href="https://www.npmjs.com/package/@orpc/react">
+    <img alt="weekly downloads" src="https://img.shields.io/npm/dw/%40orpc%2Freact?logo=npm" />
+  </a>
+  <a href="https://github.com/unnoq/orpc/blob/main/LICENSE">
+    <img alt="MIT License" src="https://img.shields.io/github/license/unnoq/orpc?logo=open-source-initiative" />
+  </a>
+  <a href="https://discord.gg/TXEbwRBvQn">
+    <img alt="Discord" src="https://img.shields.io/discord/1308966753044398161?color=7389D8&label&logo=discord&logoColor=ffffff" />
+  </a>
+</div>
+
+<h3 align="center">Typesafe APIs Made Simple 🪄</h3>
+
+**oRPC is a powerful combination of RPC and OpenAPI**, makes it easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards, ensuring a smooth and enjoyable developer experience.
+
+---
+
+## Highlights
+
+- **End-to-End Type Safety 🔒**: Ensure complete type safety from inputs to outputs and errors, bridging server and client seamlessly.
+- **First-Class OpenAPI 📄**: Adheres to the OpenAPI standard out of the box, ensuring seamless integration and comprehensive API documentation.
+- **Contract-First Development 📜**: (Optional) Define your API contract upfront and implement it with confidence.
+- **Exceptional Developer Experience ✨**: Enjoy a streamlined workflow with robust typing and clear, in-code documentation.
+- **Multi-Runtime Support 🌍**: Run your code seamlessly on Cloudflare, Deno, Bun, Node.js, and more.
+- **Framework Integrations 🧩**: Supports Tanstack Query (React, Vue, Solid, Svelte), Pinia Colada, and more.
+- **Server Actions ⚡️**: Fully compatible with React Server Actions on Next.js, TanStack Start, and more.
+- **Standard Schema Support 🗂️**: Effortlessly work with Zod, Valibot, ArkType, and others right out of the box.
+- **Fast & Lightweight 💨**: Built on native APIs across all runtimes – optimized for speed and efficiency.
+- **Native Types 📦**: Enjoy built-in support for Date, File, Blob, BigInt, URL and more with no extra setup.
+- **Lazy Router ⏱️**: Improve cold start times with our lazy routing feature.
+- **SSE & Streaming 📡**: Provides SSE and streaming features – perfect for real-time notifications and AI-powered streaming responses.
+- **Reusability 🔄**: Write once and reuse your code across multiple purposes effortlessly.
+- **Extendability 🔌**: Easily enhance oRPC with plugins, middleware, and interceptors.
+- **Reliability 🛡️**: Well-tested, fully TypeScript, production-ready, and MIT licensed for peace of mind.
+- **Simplicity 💡**: Enjoy straightforward, clean code with no hidden magic.
+
+## Documentation
+
+You can find the full documentation [here](https://orpc.unnoq.com).
+
+## Packages
+
+- [@orpc/contract](https://www.npmjs.com/package/@orpc/contract): Build your API contract.
+- [@orpc/server](https://www.npmjs.com/package/@orpc/server): Build your API or implement API contract.
+- [@orpc/client](https://www.npmjs.com/package/@orpc/client): Consume your API on the client with type-safety.
+- [@orpc/react](https://www.npmjs.com/package/@orpc/react): Utilities for integrating oRPC with React and React Server Actions.
+- [@orpc/react-query](https://www.npmjs.com/package/@orpc/react-query): Integration with [React Query](https://tanstack.com/query/latest/docs/framework/react/overview).
+- [@orpc/vue-query](https://www.npmjs.com/package/@orpc/vue-query): Integration with [Vue Query](https://tanstack.com/query/latest/docs/framework/vue/overview).
+- [@orpc/solid-query](https://www.npmjs.com/package/@orpc/solid-query): Integration with [Solid Query](https://tanstack.com/query/latest/docs/framework/solid/overview).
+- [@orpc/svelte-query](https://www.npmjs.com/package/@orpc/svelte-query): Integration with [Svelte Query](https://tanstack.com/query/latest/docs/framework/svelte/overview).
+- [@orpc/vue-colada](https://www.npmjs.com/package/@orpc/vue-colada): Integration with [Pinia Colada](https://pinia-colada.esm.dev/).
+- [@orpc/openapi](https://www.npmjs.com/package/@orpc/openapi): Generate OpenAPI specs and handle OpenAPI requests.
+- [@orpc/zod](https://www.npmjs.com/package/@orpc/zod): More schemas that [Zod](https://zod.dev/) doesn't support yet.
+- [@orpc/valibot](https://www.npmjs.com/package/@orpc/valibot): OpenAPI spec generation from [Valibot](https://valibot.dev/).
+- [@orpc/arktype](https://www.npmjs.com/package/@orpc/arktype): OpenAPI spec generation from [ArkType](https://arktype.io/).
+
+## `@orpc/react`
+
+Provides utilities for integrating oRPC with React and React Server Actions. Read the [documentation](https://orpc.unnoq.com/docs/server-action) for more information.
+
+### `useServerAction` Hook
+
+The `useServerAction` hook simplifies invoking server actions in React.
+
+```tsx
+'use client'
+
+import { isDefinedError, onError } from '@orpc/client'
+import { useServerAction } from '@orpc/react'
+
+export function MyComponent() {
+  const { execute, data, error, status } = useServerAction(someAction, {
+    interceptors: [
+      onError((error) => {
+        if (isDefinedError(error)) {
+          console.error(error.data)
+          //                   ^ Typed error data
+        }
+      }),
+    ],
+  })
+
+  const action = async (form: FormData) => {
+    const name = form.get('name') as string
+    execute({ name })
+  }
+
+  return (
+    <form action={action}>
+      <input type="text" name="name" required />
+      <button type="submit">Submit</button>
+      {status === 'pending' && <p>Loading...</p>}
+    </form>
+  )
+}
+```
+
+### `createFormAction` Utility
+
+Creates a form action that can be used in React forms and deserializes with bracket notation.
+
+```tsx
+const dosomething = os
+  .input(
+    z.object({
+      user: z.object({
+        name: z.string(),
+        age: z.coerce.number(),
+      }),
+    })
+  )
+  .handler(({ input }) => {
+    console.log('Form action called!')
+    console.log(input)
+  })
+
+export const redirectSomeWhereForm = createFormAction(dosomething, {
+  interceptors: [
+    onSuccess(async () => {
+      redirect('/some-where')
+    }),
+  ],
+})
+
+export function MyComponent() {
+  return (
+    <form action={redirectSomeWhereForm}>
+      <input type="text" name="user[name]" required />
+      <input type="number" name="user[age]" required />
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+## Sponsors
+
+<p align="center">
+  <a href="https://cdn.jsdelivr.net/gh/unnoq/unnoq/sponsors.svg">
+    <img src='https://cdn.jsdelivr.net/gh/unnoq/unnoq/sponsors.svg'/>
+  </a>
+</p>
+
+## License
+
+Distributed under the MIT License. See [LICENSE](https://github.com/unnoq/orpc/blob/main/LICENSE) for more information.

package/dist/hooks/index.d.mts

@@ -0,0 +1,63 @@
+import { SafeResult, ORPCErrorJSON } from '@orpc/client';
+import { ActionableClient, UnactionableError } from '@orpc/server';
+import { Interceptor } from '@orpc/shared';
+
+interface UseServerActionOptions<TInput, TOutput, TError> {
+    interceptors?: Interceptor<{
+        input: TInput;
+    }, TOutput, TError>[];
+}
+interface UseServerActionExecuteOptions<TInput, TOutput, TError> extends Pick<UseServerActionOptions<TInput, TOutput, TError>, 'interceptors'> {
+}
+type UseServerActionExecuteRest<TInput, TOutput, TError> = undefined extends TInput ? [input?: TInput, options?: UseServerActionExecuteOptions<TInput, TOutput, TError>] : [input: TInput, options?: UseServerActionExecuteOptions<TInput, TOutput, TError>];
+interface UseServerActionResultBase<TInput, TOutput, TError> {
+    reset: () => void;
+    execute: (...rest: UseServerActionExecuteRest<TInput, TOutput, TError>) => Promise<SafeResult<TOutput, TError>>;
+}
+interface UseServerActionIdleResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: undefined;
+    data: undefined;
+    error: null;
+    isIdle: true;
+    isPending: false;
+    isSuccess: false;
+    isError: false;
+    status: 'idle';
+    executedAt: undefined;
+}
+interface UseServerActionPendingResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: TInput;
+    data: undefined;
+    error: null;
+    isIdle: false;
+    isPending: true;
+    isSuccess: false;
+    isError: false;
+    status: 'pending';
+    executedAt: Date;
+}
+interface UseServerActionSuccessResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: TInput;
+    data: TOutput;
+    error: null;
+    isIdle: false;
+    isPending: false;
+    isSuccess: true;
+    isError: false;
+    status: 'success';
+    executedAt: Date;
+}
+interface UseServerActionErrorResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: TInput;
+    data: undefined;
+    error: TError;
+    isIdle: false;
+    isPending: false;
+    isSuccess: false;
+    isError: true;
+    status: 'error';
+    executedAt: Date;
+}
+declare function useServerAction<TInput, TOutput, TError extends ORPCErrorJSON<any, any>>(action: ActionableClient<TInput, TOutput, TError>, options?: NoInfer<UseServerActionOptions<TInput, TOutput, UnactionableError<TError>>>): UseServerActionIdleResult<TInput, TOutput, UnactionableError<TError>> | UseServerActionSuccessResult<TInput, TOutput, UnactionableError<TError>> | UseServerActionErrorResult<TInput, TOutput, UnactionableError<TError>> | UseServerActionPendingResult<TInput, TOutput, UnactionableError<TError>>;
+
+export { type UseServerActionErrorResult, type UseServerActionExecuteOptions, type UseServerActionExecuteRest, type UseServerActionIdleResult, type UseServerActionOptions, type UseServerActionPendingResult, type UseServerActionResultBase, type UseServerActionSuccessResult, useServerAction };

package/dist/hooks/index.d.ts

@@ -0,0 +1,63 @@
+import { SafeResult, ORPCErrorJSON } from '@orpc/client';
+import { ActionableClient, UnactionableError } from '@orpc/server';
+import { Interceptor } from '@orpc/shared';
+
+interface UseServerActionOptions<TInput, TOutput, TError> {
+    interceptors?: Interceptor<{
+        input: TInput;
+    }, TOutput, TError>[];
+}
+interface UseServerActionExecuteOptions<TInput, TOutput, TError> extends Pick<UseServerActionOptions<TInput, TOutput, TError>, 'interceptors'> {
+}
+type UseServerActionExecuteRest<TInput, TOutput, TError> = undefined extends TInput ? [input?: TInput, options?: UseServerActionExecuteOptions<TInput, TOutput, TError>] : [input: TInput, options?: UseServerActionExecuteOptions<TInput, TOutput, TError>];
+interface UseServerActionResultBase<TInput, TOutput, TError> {
+    reset: () => void;
+    execute: (...rest: UseServerActionExecuteRest<TInput, TOutput, TError>) => Promise<SafeResult<TOutput, TError>>;
+}
+interface UseServerActionIdleResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: undefined;
+    data: undefined;
+    error: null;
+    isIdle: true;
+    isPending: false;
+    isSuccess: false;
+    isError: false;
+    status: 'idle';
+    executedAt: undefined;
+}
+interface UseServerActionPendingResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: TInput;
+    data: undefined;
+    error: null;
+    isIdle: false;
+    isPending: true;
+    isSuccess: false;
+    isError: false;
+    status: 'pending';
+    executedAt: Date;
+}
+interface UseServerActionSuccessResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: TInput;
+    data: TOutput;
+    error: null;
+    isIdle: false;
+    isPending: false;
+    isSuccess: true;
+    isError: false;
+    status: 'success';
+    executedAt: Date;
+}
+interface UseServerActionErrorResult<TInput, TOutput, TError> extends UseServerActionResultBase<TInput, TOutput, TError> {
+    input: TInput;
+    data: undefined;
+    error: TError;
+    isIdle: false;
+    isPending: false;
+    isSuccess: false;
+    isError: true;
+    status: 'error';
+    executedAt: Date;
+}
+declare function useServerAction<TInput, TOutput, TError extends ORPCErrorJSON<any, any>>(action: ActionableClient<TInput, TOutput, TError>, options?: NoInfer<UseServerActionOptions<TInput, TOutput, UnactionableError<TError>>>): UseServerActionIdleResult<TInput, TOutput, UnactionableError<TError>> | UseServerActionSuccessResult<TInput, TOutput, UnactionableError<TError>> | UseServerActionErrorResult<TInput, TOutput, UnactionableError<TError>> | UseServerActionPendingResult<TInput, TOutput, UnactionableError<TError>>;
+
+export { type UseServerActionErrorResult, type UseServerActionExecuteOptions, type UseServerActionExecuteRest, type UseServerActionIdleResult, type UseServerActionOptions, type UseServerActionPendingResult, type UseServerActionResultBase, type UseServerActionSuccessResult, useServerAction };

package/dist/hooks/index.mjs

@@ -0,0 +1,65 @@
+import { safe, ORPCError } from '@orpc/client';
+import { intercept, toArray } from '@orpc/shared';
+import { useState, useCallback, useMemo } from 'react';
+
+const INITIAL_STATE = {
+  data: void 0,
+  error: null,
+  isIdle: true,
+  isPending: false,
+  isSuccess: false,
+  isError: false,
+  status: "idle",
+  executedAt: void 0,
+  input: void 0
+};
+function useServerAction(action, options = {}) {
+  const [state, setState] = useState(INITIAL_STATE);
+  const reset = useCallback(() => {
+    setState(INITIAL_STATE);
+  }, []);
+  const execute = useCallback(async (input, executeOptions = {}) => {
+    const executedAt = /* @__PURE__ */ new Date();
+    setState({
+      data: void 0,
+      error: null,
+      isIdle: false,
+      isPending: true,
+      isSuccess: false,
+      isError: false,
+      status: "pending",
+      executedAt,
+      input
+    });
+    const result2 = await safe(intercept(
+      [...toArray(options.interceptors), ...toArray(executeOptions.interceptors)],
+      { input },
+      ({ input: input2 }) => action(input2).then(([error, data]) => {
+        if (error) {
+          throw ORPCError.fromJSON(error);
+        }
+        return data;
+      })
+    ));
+    setState({
+      data: result2.data,
+      error: result2.error,
+      isIdle: false,
+      isPending: false,
+      isSuccess: !result2.error,
+      isError: !!result2.error,
+      status: !result2.error ? "success" : "error",
+      executedAt,
+      input
+    });
+    return result2;
+  }, [action, ...toArray(options.interceptors)]);
+  const result = useMemo(() => ({
+    ...state,
+    reset,
+    execute
+  }), [state, reset, execute]);
+  return result;
+}
+
+export { useServerAction };

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import { AnySchema } from '@orpc/contract';
+import { Context, ErrorMap, Meta, Lazyable, Procedure, CreateProcedureClientOptions } from '@orpc/server';
+import { Interceptor, MaybeOptionalOptions } from '@orpc/shared';
+
+interface FormAction {
+    (form: FormData): Promise<void>;
+}
+declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, any, any>;
+declare function createFormAction<TInitialContext extends Context, TInputSchema extends AnySchema, TOutputSchema extends AnySchema, TErrorMap extends ErrorMap, TMeta extends Meta>(lazyableProcedure: Lazyable<Procedure<TInitialContext, any, TInputSchema, TOutputSchema, TErrorMap, TMeta>>, ...rest: MaybeOptionalOptions<CreateProcedureClientOptions<TInitialContext, TOutputSchema, TErrorMap, TMeta, Record<never, never>>>): FormAction;
+
+export { type FormAction, createFormAction, orpcErrorToNextHttpFallbackInterceptor };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { AnySchema } from '@orpc/contract';
+import { Context, ErrorMap, Meta, Lazyable, Procedure, CreateProcedureClientOptions } from '@orpc/server';
+import { Interceptor, MaybeOptionalOptions } from '@orpc/shared';
+
+interface FormAction {
+    (form: FormData): Promise<void>;
+}
+declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, any, any>;
+declare function createFormAction<TInitialContext extends Context, TInputSchema extends AnySchema, TOutputSchema extends AnySchema, TErrorMap extends ErrorMap, TMeta extends Meta>(lazyableProcedure: Lazyable<Procedure<TInitialContext, any, TInputSchema, TOutputSchema, TErrorMap, TMeta>>, ...rest: MaybeOptionalOptions<CreateProcedureClientOptions<TInitialContext, TOutputSchema, TErrorMap, TMeta, Record<never, never>>>): FormAction;
+
+export { type FormAction, createFormAction, orpcErrorToNextHttpFallbackInterceptor };

package/dist/index.mjs

@@ -0,0 +1,27 @@
+import { ORPCError } from '@orpc/client';
+import { StandardBracketNotationSerializer } from '@orpc/openapi-client/standard';
+import { createProcedureClient } from '@orpc/server';
+import { onError, resolveMaybeOptionalOptions, toArray } from '@orpc/shared';
+
+const orpcErrorToNextHttpFallbackInterceptor = onError((error) => {
+  if (error instanceof ORPCError && [401, 403, 404].includes(error.status)) {
+    const nextError = ORPCError.fromJSON(error.toJSON());
+    nextError.cause = error;
+    nextError.digest = `NEXT_HTTP_ERROR_FALLBACK;${error.status}`;
+    throw nextError;
+  }
+});
+function createFormAction(lazyableProcedure, ...rest) {
+  const options = resolveMaybeOptionalOptions(rest);
+  const client = createProcedureClient(lazyableProcedure, {
+    ...options,
+    interceptors: [orpcErrorToNextHttpFallbackInterceptor, ...toArray(options.interceptors)]
+  });
+  const bracketNotation = new StandardBracketNotationSerializer();
+  return async (form) => {
+    const input = bracketNotation.deserialize([...form]);
+    await client(input);
+  };
+}
+
+export { createFormAction, orpcErrorToNextHttpFallbackInterceptor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orpc/react",
   "type": "module",
-  "version": "0.27.0",
+  "version": "1.0.0-beta.5",
   "license": "MIT",
   "homepage": "https://orpc.unnoq.com",
   "repository": {
@@ -11,38 +11,41 @@
   },
   "keywords": [
     "unnoq",
-    "orpc"
+    "orpc",
+    "react",
+    "nextjs"
   ],
   "exports": {
     ".": {
-      "types": "./dist/src/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
-    "./🔒/*": {
-      "types": "./dist/src/*.d.ts"
+    "./hooks": {
+      "types": "./dist/hooks/index.d.mts",
+      "import": "./dist/hooks/index.mjs",
+      "default": "./dist/hooks/index.mjs"
     }
   },
   "files": [
-    "!**/*.map",
-    "!**/*.tsbuildinfo",
     "dist"
   ],
   "peerDependencies": {
-    "@tanstack/react-query": ">=5.55.0",
-    "react": ">=18.3.0",
-    "@orpc/client": "0.27.0",
-    "@orpc/server": "0.27.0",
-    "@orpc/contract": "0.27.0"
+    "react": ">=18.0.0"
   },
   "dependencies": {
-    "@orpc/shared": "0.27.0"
+    "@orpc/client": "1.0.0-beta.5",
+    "@orpc/contract": "1.0.0-beta.5",
+    "@orpc/openapi-client": "1.0.0-beta.5",
+    "@orpc/server": "1.0.0-beta.5",
+    "@orpc/shared": "1.0.0-beta.5"
   },
   "devDependencies": {
-    "zod": "^3.24.1"
+    "react": "^19.1.0",
+    "zod": "^3.24.2"
   },
   "scripts": {
-    "build": "tsup --clean --sourcemap --entry.index=src/index.ts --format=esm --onSuccess='tsc -b --noCheck'",
+    "build": "unbuild",
     "build:watch": "pnpm run build --watch",
     "type:check": "tsc -b"
   }