@faasjs/react 3.5.2 → 3.6.1

package/README.md

@@ -22,6 +22,7 @@ React plugin for FaasJS.
     - [useEqualCallback](functions/useEqualCallback.md): Memoize a callback with deep equality.
     - [useConstant](functions/useConstant.md): Create a constant value with hooks.
     - [createSplittingContext](functions/createSplittingContext.md): Create a context for code splitting.
+    - [splittingState](functions/splittingState.md): Create a splitting states.
     - [OptionalWrapper](functions/OptionalWrapper.md): Render a component optionally.
     - [ErrorBoundary](classes/ErrorBoundary.md): Catch errors in the component tree.
   - Fetch Data:
@@ -51,6 +52,7 @@ npm install @faasjs/react
 - [useEqualMemo](functions/useEqualMemo.md)
 - [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
+- [useSplittingState](functions/useSplittingState.md)
 - [withFaasData](functions/withFaasData.md)
 
 ## Classes

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { FaasAction, FaasData, FaasParams } 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 { ReactNode, ReactElement, Component, ComponentType, ComponentProps } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -105,21 +105,75 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
 } | (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?: 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[];
     }): 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>;
+
 /**
  * Injects FaasData props.
  */
@@ -317,4 +371,4 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { FaasAction, FaasData, FaasParams } 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 { ReactNode, ReactElement, Component, ComponentType, ComponentProps } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -105,21 +105,75 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
 } | (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?: 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[];
     }): 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>;
+
 /**
  * Injects FaasData props.
  */
@@ -317,4 +371,4 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };

package/dist/index.js

@@ -115,6 +115,14 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
+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 FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -340,4 +348,5 @@ exports.useEqualEffect = useEqualEffect;
 exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
+exports.useSplittingState = useSplittingState;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -113,6 +113,14 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
+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 FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -324,4 +332,4 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useSplittingState, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.5.2",
+  "version": "3.6.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,12 +35,12 @@
   ],
   "peerDependencies": {
     "react": "*",
-    "@faasjs/browser": "3.5.2"
+    "@faasjs/browser": "3.6.1"
   },
   "devDependencies": {
     "@types/react": "*",
     "react": "*",
-    "@faasjs/browser": "3.5.2"
+    "@faasjs/browser": "3.6.1"
   },
   "engines": {
     "node": ">=22.0.0",