@faasjs/react 7.0.0 → 7.0.1

package/README.md

@@ -65,12 +65,12 @@ npm install @faasjs/react react
 ## Classes
 
 - [ErrorBoundary](classes/ErrorBoundary.md)
-- [Response](classes/Response.md)
-- [ResponseError](classes/ResponseError.md)
 
 ## Interfaces
 
 - [ErrorBoundaryProps](interfaces/ErrorBoundaryProps.md)
+- [Response](interfaces/Response.md)
+- [ResponseError](interfaces/ResponseError.md)
 
 ## Namespaces
 

package/dist/index.cjs

@@ -1,18 +1,10 @@
 'use strict';
 
+var browser = require('@faasjs/browser');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var browser = require('@faasjs/browser');
 
-// src/constant.ts
-function useConstant(fn) {
-  const ref = react.useRef(null);
-  if (!ref.current) {
-    ref.current = { v: fn() };
-  }
-  return ref.current.v;
-}
-useConstant.whyDidYouRender = true;
+// src/client.tsx
 var AsyncFunction = (async () => {
 }).constructor;
 function equal(a, b) {
@@ -77,80 +69,6 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
-function useSplittingState(initialStates) {
-  const states = {};
-  for (const key of Object.keys(initialStates)) {
-    const state = react.useState(initialStates[key]);
-    Object.assign(states, {
-      [key]: state[0],
-      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
-    });
-  }
-  return states;
-}
-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] = react.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__ */ jsxRuntime.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 react.useContext(contexts[key]);
-          }
-        });
-      }
-      return Object.freeze(obj);
-    });
-  }
-  use.whyDidYouRender = true;
-  return {
-    Provider,
-    use
-  };
-}
-function usePrevious(value) {
-  const ref = react.useRef(void 0);
-  react.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-function useStateRef(initialValue) {
-  const [state, setState] = react.useState(initialValue ?? null);
-  const ref = react.useRef(state);
-  react.useEffect(() => {
-    ref.current = state;
-  }, [state]);
-  return [state, setState, ref];
-}
 var fixedForwardRef = react.forwardRef;
 var FaasDataWrapper = fixedForwardRef(
   (props, ref) => {
@@ -342,6 +260,14 @@ function getClient(host) {
   }
   return client;
 }
+function useConstant(fn) {
+  const ref = react.useRef(null);
+  if (!ref.current) {
+    ref.current = { v: fn() };
+  }
+  return ref.current.v;
+}
+useConstant.whyDidYouRender = true;
 var ErrorBoundary = class extends react.Component {
   static displayName = "ErrorBoundary";
   static whyDidYouRender = true;
@@ -379,11 +305,73 @@ var ErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
-var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-};
-OptionalWrapper.displayName = "OptionalWrapper";
-OptionalWrapper.whyDidYouRender = true;
+function useStateRef(initialValue) {
+  const [state, setState] = react.useState(initialValue ?? null);
+  const ref = react.useRef(state);
+  react.useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  return [state, setState, ref];
+}
+function useSplittingState(initialStates) {
+  const states = {};
+  for (const key of Object.keys(initialStates)) {
+    const state = react.useState(initialStates[key]);
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
+  }
+  return states;
+}
+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] = react.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__ */ jsxRuntime.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 react.useContext(contexts[key]);
+          }
+        });
+      }
+      return Object.freeze(obj);
+    });
+  }
+  use.whyDidYouRender = true;
+  return {
+    Provider,
+    use
+  };
+}
 
 // src/Form/context.tsx
 var FormContext = createSplittingContext([
@@ -461,6 +449,45 @@ function FormBody() {
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
+var FormButtonElement = react.forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled: submitting,
+    onClick: submit,
+    ...props,
+    ref,
+    children
+  }
+));
+FormButtonElement.displayName = "FormButtonElement";
+Object.assign(FormButtonElement, { whyDidYouRender: true });
+var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { children: [
+    title ?? name,
+    children,
+    description,
+    error && /* @__PURE__ */ jsxRuntime.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 = {
@@ -532,45 +559,6 @@ function FormFooter() {
 }
 FormFooter.displayName = "FormFooter";
 FormFooter.whyDidYouRender = true;
-var FormButtonElement = react.forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "button",
-  {
-    type: "button",
-    disabled: submitting,
-    onClick: submit,
-    ...props,
-    ref,
-    children
-  }
-));
-FormButtonElement.displayName = "FormButtonElement";
-Object.assign(FormButtonElement, { whyDidYouRender: true });
-var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { children: [
-    title ?? name,
-    children,
-    description,
-    error && /* @__PURE__ */ jsxRuntime.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/lang.ts
 var FormDefaultLang = {
@@ -623,6 +611,18 @@ function FormContainer({
 }
 FormContainer.displayName = "FormContainer";
 FormContainer.whyDidYouRender = true;
+var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
+  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+OptionalWrapper.displayName = "OptionalWrapper";
+OptionalWrapper.whyDidYouRender = true;
+function usePrevious(value) {
+  const ref = react.useRef(void 0);
+  react.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
 
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;

package/dist/index.d.ts

@@ -1,227 +1,11 @@
-import { FaasActionUnionType, FaasAction, FaasParams, FaasData } from '@faasjs/types';
-export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
+import { FaasActionUnionType, FaasAction, FaasParams, FaasData } from '@faasjs/types';
+export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, RefObject, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import { JSX, ReactNode, ReactElement, Component, ComponentType, JSXElementConstructor, ComponentProps, Dispatch, SetStateAction, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-/**
- * Returns a constant value that is created by the given function.
- */
-declare function useConstant<T>(fn: () => T): T;
-declare namespace useConstant {
-    var whyDidYouRender: boolean;
-}
-
-/**
- * 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.
- */
-declare function equal(a: any, b: any): boolean;
-/**
- * Custom hook that memoizes a value using deep equality comparison.
- *
- * @param value - The value to be memoized.
- * @returns The memoized value.
- */
-declare function useEqualMemoize(value: any): any;
-/**
- * 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.
- */
-declare function useEqualEffect(callback: React.EffectCallback, dependencies: any[]): void;
-/**
- * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
- *
- * @param callback - The callback function to run.
- * @param dependencies - The list of dependencies.
- * @returns The result of the `useMemo` hook with memoized dependencies.
- */
-declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
-/**
- * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
- *
- * @param callback - The callback function to run.
- * @param dependencies - The list of dependencies.
- * @returns The result of the `useCallback` hook with memoized dependencies.
- */
-declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
-
-/**
- * Creates a splitting context with the given default value.
- *
- * @param defaultValue The default value of the splitting 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>
- *   )
- * }
- * ```
- */
-declare function createSplittingContext<T extends Record<string, any>>(defaultValue: {
-    [K in keyof T]: Partial<T[K]> | null;
-} | (keyof T)[]): {
-    /**
-     * The provider component of the splitting context.
-     *
-     * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#provider
-     *
-     * @example
-     * ```tsx
-     * function App() {
-     *   const [value, setValue] = useState(0)
-     *
-     *   return (
-     *     <Provider value={{ value, setValue }}>
-     *       <ReaderComponent />
-     *       <WriterComponent />
-     *     </Provider>
-     *   )
-     * }
-     * ```
-     */
-    Provider<NewT extends T = T>(props: {
-        value?: Partial<NewT>;
-        children: ReactNode;
-        /**
-         * Whether to use memoization for the children.
-         *
-         * @default false
-         *
-         * `true`: memoize the children without dependencies.
-         * `any[]`: memoize the children with specific dependencies.
-         */
-        memo?: true | any[];
-        /**
-         * An object containing initial values that will be automatically converted into state variables using {@link useSplittingState} hook. Each property will create both a state value and its setter following the pattern: value/setValue.
-         *
-         * @example
-         * ```tsx
-         * <Provider
-         *  initializeStates={{
-         *    value: 0,
-         *  }}
-         * >
-         *   // Children will have access to: value, setValue
-         * </Provider>
-         */
-        initializeStates?: Partial<NewT>;
-    }): ReactNode;
-    /**
-     * The hook to use the splitting context.
-     *
-     * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#use
-     *
-     * @example
-     * ```tsx
-     * function ChildComponent() {
-     *   const { value, setValue } = use()
-     *
-     *   return <div>{value}<button onClick={() => setValue(1)}>change value</button></div>
-     * }
-     * ```
-     */
-    use: <NewT extends T = T>() => Readonly<NewT>;
-};
-
-type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
-type StateSetters<T> = {
-    [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
-};
-type StatesWithSetters<T> = T & StateSetters<T>;
-/**
- * A hook that initializes and splits state variables and their corresponding setters.
- *
- * @template T - A generic type that extends a record with string keys and any values.
- * @param {T} initialStates - An object containing the initial states.
- *
- * @example
- * ```tsx
- * function Counter() {
- *   const { count, setCount, name, setName } = useSplittingState({ count: 0, name: 'John' });
- *
- *   return <>{name}: {count}</>
- * }
- * ```
- */
-declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
-
-/**
- * Hook to store the previous value of a state or prop.
- *
- * @template T - The type of the value.
- * @param {T} value - The current value to be stored.
- * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
- */
-declare function usePrevious<T = any>(value: T): T | undefined;
-
-/**
- * Custom hook that returns a stateful value and a ref to that value.
- *
- * @template T - The type of the value.
- * @param {T} initialValue - The initial value of the state.
- * @returns {[T, (value: T) => void, RefObject<T>]} - The stateful value, a function to set the value, and a ref to the value.
- *
- * @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>
- * )
- */
-declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>];
-
 /**
  * Injects FaasData props.
  */
@@ -358,20 +142,12 @@ declare function FaasReactClient({ baseUrl, options, onError }?: FaasReactClient
 declare function getClient(host?: string): FaasReactClientInstance;
 
 /**
- * Request faas server
- *
- * @param action {string} action name
- * @param params {object} action params
- * @returns {Promise<Response<any>>}
- *
- * @example
- * ```ts
- * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
- *   console.log(res.data.title)
- * })
- * ```
+ * Returns a constant value that is created by the given function.
  */
-declare function faas<PathOrData extends FaasActionUnionType>(action: FaasAction<PathOrData>, params: FaasParams<PathOrData>, options?: Options): Promise<Response<FaasData<PathOrData>>>;
+declare function useConstant<T>(fn: () => T): T;
+declare namespace useConstant {
+    var whyDidYouRender: boolean;
+}
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -394,38 +170,52 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>> | react_jsx_runtime.JSX.Element;
+    render(): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>>;
 }
 
-type OptionalWrapperProps<TWrapper extends ComponentType<{
-    children: ReactNode;
-}> = any> = {
-    condition: boolean;
-    Wrapper: TWrapper;
-    wrapperProps?: ComponentProps<TWrapper>;
-    children: ReactNode;
-};
 /**
- * A wrapper component that conditionally wraps its children with a provided wrapper component.
+ * Compares two values for deep equality.
  *
- * @example
- * ```tsx
- * import { OptionalWrapper } from '@faasjs/react'
+ * 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.
  *
- * const Wrapper = ({ children }: { children: React.ReactNode }) => (
- *   <div className='wrapper'>{children}</div>
- * )
+ * @param a - The first value to compare.
+ * @param b - The second value to compare.
+ * @returns `true` if the values are deeply equal, `false` otherwise.
+ */
+declare function equal(a: any, b: any): boolean;
+/**
+ * Custom hook that memoizes a value using deep equality comparison.
  *
- * const App = () => (
- *   <OptionalWrapper condition={true} Wrapper={Wrapper}>
- *     <span>Test</span>
- *   </OptionalWrapper>
- * )
- * ```
+ * @param value - The value to be memoized.
+ * @returns The memoized value.
  */
-declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
-    whyDidYouRender: boolean;
-};
+declare function useEqualMemoize(value: any): any;
+/**
+ * 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.
+ */
+declare function useEqualEffect(callback: React.EffectCallback, dependencies: any[]): void;
+/**
+ * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
+ *
+ * @param callback - The callback function to run.
+ * @param dependencies - The list of dependencies.
+ * @returns The result of the `useMemo` hook with memoized dependencies.
+ */
+declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
+/**
+ * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
+ *
+ * @param callback - The callback function to run.
+ * @param dependencies - The list of dependencies.
+ * @returns The result of the `useCallback` hook with memoized dependencies.
+ */
+declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
 
 /**
  * Props for the FormButtonElement component.
@@ -624,4 +414,214 @@ declare const FormContextProvider: <NewT extends FormContextProps<Record<string,
 }) => react.ReactNode;
 declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>() => Readonly<NewT>;
 
+/**
+ * Request faas server
+ *
+ * @param action {string} action name
+ * @param params {object} action params
+ * @returns {Promise<Response<any>>}
+ *
+ * @example
+ * ```ts
+ * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
+ *   console.log(res.data.title)
+ * })
+ * ```
+ */
+declare function faas<PathOrData extends FaasActionUnionType>(action: FaasAction<PathOrData>, params: FaasParams<PathOrData>, options?: Options): Promise<Response<FaasData<PathOrData>>>;
+
+type OptionalWrapperProps<TWrapper extends ComponentType<{
+    children: ReactNode;
+}> = any> = {
+    condition: boolean;
+    Wrapper: TWrapper;
+    wrapperProps?: ComponentProps<TWrapper>;
+    children: ReactNode;
+};
+/**
+ * A wrapper component that conditionally wraps its children with a provided wrapper component.
+ *
+ * @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>
+ * )
+ * ```
+ */
+declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
+    whyDidYouRender: boolean;
+};
+
+/**
+ * Creates a splitting context with the given default value.
+ *
+ * @param defaultValue The default value of the splitting 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>
+ *   )
+ * }
+ * ```
+ */
+declare function createSplittingContext<T extends Record<string, any>>(defaultValue: {
+    [K in keyof T]: Partial<T[K]> | null;
+} | (keyof T)[]): {
+    /**
+     * The provider component of the splitting context.
+     *
+     * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#provider
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const [value, setValue] = useState(0)
+     *
+     *   return (
+     *     <Provider value={{ value, setValue }}>
+     *       <ReaderComponent />
+     *       <WriterComponent />
+     *     </Provider>
+     *   )
+     * }
+     * ```
+     */
+    Provider<NewT extends T = T>(props: {
+        value?: Partial<NewT>;
+        children: ReactNode;
+        /**
+         * Whether to use memoization for the children.
+         *
+         * @default false
+         *
+         * `true`: memoize the children without dependencies.
+         * `any[]`: memoize the children with specific dependencies.
+         */
+        memo?: true | any[];
+        /**
+         * An object containing initial values that will be automatically converted into state variables using {@link useSplittingState} hook. Each property will create both a state value and its setter following the pattern: value/setValue.
+         *
+         * @example
+         * ```tsx
+         * <Provider
+         *  initializeStates={{
+         *    value: 0,
+         *  }}
+         * >
+         *   // Children will have access to: value, setValue
+         * </Provider>
+         */
+        initializeStates?: Partial<NewT>;
+    }): ReactNode;
+    /**
+     * The hook to use the splitting context.
+     *
+     * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#use
+     *
+     * @example
+     * ```tsx
+     * function ChildComponent() {
+     *   const { value, setValue } = use()
+     *
+     *   return <div>{value}<button onClick={() => setValue(1)}>change value</button></div>
+     * }
+     * ```
+     */
+    use: <NewT extends T = T>() => Readonly<NewT>;
+};
+
+type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
+type StateSetters<T> = {
+    [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
+};
+type StatesWithSetters<T> = T & StateSetters<T>;
+/**
+ * A hook that initializes and splits state variables and their corresponding setters.
+ *
+ * @template T - A generic type that extends a record with string keys and any values.
+ * @param {T} initialStates - An object containing the initial states.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const { count, setCount, name, setName } = useSplittingState({ count: 0, name: 'John' });
+ *
+ *   return <>{name}: {count}</>
+ * }
+ * ```
+ */
+declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
+
+/**
+ * Hook to store the previous value of a state or prop.
+ *
+ * @template T - The type of the value.
+ * @param {T} value - The current value to be stored.
+ * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
+ */
+declare function usePrevious<T = any>(value: T): T | undefined;
+
+/**
+ * Custom hook that returns a stateful value and a ref to that value.
+ *
+ * @template T - The type of the value.
+ * @param {T} initialValue - The initial value of the state.
+ * @returns {[T, (value: T) => void, RefObject<T>]} - The stateful value, a function to set the value, and a ref to the value.
+ *
+ * @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>
+ * )
+ */
+declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>];
+
 export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, type FaasDataWrapperRef, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/dist/index.mjs

@@ -1,16 +1,8 @@
-import { forwardRef, useState, useImperativeHandle, cloneElement, useEffect, useMemo, createContext, useRef, useCallback, useContext, Component } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
+import { forwardRef, useState, useImperativeHandle, cloneElement, useEffect, useMemo, createContext, useRef, useCallback, Component, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/constant.ts
-function useConstant(fn) {
-  const ref = useRef(null);
-  if (!ref.current) {
-    ref.current = { v: fn() };
-  }
-  return ref.current.v;
-}
-useConstant.whyDidYouRender = true;
+// src/client.tsx
 var AsyncFunction = (async () => {
 }).constructor;
 function equal(a, b) {
@@ -75,80 +67,6 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
-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;
-}
-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
-  };
-}
-function usePrevious(value) {
-  const ref = useRef(void 0);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-function useStateRef(initialValue) {
-  const [state, setState] = useState(initialValue ?? null);
-  const ref = useRef(state);
-  useEffect(() => {
-    ref.current = state;
-  }, [state]);
-  return [state, setState, ref];
-}
 var fixedForwardRef = forwardRef;
 var FaasDataWrapper = fixedForwardRef(
   (props, ref) => {
@@ -340,6 +258,14 @@ function getClient(host) {
   }
   return client;
 }
+function useConstant(fn) {
+  const ref = useRef(null);
+  if (!ref.current) {
+    ref.current = { v: fn() };
+  }
+  return ref.current.v;
+}
+useConstant.whyDidYouRender = true;
 var ErrorBoundary = class extends Component {
   static displayName = "ErrorBoundary";
   static whyDidYouRender = true;
@@ -377,11 +303,73 @@ var ErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
-var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
-};
-OptionalWrapper.displayName = "OptionalWrapper";
-OptionalWrapper.whyDidYouRender = true;
+function useStateRef(initialValue) {
+  const [state, setState] = useState(initialValue ?? null);
+  const ref = useRef(state);
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  return [state, setState, ref];
+}
+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;
+}
+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([
@@ -459,6 +447,45 @@ function FormBody() {
 }
 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 = {
@@ -530,45 +557,6 @@ function FormFooter() {
 }
 FormFooter.displayName = "FormFooter";
 FormFooter.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/lang.ts
 var FormDefaultLang = {
@@ -621,5 +609,17 @@ function FormContainer({
 }
 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;
+function usePrevious(value) {
+  const ref = useRef(void 0);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
 
 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,10 +30,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": ">=7.0.0"
+    "@faasjs/browser": ">=7.0.1"
   },
   "devDependencies": {
-    "@faasjs/browser": ">=7.0.0",
+    "@faasjs/browser": ">=7.0.1",
     "@types/react": "*",
     "react": "*"
   },