@faasjs/react 0.0.3-beta.1 → 0.0.3-beta.100

package/README.md

@@ -10,7 +10,7 @@ React plugin for FaasJS.
 
 ## Install
 
-    npm install @faasjs/react
+    npm install @faasjs/react react react-dom
 
 ## Modules
 
@@ -20,14 +20,17 @@ React plugin for FaasJS.
 - [Response](classes/Response.md)
 - [ResponseError](classes/ResponseError.md)
 
+### Interfaces
+
+- [FaasDataInjection](interfaces/FaasDataInjection.md)
+- [FaasDataWrapperProps](interfaces/FaasDataWrapperProps.md)
+- [FaasReactClientInstance](interfaces/FaasReactClientInstance.md)
+
 ### Type Aliases
 
 - [FaasAction](#faasaction)
 - [FaasData](#faasdata)
-- [FaasDataInjection](#faasdatainjection)
-- [FaasDataWrapperProps](#faasdatawrapperprops)
 - [FaasParams](#faasparams)
-- [FaasReactClientInstance](#faasreactclientinstance)
 - [Options](#options)
 - [ResponseHeaders](#responseheaders)
 
@@ -59,60 +62,6 @@ ___
 
 ___
 
-### FaasDataInjection
-
-Ƭ **FaasDataInjection**<`Data`\>: `Object`
-
-Injects FaasData props.
-
-#### Type parameters
-
-| Name | Type |
-| :------ | :------ |
-| `Data` | `any` |
-
-#### Type declaration
-
-| Name | Type |
-| :------ | :------ |
-| `action` | `string` \| `any` |
-| `data` | `Data` |
-| `error` | `any` |
-| `loading` | `boolean` |
-| `params` | `Record`<`string`, `any`\> |
-| `promise` | `Promise`<[`Response`](classes/Response.md)<`Data`\>\> |
-| `setData` | `React.Dispatch`<`React.SetStateAction`<`Data`\>\> |
-| `setError` | `React.Dispatch`<`React.SetStateAction`<`any`\>\> |
-| `setLoading` | `React.Dispatch`<`React.SetStateAction`<`boolean`\>\> |
-| `setPromise` | `React.Dispatch`<`React.SetStateAction`<`Promise`<[`Response`](classes/Response.md)<`Data`\>\>\>\> |
-| `reload` | (`params?`: `Record`<`string`, `any`\>) => `Promise`<[`Response`](classes/Response.md)<`Data`\>\> |
-
-___
-
-### FaasDataWrapperProps
-
-Ƭ **FaasDataWrapperProps**<`PathOrData`\>: `Object`
-
-#### Type parameters
-
-| Name | Type |
-| :------ | :------ |
-| `PathOrData` | extends [`FaasAction`](#faasaction) |
-
-#### Type declaration
-
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `action` | `string` | - |
-| `data?` | [`FaasData`](#faasdata)<`PathOrData`\> | use custom data, should work with setData |
-| `fallback?` | `JSX.Element` \| ``false`` | - |
-| `params?` | [`FaasParams`](#faasparams)<`PathOrData`\> | - |
-| `setData?` | `React.Dispatch`<`React.SetStateAction`<[`FaasData`](#faasdata)<`PathOrData`\>\>\> | use custom setData, should work with data |
-| `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>) => `void` | - |
-| `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
-
-___
-
 ### FaasParams
 
 Ƭ **FaasParams**<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Params"``] : `any`
@@ -125,20 +74,6 @@ ___
 
 ___
 
-### FaasReactClientInstance
-
-Ƭ **FaasReactClientInstance**: `Object`
-
-#### Type declaration
-
-| Name | Type |
-| :------ | :------ |
-| `faas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `params`: [`FaasParams`](#faasparams)<`PathOrData`\>) => `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\> |
-| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: [`FaasParams`](#faasparams)<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\> |
-| `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
-
-___
-
 ### Options
 
 Ƭ **Options**: `RequestInit` & { `beforeRequest?`: (`{
@@ -173,7 +108,7 @@ A data wrapper for react components
 
 | Name | Type |
 | :------ | :------ |
-| `props` | [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\> |
+| `props` | [`FaasDataWrapperProps`](interfaces/FaasDataWrapperProps.md)<`PathOrData`\> |
 
 #### Returns
 
@@ -194,7 +129,7 @@ ___
 
 ### FaasReactClient
 
-▸ **FaasReactClient**(`__namedParameters`): [`FaasReactClientInstance`](#faasreactclientinstance)
+▸ **FaasReactClient**(`«destructured»`): [`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
 
 Before use faas, you should initialize a FaasReactClient.
 
@@ -202,14 +137,14 @@ Before use faas, you should initialize a FaasReactClient.
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | `Object` |
-| `__namedParameters.domain` | `string` |
-| `__namedParameters.onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
-| `__namedParameters.options?` | [`Options`](#options) |
+| `«destructured»` | `Object` |
+| › `domain` | `string` |
+| › `onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
+| › `options?` | [`Options`](#options) |
 
 #### Returns
 
-[`FaasReactClientInstance`](#faasreactclientinstance)
+[`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
 
 ```ts
 const client = FaasReactClient({
@@ -252,7 +187,7 @@ ___
 
 ### getClient
 
-▸ **getClient**(`domain?`): [`FaasReactClientInstance`](#faasreactclientinstance)
+▸ **getClient**(`domain?`): [`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
 
 Get FaasReactClient instance
 
@@ -264,7 +199,7 @@ Get FaasReactClient instance
 
 #### Returns
 
-[`FaasReactClientInstance`](#faasreactclientinstance)
+[`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
 
 ```ts
 getClient()
@@ -276,7 +211,7 @@ ___
 
 ### useFaas
 
-▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
+▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`, `options?`): [`FaasDataInjection`](interfaces/FaasDataInjection.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>
 
 Request faas server with React hook
 
@@ -292,10 +227,14 @@ Request faas server with React hook
 | :------ | :------ | :------ |
 | `action` | `string` \| `PathOrData` | {string} action name |
 | `defaultParams` | [`FaasParams`](#faasparams)<`PathOrData`\> | {object} initial action params |
+| `options?` | `Object` | - |
+| `options.data?` | [`FaasData`](#faasdata)<`PathOrData`\> | - |
+| `options.setData?` | `Dispatch`<`SetStateAction`<[`FaasData`](#faasdata)<`PathOrData`\>\>\> | - |
+| `options.skip?` | `boolean` | - |
 
 #### Returns
 
-[`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
+[`FaasDataInjection`](interfaces/FaasDataInjection.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>
 
 ```ts
 function Post ({ id }) {

package/dist/index.d.mts

@@ -0,0 +1,159 @@
+import { FaasAction as FaasAction$1, FaasParams as FaasParams$1, FaasData as FaasData$1 } from '@faasjs/types';
+export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+import { Options, ResponseError, Response as Response$1 } from '@faasjs/browser';
+export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ReactElement, Component } from 'react';
+
+type FaasReactClientInstance = {
+  id: string
+  faas: <PathOrData extends FaasAction>(
+    action: string | PathOrData,
+    params: FaasParams<PathOrData>
+  ) => Promise<Response<FaasData<PathOrData>>>
+  useFaas: <PathOrData extends FaasAction>(
+    action: string | PathOrData,
+    defaultParams: FaasParams<PathOrData>,
+    options?: useFaasOptions<PathOrData>,
+  ) => FaasDataInjection<FaasData<PathOrData>>
+  FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element
+}
+
+/**
+ * Injects FaasData props.
+ */
+type FaasDataInjection<Data = any> = {
+  action: string | any
+  params: Record<string, any>
+  loading: boolean
+  reloadTimes: number
+  data: Data
+  error: any
+  promise: Promise<Response<Data>>
+  reload(params?: Record<string, any>): Promise<Response<Data>>,
+  setData: React.Dispatch<React.SetStateAction<Data>>
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
+  setError: React.Dispatch<React.SetStateAction<any>>
+}
+
+type FaasDataWrapperProps<PathOrData extends FaasAction> = {
+  render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[]
+  children?: React.ReactElement<Partial<FaasDataInjection>>
+  fallback?: JSX.Element | false
+  action: string
+  params?: FaasParams<PathOrData>
+  onDataChange?(args: FaasDataInjection<FaasData<PathOrData>>): void
+  /** use custom data, should work with setData */
+  data?: FaasData<PathOrData>
+  /** use custom setData, should work with data */
+  setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>
+}
+
+type useFaasOptions<PathOrData extends FaasAction> = {
+  params?: FaasParams<PathOrData>
+  data?: FaasData<PathOrData>
+  setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>
+  skip?: boolean
+  /** send the last request after milliseconds */
+  debounce?: number
+}
+
+/**
+ * Before use faas, you should initialize a FaasReactClient.
+ *
+ * @param props.domain {string} The domain of your faas server
+ * @param props.options {Options} The options of client
+ * @returns {FaasReactClientInstance}
+ *
+ * ```ts
+ * const client = FaasReactClient({
+ *   domain: 'localhost:8080/api'
+ * })
+ * ```
+ */
+declare function FaasReactClient({ domain, options, onError }: {
+    domain: string;
+    options?: Options;
+    onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
+}): FaasReactClientInstance;
+/**
+ * Get FaasReactClient instance
+ * @param domain {string} empty string for default domain
+ * @returns {FaasReactClientInstance}
+ *
+ * ```ts
+ * getClient()
+ * // or
+ * getClient('another-domain')
+ * ```
+ */
+declare function getClient(domain?: string): FaasReactClientInstance;
+/**
+ * Request faas server
+ *
+ * @param action {string} action name
+ * @param params {object} action params
+ * @returns {Promise<Response<any>>}
+ *
+ * ```ts
+ * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
+ *   console.log(res.data.title)
+ * })
+ * ```
+ */
+declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrData, params: FaasParams$1<PathOrData>): Promise<Response$1<FaasData$1<PathOrData>>>;
+/**
+ * Request faas server with React hook
+ * @param action {string} action name
+ * @param defaultParams {object} initial action params
+ * @returns {FaasDataInjection<any>}
+ *
+ * ```ts
+ * function Post ({ id }) {
+ *   const { data } = useFaas<{ title: string }>('post/get', { id })
+ *   return <h1>{data.title}</h1>
+ * }
+ * ```
+ */
+declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathOrData, defaultParams: FaasParams$1<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData$1<PathOrData>>;
+/**
+ * A data wrapper for react components
+ * @returns {JSX.Element}
+ *
+ * ```ts
+ * <FaasDataWrapper<{
+ *   id: string
+ *   title: string
+ * }>
+ *   action='post/get'
+ *   params={ { id: 1 } }
+ *   render={ ({ data }) => <h1>{ data.title }</h1> }
+ * />
+ * ```
+ */
+declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    onError?: (error: Error | null, info: any) => void;
+    errorChildren?: ReactElement<ErrorChildrenProps>;
+}
+type ErrorChildrenProps = {
+    error?: Error;
+    info?: any;
+    errorMessage?: string;
+    errorDescription?: string;
+};
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
+    error?: Error;
+    info?: {
+        componentStack?: string;
+    };
+}> {
+    constructor(props: ErrorBoundaryProps);
+    componentDidCatch(error: Error | null, info: any): void;
+    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
+}
+
+export { ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas, useFaasOptions };

package/dist/index.d.ts

@@ -1,44 +1,64 @@
-import { Response, Options, ResponseError } from '@faasjs/browser';
-export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
-import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+import { FaasAction as FaasAction$1, FaasParams as FaasParams$1, FaasData as FaasData$1 } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+import { Options, ResponseError, Response as Response$1 } from '@faasjs/browser';
+export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ReactElement, Component } from 'react';
+
+type FaasReactClientInstance = {
+  id: string
+  faas: <PathOrData extends FaasAction>(
+    action: string | PathOrData,
+    params: FaasParams<PathOrData>
+  ) => Promise<Response<FaasData<PathOrData>>>
+  useFaas: <PathOrData extends FaasAction>(
+    action: string | PathOrData,
+    defaultParams: FaasParams<PathOrData>,
+    options?: useFaasOptions<PathOrData>,
+  ) => FaasDataInjection<FaasData<PathOrData>>
+  FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element
+}
 
 /**
  * Injects FaasData props.
  */
 type FaasDataInjection<Data = any> = {
-    action: string | any;
-    params: Record<string, any>;
-    loading: boolean;
-    data: Data;
-    error: any;
-    promise: Promise<Response<Data>>;
-    reload(params?: Record<string, any>): Promise<Response<Data>>;
-    setData: React.Dispatch<React.SetStateAction<Data>>;
-    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
-    setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>;
-    setError: React.Dispatch<React.SetStateAction<any>>;
-};
+  action: string | any
+  params: Record<string, any>
+  loading: boolean
+  reloadTimes: number
+  data: Data
+  error: any
+  promise: Promise<Response<Data>>
+  reload(params?: Record<string, any>): Promise<Response<Data>>,
+  setData: React.Dispatch<React.SetStateAction<Data>>
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
+  setError: React.Dispatch<React.SetStateAction<any>>
+}
+
 type FaasDataWrapperProps<PathOrData extends FaasAction> = {
-    render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[];
-    fallback?: JSX.Element | false;
-    action: string;
-    params?: FaasParams<PathOrData>;
-    onDataChange?(args: FaasDataInjection<FaasData<PathOrData>>): void;
-    /** use custom data, should work with setData */
-    data?: FaasData<PathOrData>;
-    /** use custom setData, should work with data */
-    setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-};
-type FaasReactClientInstance = {
-    faas: <PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>>;
-    useFaas: <PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
-        data?: FaasData<PathOrData>;
-        setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-        skip?: boolean;
-    }) => FaasDataInjection<FaasData<PathOrData>>;
-    FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
-};
+  render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[]
+  children?: React.ReactElement<Partial<FaasDataInjection>>
+  fallback?: JSX.Element | false
+  action: string
+  params?: FaasParams<PathOrData>
+  onDataChange?(args: FaasDataInjection<FaasData<PathOrData>>): void
+  /** use custom data, should work with setData */
+  data?: FaasData<PathOrData>
+  /** use custom setData, should work with data */
+  setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>
+}
+
+type useFaasOptions<PathOrData extends FaasAction> = {
+  params?: FaasParams<PathOrData>
+  data?: FaasData<PathOrData>
+  setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>
+  skip?: boolean
+  /** send the last request after milliseconds */
+  debounce?: number
+}
+
 /**
  * Before use faas, you should initialize a FaasReactClient.
  *
@@ -82,7 +102,7 @@ declare function getClient(domain?: string): FaasReactClientInstance;
  * })
  * ```
  */
-declare function faas<PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>): Promise<Response<FaasData<PathOrData>>>;
+declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrData, params: FaasParams$1<PathOrData>): Promise<Response$1<FaasData$1<PathOrData>>>;
 /**
  * Request faas server with React hook
  * @param action {string} action name
@@ -96,11 +116,7 @@ declare function faas<PathOrData extends FaasAction>(action: string | PathOrData
  * }
  * ```
  */
-declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
-    data?: FaasData<PathOrData>;
-    setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-    skip?: boolean;
-}): FaasDataInjection<FaasData<PathOrData>>;
+declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathOrData, defaultParams: FaasParams$1<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData$1<PathOrData>>;
 /**
  * A data wrapper for react components
  * @returns {JSX.Element}
@@ -116,6 +132,28 @@ declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrD
  * />
  * ```
  */
-declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    onError?: (error: Error | null, info: any) => void;
+    errorChildren?: ReactElement<ErrorChildrenProps>;
+}
+type ErrorChildrenProps = {
+    error?: Error;
+    info?: any;
+    errorMessage?: string;
+    errorDescription?: string;
+};
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
+    error?: Error;
+    info?: {
+        componentStack?: string;
+    };
+}> {
+    constructor(props: ErrorBoundaryProps);
+    componentDidCatch(error: Error | null, info: any): void;
+    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
+}
 
-export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };
+export { ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas, useFaasOptions };

package/dist/index.js

@@ -1,41 +1,17 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  FaasDataWrapper: () => FaasDataWrapper,
-  FaasReactClient: () => FaasReactClient,
-  faas: () => faas,
-  getClient: () => getClient,
-  useFaas: () => useFaas
-});
-module.exports = __toCommonJS(src_exports);
-var import_browser = require("@faasjs/browser");
-var import_react = require("react");
+var react = require('react');
+var browser = require('@faasjs/browser');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/client.tsx
 var clients = {};
 function FaasReactClient({
   domain,
   options,
   onError
 }) {
-  const client = new import_browser.FaasBrowserClient(domain, options);
+  const client = new browser.FaasBrowserClient(domain, options);
   async function faas2(action, params) {
     if (onError)
       return client.action(action, params).catch(async (res) => {
@@ -47,40 +23,63 @@ function FaasReactClient({
   function useFaas2(action, defaultParams, options2) {
     if (!options2)
       options2 = {};
-    const [loading, setLoading] = (0, import_react.useState)(true);
-    const [data, setData] = (0, import_react.useState)();
-    const [error, setError] = (0, import_react.useState)();
-    const [promise, setPromise] = (0, import_react.useState)();
-    const [params, setParams] = (0, import_react.useState)(defaultParams);
-    const [reloadTimes, setReloadTimes] = (0, import_react.useState)(0);
-    (0, import_react.useEffect)(function() {
+    const [loading, setLoading] = react.useState(true);
+    const [data, setData] = react.useState();
+    const [error, setError] = react.useState();
+    const [promise, setPromise] = react.useState();
+    const [params, setParams] = react.useState(defaultParams);
+    const [reloadTimes, setReloadTimes] = react.useState(0);
+    const [fails, setFails] = react.useState(0);
+    react.useEffect(function() {
       if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
         setParams(defaultParams);
       }
     }, [JSON.stringify(defaultParams)]);
-    (0, import_react.useEffect)(function() {
-      if (options2 == null ? void 0 : options2.skip) {
+    react.useEffect(function() {
+      if (!action || (options2 == null ? void 0 : options2.skip)) {
         setLoading(false);
         return;
       }
       setLoading(true);
-      const request = client.action(action, params);
-      setPromise(request);
-      request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
-        if (onError)
-          try {
-            await onError(action, params)(e);
-          } catch (error2) {
-            setError(error2);
+      const controller = new AbortController();
+      function send() {
+        const request = client.action(action, options2.params || params, { signal: controller.signal });
+        setPromise(request);
+        request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
+          if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
+            return;
+          if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+            console.warn(`FaasReactClient: ${e.message} retry...`);
+            setFails(1);
+            return send();
           }
-        else
-          setError(e);
-        return Promise.reject(e);
-      }).finally(() => setLoading(false));
-      return () => setLoading(false);
+          if (onError)
+            try {
+              await onError(action, params)(e);
+            } catch (error2) {
+              setError(error2);
+            }
+          else
+            setError(e);
+          return Promise.reject(e);
+        }).finally(() => setLoading(false));
+      }
+      if (options2 == null ? void 0 : options2.debounce) {
+        const timeout = setTimeout(send, options2.debounce);
+        return () => {
+          clearTimeout(timeout);
+          controller.abort();
+          setLoading(false);
+        };
+      }
+      send();
+      return () => {
+        controller.abort();
+        setLoading(false);
+      };
     }, [
       action,
-      JSON.stringify(params),
+      JSON.stringify(options2.params || params),
       reloadTimes,
       options2.skip
     ]);
@@ -89,6 +88,7 @@ function FaasReactClient({
       params,
       loading,
       data: (options2 == null ? void 0 : options2.data) || data,
+      reloadTimes,
       error,
       promise,
       async reload(params2) {
@@ -104,6 +104,7 @@ function FaasReactClient({
     };
   }
   const reactClient = {
+    id: client.id,
     faas: faas2,
     useFaas: useFaas2,
     FaasDataWrapper({
@@ -111,6 +112,7 @@ function FaasReactClient({
       params,
       fallback,
       render,
+      children,
       onDataChange,
       data,
       setData
@@ -119,17 +121,21 @@ function FaasReactClient({
         data,
         setData
       });
-      const [loaded, setLoaded] = (0, import_react.useState)(false);
-      (0, import_react.useEffect)(function() {
+      const [loaded, setLoaded] = react.useState(false);
+      react.useEffect(function() {
         if (!loaded && !request.loading)
           setLoaded(true);
       }, [request.loading]);
-      (0, import_react.useEffect)(function() {
+      react.useEffect(function() {
         if (onDataChange)
           onDataChange(request);
       }, [JSON.stringify(request.data)]);
-      if (loaded)
-        return render(request);
+      if (loaded) {
+        if (children)
+          return react.cloneElement(children, request);
+        if (render)
+          return render(request);
+      }
       return fallback || null;
     }
   };
@@ -149,21 +155,56 @@ function useFaas(action, defaultParams, options) {
   return getClient().useFaas(action, defaultParams, options);
 }
 function FaasDataWrapper(props) {
-  const [client, setClient] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
+  const [client, setClient] = react.useState();
+  react.useEffect(() => {
     if (client)
       return;
     setClient(getClient());
   }, []);
   if (!client)
     return props.fallback || null;
-  return (0, import_react.createElement)(client.FaasDataWrapper, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(client.FaasDataWrapper, { ...props });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FaasDataWrapper,
-  FaasReactClient,
-  faas,
-  getClient,
-  useFaas
-});
+var ErrorBoundary = class extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: void 0,
+      info: { componentStack: "" }
+    };
+  }
+  componentDidCatch(error, info) {
+    this.setState({
+      error,
+      info
+    });
+  }
+  render() {
+    var _a;
+    const errorMessage = (this.state.error || "").toString();
+    const errorDescription = ((_a = this.state.info) == null ? void 0 : _a.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 react.cloneElement(this.props.errorChildren, {
+          error: this.state.error,
+          info: this.state.info,
+          errorMessage,
+          errorDescription
+        });
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: errorMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { children: errorDescription })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+exports.ErrorBoundary = ErrorBoundary;
+exports.FaasDataWrapper = FaasDataWrapper;
+exports.FaasReactClient = FaasReactClient;
+exports.faas = faas;
+exports.getClient = getClient;
+exports.useFaas = useFaas;

package/dist/index.mjs

@@ -1,12 +1,8 @@
-// src/index.tsx
-import {
-  FaasBrowserClient
-} from "@faasjs/browser";
-import {
-  useState,
-  useEffect,
-  createElement
-} from "react";
+import { useState, useEffect, cloneElement, Component } from 'react';
+import { FaasBrowserClient } from '@faasjs/browser';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/client.tsx
 var clients = {};
 function FaasReactClient({
   domain,
@@ -31,34 +27,57 @@ function FaasReactClient({
     const [promise, setPromise] = useState();
     const [params, setParams] = useState(defaultParams);
     const [reloadTimes, setReloadTimes] = useState(0);
+    const [fails, setFails] = useState(0);
     useEffect(function() {
       if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
         setParams(defaultParams);
       }
     }, [JSON.stringify(defaultParams)]);
     useEffect(function() {
-      if (options2 == null ? void 0 : options2.skip) {
+      if (!action || (options2 == null ? void 0 : options2.skip)) {
         setLoading(false);
         return;
       }
       setLoading(true);
-      const request = client.action(action, params);
-      setPromise(request);
-      request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
-        if (onError)
-          try {
-            await onError(action, params)(e);
-          } catch (error2) {
-            setError(error2);
+      const controller = new AbortController();
+      function send() {
+        const request = client.action(action, options2.params || params, { signal: controller.signal });
+        setPromise(request);
+        request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
+          if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
+            return;
+          if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+            console.warn(`FaasReactClient: ${e.message} retry...`);
+            setFails(1);
+            return send();
           }
-        else
-          setError(e);
-        return Promise.reject(e);
-      }).finally(() => setLoading(false));
-      return () => setLoading(false);
+          if (onError)
+            try {
+              await onError(action, params)(e);
+            } catch (error2) {
+              setError(error2);
+            }
+          else
+            setError(e);
+          return Promise.reject(e);
+        }).finally(() => setLoading(false));
+      }
+      if (options2 == null ? void 0 : options2.debounce) {
+        const timeout = setTimeout(send, options2.debounce);
+        return () => {
+          clearTimeout(timeout);
+          controller.abort();
+          setLoading(false);
+        };
+      }
+      send();
+      return () => {
+        controller.abort();
+        setLoading(false);
+      };
     }, [
       action,
-      JSON.stringify(params),
+      JSON.stringify(options2.params || params),
       reloadTimes,
       options2.skip
     ]);
@@ -67,6 +86,7 @@ function FaasReactClient({
       params,
       loading,
       data: (options2 == null ? void 0 : options2.data) || data,
+      reloadTimes,
       error,
       promise,
       async reload(params2) {
@@ -82,6 +102,7 @@ function FaasReactClient({
     };
   }
   const reactClient = {
+    id: client.id,
     faas: faas2,
     useFaas: useFaas2,
     FaasDataWrapper({
@@ -89,6 +110,7 @@ function FaasReactClient({
       params,
       fallback,
       render,
+      children,
       onDataChange,
       data,
       setData
@@ -106,8 +128,12 @@ function FaasReactClient({
         if (onDataChange)
           onDataChange(request);
       }, [JSON.stringify(request.data)]);
-      if (loaded)
-        return render(request);
+      if (loaded) {
+        if (children)
+          return cloneElement(children, request);
+        if (render)
+          return render(request);
+      }
       return fallback || null;
     }
   };
@@ -135,12 +161,43 @@ function FaasDataWrapper(props) {
   }, []);
   if (!client)
     return props.fallback || null;
-  return createElement(client.FaasDataWrapper, props);
+  return /* @__PURE__ */ jsx(client.FaasDataWrapper, { ...props });
 }
-export {
-  FaasDataWrapper,
-  FaasReactClient,
-  faas,
-  getClient,
-  useFaas
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: void 0,
+      info: { componentStack: "" }
+    };
+  }
+  componentDidCatch(error, info) {
+    this.setState({
+      error,
+      info
+    });
+  }
+  render() {
+    var _a;
+    const errorMessage = (this.state.error || "").toString();
+    const errorDescription = ((_a = this.state.info) == null ? void 0 : _a.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;
+  }
 };
+
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, useFaas };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.3-beta.1",
+  "version": "0.0.3-beta.100",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,15 +16,15 @@
   },
   "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs",
-    "build:types": "tsup-node src/index.tsx --dts-only"
+    "build": "tsup src/index.tsx --config ../../tsup.config.json"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "^0.0.3-beta.1",
-    "@faasjs/types": "^0.0.3-beta.1",
+    "@faasjs/browser": "0.0.3-beta.100"
+  },
+  "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {