@orpc/react 0.0.0-next.ff41b3a → 0.0.0-next.ff7ad2e

package/README.md

@@ -30,7 +30,8 @@
 - **🔗 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.
+- **🔍 First-Class OpenTelemetry**: Seamlessly integrate with OpenTelemetry for observability.
+- **⚙️ Framework Integrations**: Seamlessly integrate with TanStack Query (React, Vue, Solid, Svelte, Angular), SWR, 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.
@@ -38,7 +39,6 @@
 - **📡 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
 
@@ -49,13 +49,14 @@ You can find the full documentation [here](https://orpc.unnoq.com).
 - [@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/otel](https://www.npmjs.com/package/@orpc/otel): [OpenTelemetry](https://opentelemetry.io/) integration for observability.
+- [@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/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/tanstack-query](https://www.npmjs.com/package/@orpc/tanstack-query): [TanStack Query](https://tanstack.com/query/latest) integration.
+- [@orpc/experimental-react-swr](https://www.npmjs.com/package/@orpc/experimental-react-swr): [SWR](https://swr.vercel.app/) integration.
 - [@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/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/).

package/dist/hooks/index.d.mts

@@ -1,11 +1,11 @@
 import { SafeResult, ORPCErrorJSON } from '@orpc/client';
 import { ActionableClient, UnactionableError } from '@orpc/server';
-import { Interceptor } from '@orpc/shared';
+import { Interceptor, PromiseWithError } from '@orpc/shared';
 
 interface UseServerActionOptions<TInput, TOutput, TError> {
     interceptors?: Interceptor<{
         input: TInput;
-    }, TOutput, TError>[];
+    }, PromiseWithError<TOutput, TError>>[];
 }
 interface UseServerActionExecuteOptions<TInput, TOutput, TError> extends Pick<UseServerActionOptions<TInput, TOutput, TError>, 'interceptors'> {
 }
@@ -58,12 +58,22 @@ interface UseServerActionErrorResult<TInput, TOutput, TError> extends UseServerA
     status: 'error';
     executedAt: Date;
 }
+type UseServerActionResult<TInput, TOutput, TError> = UseServerActionIdleResult<TInput, TOutput, TError> | UseServerActionSuccessResult<TInput, TOutput, TError> | UseServerActionErrorResult<TInput, TOutput, TError> | UseServerActionPendingResult<TInput, TOutput, TError>;
 /**
  * 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>>;
+declare function useServerAction<TInput, TOutput, TError extends ORPCErrorJSON<any, any>>(action: ActionableClient<TInput, TOutput, TError>, options?: UseServerActionOptions<TInput, TOutput, UnactionableError<TError>>): UseServerActionResult<TInput, TOutput, UnactionableError<TError>>;
 
-export { useServerAction };
-export type { UseServerActionErrorResult, UseServerActionExecuteOptions, UseServerActionExecuteRest, UseServerActionIdleResult, UseServerActionOptions, UseServerActionPendingResult, UseServerActionResultBase, UseServerActionSuccessResult };
+interface UseOptimisticServerActionOptions<TInput, TOutput, TError, TOptimisticState> extends UseServerActionOptions<TInput, TOutput, TError> {
+    optimisticPassthrough: TOptimisticState;
+    optimisticReducer: (state: TOptimisticState, input: TInput) => TOptimisticState;
+}
+type UseOptimisticServerActionResult<TInput, TOutput, TError, TOptimisticState> = UseServerActionResult<TInput, TOutput, TError> & {
+    optimisticState: TOptimisticState;
+};
+declare function useOptimisticServerAction<TInput, TOutput, TError extends ORPCErrorJSON<any, any>, TOptimisticState>(action: ActionableClient<TInput, TOutput, TError>, options: UseOptimisticServerActionOptions<TInput, TOutput, UnactionableError<TError>, TOptimisticState>): UseOptimisticServerActionResult<TInput, TOutput, UnactionableError<TError>, TOptimisticState>;
+
+export { useOptimisticServerAction, useServerAction };
+export type { UseOptimisticServerActionOptions, UseOptimisticServerActionResult, UseServerActionErrorResult, UseServerActionExecuteOptions, UseServerActionExecuteRest, UseServerActionIdleResult, UseServerActionOptions, UseServerActionPendingResult, UseServerActionResult, UseServerActionResultBase, UseServerActionSuccessResult };

package/dist/hooks/index.d.ts

@@ -1,11 +1,11 @@
 import { SafeResult, ORPCErrorJSON } from '@orpc/client';
 import { ActionableClient, UnactionableError } from '@orpc/server';
-import { Interceptor } from '@orpc/shared';
+import { Interceptor, PromiseWithError } from '@orpc/shared';
 
 interface UseServerActionOptions<TInput, TOutput, TError> {
     interceptors?: Interceptor<{
         input: TInput;
-    }, TOutput, TError>[];
+    }, PromiseWithError<TOutput, TError>>[];
 }
 interface UseServerActionExecuteOptions<TInput, TOutput, TError> extends Pick<UseServerActionOptions<TInput, TOutput, TError>, 'interceptors'> {
 }
@@ -58,12 +58,22 @@ interface UseServerActionErrorResult<TInput, TOutput, TError> extends UseServerA
     status: 'error';
     executedAt: Date;
 }
+type UseServerActionResult<TInput, TOutput, TError> = UseServerActionIdleResult<TInput, TOutput, TError> | UseServerActionSuccessResult<TInput, TOutput, TError> | UseServerActionErrorResult<TInput, TOutput, TError> | UseServerActionPendingResult<TInput, TOutput, TError>;
 /**
  * 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>>;
+declare function useServerAction<TInput, TOutput, TError extends ORPCErrorJSON<any, any>>(action: ActionableClient<TInput, TOutput, TError>, options?: UseServerActionOptions<TInput, TOutput, UnactionableError<TError>>): UseServerActionResult<TInput, TOutput, UnactionableError<TError>>;
 
-export { useServerAction };
-export type { UseServerActionErrorResult, UseServerActionExecuteOptions, UseServerActionExecuteRest, UseServerActionIdleResult, UseServerActionOptions, UseServerActionPendingResult, UseServerActionResultBase, UseServerActionSuccessResult };
+interface UseOptimisticServerActionOptions<TInput, TOutput, TError, TOptimisticState> extends UseServerActionOptions<TInput, TOutput, TError> {
+    optimisticPassthrough: TOptimisticState;
+    optimisticReducer: (state: TOptimisticState, input: TInput) => TOptimisticState;
+}
+type UseOptimisticServerActionResult<TInput, TOutput, TError, TOptimisticState> = UseServerActionResult<TInput, TOutput, TError> & {
+    optimisticState: TOptimisticState;
+};
+declare function useOptimisticServerAction<TInput, TOutput, TError extends ORPCErrorJSON<any, any>, TOptimisticState>(action: ActionableClient<TInput, TOutput, TError>, options: UseOptimisticServerActionOptions<TInput, TOutput, UnactionableError<TError>, TOptimisticState>): UseOptimisticServerActionResult<TInput, TOutput, UnactionableError<TError>, TOptimisticState>;
+
+export { useOptimisticServerAction, useServerAction };
+export type { UseOptimisticServerActionOptions, UseOptimisticServerActionResult, UseServerActionErrorResult, UseServerActionExecuteOptions, UseServerActionExecuteRest, UseServerActionIdleResult, UseServerActionOptions, UseServerActionPendingResult, UseServerActionResult, UseServerActionResultBase, UseServerActionSuccessResult };

package/dist/hooks/index.mjs

@@ -1,6 +1,6 @@
+import { intercept, toArray, onStart } from '@orpc/shared';
+import { useState, useRef, useTransition, useCallback, useMemo, useOptimistic } from 'react';
 import { safe, createORPCErrorFromJson } from '@orpc/client';
-import { intercept, toArray } from '@orpc/shared';
-import { useState, useCallback, useMemo } from 'react';
 
 const INITIAL_STATE = {
   data: void 0,
@@ -9,57 +9,83 @@ const INITIAL_STATE = {
   isPending: false,
   isSuccess: false,
   isError: false,
-  status: "idle",
-  executedAt: void 0,
-  input: void 0
+  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(() => {
-    setState(INITIAL_STATE);
+    executedAtRef.current = void 0;
+    setInput(void 0);
+    setState({ ...INITIAL_STATE });
   }, []);
-  const execute = useCallback(async (input, executeOptions = {}) => {
+  const execute = useCallback(async (input2, 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 createORPCErrorFromJson(error);
+    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"
+          });
         }
-        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
+        resolve(result2);
+      });
     });
-    return result2;
   }, [action, ...toArray(options.interceptors)]);
-  const result = useMemo(() => ({
-    ...state,
-    reset,
-    execute
-  }), [state, reset, execute]);
+  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 };
+function useOptimisticServerAction(action, options) {
+  const [optimisticState, addOptimistic] = useOptimistic(options.optimisticPassthrough, options.optimisticReducer);
+  const state = useServerAction(action, {
+    ...options,
+    interceptors: [
+      useCallback(onStart(({ input }) => {
+        addOptimistic(input);
+      }), [addOptimistic]),
+      ...toArray(options.interceptors)
+    ]
+  });
+  return useMemo(() => ({ ...state, optimisticState }), [state, optimisticState]);
+}
+
+export { useOptimisticServerAction, useServerAction };

package/dist/index.d.mts

@@ -1,11 +1,12 @@
 import { AnySchema } from '@orpc/contract';
 import { Context, ErrorMap, Meta, Lazyable, Procedure, CreateProcedureClientOptions } from '@orpc/server';
-import { Interceptor, MaybeOptionalOptions } from '@orpc/shared';
+import { Interceptor, MaybeOptionalOptions, onStart, onSuccess, onError, onFinish } from '@orpc/shared';
+export { getIssueMessage, parseFormData } from '@orpc/openapi-client/standard';
 
 interface FormAction {
     (form: FormData): Promise<void>;
 }
-declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, any, any>;
+declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, Promise<any>>;
 /**
  * Create a server action accept a form data and deserialize with bracket notation.
  *
@@ -14,5 +15,22 @@ 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 { createFormAction, orpcErrorToNextHttpFallbackInterceptor };
+/**
+ * Like `onStart`, but defers execution, useful for updating states.
+ */
+declare const onStartDeferred: typeof onStart;
+/**
+ * Like `onSuccess`, but defers execution, useful for updating states.
+ */
+declare const onSuccessDeferred: typeof onSuccess;
+/**
+ * Like `onError`, but defers execution, useful for updating states.
+ */
+declare const onErrorDeferred: typeof onError;
+/**
+ * Like `onFinish`, but defers execution, useful for updating states.
+ */
+declare const onFinishDeferred: typeof onFinish;
+
+export { createFormAction, onErrorDeferred, onFinishDeferred, onStartDeferred, onSuccessDeferred, orpcErrorToNextHttpFallbackInterceptor };
 export type { FormAction };

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import { AnySchema } from '@orpc/contract';
 import { Context, ErrorMap, Meta, Lazyable, Procedure, CreateProcedureClientOptions } from '@orpc/server';
-import { Interceptor, MaybeOptionalOptions } from '@orpc/shared';
+import { Interceptor, MaybeOptionalOptions, onStart, onSuccess, onError, onFinish } from '@orpc/shared';
+export { getIssueMessage, parseFormData } from '@orpc/openapi-client/standard';
 
 interface FormAction {
     (form: FormData): Promise<void>;
 }
-declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, any, any>;
+declare const orpcErrorToNextHttpFallbackInterceptor: Interceptor<any, Promise<any>>;
 /**
  * Create a server action accept a form data and deserialize with bracket notation.
  *
@@ -14,5 +15,22 @@ 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 { createFormAction, orpcErrorToNextHttpFallbackInterceptor };
+/**
+ * Like `onStart`, but defers execution, useful for updating states.
+ */
+declare const onStartDeferred: typeof onStart;
+/**
+ * Like `onSuccess`, but defers execution, useful for updating states.
+ */
+declare const onSuccessDeferred: typeof onSuccess;
+/**
+ * Like `onError`, but defers execution, useful for updating states.
+ */
+declare const onErrorDeferred: typeof onError;
+/**
+ * Like `onFinish`, but defers execution, useful for updating states.
+ */
+declare const onFinishDeferred: typeof onFinish;
+
+export { createFormAction, onErrorDeferred, onFinishDeferred, onStartDeferred, onSuccessDeferred, orpcErrorToNextHttpFallbackInterceptor };
 export type { FormAction };

package/dist/index.mjs

@@ -1,7 +1,8 @@
 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';
+import { onError, resolveMaybeOptionalOptions, toArray, onStart, onSuccess, onFinish } from '@orpc/shared';
 
 const orpcErrorToNextHttpFallbackInterceptor = onError((error) => {
   if (error instanceof ORPCError && [401, 403, 404].includes(error.status)) {
@@ -24,4 +25,33 @@ function createFormAction(lazyableProcedure, ...rest) {
   };
 }
 
-export { createFormAction, orpcErrorToNextHttpFallbackInterceptor };
+const onStartDeferred = (callback, ...rest) => {
+  return onStart((...args) => {
+    setTimeout(() => {
+      callback(...args);
+    }, 6);
+  }, ...rest);
+};
+const onSuccessDeferred = (callback, ...rest) => {
+  return onSuccess((...args) => {
+    setTimeout(() => {
+      callback(...args);
+    }, 6);
+  }, ...rest);
+};
+const onErrorDeferred = (callback, ...rest) => {
+  return onError((...args) => {
+    setTimeout(() => {
+      callback(...args);
+    }, 6);
+  }, ...rest);
+};
+const onFinishDeferred = (callback, ...rest) => {
+  return onFinish((...args) => {
+    setTimeout(() => {
+      callback(...args);
+    }, 6);
+  }, ...rest);
+};
+
+export { createFormAction, onErrorDeferred, onFinishDeferred, onStartDeferred, onSuccessDeferred, orpcErrorToNextHttpFallbackInterceptor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orpc/react",
   "type": "module",
-  "version": "0.0.0-next.ff41b3a",
+  "version": "0.0.0-next.ff7ad2e",
   "license": "MIT",
   "homepage": "https://orpc.unnoq.com",
   "repository": {
@@ -34,15 +34,15 @@
     "react": ">=18.0.0"
   },
   "dependencies": {
-    "@orpc/client": "0.0.0-next.ff41b3a",
-    "@orpc/contract": "0.0.0-next.ff41b3a",
-    "@orpc/server": "0.0.0-next.ff41b3a",
-    "@orpc/openapi-client": "0.0.0-next.ff41b3a",
-    "@orpc/shared": "0.0.0-next.ff41b3a"
+    "@orpc/client": "0.0.0-next.ff7ad2e",
+    "@orpc/contract": "0.0.0-next.ff7ad2e",
+    "@orpc/openapi-client": "0.0.0-next.ff7ad2e",
+    "@orpc/server": "0.0.0-next.ff7ad2e",
+    "@orpc/shared": "0.0.0-next.ff7ad2e"
   },
   "devDependencies": {
-    "react": "^19.1.0",
-    "zod": "^3.24.2"
+    "react": "^19.1.1",
+    "zod": "^4.0.17"
   },
   "scripts": {
     "build": "unbuild",