@faasjs/react 0.0.3-beta.4 → 0.0.3-beta.41

package/README.md

@@ -104,6 +104,7 @@ ___
 | Name | Type | Description |
 | :------ | :------ | :------ |
 | `action` | `string` | - |
+| `children?` | `JSX.Element` | - |
 | `data?` | [`FaasData`](#faasdata)<`PathOrData`\> | use custom data, should work with setData |
 | `fallback?` | `JSX.Element` \| ``false`` | - |
 | `params?` | [`FaasParams`](#faasparams)<`PathOrData`\> | - |
@@ -134,7 +135,7 @@ ___
 | 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`\>\> |
+| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: [`FaasParams`](#faasparams)<`PathOrData`\>, `options?`: { `data?`: [`FaasData`](#faasdata)<`PathOrData`\> ; `setData?`: `React.Dispatch`<`React.SetStateAction`<[`FaasData`](#faasdata)<`PathOrData`\>\>\> ; `skip?`: `boolean`  }) => [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\> |
 | `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
 
 ___
@@ -194,7 +195,7 @@ ___
 
 ### FaasReactClient
 
-▸ **FaasReactClient**(`__namedParameters`): [`FaasReactClientInstance`](#faasreactclientinstance)
+▸ **FaasReactClient**(`«destructured»`): [`FaasReactClientInstance`](#faasreactclientinstance)
 
 Before use faas, you should initialize a FaasReactClient.
 
@@ -202,10 +203,10 @@ 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
 
@@ -276,7 +277,7 @@ ___
 
 ### useFaas
 
-▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
+▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`, `options?`): [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
 
 Request faas server with React hook
 
@@ -292,6 +293,10 @@ 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
 

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 /**
  * Injects FaasData props.
  */
-type FaasDataInjection<Data = any> = {
+interface FaasDataInjection<Data = any> {
     action: string | any;
     params: Record<string, any>;
     loading: boolean;
@@ -18,9 +18,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?: JSX.Element;
     fallback?: JSX.Element | false;
     action: string;
     params?: FaasParams<PathOrData>;
@@ -29,8 +30,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 +39,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.
  *

package/dist/index.js

@@ -64,9 +64,12 @@ function FaasReactClient({
         return;
       }
       setLoading(true);
-      const request = client.action(action, params);
+      const controller = new AbortController();
+      const request = client.action(action, 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 (onError)
           try {
             await onError(action, params)(e);
@@ -77,7 +80,10 @@ function FaasReactClient({
           setError(e);
         return Promise.reject(e);
       }).finally(() => setLoading(false));
-      return () => setLoading(false);
+      return () => {
+        controller.abort();
+        setLoading(false);
+      };
     }, [
       action,
       JSON.stringify(params),
@@ -111,6 +117,7 @@ function FaasReactClient({
       params,
       fallback,
       render,
+      children,
       onDataChange,
       data,
       setData
@@ -128,8 +135,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;
     }
   };

package/dist/index.mjs

@@ -5,7 +5,8 @@ import {
 import {
   useState,
   useEffect,
-  createElement
+  createElement,
+  cloneElement
 } from "react";
 var clients = {};
 function FaasReactClient({
@@ -42,9 +43,12 @@ function FaasReactClient({
         return;
       }
       setLoading(true);
-      const request = client.action(action, params);
+      const controller = new AbortController();
+      const request = client.action(action, 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 (onError)
           try {
             await onError(action, params)(e);
@@ -55,7 +59,10 @@ function FaasReactClient({
           setError(e);
         return Promise.reject(e);
       }).finally(() => setLoading(false));
-      return () => setLoading(false);
+      return () => {
+        controller.abort();
+        setLoading(false);
+      };
     }, [
       action,
       JSON.stringify(params),
@@ -89,6 +96,7 @@ function FaasReactClient({
       params,
       fallback,
       render,
+      children,
       onDataChange,
       data,
       setData
@@ -106,8 +114,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;
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.3-beta.4",
+  "version": "0.0.3-beta.41",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,9 +22,9 @@
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "@faasjs/browser": "^0.0.3-beta.4",
-    "@faasjs/types": "^0.0.3-beta.4",
+  "peerDependencies": {
+    "@faasjs/browser": "*",
+    "@faasjs/types": "*",
     "react": "*"
   },
   "devDependencies": {