@orpc/react 0.0.0-next.e9dc36e → 0.0.0-next.eaf61c7

package/README.md

@@ -0,0 +1,151 @@
+<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
+
+---
+
+## Highlights
+
+- **🔗 End-to-End Type Safety**: Ensure type-safe inputs, outputs, and errors from client to server.
+- **📘 First-Class OpenAPI**: Built-in support that fully adheres to the OpenAPI standard.
+- **📝 Contract-First Development**: Optionally define your API contract before implementation.
+- **⚙️ Framework Integrations**: Seamlessly integrate with TanStack Query (React, Vue, Solid, Svelte), Pinia Colada, and more.
+- **🚀 Server Actions**: Fully compatible with React Server Actions on Next.js, TanStack Start, and other platforms.
+- **🔠 Standard Schema Support**: Works out of the box with Zod, Valibot, ArkType, and other schema validators.
+- **🗃️ Native Types**: Supports native types like Date, File, Blob, BigInt, URL, and more.
+- **⏱️ Lazy Router**: Enhance cold start times with our lazy routing feature.
+- **📡 SSE & Streaming**: Enjoy full type-safe support for SSE and streaming.
+- **🌍 Multi-Runtime Support**: Fast and lightweight on Cloudflare, Deno, Bun, Node.js, and beyond.
+- **🔌 Extendability**: Easily extend functionality with plugins, middleware, and interceptors.
+- **🛡️ Reliability**: Well-tested, TypeScript-based, production-ready, and MIT licensed.
+
+## 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/openapi](https://www.npmjs.com/package/@orpc/openapi): Generate OpenAPI specs and handle OpenAPI requests.
+- [@orpc/nest](https://www.npmjs.com/package/@orpc/nest): Deeply integrate oRPC with [NestJS](https://nestjs.com/).
+- [@orpc/react](https://www.npmjs.com/package/@orpc/react): Utilities for integrating oRPC with React and React Server Actions.
+- [@orpc/tanstack-query](https://www.npmjs.com/package/@orpc/tanstack-query): [TanStack Query](https://tanstack.com/query/latest) integration.
+- [@orpc/vue-colada](https://www.npmjs.com/package/@orpc/vue-colada): Integration with [Pinia Colada](https://pinia-colada.esm.dev/).
+- [@orpc/hey-api](https://www.npmjs.com/package/@orpc/hey-api): [Hey API](https://heyapi.dev/) integration.
+- [@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,69 @@
+import { SafeResult, ORPCErrorJSON } from '@orpc/client';
+import { ActionableClient, UnactionableError } from '@orpc/server';
+import { Interceptor, PromiseWithError } from '@orpc/shared';
+
+interface UseServerActionOptions<TInput, TOutput, TError> {
+    interceptors?: Interceptor<{
+        input: TInput;
+    }, PromiseWithError<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;
+}
+/**
+ * Use a Server Action Hook
+ *
+ * @see {@link https://orpc.unnoq.com/docs/server-action#useserveraction-hook Server Action Hook Docs}
+ */
+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 { useServerAction };
+export type { UseServerActionErrorResult, UseServerActionExecuteOptions, UseServerActionExecuteRest, UseServerActionIdleResult, UseServerActionOptions, UseServerActionPendingResult, UseServerActionResultBase, UseServerActionSuccessResult };

package/dist/hooks/index.d.ts

@@ -0,0 +1,69 @@
+import { SafeResult, ORPCErrorJSON } from '@orpc/client';
+import { ActionableClient, UnactionableError } from '@orpc/server';
+import { Interceptor, PromiseWithError } from '@orpc/shared';
+
+interface UseServerActionOptions<TInput, TOutput, TError> {
+    interceptors?: Interceptor<{
+        input: TInput;
+    }, PromiseWithError<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;
+}
+/**
+ * Use a Server Action Hook
+ *
+ * @see {@link https://orpc.unnoq.com/docs/server-action#useserveraction-hook Server Action Hook Docs}
+ */
+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 { useServerAction };
+export type { UseServerActionErrorResult, UseServerActionExecuteOptions, UseServerActionExecuteRest, UseServerActionIdleResult, UseServerActionOptions, UseServerActionPendingResult, UseServerActionResultBase, UseServerActionSuccessResult };

package/dist/hooks/index.mjs

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

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+import { AnySchema } from '@orpc/contract';
+import { Context, ErrorMap, Meta, Lazyable, Procedure, CreateProcedureClientOptions } from '@orpc/server';
+import { Interceptor, MaybeOptionalOptions } from '@orpc/shared';
+export { getIssueMessage, parseFormData } from '@orpc/openapi-client/standard';
+
+interface FormAction {
+    (form: FormData): Promise<void>;
+}
+declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, Promise<any>>;
+/**
+ * Create a server action accept a form data and deserialize with bracket notation.
+ *
+ * @see {@link https://orpc.unnoq.com/docs/server-action#createformaction-utility Create Form Action Utility Docs}
+ * @see {@link https://orpc.unnoq.com/docs/openapi/bracket-notation Bracket Notation Docs}
+ */
+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 { createFormAction, orpcErrorToNextHttpFallbackInterceptor };
+export type { FormAction };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { AnySchema } from '@orpc/contract';
+import { Context, ErrorMap, Meta, Lazyable, Procedure, CreateProcedureClientOptions } from '@orpc/server';
+import { Interceptor, MaybeOptionalOptions } from '@orpc/shared';
+export { getIssueMessage, parseFormData } from '@orpc/openapi-client/standard';
+
+interface FormAction {
+    (form: FormData): Promise<void>;
+}
+declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, Promise<any>>;
+/**
+ * Create a server action accept a form data and deserialize with bracket notation.
+ *
+ * @see {@link https://orpc.unnoq.com/docs/server-action#createformaction-utility Create Form Action Utility Docs}
+ * @see {@link https://orpc.unnoq.com/docs/openapi/bracket-notation Bracket Notation Docs}
+ */
+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 { createFormAction, orpcErrorToNextHttpFallbackInterceptor };
+export type { FormAction };

package/dist/index.mjs

@@ -0,0 +1,28 @@
+import { ORPCError, createORPCErrorFromJson } from '@orpc/client';
+import { StandardBracketNotationSerializer } from '@orpc/openapi-client/standard';
+export { getIssueMessage, parseFormData } 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 = createORPCErrorFromJson(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,51 +1,51 @@
 {
   "name": "@orpc/react",
   "type": "module",
-  "version": "0.0.0-next.e9dc36e",
-  "author": {
-    "name": "unnoq",
-    "email": "contact@unnoq.com",
-    "url": "https://unnoq.com"
-  },
+  "version": "0.0.0-next.eaf61c7",
   "license": "MIT",
-  "homepage": "https://github.com/unnoq/orpc",
+  "homepage": "https://orpc.unnoq.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/unnoq/orpc.git",
+    "url": "git+https://github.com/unnoq/orpc.git",
     "directory": "packages/react"
   },
   "keywords": [
-    "unnoq"
+    "unnoq",
+    "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": [
-    "dist",
-    "src"
+    "dist"
   ],
   "peerDependencies": {
-    "@tanstack/react-query": ">=5.59.0",
-    "react": ">=18.3.0",
-    "@orpc/client": "0.0.0-next.e9dc36e",
-    "@orpc/server": "0.0.0-next.e9dc36e",
-    "@orpc/contract": "0.0.0-next.e9dc36e"
+    "react": ">=18.0.0"
   },
   "dependencies": {
-    "@orpc/shared": "0.0.0-next.e9dc36e"
+    "@orpc/client": "0.0.0-next.eaf61c7",
+    "@orpc/contract": "0.0.0-next.eaf61c7",
+    "@orpc/server": "0.0.0-next.eaf61c7",
+    "@orpc/shared": "0.0.0-next.eaf61c7",
+    "@orpc/openapi-client": "0.0.0-next.eaf61c7"
   },
   "devDependencies": {
-    "zod": "^3.23.8"
+    "react": "^19.1.0",
+    "zod": "^3.25.57"
   },
   "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"
   }