@faasjs/react 8.0.0-beta.2 → 8.0.0-beta.21

package/dist/index.mjs

@@ -1,625 +1,1795 @@
-import { FaasBrowserClient } from '@faasjs/browser';
-import { useState, useImperativeHandle, cloneElement, forwardRef, useEffect, useMemo, createContext, useRef, useCallback, Component, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/client.tsx
-var AsyncFunction = (async () => {
-}).constructor;
+import { Component, cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/generateId.ts
+/**
+* Generate a random identifier with an optional prefix.
+*
+* @param prefix - Prefix prepended to the generated identifier.
+* @param length - Length of the generated identifier excluding `prefix`. Must be between `8` and `18`.
+* @returns Generated identifier string.
+* @throws {Error} When `length` is outside the supported `8` to `18` range.
+*
+* @example
+* ```ts
+* const id = generateId('prefix-')
+*
+* id.startsWith('prefix-') // true
+* ```
+*/
+function generateId(prefix = "", length = 18) {
+	if (length < 8 || length > 18) throw new Error("Length must be 8 ~ 18");
+	return `${prefix}${Date.now().toString(36).padStart(8, "0")}${Math.random().toString(36).substring(2, length - 6).padEnd(length - 8, "0")}`;
+}
+//#endregion
+//#region src/browser.ts
+/**
+* Wrapper class for HTTP responses from FaasJS functions.
+*
+* Provides a consistent interface for handling server responses with status code, headers,
+* body, and parsed data. Automatically handles JSON serialization and status code defaults.
+*
+* @template T - The type of the data property for type-safe response handling
+*
+* @property {number} status - The HTTP status code of the response.
+*   Defaults to 200 if data or body is provided, 204 if neither is present.
+* @property {ResponseHeaders} headers - The response headers as a key-value object.
+*   Empty object if no headers were provided.
+* @property {any} body - The raw response body as a string or object.
+*   If data is provided without body, body is automatically set to JSON.stringify(data).
+* @property {T} [data] - The parsed JSON data from the response.
+*   Optional property that contains the response payload when JSON is provided.
+*
+* Notes:
+* - status defaults to 200 if data or body is present, 204 otherwise
+* - body is automatically populated from data if not explicitly provided
+* - headers defaults to an empty object if not provided
+* - Use generic type parameter T for type-safe data access
+* - Commonly used as the return type from client.action() method
+* - Can be used in mock handlers to return structured responses
+* - The data property is optional and may be undefined for responses without data
+*
+* @example Create successful response with data
+* ```ts
+* const response = new Response({
+*   status: 200,
+*   data: {
+*     id: 123,
+*     name: 'John Doe'
+*   }
+* })
+* console.log(response.status) // 200
+* console.log(response.data.name) // 'John Doe'
+* ```
+*
+* @example Create response with type safety
+* ```ts
+* interface User {
+*   id: number
+*   name: string
+*   email: string
+* }
+*
+* const response = new Response<User>({
+*   data: {
+*     id: 123,
+*     name: 'John',
+*     email: 'john@example.com'
+*   }
+* })
+* // TypeScript knows response.data.name is a string
+* ```
+*
+* @example Create response with headers
+* ```ts
+* const response = new Response({
+*   status: 201,
+*   data: { created: true },
+*   headers: {
+*     'Content-Type': 'application/json',
+*     'X-Request-Id': 'req-123',
+*     'X-Cache-Key': 'user-123'
+*   }
+* })
+* ```
+*
+* @example Create response with custom body
+* ```ts
+* const response = new Response({
+*   status: 200,
+*   body: JSON.stringify({ custom: 'format' }),
+*   headers: { 'Content-Type': 'application/json' }
+* })
+* ```
+*
+* @example Create empty response (204 No Content)
+* ```ts
+* const response = new Response()
+* // status: 204, headers: {}, body: undefined, data: undefined
+* ```
+*
+* @example Create error response
+* ```ts
+* const response = new Response({
+*   status: 404,
+*   data: {
+*     error: {
+*       message: 'User not found',
+*       code: 'USER_NOT_FOUND'
+*     }
+*   }
+* })
+* ```
+*
+* @example Use in mock handler
+* ```ts
+* setMock(async (action, params) => {
+*   if (action === 'user') {
+*     return new Response({
+*       status: 200,
+*       data: { id: params.id, name: 'Mock User' }
+*     })
+*   }
+*   return new Response({ status: 404, data: { error: 'Not found' } })
+* })
+* ```
+*
+* @see ResponseProps for response property type
+* @see ResponseError for error response handling
+* @see FaasBrowserClient.action for method returning Response
+*/
+var Response = class {
+	/**
+	* HTTP status code exposed to callers.
+	*/
+	status;
+	/**
+	* Response headers keyed by header name.
+	*/
+	headers;
+	/**
+	* Raw response body.
+	*/
+	body;
+	/**
+	* Parsed response payload when JSON data is available.
+	*/
+	data;
+	/**
+	* Create a wrapped response object.
+	*
+	* @param props - Response properties including status, headers, body, and data.
+	* @param props.status - HTTP status code. Defaults to `200` when `data` or `body` exists, otherwise `204`.
+	* @param props.headers - Response headers keyed by header name.
+	* @param props.body - Raw response body to expose without additional parsing.
+	* @param props.data - Parsed response payload to expose on `response.data`.
+	* @returns Wrapped response instance.
+	*/
+	constructor(props = {}) {
+		this.status = props.status || (props.data || props.body ? 200 : 204);
+		this.headers = props.headers || {};
+		this.body = props.body;
+		if (props.data !== void 0) this.data = props.data;
+		if (props.data && !props.body) this.body = JSON.stringify(props.data);
+	}
+};
+/**
+* Custom error class for handling HTTP response errors from FaasJS requests.
+*
+* Extends the built-in Error class to provide additional information about failed requests,
+* including HTTP status code, response headers, response body, and the original error.
+*
+* @augments Error
+*
+* @property {number} status - The HTTP status code of the failed response. Defaults to 500 if not provided.
+* @property {ResponseHeaders} headers - The response headers from the failed request.
+* @property {any} body - The response body containing error details or the original error if available.
+* @property {Error} [originalError] - The original Error object if this ResponseError was created from another Error.
+*
+* @example Basic error with message
+* ```ts
+* throw new ResponseError('User not found')
+* // or inside action method:
+* catch (error) {
+*   throw new ResponseError(error.message)
+* }
+* ```
+*
+* @example Error from existing Error
+* ```ts
+* try {
+*   await someOperation()
+* } catch (error) {
+*   throw new ResponseError(error, {
+*     status: 500,
+*     headers: { 'X-Error-Type': 'internal' }
+*   })
+* }
+* ```
+*
+* @example Error with complete response details
+* ```ts
+* throw new ResponseError({
+*   message: 'Validation failed',
+*   status: 400,
+*   headers: { 'X-Error-Code': 'VALIDATION_ERROR' },
+*   body: {
+*     error: {
+*       message: 'Validation failed',
+*       fields: ['email', 'password']
+*     }
+*   }
+* })
+* ```
+*
+* @example Handling ResponseError in client
+* ```ts
+* try {
+*   const response = await client.action('user', { id: 123 })
+*   console.log(response.data)
+* } catch (error) {
+*   if (error instanceof ResponseError) {
+*     console.error(`Request failed: ${error.message}`)
+*     console.error(`Status: ${error.status}`)
+*     if (error.body) {
+*       console.error('Error details:', error.body)
+*     }
+*     if (error.headers['X-Request-Id']) {
+*       console.error('Request ID:', error.headers['X-Request-Id'])
+*     }
+*   }
+* }
+* ```
+*
+* @example Throwing ResponseError from mock
+* ```ts
+* setMock(async (action, params) => {
+*   if (action === 'login') {
+*     if (!params.email || !params.password) {
+*       throw new ResponseError({
+*         message: 'Email and password are required',
+*         status: 400,
+*         body: { error: 'missing_fields' }
+*       })
+*     }
+*     return { data: { token: 'abc123' } }
+*   }
+* })
+* ```
+*
+* Notes:
+* - ResponseError is automatically thrown by the action method when the server returns an error (status >= 400)
+* - The error message from server responses is extracted from body.error.message if available
+* - When created from an Error object, the original error is preserved in the originalError property
+* - The status property defaults to 500 if not explicitly provided
+* - Use instanceof ResponseError to distinguish FaasJS errors from other JavaScript errors
+* - The body property can contain structured error information from the server response
+*
+* @see FaasBrowserClient.action for how ResponseError is thrown in requests
+* @see ResponseProps for the structure of response data
+* @see setMock for mocking errors in tests
+*/
+var ResponseError = class extends Error {
+	/**
+	* HTTP status code reported for the failed request.
+	*/
+	status;
+	/**
+	* Response headers returned with the error.
+	*/
+	headers;
+	/**
+	* Raw error body or fallback error payload.
+	*/
+	body;
+	/**
+	* Original error used to construct this instance, when available.
+	*/
+	originalError;
+	constructor(data, options) {
+		let props;
+		if (typeof data === "string") props = {
+			message: data,
+			...options
+		};
+		else if (data instanceof Error || typeof data === "object" && data !== null && typeof data.constructor?.name === "string" && data.constructor.name.includes("Error")) props = {
+			message: data.message,
+			originalError: data,
+			...options
+		};
+		else props = data;
+		super(props.message);
+		this.status = props.status || 500;
+		this.headers = props.headers || {};
+		this.body = props.body || props.originalError || { error: { message: props.message } };
+		if (props.originalError) this.originalError = props.originalError;
+	}
+};
+let mock = null;
+/**
+* Set the global mock handler used by all {@link FaasBrowserClient} instances.
+*
+* @param handler - Mock handler, can be:
+*   - MockHandler function: receives (action, params, options) and returns response data
+*   - ResponseProps object: static response data
+*   - Response instance: pre-configured Response object
+*   - null or undefined: clear mock
+*
+* @example Reset in Vitest shared setup
+* ```ts
+* import { afterEach } from 'vitest'
+*
+* afterEach(() => {
+*   setMock(null)
+* })
+* ```
+*
+* @example Use ResponseProps object
+* ```ts
+* setMock({
+*   data: { name: 'FaasJS' },
+* })
+*
+* setMock({
+*   status: 500,
+*   data: { message: 'Internal Server Error' },
+* })
+* ```
+*
+* @example Use MockHandler function
+* ```ts
+* setMock(async (action) => {
+*   if (action === '/pages/users/get') {
+*     return { data: { id: 1, name: 'FaasJS' } }
+*   }
+*
+*   return { status: 404, data: { message: 'Not Found' } }
+* })
+*
+* const response = await client.action('/pages/users/get')
+* ```
+*
+* @example Branch by action and params
+* ```ts
+* setMock(async (action, params) => {
+*   if (action === '/pages/users/get' && params?.id === 1) {
+*     return { data: { id: 1, name: 'Admin' } }
+*   }
+*
+*   if (action === '/pages/users/get' && params?.id === 2) {
+*     return { data: { id: 2, name: 'Editor' } }
+*   }
+*
+*   return { status: 404, data: { message: 'User not found' } }
+* })
+* ```
+*
+* @example Use Response instance
+* ```ts
+* setMock(new Response({
+*   status: 200,
+*   data: { result: 'success' }
+* }))
+* ```
+*
+* @example Streaming response
+* ```ts
+* setMock({
+*   body: new ReadableStream({
+*     start(controller) {
+*       controller.enqueue(new TextEncoder().encode('hello'))
+*       controller.enqueue(new TextEncoder().encode(' world'))
+*       controller.close()
+*     },
+*   }),
+* })
+* ```
+*
+* @example Clear mock
+* ```ts
+* setMock(null)
+* ```
+*
+* @example Handle errors
+* ```ts
+* setMock(async () => {
+*   throw new Error('Internal error')
+* })
+* // This will reject with ResponseError
+* ```
+*/
+function setMock(handler) {
+	mock = handler;
+}
+/**
+* Browser client for FaasJS - provides HTTP client functionality for making API requests from web applications.
+*
+* @template PathOrData - Type parameter extending FaasActionUnionType for type-safe requests
+*
+* Features:
+* - Type-safe API requests with TypeScript support
+* - Built-in mock support for testing
+* - Custom request function support
+* - Request/response hooks (beforeRequest)
+* - Automatic error handling with ResponseError
+* - Streaming support for large responses
+* - Multiple instance support with unique IDs
+*
+* Notes:
+* - All requests are POST requests by default
+* - Automatically adds X-FaasJS-Request-Id header for request tracking
+* - baseUrl must end with '/' (will throw Error if not)
+* - Supports global mock via setMock() for testing all instances
+*
+* @example Basic usage
+* ```ts
+* import { FaasBrowserClient } from '@faasjs/react'
+*
+* const client = new FaasBrowserClient('http://localhost:8080/')
+* const response = await client.action('func', { key: 'value' })
+* console.log(response.data)
+* ```
+*
+* @example With custom headers and options
+* ```ts
+* const client = new FaasBrowserClient('https://api.example.com/', {
+*   headers: { 'X-API-Key': 'secret' },
+*   beforeRequest: async ({ action, params, headers }) => {
+*     console.log(`Calling ${action} with params:`, params)
+*   }
+* })
+* ```
+*
+* @example Multiple instances
+* ```ts
+* const apiClient = new FaasBrowserClient('https://api.example.com/')
+* const localClient = new FaasBrowserClient('http://localhost:3000/')
+*
+* const apiData = await apiClient.action('users')
+* const localData = await localClient.action('data')
+* ```
+*
+* @example Error handling
+* ```ts
+* const client = new FaasBrowserClient('https://api.example.com/')
+*
+* try {
+*   const response = await client.action('user', { id: 123 })
+*   console.log(response.data)
+* } catch (error) {
+*   if (error instanceof ResponseError) {
+*     console.error(`Request failed: ${error.message}`, error.status)
+*   } else {
+*     console.error('Unexpected error:', error)
+*   }
+* }
+* ```
+*
+* @throws {Error} When baseUrl does not end with '/'
+*
+* @see setMock for testing support
+* @see ResponseError for error handling
+*/
+var FaasBrowserClient = class {
+	/**
+	* Unique identifier for this client instance.
+	*/
+	id;
+	/**
+	* Base URL used to build action request URLs.
+	*/
+	baseUrl;
+	/**
+	* Default request options merged into every request.
+	*/
+	defaultOptions;
+	/**
+	* Creates a new FaasBrowserClient instance.
+	*
+	* @param baseUrl - Base URL for all API requests. Must end with `/`. Defaults to `/` for relative requests.
+	* @param options - Default request options such as headers, hooks, request override, or stream mode.
+	* See {@link Options} for supported request fields such as `headers`, `beforeRequest`,
+	* `request`, `baseUrl`, and `stream`.
+	*
+	* @example Basic initialization
+	* ```ts
+	* const client = new FaasBrowserClient('/')
+	* ```
+	*
+	* @example With API endpoint
+	* ```ts
+	* const client = new FaasBrowserClient('https://api.example.com/')
+	* ```
+	*
+	* @example With custom headers
+	* ```ts
+	* const client = new FaasBrowserClient('https://api.example.com/', {
+	*   headers: {
+	*     'Authorization': 'Bearer token123',
+	*     'X-Custom-Header': 'value'
+	*   }
+	* })
+	* ```
+	*
+	* @example With beforeRequest hook
+	* ```ts
+	* const client = new FaasBrowserClient('https://api.example.com/', {
+	*   beforeRequest: async ({ action, params, headers }) => {
+	*     console.log(`Requesting ${action}`, params)
+	*     // Modify headers before request
+	*     headers['X-Timestamp'] = Date.now().toString()
+	*   }
+	* })
+	* ```
+	*
+	* @example With custom request function
+	* ```ts
+	* import axios from 'axios'
+	*
+	* const client = new FaasBrowserClient('/', {
+	*   request: async (url, options) => {
+	*     const response = await axios.post(url, options.body, {
+	*       headers: options.headers
+	*     })
+	*     return new Response({
+	*       status: response.status,
+	*       headers: response.headers,
+	*       data: response.data
+	*     })
+	*   }
+	* })
+	* ```
+	*
+	* @throws {Error} When `baseUrl` does not end with `/`
+	*/
+	constructor(baseUrl = "/", options = Object.create(null)) {
+		if (baseUrl && !baseUrl.endsWith("/")) throw Error("[FaasJS] baseUrl should end with /");
+		this.id = `FBC-${generateId()}`;
+		this.baseUrl = baseUrl;
+		this.defaultOptions = options;
+		console.debug(`[FaasJS] Initialize with baseUrl: ${this.baseUrl}`);
+	}
+	/**
+	* Makes a request to a FaasJS function.
+	*
+	* @template PathOrData - The function path or data type for type safety
+	* @param action - The function path to call. Converted to lowercase when constructing the URL.
+	*   Must be a non-empty string.
+	* @param params - The parameters to send to the function. Will be serialized as JSON.
+	*   Optional if the function accepts no parameters.
+	* @param options - Optional request options that override client defaults.
+	*   Supports headers, beforeRequest hook, custom request function, baseUrl override, and streaming mode.
+	*   See {@link Options} for supported request fields such as `headers`, `beforeRequest`,
+	*   `request`, `baseUrl`, and `stream`.
+	*
+	* @returns A promise resolving to the wrapped FaasJS response. When `options.stream`
+	*   is `true`, the runtime returns the native fetch response so callers can read the stream.
+	*
+	* @throws {Error} When action is not provided or is empty
+	* @throws {ResponseError} When the server returns an error response (status >= 400 or body.error exists)
+	* @throws {Error} When the request fails before a response is received
+	*
+	* Notes:
+	* - All requests are POST requests by default
+	* - Action path is automatically converted to lowercase
+	* - A unique request ID is generated for each request and sent in X-FaasJS-Request-Id header
+	* - Headers are merged from client defaults and request options (request options take precedence)
+	* - If a global mock is set via setMock(), it will be used instead of making real requests
+	* - If a custom request function is provided in options, it will be used instead of fetch
+	* - When stream option is true, returns the native fetch Response instead of a wrapped Response
+	* - Response body is automatically parsed as JSON when possible
+	* - Server errors (body.error) are automatically converted to ResponseError
+	*
+	* @example Basic request
+	* ```ts
+	* const response = await client.action('user', { id: 123 })
+	* console.log(response.data)
+	* ```
+	*
+	* @example With no parameters
+	* ```ts
+	* const response = await client.action('status')
+	* console.log(response.data.status)
+	* ```
+	*
+	* @example With custom options
+	* ```ts
+	* const response = await client.action('data', {
+	*   limit: 10,
+	*   offset: 0
+	* }, {
+	*   headers: { 'X-Custom-Header': 'value' }
+	* })
+	* ```
+	*
+	* @example Streaming large response
+	* ```ts
+	* const response = await client.action('stream', {
+	*   format: 'json'
+	* }, {
+	*   stream: true
+	* })
+	* // response is native fetch Response with streaming support
+	* const reader = response.body.getReader()
+	* ```
+	*
+	* @example With type safety
+	* ```ts
+	* interface UserData {
+	*   id: number
+	*   name: string
+	*   email: string
+	* }
+	*
+	* const response = await client.action<UserData>('user', { id: 123 })
+	* console.log(response.data.name) // TypeScript knows it's a string
+	* ```
+	*
+	* @example Handling errors
+	* ```ts
+	* try {
+	*   const response = await client.action('user', { id: 123 })
+	*   console.log(response.data)
+	* } catch (error) {
+	*   if (error instanceof ResponseError) {
+	*     console.error(`Server error: ${error.message}`, error.status)
+	*     if (error.body) console.error('Error details:', error.body)
+	*   } else {
+	*     console.error('Network error:', error)
+	*   }
+	* }
+	* ```
+	*
+	* @example Chaining requests
+	* ```ts
+	* const userId = await client.action('createUser', {
+	*   name: 'John',
+	*   email: 'john@example.com'
+	* })
+	*
+	* const profile = await client.action('getProfile', {
+	*   userId: userId.data.id
+	* })
+	* ```
+	*/
+	async action(action, params, options) {
+		if (!action) throw Error("[FaasJS] action required");
+		const id = `F-${generateId()}`;
+		const url = `${(options?.baseUrl || this.baseUrl) + action.toLowerCase()}?_=${id}`;
+		if (!params) params = Object.create(null);
+		if (!options) options = Object.create(null);
+		const parsedOptions = {
+			method: "POST",
+			headers: { "Content-Type": "application/json; charset=UTF-8" },
+			mode: "cors",
+			credentials: "include",
+			body: JSON.stringify(params),
+			...this.defaultOptions,
+			...options
+		};
+		if (!parsedOptions.headers["X-FaasJS-Request-Id"] && !parsedOptions.headers["x-faasjs-request-id"]) parsedOptions.headers["X-FaasJS-Request-Id"] = id;
+		if (parsedOptions.beforeRequest) await parsedOptions.beforeRequest({
+			action,
+			params,
+			options: parsedOptions,
+			headers: parsedOptions.headers
+		});
+		if (mock) {
+			console.debug(`[FaasJS] Mock request: ${action} %j`, params);
+			if (typeof mock === "function") {
+				const response = await mock(action, params, parsedOptions);
+				if (response instanceof Error) return Promise.reject(new ResponseError(response));
+				if (response instanceof Response) return response;
+				return new Response(response || {});
+			}
+			if (mock instanceof Response) return mock;
+			return new Response(mock || {});
+		}
+		if (parsedOptions.request) return parsedOptions.request(url, parsedOptions);
+		if (parsedOptions.stream) return fetch(url, parsedOptions);
+		return fetch(url, parsedOptions).then(async (response) => {
+			const headers = {};
+			for (const values of response.headers) headers[values[0]] = values[1];
+			return response.text().then((res) => {
+				if (response.status >= 200 && response.status < 300) {
+					if (!res) return new Response({
+						status: response.status,
+						headers
+					});
+					const body = JSON.parse(res);
+					if (body.error?.message) return Promise.reject(new ResponseError({
+						message: body.error.message,
+						status: response.status,
+						headers,
+						body
+					}));
+					return new Response({
+						status: response.status,
+						headers,
+						body,
+						data: body.data
+					});
+				}
+				try {
+					const body = JSON.parse(res);
+					if (body.error?.message) return Promise.reject(new ResponseError({
+						message: body.error.message,
+						status: response.status,
+						headers,
+						body
+					}));
+					return Promise.reject(new ResponseError({
+						message: res,
+						status: response.status,
+						headers,
+						body
+					}));
+				} catch {
+					return Promise.reject(new ResponseError({
+						message: res,
+						status: response.status,
+						headers,
+						body: res
+					}));
+				}
+			});
+		});
+	}
+};
+//#endregion
+//#region src/faas.ts
+/**
+* Call the currently configured FaasReactClient.
+*
+* This helper forwards the request to `getClient`. When the registered
+* client defines `onError`, the hook is invoked before the promise rejects.
+*
+* @template PathOrData - Action path or response data type used for inference.
+*
+* @param action - Action path to invoke.
+* @param params - Parameters sent to the action.
+* @param options - Optional per-request overrides such as headers or base URL.
+* See the request `Options` type for supported fields such as `headers`, `beforeRequest`,
+* `request`, `baseUrl`, and `stream`.
+* @returns Response returned by the active browser client.
+* @throws {ResponseError} When the request fails and the active client does not recover inside `onError`.
+*
+* @example
+* ```ts
+* import { faas } from '@faasjs/react'
+*
+* const response = await faas('posts/get', { id: 1 })
+*
+* console.log(response.data.title)
+* ```
+*/
+async function faas(action, params, options) {
+	const client = getClient(options?.baseUrl);
+	const onError = client.onError;
+	if (onError) return client.browserClient.action(action, params, options).catch(async (res) => {
+		await onError(action, params)(res);
+		return Promise.reject(res);
+	});
+	return client.browserClient.action(action, params, options);
+}
+//#endregion
+//#region src/equal.ts
+const AsyncFunction = (async () => {}).constructor;
+/**
+* Compares two values for deep equality.
+*
+* This function checks if two values are deeply equal by comparing their types and contents.
+* It handles various data types including primitives, arrays, dates, regular expressions, functions,
+* maps, sets, and promises.
+*
+* @param a - The first value to compare.
+* @param b - The second value to compare.
+* @returns `true` if the values are deeply equal, `false` otherwise.
+*
+* @example
+* ```ts
+* import { equal } from '@faasjs/react'
+*
+* equal({ page: 1, filters: ['a'] }, { page: 1, filters: ['a'] }) // true
+* equal({ page: 1 }, { page: 2 }) // false
+* ```
+*/
 function equal(a, b) {
-  if (a === b) return true;
-  if ((a === null || a === void 0) && (b === null || b === void 0))
-    return true;
-  if (typeof a !== typeof b) return false;
-  if (a === null || a === void 0 || b === null || b === void 0)
-    return false;
-  const ctor = a.constructor;
-  if (ctor !== b.constructor) return false;
-  switch (ctor) {
-    case String:
-    case Boolean:
-      return a === b;
-    case Number:
-      return Number.isNaN(a) && Number.isNaN(b) || a === b;
-    case Array: {
-      if (a.length !== b.length) return false;
-      for (let i = 0; i < a.length; i++) {
-        if (!equal(a[i], b[i])) return false;
-      }
-      return true;
-    }
-    case Date:
-      return a.getTime() === b.getTime();
-    case RegExp:
-    case Function:
-    case AsyncFunction:
-      return a.toString() === b.toString();
-    case Map:
-    case Set:
-      return equal(Array.from(a), Array.from(b));
-    case Promise:
-      return a === b;
-    case Object: {
-      for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]))
-        if (!equal(a[key], b[key])) return false;
-      return true;
-    }
-    default:
-      throw Error(`Unsupported type: ${ctor}`);
-  }
+	if (a === b) return true;
+	if ((a === null || a === void 0) && (b === null || b === void 0)) return true;
+	if (typeof a !== typeof b) return false;
+	if (a === null || a === void 0 || b === null || b === void 0) return false;
+	const ctor = a.constructor;
+	if (ctor !== b.constructor) return false;
+	switch (ctor) {
+		case String:
+		case Boolean: return a === b;
+		case Number: return Number.isNaN(a) && Number.isNaN(b) || a === b;
+		case Array:
+			if (a.length !== b.length) return false;
+			for (let i = 0; i < a.length; i++) if (!equal(a[i], b[i])) return false;
+			return true;
+		case Date: return a.getTime() === b.getTime();
+		case RegExp:
+		case Function:
+		case AsyncFunction: return a.toString() === b.toString();
+		case Map:
+		case Set: return equal(Array.from(a), Array.from(b));
+		case Promise: return a === b;
+		case Object:
+			for (const key of new Set([...Object.keys(a), ...Object.keys(b)])) if (!equal(a[key], b[key])) return false;
+			return true;
+		default: throw Error(`Unsupported type: ${ctor}`);
+	}
 }
+/**
+* Custom hook that memoizes a value using deep equality comparison.
+*
+* @param value - The value to be memoized.
+* @returns The memoized value.
+*
+* @example
+* ```tsx
+* import { useEqualMemoize } from '@faasjs/react'
+*
+* function Filters({ filters }: { filters: Record<string, any> }) {
+*   const memoizedFilters = useEqualMemoize(filters)
+*
+*   return <pre>{JSON.stringify(memoizedFilters)}</pre>
+* }
+* ```
+*/
 function useEqualMemoize(value) {
-  const ref = useRef(value);
-  const signalRef = useRef(0);
-  if (!equal(value, ref.current)) {
-    ref.current = value;
-    signalRef.current += 1;
-  }
-  return useMemo(() => ref.current, [signalRef.current]);
+	const ref = useRef(value);
+	if (!equal(value, ref.current)) ref.current = value;
+	return ref.current;
 }
+function useEqualSignal(value) {
+	const ref = useRef(value);
+	const signalRef = useRef(0);
+	if (!equal(value, ref.current)) {
+		ref.current = value;
+		signalRef.current += 1;
+	}
+	return signalRef.current;
+}
+/**
+* Custom hook that works like `useEffect` but uses deep comparison on dependencies.
+*
+* @param callback - The effect callback function to run.
+* @param dependencies - The list of dependencies for the effect.
+* @returns The result of the `useEffect` hook with memoized dependencies.
+*
+* @example
+* ```tsx
+* import { useEqualEffect } from '@faasjs/react'
+*
+* function Page({ filters }: { filters: Record<string, any> }) {
+*   useEqualEffect(() => {
+*     console.log('filters changed', filters)
+*   }, [filters])
+*
+*   return null
+* }
+* ```
+*/
 function useEqualEffect(callback, dependencies) {
-  return useEffect(callback, useEqualMemoize(dependencies));
+	return useEffect(callback, [useEqualSignal(dependencies)]);
 }
+/**
+* Custom hook that works like `useMemo` but uses deep comparison on dependencies.
+*
+* @template T - Memoized value type returned by the callback.
+*
+* @param callback - The callback function to run.
+* @param dependencies - The list of dependencies.
+* @returns The result of the `useMemo` hook with memoized dependencies.
+*
+* @example
+* ```tsx
+* import { useEqualMemo } from '@faasjs/react'
+*
+* function Page({ filters }: { filters: Record<string, any> }) {
+*   const queryString = useEqualMemo(() => JSON.stringify(filters), [filters])
+*
+*   return <span>{queryString}</span>
+* }
+* ```
+*/
 function useEqualMemo(callback, dependencies) {
-  return useMemo(callback, useEqualMemoize(dependencies));
+	const signal = useEqualSignal(dependencies);
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	return useMemo(() => {
+		return callbackRef.current();
+	}, [signal]);
 }
+/**
+* Custom hook that works like `useCallback` but uses deep comparison on dependencies.
+*
+* @template T - Callback signature to memoize.
+*
+* @param callback - The callback function to run.
+* @param dependencies - The list of dependencies.
+* @returns The result of the `useCallback` hook with memoized dependencies.
+*
+* @example
+* ```tsx
+* import { useEqualCallback } from '@faasjs/react'
+*
+* function Search({ filters }: { filters: Record<string, any> }) {
+*   const handleSubmit = useEqualCallback(() => {
+*     console.log(filters)
+*   }, [filters])
+*
+*   return <button onClick={handleSubmit}>Search</button>
+* }
+* ```
+*/
 function useEqualCallback(callback, dependencies) {
-  return useCallback(
-    (...args) => callback(...args),
-    useEqualMemoize(dependencies)
-  );
+	return useCallback((...args) => callback(...args), [useEqualSignal(dependencies)]);
 }
-var fixedForwardRef = forwardRef;
-var FaasDataWrapper = fixedForwardRef(
-  (props, ref) => {
-    const request = getClient(props.baseUrl).useFaas(
-      props.action,
-      props.params,
-      {
-        data: props.data,
-        setData: props.setData
-      }
-    );
-    const [loaded, setLoaded] = useState(false);
-    useImperativeHandle(ref, () => request, [request]);
-    useEqualEffect(() => {
-      if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
-    }, [request.loading]);
-    useEqualEffect(() => {
-      if (props.onDataChange) props.onDataChange(request);
-    }, [request.data]);
-    const child = useEqualMemo(() => {
-      if (loaded) {
-        if (props.children) return cloneElement(props.children, request);
-        if (props.render) return props.render(request);
-      }
-      return props.fallback || null;
-    }, [
-      loaded,
-      request.action,
-      request.params,
-      request.data,
-      request.error,
-      request.loading
-    ]);
-    return child;
-  }
-);
-Object.assign(FaasDataWrapper, {
-  displayName: "FaasDataWrapper",
-  whyDidYouRender: true
+/**
+* Fetch FaasJS data and inject the result into a render prop or child element.
+*
+* The wrapper defers rendering `children` or `render` until the first request
+* completes, then keeps passing the latest request state to the rendered output.
+*
+* @param props - Wrapper props controlling the request and rendered fallback.
+* @param props.render - Render prop that receives the resolved Faas request state.
+* @param props.children - Child element cloned with injected Faas request state.
+* @param props.fallback - Element rendered before the first successful load.
+* @param props.action - Action path to request.
+* @param props.params - Params sent to the action.
+* @param props.onDataChange - Callback invoked when the resolved data value changes.
+* @param props.data - Controlled data value used instead of internal state.
+* @param props.setData - Controlled setter used instead of internal state.
+* @param props.baseUrl - Base URL override used for this wrapper instance.
+*
+* @example
+* ```tsx
+* import { FaasDataWrapper } from '@faasjs/react'
+*
+* type User = {
+*   name: string
+* }
+*
+* function UserView(props: {
+*   data?: User
+*   error?: Error
+*   reload?: () => void
+* }) {
+*   if (props.error) {
+*     return (
+*       <div>
+*         <p>Failed to load user: {props.error.message}</p>
+*         <button type="button" onClick={() => props.reload?.()}>
+*           Retry
+*         </button>
+*       </div>
+*     )
+*   }
+*
+*   return <div>Hello, {props.data?.name}</div>
+* }
+*
+* // Render-prop mode
+* export function UserProfile(props: { id: number }) {
+*   return (
+*     <FaasDataWrapper<User>
+*       action="/pages/users/get"
+*       params={{ id: props.id }}
+*       fallback={<div>Loading user...</div>}
+*       render={({ data, error, reload }) => {
+*         if (error) {
+*           return (
+*             <div>
+*               <p>Failed to load user: {error.message}</p>
+*               <button type="button" onClick={() => reload()}>
+*                 Retry
+*               </button>
+*             </div>
+*           )
+*         }
+*
+*         return <div>Hello, {data.name}</div>
+*       }}
+*     />
+*   )
+* }
+*
+* // Children injection mode
+* export function UserProfileWithChildren(props: { id: number }) {
+*   return (
+*     <FaasDataWrapper<User>
+*       action="/pages/users/get"
+*       params={{ id: props.id }}
+*       fallback={<div>Loading user...</div>}
+*     >
+*       <UserView />
+*     </FaasDataWrapper>
+*   )
+* }
+* ```
+*
+* When a ref is provided, it exposes the current Faas request state imperatively.
+*/
+const FaasDataWrapper = forwardRef((props, ref) => {
+	const requestOptions = {
+		...props.data !== void 0 ? { data: props.data } : {},
+		...props.setData ? { setData: props.setData } : {}
+	};
+	const request = getClient(props.baseUrl).useFaas(props.action, props.params ?? {}, requestOptions);
+	const [loaded, setLoaded] = useState(false);
+	useImperativeHandle(ref, () => request, [request]);
+	useEqualEffect(() => {
+		if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
+	}, [request.loading]);
+	useEqualEffect(() => {
+		if (props.onDataChange) props.onDataChange(request);
+	}, [request.data]);
+	return useEqualMemo(() => {
+		if (loaded) {
+			if (props.children) return cloneElement(props.children, request);
+			if (props.render) return props.render(request);
+		}
+		return props.fallback || null;
+	}, [
+		loaded,
+		request.action,
+		request.params,
+		request.data,
+		request.error,
+		request.loading
+	]);
 });
-function withFaasData(Component2, faasProps) {
-  return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+Object.assign(FaasDataWrapper, { displayName: "FaasDataWrapper" });
+/**
+* Wrap a component with {@link FaasDataWrapper} and inject Faas request state as props.
+*
+* `withFaasData` is most useful for wrapper-style exports or compatibility with
+* an existing component boundary. For new code, prefer `useFaas` or
+* `FaasDataWrapper` when they express the request ownership more directly.
+*
+* @template PathOrData - Action path or response data type used for inference.
+* @template TComponentProps - Component props including injected Faas data fields.
+* @param Component - Component that consumes injected Faas data props.
+* @param faasProps - Request configuration forwarded to `FaasDataWrapper`.
+* @returns Component that accepts the original props minus the injected Faas data fields.
+*
+* @example
+* ```tsx
+* import { withFaasData } from '@faasjs/react'
+*
+* const MyComponent = withFaasData(
+*   ({ data, error, reload }) => {
+*     if (error) {
+*       return (
+*         <button type="button" onClick={() => reload()}>
+*           Retry
+*         </button>
+*       )
+*     }
+*
+*     return <div>{data.name}</div>
+*   },
+*   { action: '/pages/users/get', params: { id: 1 } },
+* )
+* ```
+*/
+function withFaasData(Component, faasProps) {
+	return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, {
+		...faasProps,
+		children: /* @__PURE__ */ jsx(Component, { ...props })
+	});
 }
-
-// src/faas.ts
-async function faas(action, params, options) {
-  const client = getClient(options?.baseUrl);
-  if (client.onError)
-    return client.browserClient.action(action, params, options).catch(async (res) => {
-      await client.onError(action, params)(res);
-      return Promise.reject(res);
-    });
-  return client.browserClient.action(action, params, options);
+//#endregion
+//#region src/useFaasRequest.ts
+function useFaasRequest({ action, defaultParams, options, beforeSend, onSuccess, send }) {
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState();
+	const [params, setParams] = useState(defaultParams);
+	const [reloadTimes, setReloadTimes] = useState(0);
+	const [skip, setSkip] = useState(typeof options.skip === "function" ? options.skip(defaultParams) : options.skip);
+	const promiseRef = useRef(null);
+	const controllerRef = useRef(null);
+	const failedOnceRef = useRef(false);
+	const pendingReloadsRef = useRef(/* @__PURE__ */ new Map());
+	const reloadCounterRef = useRef(0);
+	const beforeSendRef = useRef(beforeSend);
+	const onSuccessRef = useRef(onSuccess);
+	const sendRef = useRef(send);
+	beforeSendRef.current = beforeSend;
+	onSuccessRef.current = onSuccess;
+	sendRef.current = send;
+	useEqualEffect(() => {
+		setSkip(typeof options.skip === "function" ? options.skip(params) : options.skip);
+	}, [typeof options.skip === "function" ? params : options.skip]);
+	useEqualEffect(() => {
+		if (!equal(defaultParams, params)) setParams(defaultParams);
+	}, [defaultParams]);
+	useEqualEffect(() => {
+		if (!action || skip) {
+			setLoading(false);
+			return;
+		}
+		setLoading(true);
+		beforeSendRef.current?.();
+		failedOnceRef.current = false;
+		const controller = new AbortController();
+		controllerRef.current = controller;
+		const client = getClient(options.baseUrl);
+		const requestParams = options.params || params;
+		const rejectPending = (reason) => {
+			for (const { reject } of pendingReloadsRef.current.values()) reject(reason);
+			pendingReloadsRef.current.clear();
+		};
+		const resolvePending = (value) => {
+			for (const { resolve } of pendingReloadsRef.current.values()) resolve(value);
+			pendingReloadsRef.current.clear();
+		};
+		const run = () => {
+			sendRef.current({
+				action,
+				params: requestParams,
+				signal: controller.signal,
+				client,
+				setPromise: (promise) => {
+					promiseRef.current = promise;
+				}
+			}).then((result) => {
+				failedOnceRef.current = false;
+				setError(null);
+				onSuccessRef.current?.(result);
+				setLoading(false);
+				resolvePending(result);
+			}).catch(async (e) => {
+				if (typeof e?.message === "string" && e.message.toLowerCase().includes("aborted")) return;
+				if (!failedOnceRef.current && typeof e?.message === "string" && e.message.includes("Failed to fetch")) {
+					failedOnceRef.current = true;
+					console.warn(`FaasReactClient: ${e.message} retry...`);
+					run();
+					return;
+				}
+				let nextError = e;
+				if (client.onError) try {
+					await client.onError(action, requestParams || Object.create(null))(e);
+				} catch (newError) {
+					nextError = newError;
+				}
+				setError(nextError);
+				setLoading(false);
+				rejectPending(nextError);
+			});
+		};
+		if (options.debounce) {
+			const timeout = setTimeout(run, options.debounce);
+			return () => {
+				clearTimeout(timeout);
+				controllerRef.current?.abort();
+				setLoading(false);
+			};
+		}
+		run();
+		return () => {
+			controllerRef.current?.abort();
+			setLoading(false);
+		};
+	}, [
+		action,
+		options.params || params,
+		reloadTimes,
+		skip
+	]);
+	return {
+		loading,
+		error,
+		params,
+		reloadTimes,
+		reload: useEqualCallback((nextParams) => {
+			if (skip) setSkip(false);
+			if (nextParams) setParams(nextParams);
+			const reloadCounter = ++reloadCounterRef.current;
+			return new Promise((resolve, reject) => {
+				pendingReloadsRef.current.set(reloadCounter, {
+					resolve,
+					reject
+				});
+				setReloadTimes((prev) => prev + 1);
+			});
+		}, [skip]),
+		promiseRef,
+		setError,
+		setLoading
+	};
 }
+//#endregion
+//#region src/useFaas.tsx
+/**
+* Request FaasJS data and keep request state in React state.
+*
+* `useFaas` is the default hook for standard FaasJS request-response flows in React.
+* It sends an initial request unless `skip` is enabled, and returns request state
+* plus helpers for reloading, updating data, and handling errors.
+*
+* @template PathOrData - Action path or response data type used for inference.
+*
+* @param action - Action path to invoke.
+* @param defaultParams - Params used for the initial request and future reloads.
+* @param options - Optional hook configuration such as controlled data, debounce, and skip logic.
+* @param options.params - Request params override used without mutating the hook's stored params state.
+* @param options.data - Controlled data value used instead of the hook's internal state.
+* @param options.setData - Controlled setter used instead of the hook's internal `setData`.
+* @param options.skip - Boolean or predicate that suppresses the automatic request until `reload()` runs.
+* @param options.debounce - Milliseconds to wait before sending the latest request.
+* @param options.baseUrl - Base URL override used for this hook instance.
+* @returns Request state and helper methods described by {@link FaasDataInjection}.
+*
+* @example
+* ```tsx
+* import { useFaas } from '@faasjs/react'
+*
+* function Profile({ id }: { id: number }) {
+*   const { data, error, loading, reload } = useFaas('/pages/users/get', { id })
+*
+*   if (loading) return <div>Loading...</div>
+*
+*   if (error) {
+*     return (
+*       <div>
+*         <div>Load failed: {error.message}</div>
+*         <button type="button" onClick={() => reload()}>
+*           Retry
+*         </button>
+*       </div>
+*     )
+*   }
+*
+*   return (
+*     <div>
+*       <span>{data.name}</span>
+*       <button type="button" onClick={() => reload()}>
+*         Refresh
+*       </button>
+*     </div>
+*   )
+* }
+* ```
+*/
 function useFaas(action, defaultParams, options = {}) {
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState();
-  const [error, setError] = useState();
-  const [params, setParams] = useState(defaultParams);
-  const [reloadTimes, setReloadTimes] = useState(0);
-  const [fails, setFails] = useState(0);
-  const [skip, setSkip] = useState(
-    typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
-  );
-  const promiseRef = useRef(null);
-  const controllerRef = useRef(null);
-  const pendingReloadsRef = useRef(/* @__PURE__ */ new Map());
-  const reloadCounterRef = useRef(0);
-  useEqualEffect(() => {
-    setSkip(
-      typeof options.skip === "function" ? options.skip(params) : options.skip
-    );
-  }, [typeof options.skip === "function" ? params : options.skip]);
-  useEqualEffect(() => {
-    if (!equal(defaultParams, params)) {
-      setParams(defaultParams);
-    }
-  }, [defaultParams]);
-  useEqualEffect(() => {
-    if (!action || skip) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    controllerRef.current = new AbortController();
-    const client = getClient(options.baseUrl);
-    function send() {
-      const request = client.faas(
-        action,
-        options.params || params,
-        { signal: controllerRef.current.signal }
-      );
-      promiseRef.current = request;
-      request.then((r) => {
-        setFails(0);
-        setError(null);
-        options.setData ? options.setData(r.data) : setData(r.data);
-        setLoading(false);
-        for (const { resolve } of pendingReloadsRef.current.values())
-          resolve(r.data);
-        pendingReloadsRef.current.clear();
-      }).catch(async (e) => {
-        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
-          return;
-        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
-          console.warn(`FaasReactClient: ${e.message} retry...`);
-          setFails(1);
-          return send();
-        }
-        let error2 = e;
-        if (client.onError)
-          try {
-            await client.onError(action, params)(e);
-          } catch (newError) {
-            error2 = newError;
-          }
-        setError(error2);
-        setLoading(false);
-        for (const { reject } of pendingReloadsRef.current.values())
-          reject(error2);
-        pendingReloadsRef.current.clear();
-        return;
-      });
-    }
-    if (options.debounce) {
-      const timeout = setTimeout(send, options.debounce);
-      return () => {
-        clearTimeout(timeout);
-        controllerRef.current?.abort();
-        setLoading(false);
-      };
-    }
-    send();
-    return () => {
-      controllerRef.current?.abort();
-      setLoading(false);
-    };
-  }, [action, options.params || params, reloadTimes, skip]);
-  const reload = useEqualCallback(
-    (params2) => {
-      if (skip) setSkip(false);
-      if (params2) setParams(params2);
-      const reloadCounter = ++reloadCounterRef.current;
-      setReloadTimes((prev) => prev + 1);
-      return new Promise((resolve, reject) => {
-        pendingReloadsRef.current.set(reloadCounter, { resolve, reject });
-        setReloadTimes((prev) => prev + 1);
-      });
-    },
-    [params, skip]
-  );
-  return {
-    action,
-    params,
-    loading,
-    data: options.data || data,
-    reloadTimes,
-    error,
-    promise: promiseRef.current,
-    reload,
-    setData: options.setData || setData,
-    setLoading,
-    setPromise: (newPromise) => typeof newPromise === "function" ? newPromise(promiseRef.current) : promiseRef.current = newPromise,
-    setError
-  };
+	const [data, setData] = useState();
+	const localSetData = setData;
+	const request = useFaasRequest({
+		action,
+		defaultParams,
+		options,
+		onSuccess: (nextData) => {
+			if (options.setData) options.setData(nextData);
+			else localSetData(nextData);
+		},
+		send: ({ action, params, signal, client, setPromise }) => {
+			const promise = client.faas(action, params, { signal });
+			setPromise(promise);
+			return promise.then((response) => response.data);
+		}
+	});
+	const currentData = options.data ?? data;
+	const currentPromise = request.promiseRef.current ?? Promise.resolve({});
+	const updateData = options.setData ?? localSetData;
+	return {
+		action,
+		params: request.params,
+		loading: request.loading,
+		data: currentData,
+		reloadTimes: request.reloadTimes,
+		error: request.error,
+		promise: currentPromise,
+		reload: request.reload,
+		setData: updateData,
+		setLoading: request.setLoading,
+		setPromise: (newPromise) => {
+			request.promiseRef.current = typeof newPromise === "function" ? newPromise(currentPromise) : newPromise;
+		},
+		setError: request.setError
+	};
 }
-var clients = {};
-function FaasReactClient({ baseUrl, options, onError } = {
-  baseUrl: "/"
-}) {
-  const client = new FaasBrowserClient(baseUrl, options);
-  const reactClient = {
-    id: client.id,
-    faas: async (action, params, options2) => faas(action, params, { baseUrl, ...options2 }),
-    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, { baseUrl, ...options2 }),
-    FaasDataWrapper: (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { baseUrl, ...props }),
-    onError,
-    browserClient: client
-  };
-  clients[baseUrl] = reactClient;
-  return reactClient;
+//#endregion
+//#region src/client.tsx
+const clients = {};
+/**
+* Create and register a FaasReactClient instance.
+*
+* The returned client is stored by `baseUrl` and becomes the default client
+* used by helpers such as {@link faas} and {@link useFaas}.
+*
+* @param options - Client configuration including base URL, default request options, and error hooks.
+* @param options.baseUrl - Base URL used to register and route the client instance.
+* @param options.options - Default browser-client request options forwarded to `FaasBrowserClient`.
+* @param options.onError - Hook factory used to handle failed `faas` and `useFaas` requests.
+* See {@link Options} for supported browser-client request fields such as `headers`,
+* `beforeRequest`, `request`, `baseUrl`, and `stream`.
+* @returns Registered FaasReactClient instance.
+*
+* @example
+* ```ts
+* import { FaasReactClient, ResponseError } from '@faasjs/react'
+*
+* const client = FaasReactClient({
+*   baseUrl: 'http://localhost:8080/api/',
+*   onError: (action, params) => async (res) => {
+*     if (res instanceof ResponseError) {
+*       reportErrorToSentry(res, {
+*         tags: { action },
+*         extra: { params },
+*       })
+*     }
+*   },
+* })
+* ```
+*/
+function FaasReactClient(options = { baseUrl: "/" }) {
+	const { baseUrl, options: clientOptions, onError } = options;
+	const resolvedBaseUrl = baseUrl ?? "/";
+	const client = new FaasBrowserClient(resolvedBaseUrl, clientOptions);
+	function withBaseUrl(options) {
+		if (options?.baseUrl) return options;
+		return {
+			...options ?? {},
+			baseUrl: resolvedBaseUrl
+		};
+	}
+	const reactClient = {
+		id: client.id,
+		faas: async (action, params, requestOptions) => faas(action, params, withBaseUrl(requestOptions)),
+		useFaas: (action, defaultParams, requestOptions) => useFaas(action, defaultParams, withBaseUrl(requestOptions)),
+		FaasDataWrapper: (props) => /* @__PURE__ */ jsx(FaasDataWrapper, {
+			...props,
+			baseUrl: resolvedBaseUrl
+		}),
+		...onError ? { onError } : {},
+		browserClient: client
+	};
+	clients[resolvedBaseUrl] = reactClient;
+	return reactClient;
 }
+/**
+* Get a registered FaasReactClient instance.
+*
+* When `host` is omitted, the first registered client is returned. If no client
+* has been created yet, a default client is initialized automatically.
+* Use `getClient` only for special cases such as multiple Faas clients with
+* different base URLs. In normal single-client app code, prefer the default
+* `faas`, `useFaas`, or `FaasReactClient` setup directly.
+*
+* @param host - Registered base URL to look up. Omit it to use the default client.
+* @returns Registered or newly created FaasReactClient instance.
+*
+* @example
+* ```ts
+* import { FaasReactClient, getClient } from '@faasjs/react'
+*
+* FaasReactClient({
+*   baseUrl: 'https://service-a.example.com/api/',
+* })
+*
+* FaasReactClient({
+*   baseUrl: 'https://service-b.example.com/api/',
+* })
+*
+* const client = getClient('https://service-b.example.com/api/')
+*
+* await client.faas('/pages/posts/get', { id: 1 })
+* ```
+*/
 function getClient(host) {
-  const client = clients[host || Object.keys(clients)[0]];
-  if (!client) {
-    console.warn("FaasReactClient is not initialized manually, use default.");
-    return FaasReactClient();
-  }
-  return client;
+	const client = clients[host || Object.keys(clients)[0]];
+	if (!client) {
+		console.warn("FaasReactClient is not initialized manually, use default.");
+		return FaasReactClient();
+	}
+	return client;
 }
+//#endregion
+//#region src/constant.ts
+/**
+* Returns a constant value that is created by the given function.
+*
+* @template T - Constant value type returned by the initializer.
+* @param fn - Initializer that runs only once for the current component instance.
+*
+* @example
+* ```tsx
+* import { useConstant } from '@faasjs/react'
+*
+* function Page() {
+*   const requestId = useConstant(() => crypto.randomUUID())
+*
+*   return <span>{requestId}</span>
+* }
+* ```
+*/
 function useConstant(fn) {
-  const ref = useRef(null);
-  if (!ref.current) {
-    ref.current = { v: fn() };
-  }
-  return ref.current.v;
+	const ref = useRef(null);
+	if (!ref.current) ref.current = { v: fn() };
+	return ref.current.v;
 }
-useConstant.whyDidYouRender = true;
+//#endregion
+//#region src/ErrorBoundary.tsx
+/**
+* React error boundary with an optional custom fallback element.
+*
+* The boundary renders its children until a descendant throws. After that it
+* either clones `errorChildren` with injected error details or renders a simple
+* built-in fallback.
+*
+* @example
+* ```tsx
+* import { ErrorBoundary } from '@faasjs/react'
+*
+* function Fallback({ errorMessage }: { errorMessage?: string }) {
+*   return <div>{errorMessage}</div>
+* }
+*
+* <ErrorBoundary errorChildren={<Fallback />}>
+*   <DangerousWidget />
+* </ErrorBoundary>
+* ```
+*/
 var ErrorBoundary = class extends Component {
-  static displayName = "ErrorBoundary";
-  static whyDidYouRender = true;
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: void 0,
-      info: { componentStack: "" }
-    };
-  }
-  componentDidCatch(error, info) {
-    this.setState({
-      error,
-      info
-    });
-  }
-  render() {
-    const errorMessage = (this.state.error || "").toString();
-    const errorDescription = this.state.info?.componentStack ? this.state.info.componentStack : null;
-    if (this.state.error) {
-      if (this.props.onError)
-        this.props.onError(this.state.error, this.state.info);
-      if (this.props.errorChildren)
-        return cloneElement(this.props.errorChildren, {
-          error: this.state.error,
-          info: this.state.info,
-          errorMessage,
-          errorDescription
-        });
-      return /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { children: errorMessage }),
-        /* @__PURE__ */ jsx("pre", { children: errorDescription })
-      ] });
-    }
-    return this.props.children;
-  }
+	/**
+	* Stable display name used by React DevTools.
+	*/
+	static displayName = "ErrorBoundary";
+	/**
+	* Create an error boundary with empty error state.
+	*
+	* @param props - Boundary props.
+	* @param props.children - Descendant elements protected by the boundary.
+	* @param props.onError - Callback invoked after a render error is captured.
+	* @param props.errorChildren - Custom fallback element that receives error details.
+	*/
+	constructor(props) {
+		super(props);
+		this.state = {
+			error: null,
+			info: { componentStack: "" }
+		};
+	}
+	/**
+	* Capture rendering errors from descendant components.
+	*
+	* @param error - Caught render error.
+	* @param info - React component stack metadata.
+	*/
+	componentDidCatch(error, info) {
+		this.setState({
+			error,
+			info
+		});
+	}
+	/**
+	* Render children or the configured fallback for the captured error.
+	*/
+	render() {
+		const { error, info } = this.state;
+		const errorMessage = String(error ?? "");
+		const errorDescription = info.componentStack || void 0;
+		if (error) {
+			if (this.props.onError) this.props.onError(error, info);
+			if (this.props.errorChildren) return cloneElement(this.props.errorChildren, {
+				error,
+				info,
+				errorMessage,
+				...errorDescription ? { errorDescription } : {}
+			});
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: errorMessage }), /* @__PURE__ */ jsx("pre", { children: errorDescription })] });
+		}
+		return this.props.children ?? null;
+	}
 };
-function useStateRef(initialValue) {
-  const [state, setState] = useState(initialValue ?? null);
-  const ref = useRef(state);
-  useEffect(() => {
-    ref.current = state;
-  }, [state]);
-  return [state, setState, ref];
+//#endregion
+//#region src/OptionalWrapper.tsx
+/**
+* Conditionally wrap children with another component.
+*
+* @param props - Wrapper condition, wrapper component, and child content.
+* @param props.condition - When `true`, wrap children with `Wrapper`.
+* @param props.Wrapper - Component used as the wrapper when the condition passes.
+* @param props.wrapperProps - Props forwarded to the wrapper component.
+* @param props.children - Content rendered directly or inside the wrapper.
+* @returns Wrapped children or the original children when `condition` is false.
+*
+* @example
+* ```tsx
+* import { OptionalWrapper } from '@faasjs/react'
+*
+* const Wrapper = ({ children }: { children: React.ReactNode }) => (
+*   <div className='wrapper'>{children}</div>
+* )
+*
+* const App = () => (
+*   <OptionalWrapper condition={true} Wrapper={Wrapper}>
+*     <span>Test</span>
+*   </OptionalWrapper>
+* )
+* ```
+*/
+function OptionalWrapper(props) {
+	const { condition, Wrapper, wrapperProps, children } = props;
+	if (condition) return /* @__PURE__ */ jsx(Wrapper, {
+		...wrapperProps,
+		children
+	});
+	return children;
 }
+OptionalWrapper.displayName = "OptionalWrapper";
+//#endregion
+//#region src/splittingState.tsx
+/**
+* Create local state entries and matching setters for each key in an object.
+*
+* @template T - A generic type that extends a record with string keys and any values.
+* @param initialStates - Object whose keys become state values and `setXxx` setters.
+* @returns Object containing the original keys plus generated setter functions.
+*
+* @example
+* ```tsx
+* function Counter() {
+*   const { count, setCount, name, setName } = useSplittingState({ count: 0, name: 'John' })
+*
+*   return <>{name}: {count}</>
+* }
+* ```
+*/
 function useSplittingState(initialStates) {
-  const states = {};
-  for (const key of Object.keys(initialStates)) {
-    const state = useState(initialStates[key]);
-    Object.assign(states, {
-      [key]: state[0],
-      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
-    });
-  }
-  return states;
+	const states = {};
+	for (const key of Object.keys(initialStates)) {
+		const state = useState(initialStates[key]);
+		Object.assign(states, {
+			[key]: state[0],
+			[`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+		});
+	}
+	return states;
 }
+//#endregion
+//#region src/splittingContext.tsx
+/**
+* Create a context whose keys can be consumed independently.
+*
+* `createSplittingContext` returns a `Provider` and a `use` hook. Each key in
+* the provided shape is backed by a separate React context so readers only
+* subscribe to the values they access.
+*
+* @template T - Context value shape exposed by the provider and hook.
+* @param defaultValue - Default value map or key list used to create split contexts.
+* @returns Provider and hook helpers for the split context.
+*
+* @example
+* ```tsx
+* const { Provider, use } = createSplittingContext<{
+*   value: number
+*   setValue: React.Dispatch<React.SetStateAction<number>>
+* }>({
+*   value: 0,
+*   setValue: null,
+* })
+*
+* function ReaderComponent() {
+*   const { value } = use()
+*
+*   return <div>{value}</div>
+* }
+*
+* function WriterComponent() {
+*   const { setValue } = use()
+*
+*   return (
+*     <button type='button' onClick={() => setValue((p: number) => p + 1)}>
+*       Change
+*     </button>
+*   )
+* }
+*
+* function App() {
+*   const [value, setValue] = useState(0)
+*
+*   return (
+*     <Provider value={{ value, setValue }}>
+*       <ReaderComponent />
+*       <WriterComponent />
+*     </Provider>
+*   )
+* }
+* ```
+*/
 function createSplittingContext(defaultValue) {
-  const keys = Array.isArray(defaultValue) ? defaultValue : Object.keys(defaultValue);
-  const defaultValues = Array.isArray(defaultValue) ? keys.reduce(
-    (prev, cur) => {
-      prev[cur] = null;
-      return prev;
-    },
-    {}
-  ) : defaultValue;
-  const contexts = {};
-  for (const key of keys) contexts[key] = createContext(defaultValues[key]);
-  function Provider(props) {
-    const states = props.initializeStates ? useSplittingState(props.initializeStates) : {};
-    let children = props.memo ? useEqualMemo(
-      () => props.children,
-      props.memo === true ? [] : props.memo
-    ) : props.children;
-    for (const key of keys) {
-      const Context = contexts[key];
-      const value = props.value?.[key] ?? states[key] ?? defaultValues[key];
-      children = /* @__PURE__ */ jsx(Context.Provider, { value, children });
-    }
-    return children;
-  }
-  Provider.displayName = "SplittingContextProvider";
-  Provider.whyDidYouRender = true;
-  function use() {
-    return useConstant(() => {
-      const obj = /* @__PURE__ */ Object.create(null);
-      for (const key of Object.keys(contexts)) {
-        Object.defineProperty(obj, key, {
-          get: () => {
-            if (!contexts[key]) {
-              throw new Error(`Context for key "${key}" is undefined`);
-            }
-            return useContext(contexts[key]);
-          }
-        });
-      }
-      return Object.freeze(obj);
-    });
-  }
-  use.whyDidYouRender = true;
-  return {
-    Provider,
-    use
-  };
-}
-
-// src/Form/context.tsx
-var FormContext = createSplittingContext([
-  "items",
-  "onSubmit",
-  "Elements",
-  "lang",
-  "rules",
-  "submitting",
-  "setSubmitting",
-  "values",
-  "setValues",
-  "errors",
-  "setErrors",
-  "valuesRef"
-]);
-var FormContextProvider = FormContext.Provider;
-var useFormContext = FormContext.use;
-function processValue(input, rules) {
-  switch (rules?.type) {
-    case "number":
-      return Number(input);
-    case "string":
-      return String(input);
-    default:
-      return input;
-  }
-}
-function FormInput({
-  name,
-  rules,
-  ...rest
-}) {
-  const { Elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if (rest.Input) {
-    return /* @__PURE__ */ jsx(
-      rest.Input,
-      {
-        name,
-        value,
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: processValue(v, rules)
-        })),
-        ...rest.props
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    Elements.Input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      })),
-      ...rest.props
-    }
-  );
+	const keys = Array.isArray(defaultValue) ? defaultValue : Object.keys(defaultValue);
+	const defaultValues = Array.isArray(defaultValue) ? keys.reduce((prev, cur) => {
+		prev[cur] = null;
+		return prev;
+	}, {}) : defaultValue;
+	const contexts = {};
+	for (const key of keys) contexts[key] = createContext(defaultValues[key]);
+	function Provider(props) {
+		const states = props.initializeStates ? useSplittingState(props.initializeStates) : {};
+		let children = props.memo ? useEqualMemo(() => props.children, props.memo === true ? [] : props.memo) : props.children;
+		for (const key of keys) {
+			const Context = contexts[key];
+			const value = props.value?.[key] ?? states[key] ?? defaultValues[key];
+			children = /* @__PURE__ */ jsx(Context.Provider, {
+				value,
+				children
+			});
+		}
+		return children;
+	}
+	Provider.displayName = "SplittingContextProvider";
+	function use() {
+		return useConstant(() => {
+			const obj = Object.create(null);
+			for (const key of Object.keys(contexts)) Object.defineProperty(obj, key, { get: () => {
+				if (!contexts[key]) throw new Error(`Context for key "${key}" is undefined`);
+				return useContext(contexts[key]);
+			} });
+			return Object.freeze(obj);
+		});
+	}
+	return {
+		Provider,
+		use
+	};
 }
-FormInput.displayName = "FormInput";
-FormInput.whyDidYouRender = true;
-function FormItem(props) {
-  const { Elements, errors } = useFormContext();
-  const Label = props.label?.Label ?? Elements.Label;
-  return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsx(FormInput, { name: props.name, rules: props.rules, ...props.input }) });
+//#endregion
+//#region src/useFaasStream.tsx
+/**
+* Stream a FaasJS response into React state.
+*
+* `useFaasStream` is the default hook for streaming FaasJS responses in React.
+* It sends a streaming request, appends decoded text chunks to `data`, and
+* exposes reload helpers for retrying the same action.
+*
+* @param action - Action path to invoke.
+* @param defaultParams - Params used for the initial request and future reloads.
+* @param options - Optional hook configuration such as controlled data, debounce, and skip logic.
+* @param options.params - Request params override used without mutating the hook's stored params state.
+* @param options.data - Controlled stream text used instead of the hook's internal state.
+* @param options.setData - Controlled setter used instead of the hook's internal `setData`.
+* @param options.skip - Boolean or predicate that suppresses the automatic request until `reload()` runs.
+* @param options.debounce - Milliseconds to wait before sending the latest request.
+* @param options.baseUrl - Base URL override used for this hook instance.
+* @returns Streaming request state and helper methods described by {@link UseFaasStreamResult}.
+*
+* @example
+* ```tsx
+* import { useFaasStream } from '@faasjs/react'
+*
+* function Chat({ prompt }: { prompt: string }) {
+*   const { data, error, loading, reload } = useFaasStream('/pages/chat/stream', { prompt })
+*
+*   if (loading) return <div>Streaming...</div>
+*
+*   if (error) {
+*     return (
+*       <div>
+*         <div>Stream failed: {error.message}</div>
+*         <button type="button" onClick={() => reload()}>
+*           Retry
+*         </button>
+*       </div>
+*     )
+*   }
+*
+*   return <pre>{data}</pre>
+* }
+* ```
+*/
+function useFaasStream(action, defaultParams, options = {}) {
+	const [data, setData] = useState(options.data || "");
+	const request = useFaasRequest({
+		action,
+		defaultParams,
+		options,
+		beforeSend: () => setData(""),
+		send: async ({ action, params, signal, client }) => {
+			const response = await client.browserClient.action(action, params, {
+				signal,
+				stream: true
+			});
+			if (!response.body) throw new Error("Response body is null");
+			const reader = response.body.getReader();
+			const decoder = new TextDecoder();
+			let accumulatedText = "";
+			try {
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+					accumulatedText += decoder.decode(value, { stream: true });
+					setData(accumulatedText);
+				}
+				return accumulatedText;
+			} catch (error) {
+				reader.releaseLock();
+				throw error;
+			}
+		}
+	});
+	return {
+		action,
+		params: request.params,
+		loading: request.loading,
+		reloadTimes: request.reloadTimes,
+		data: options.data || data,
+		error: request.error,
+		reload: request.reload,
+		setData: options.setData || setData,
+		setLoading: request.setLoading,
+		setError: request.setError
+	};
 }
-FormItem.displayName = "FormItem";
-FormItem.whyDidYouRender = true;
-function FormBody() {
-  const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...item }, item.name));
-}
-FormBody.displayName = "FormBody";
-FormBody.whyDidYouRender = true;
-var FormButtonElement = forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsx(
-  "button",
-  {
-    type: "button",
-    disabled: submitting,
-    onClick: submit,
-    ...props,
-    ref,
-    children
-  }
-));
-FormButtonElement.displayName = "FormButtonElement";
-Object.assign(FormButtonElement, { whyDidYouRender: true });
-var FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
-FormInputElement.displayName = "FormInputElement";
-Object.assign(FormInputElement, { whyDidYouRender: true });
-var FormLabelElement = ({
-  name,
-  title,
-  description,
-  error,
-  children
-}) => {
-  return /* @__PURE__ */ jsxs("label", { children: [
-    title ?? name,
-    children,
-    description,
-    error && /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: error.message })
-  ] });
-};
-FormLabelElement.displayName = "FormLabelElement";
-FormLabelElement.whyDidYouRender = true;
-
-// src/Form/elements/index.ts
-var FormDefaultElements = {
-  Label: FormLabelElement,
-  Input: FormInputElement,
-  Button: FormButtonElement
-};
-
-// src/Form/rules.ts
-var FormDefaultRules = {
-  required: async (value, _, lang) => {
-    if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
-      throw Error(lang?.required);
-    }
-  },
-  type: async (value, options, lang) => {
-    switch (options) {
-      case "string":
-        if (typeof value !== "string") throw Error(lang?.string);
-        break;
-      case "number":
-        if (Number.isNaN(Number(value))) throw Error(lang?.number);
-        break;
-    }
-  },
-  custom: async (value, options) => {
-    return options(value);
-  }
-};
-async function validValues(rules, items, values, lang) {
-  const errors = {};
-  for (const item of items) {
-    const value = values[item.name];
-    const rulesOptions = item.rules;
-    if (rulesOptions) {
-      for (const [name, options] of Object.entries(rulesOptions)) {
-        try {
-          await rules[name](value, options, lang);
-        } catch (error) {
-          errors[item.name] = error;
-          break;
-        }
-      }
-    }
-  }
-  return errors;
-}
-function FormFooter() {
-  const {
-    submitting,
-    setSubmitting,
-    onSubmit,
-    valuesRef,
-    Elements,
-    items,
-    setErrors,
-    lang,
-    rules
-  } = useFormContext();
-  const handleSubmit = useCallback(async () => {
-    setSubmitting(true);
-    setErrors({});
-    const errors = await validValues(rules, items, valuesRef.current, lang);
-    if (Object.keys(errors).length) {
-      setErrors(errors);
-      setSubmitting(false);
-      return;
-    }
-    onSubmit(valuesRef.current).finally(() => setSubmitting(false));
-  }, [setSubmitting, setErrors, rules, items, lang, onSubmit]);
-  const MemoizedButton = useMemo(
-    () => /* @__PURE__ */ jsx(Elements.Button, { submitting, submit: handleSubmit, children: lang.submit }),
-    [submitting, handleSubmit, lang.submit, Elements.Button]
-  );
-  return MemoizedButton;
-}
-FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
-
-// src/Form/lang.ts
-var FormDefaultLang = {
-  submit: "Submit",
-  required: "This field is required",
-  string: "This field must be a string",
-  number: "This field must be a number"
-};
-function mergeValues(items, defaultValues = {}) {
-  const values = {};
-  for (const item of items)
-    values[item.name] = defaultValues[item.name] ?? "";
-  return values;
-}
-function FormContainer({
-  defaultValues,
-  Elements,
-  rules,
-  lang,
-  items,
-  ...props
-}) {
-  const [values, setValues, valuesRef] = useStateRef(
-    mergeValues(items, defaultValues)
-  );
-  return /* @__PURE__ */ jsxs(
-    FormContextProvider,
-    {
-      initializeStates: {
-        errors: {},
-        submitting: false
-      },
-      value: {
-        Elements: Object.assign(FormDefaultElements, Elements),
-        lang: Object.assign(FormDefaultLang, lang),
-        rules: Object.assign(FormDefaultRules, rules),
-        items,
-        values,
-        setValues,
-        valuesRef,
-        ...props
-      },
-      memo: true,
-      children: [
-        /* @__PURE__ */ jsx(FormBody, {}),
-        /* @__PURE__ */ jsx(FormFooter, {})
-      ]
-    }
-  );
-}
-FormContainer.displayName = "FormContainer";
-FormContainer.whyDidYouRender = true;
-var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
-};
-OptionalWrapper.displayName = "OptionalWrapper";
-OptionalWrapper.whyDidYouRender = true;
+//#endregion
+//#region src/usePrevious.ts
+/**
+* Hook to store the previous value of a state or prop.
+*
+* @template T - The type of the value.
+* @param value - The current value to track.
+* @returns Previous value from the prior render, or `undefined` on the first render.
+*
+* @example
+* ```tsx
+* import { usePrevious } from '@faasjs/react'
+*
+* function Counter({ count }: { count: number }) {
+*   const previous = usePrevious(count)
+*
+*   return <span>{previous} -> {count}</span>
+* }
+* ```
+*/
 function usePrevious(value) {
-  const ref = useRef(void 0);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+//#endregion
+//#region src/useStateRef.ts
+/**
+* Custom hook that returns a stateful value and a ref to that value.
+*
+* @template T - The type of the value.
+* @param initialValue - Initial state value. When omitted, state starts as `null`.
+* @returns Tuple containing the current state, the state setter, and a ref that always points at the latest state.
+*
+* @example
+* ```tsx
+* import { useStateRef } from '@faasjs/react'
+*
+* function MyComponent() {
+*   const [value, setValue, ref] = useStateRef(0)
+*
+*   return (
+*     <div>
+*       <p>Value: {value}</p>
+*       <button onClick={() => setValue(value + 1)}>Increment</button>
+*       <button onClick={() => console.log(ref.current)}>Submit</button>
+*     </div>
+*   )
+* }
+* ```
+*/
+function useStateRef(initialValue) {
+	const [state, setState] = useState(initialValue ?? null);
+	const ref = useRef(state);
+	useEffect(() => {
+		ref.current = state;
+	}, [state]);
+	return [
+		state,
+		setState,
+		ref
+	];
 }
-
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+//#endregion
+export { ErrorBoundary, FaasBrowserClient, FaasDataWrapper, FaasReactClient, OptionalWrapper, Response, ResponseError, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasStream, usePrevious, useSplittingState, useStateRef, withFaasData };