@faasjs/react 0.0.2-beta.353 → 0.0.2-beta.357

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-import { Options, ResponseError, Response } from '@faasjs/browser';
+import { Response, Options, ResponseError } from '@faasjs/browser';
 export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
-import { FaasAction, FaasParams, FaasData } from '@faasjs/types';
+import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 
 declare type FaasDataInjection<Data = any> = {
+    action: string | any;
+    params: Record<string, any>;
     loading: boolean;
     data: Data;
     error: any;
@@ -13,17 +15,21 @@ declare type FaasDataInjection<Data = any> = {
     setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>;
     setError: React.Dispatch<React.SetStateAction<any>>;
 };
-declare type FaasDataProps<PathOrData extends FaasAction> = {
-    element(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element;
+declare type FaasDataWrapperProps<PathOrData extends FaasAction> = {
+    render?(args: FaasDataInjection<FaasData<PathOrData>>): 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>>>;
 };
 declare 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>) => FaasDataInjection<FaasData<PathOrData>>;
-    FaasData<PathOrData extends FaasAction>(props: FaasDataProps<PathOrData>): JSX.Element;
+    FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 };
 declare function FaasReactClient({ domain, options, onError }: {
     domain: string;
@@ -31,5 +37,8 @@ declare function FaasReactClient({ domain, options, onError }: {
     onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
 }): FaasReactClientInstance;
 declare function getClient(domain?: string): FaasReactClientInstance;
+declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData> & {
+    client?: FaasReactClientInstance;
+}): JSX.Element;
 
-export { FaasReactClient, getClient };
+export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, getClient };

package/dist/index.js

@@ -21,9 +21,10 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 
-// src/index.ts
+// src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  FaasDataWrapper: () => FaasDataWrapper,
   FaasReactClient: () => FaasReactClient,
   getClient: () => getClient
 });
@@ -44,7 +45,9 @@ function FaasReactClient({
       });
     return client.action(action, params);
   }
-  function useFaas(action, defaultParams) {
+  function useFaas(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)();
@@ -60,7 +63,7 @@ function FaasReactClient({
       setLoading(true);
       const request = client.action(action, params);
       setPromise(request);
-      request.then((r) => setData(r.data)).catch(async (e) => {
+      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);
@@ -78,8 +81,10 @@ function FaasReactClient({
       reloadTimes
     ]);
     return {
+      action,
+      params,
       loading,
-      data,
+      data: (options2 == null ? void 0 : options2.data) || data,
       error,
       promise,
       async reload(params2) {
@@ -88,7 +93,7 @@ function FaasReactClient({
         setReloadTimes(reloadTimes + 1);
         return promise;
       },
-      setData,
+      setData: (options2 == null ? void 0 : options2.setData) || setData,
       setLoading,
       setPromise,
       setError
@@ -97,14 +102,19 @@ function FaasReactClient({
   const reactClient = {
     faas,
     useFaas,
-    FaasData({
+    FaasDataWrapper({
       action,
       params,
       fallback,
-      element,
-      onDataChange
+      render,
+      onDataChange,
+      data,
+      setData
     }) {
-      const request = useFaas(action, params);
+      const request = useFaas(action, params, {
+        data,
+        setData
+      });
       const [loaded, setLoaded] = (0, import_react.useState)(false);
       (0, import_react.useEffect)(function() {
         if (!loaded && !request.loading)
@@ -115,7 +125,7 @@ function FaasReactClient({
           onDataChange(request);
       }, [JSON.stringify(request.data)]);
       if (loaded)
-        return element(request);
+        return render(request);
       return fallback || null;
     }
   };
@@ -128,9 +138,21 @@ function getClient(domain) {
     throw Error("FaasReactClient is not initialized");
   return client;
 }
+function FaasDataWrapper(props) {
+  const [client, setClient] = (0, import_react.useState)(props.client);
+  (0, import_react.useEffect)(() => {
+    if (client)
+      return;
+    setClient(getClient());
+  }, []);
+  if (!client)
+    return props.fallback || null;
+  return (0, import_react.createElement)(client.FaasDataWrapper, props);
+}
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FaasDataWrapper,
   FaasReactClient,
   getClient
 });

package/dist/index.mjs

@@ -1,8 +1,12 @@
-// src/index.ts
+// src/index.tsx
 import {
   FaasBrowserClient
 } from "@faasjs/browser";
-import { useState, useEffect } from "react";
+import {
+  useState,
+  useEffect,
+  createElement
+} from "react";
 var clients = {};
 function FaasReactClient({
   domain,
@@ -18,7 +22,9 @@ function FaasReactClient({
       });
     return client.action(action, params);
   }
-  function useFaas(action, defaultParams) {
+  function useFaas(action, defaultParams, options2) {
+    if (!options2)
+      options2 = {};
     const [loading, setLoading] = useState(true);
     const [data, setData] = useState();
     const [error, setError] = useState();
@@ -34,7 +40,7 @@ function FaasReactClient({
       setLoading(true);
       const request = client.action(action, params);
       setPromise(request);
-      request.then((r) => setData(r.data)).catch(async (e) => {
+      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);
@@ -52,8 +58,10 @@ function FaasReactClient({
       reloadTimes
     ]);
     return {
+      action,
+      params,
       loading,
-      data,
+      data: (options2 == null ? void 0 : options2.data) || data,
       error,
       promise,
       async reload(params2) {
@@ -62,7 +70,7 @@ function FaasReactClient({
         setReloadTimes(reloadTimes + 1);
         return promise;
       },
-      setData,
+      setData: (options2 == null ? void 0 : options2.setData) || setData,
       setLoading,
       setPromise,
       setError
@@ -71,14 +79,19 @@ function FaasReactClient({
   const reactClient = {
     faas,
     useFaas,
-    FaasData({
+    FaasDataWrapper({
       action,
       params,
       fallback,
-      element,
-      onDataChange
+      render,
+      onDataChange,
+      data,
+      setData
     }) {
-      const request = useFaas(action, params);
+      const request = useFaas(action, params, {
+        data,
+        setData
+      });
       const [loaded, setLoaded] = useState(false);
       useEffect(function() {
         if (!loaded && !request.loading)
@@ -89,7 +102,7 @@ function FaasReactClient({
           onDataChange(request);
       }, [JSON.stringify(request.data)]);
       if (loaded)
-        return element(request);
+        return render(request);
       return fallback || null;
     }
   };
@@ -102,7 +115,19 @@ function getClient(domain) {
     throw Error("FaasReactClient is not initialized");
   return client;
 }
+function FaasDataWrapper(props) {
+  const [client, setClient] = useState(props.client);
+  useEffect(() => {
+    if (client)
+      return;
+    setClient(getClient());
+  }, []);
+  if (!client)
+    return props.fallback || null;
+  return createElement(client.FaasDataWrapper, props);
+}
 export {
+  FaasDataWrapper,
   FaasReactClient,
   getClient
 };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.2-beta.353",
+  "version": "0.0.2-beta.357",
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "homepage": "https://faasjs.com/doc/react.html",
   "repository": {
@@ -15,15 +16,15 @@
   },
   "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs",
-    "build:types": "tsup-node src/index.ts --dts-only"
+    "build": "tsup src/index.tsx --format esm,cjs",
+    "build:types": "tsup-node src/index.tsx --dts-only"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "^0.0.2-beta.353",
-    "@faasjs/types": "^0.0.2-beta.353",
+    "@faasjs/browser": "^0.0.2-beta.357",
+    "@faasjs/types": "^0.0.2-beta.357",
     "react": "*"
   },
   "devDependencies": {