@faasjs/react 0.0.3-beta.8 → 0.0.3-beta.81

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.ts

@@ -1,12 +1,17 @@
 import { Response, Options, ResponseError } from '@faasjs/browser';
 export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
-import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
-export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+
+interface FaasActions {
+}
+type FaasActionPaths = keyof FaasActions;
+type FaasAction = FaasActionPaths | Record<string, any>;
+type FaasParams<T = any> = T extends FaasActionPaths ? FaasActions[T]['Params'] : any;
+type FaasData<T = any> = T extends FaasActionPaths ? FaasActions[T]['Data'] : T;
 
 /**
  * Injects FaasData props.
  */
-type FaasDataInjection<Data = any> = {
+interface FaasDataInjection<Data = any> {
     action: string | any;
     params: Record<string, any>;
     loading: boolean;
@@ -18,9 +23,10 @@ type FaasDataInjection<Data = any> = {
     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> = {
+}
+interface 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>;
@@ -29,8 +35,8 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
     data?: FaasData<PathOrData>;
     /** use custom setData, should work with data */
     setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-};
-type FaasReactClientInstance = {
+}
+interface 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>;
@@ -38,7 +44,7 @@ type FaasReactClientInstance = {
         skip?: boolean;
     }) => FaasDataInjection<FaasData<PathOrData>>;
     FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
-};
+}
 /**
  * Before use faas, you should initialize a FaasReactClient.
  *
@@ -118,4 +124,4 @@ declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrD
  */
 declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 
-export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };
+export { FaasAction, FaasData, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasParams, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  FaasBrowserClient: () => import_browser.FaasBrowserClient,
   FaasDataWrapper: () => FaasDataWrapper,
   FaasReactClient: () => FaasReactClient,
   faas: () => faas,
@@ -53,34 +54,49 @@ function FaasReactClient({
     const [promise, setPromise] = (0, import_react.useState)();
     const [params, setParams] = (0, import_react.useState)(defaultParams);
     const [reloadTimes, setReloadTimes] = (0, import_react.useState)(0);
+    const [fails, setFails] = (0, import_react.useState)(0);
     (0, import_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) {
+      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.")
+            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));
+      }
+      send();
+      return () => {
+        controller.abort();
+        setLoading(false);
+      };
     }, [
       action,
-      JSON.stringify(params),
+      JSON.stringify(options2.params || params),
       reloadTimes,
       options2.skip
     ]);
@@ -111,6 +127,7 @@ function FaasReactClient({
       params,
       fallback,
       render,
+      children,
       onDataChange,
       data,
       setData
@@ -128,8 +145,12 @@ function FaasReactClient({
         if (onDataChange)
           onDataChange(request);
       }, [JSON.stringify(request.data)]);
-      if (loaded)
-        return render(request);
+      if (loaded) {
+        if (children)
+          return (0, import_react.cloneElement)(children, request);
+        if (render)
+          return render(request);
+      }
       return fallback || null;
     }
   };
@@ -161,6 +182,7 @@ function FaasDataWrapper(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FaasBrowserClient,
   FaasDataWrapper,
   FaasReactClient,
   faas,

package/dist/index.mjs

@@ -5,7 +5,8 @@ import {
 import {
   useState,
   useEffect,
-  createElement
+  createElement,
+  cloneElement
 } from "react";
 var clients = {};
 function FaasReactClient({
@@ -31,34 +32,49 @@ 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.")
+            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));
+      }
+      send();
+      return () => {
+        controller.abort();
+        setLoading(false);
+      };
     }, [
       action,
-      JSON.stringify(params),
+      JSON.stringify(options2.params || params),
       reloadTimes,
       options2.skip
     ]);
@@ -89,6 +105,7 @@ function FaasReactClient({
       params,
       fallback,
       render,
+      children,
       onDataChange,
       data,
       setData
@@ -106,8 +123,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;
     }
   };
@@ -138,6 +159,7 @@ function FaasDataWrapper(props) {
   return createElement(client.FaasDataWrapper, props);
 }
 export {
+  FaasBrowserClient,
   FaasDataWrapper,
   FaasReactClient,
   faas,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.3-beta.8",
+  "version": "0.0.3-beta.81",
   "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 --format esm,cjs --dts --clean"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "^0.0.3-beta.8",
-    "@faasjs/types": "^0.0.3-beta.8",
+    "@faasjs/browser": "^0.0.3-beta.81"
+  },
+  "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {