@faasjs/react 8.0.0-beta.2 → 8.0.0-beta.4

package/README.md

@@ -31,6 +31,7 @@ React plugin for FaasJS.
   - Fetch Data:
     - [faas](functions/faas.md): Fetch data from FaasJS.
     - [useFaas](functions/useFaas.md): Fetch data from FaasJS with hooks.
+    - [useFaasStream](functions/useFaasStream.md): Fetch streaming data from FaasJS with hooks.
     - [FaasDataWrapper](functions/FaasDataWrapper.md): Fetch data from FaasJS with a wrapper component.
     - [withFaasData](functions/withFaasData.md): Fetch data from FaasJS using a higher-order component (HOC).
 
@@ -49,12 +50,14 @@ npm install @faasjs/react react
 - [Form](functions/Form.md)
 - [FormItem](functions/FormItem.md)
 - [getClient](functions/getClient.md)
+- [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
 - [useEqualCallback](functions/useEqualCallback.md)
 - [useEqualEffect](functions/useEqualEffect.md)
 - [useEqualMemo](functions/useEqualMemo.md)
 - [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
+- [useFaasStream](functions/useFaasStream.md)
 - [usePrevious](functions/usePrevious.md)
 - [useSplittingState](functions/useSplittingState.md)
 - [useStateRef](functions/useStateRef.md)
@@ -71,10 +74,6 @@ npm install @faasjs/react react
 - [Response](interfaces/Response.md)
 - [ResponseError](interfaces/ResponseError.md)
 
-## Namespaces
-
-- [OptionalWrapper](@faasjs/namespaces/OptionalWrapper/README.md)
-
 ## Type Aliases
 
 - [ErrorChildrenProps](type-aliases/ErrorChildrenProps.md)
@@ -105,6 +104,8 @@ npm install @faasjs/react react
 - [Options](type-aliases/Options.md)
 - [ResponseHeaders](type-aliases/ResponseHeaders.md)
 - [useFaasOptions](type-aliases/useFaasOptions.md)
+- [UseFaasStreamOptions](type-aliases/UseFaasStreamOptions.md)
+- [UseFaasStreamResult](type-aliases/UseFaasStreamResult.md)
 
 ## Variables
 
@@ -113,5 +114,4 @@ npm install @faasjs/react react
 - [FormDefaultElements](variables/FormDefaultElements.md)
 - [FormDefaultLang](variables/FormDefaultLang.md)
 - [FormDefaultRules](variables/FormDefaultRules.md)
-- [OptionalWrapper](variables/OptionalWrapper.md)
 - [useFormContext](variables/useFormContext.md)

package/dist/index.cjs

@@ -107,8 +107,7 @@ var FaasDataWrapper = fixedForwardRef(
   }
 );
 Object.assign(FaasDataWrapper, {
-  displayName: "FaasDataWrapper",
-  whyDidYouRender: true
+  displayName: "FaasDataWrapper"
 });
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
@@ -267,10 +266,8 @@ function useConstant(fn) {
   }
   return ref.current.v;
 }
-useConstant.whyDidYouRender = true;
 var ErrorBoundary = class extends react.Component {
   static displayName = "ErrorBoundary";
-  static whyDidYouRender = true;
   constructor(props) {
     super(props);
     this.state = {
@@ -349,7 +346,6 @@ function createSplittingContext(defaultValue) {
     return children;
   }
   Provider.displayName = "SplittingContextProvider";
-  Provider.whyDidYouRender = true;
   function use() {
     return useConstant(() => {
       const obj = /* @__PURE__ */ Object.create(null);
@@ -366,7 +362,6 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
-  use.whyDidYouRender = true;
   return {
     Provider,
     use
@@ -435,20 +430,17 @@ function FormInput({
   );
 }
 FormInput.displayName = "FormInput";
-FormInput.whyDidYouRender = true;
 function FormItem(props) {
   const { Elements, errors } = useFormContext();
   const Label = props.label?.Label ?? Elements.Label;
   return /* @__PURE__ */ jsxRuntime.jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsxRuntime.jsx(FormInput, { name: props.name, rules: props.rules, ...props.input }) });
 }
 FormItem.displayName = "FormItem";
-FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
   return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
-FormBody.whyDidYouRender = true;
 var FormButtonElement = react.forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
@@ -461,10 +453,8 @@ var FormButtonElement = react.forwardRef(({ children, submit, submitting, ...pro
   }
 ));
 FormButtonElement.displayName = "FormButtonElement";
-Object.assign(FormButtonElement, { whyDidYouRender: true });
 var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
 FormInputElement.displayName = "FormInputElement";
-Object.assign(FormInputElement, { whyDidYouRender: true });
 var FormLabelElement = ({
   name,
   title,
@@ -480,7 +470,6 @@ var FormLabelElement = ({
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
-FormLabelElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -558,7 +547,6 @@ function FormFooter() {
   return MemoizedButton;
 }
 FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
 
 // src/Form/lang.ts
 var FormDefaultLang = {
@@ -610,12 +598,140 @@ function FormContainer({
   );
 }
 FormContainer.displayName = "FormContainer";
-FormContainer.whyDidYouRender = true;
-var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-};
+function OptionalWrapper({
+  condition,
+  Wrapper,
+  wrapperProps,
+  children
+}) {
+  if (condition) return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children });
+  return children;
+}
 OptionalWrapper.displayName = "OptionalWrapper";
-OptionalWrapper.whyDidYouRender = true;
+function useFaasStream(action, defaultParams, options = {}) {
+  const [loading, setLoading] = react.useState(true);
+  const [data, setData] = react.useState(options.data || "");
+  const [error, setError] = react.useState();
+  const [params, setParams] = react.useState(defaultParams);
+  const [reloadTimes, setReloadTimes] = react.useState(0);
+  const [fails, setFails] = react.useState(0);
+  const [skip, setSkip] = react.useState(
+    typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
+  );
+  const controllerRef = react.useRef(null);
+  const pendingReloadsRef = react.useRef(/* @__PURE__ */ new Map());
+  const reloadCounterRef = react.useRef(0);
+  useEqualEffect(() => {
+    setSkip(
+      typeof options.skip === "function" ? options.skip(params) : options.skip
+    );
+  }, [typeof options.skip === "function" ? params : options.skip]);
+  useEqualEffect(() => {
+    if (!equal(defaultParams, params)) {
+      setParams(defaultParams);
+    }
+  }, [defaultParams]);
+  useEqualEffect(() => {
+    if (!action || skip) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setData("");
+    controllerRef.current = new AbortController();
+    const client = getClient(options.baseUrl);
+    function send() {
+      client.browserClient.action(action, options.params || params, {
+        signal: controllerRef.current.signal,
+        stream: true
+      }).then(async (response) => {
+        if (!response.body) {
+          setError(new Error("Response body is null"));
+          setLoading(false);
+          return;
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let accumulatedText = "";
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            accumulatedText += decoder.decode(value, { stream: true });
+            setData(accumulatedText);
+          }
+          setFails(0);
+          setError(null);
+          setLoading(false);
+          for (const { resolve } of pendingReloadsRef.current.values())
+            resolve(accumulatedText);
+          pendingReloadsRef.current.clear();
+        } catch (readError) {
+          reader.releaseLock();
+          throw readError;
+        }
+      }).catch(async (e) => {
+        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
+          return;
+        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+          console.warn(`FaasReactClient: ${e.message} retry...`);
+          setFails(1);
+          return send();
+        }
+        let error2 = e;
+        if (client.onError)
+          try {
+            await client.onError(action, params)(e);
+          } catch (newError) {
+            error2 = newError;
+          }
+        setError(error2);
+        setLoading(false);
+        for (const { reject } of pendingReloadsRef.current.values())
+          reject(error2);
+        pendingReloadsRef.current.clear();
+        return;
+      });
+    }
+    if (options.debounce) {
+      const timeout = setTimeout(send, options.debounce);
+      return () => {
+        clearTimeout(timeout);
+        controllerRef.current?.abort();
+        setLoading(false);
+      };
+    }
+    send();
+    return () => {
+      controllerRef.current?.abort();
+      setLoading(false);
+    };
+  }, [action, options.params || params, reloadTimes, skip]);
+  const reload = useEqualCallback(
+    (params2) => {
+      if (skip) setSkip(false);
+      if (params2) setParams(params2);
+      const reloadCounter = ++reloadCounterRef.current;
+      return new Promise((resolve, reject) => {
+        pendingReloadsRef.current.set(reloadCounter, { resolve, reject });
+        setReloadTimes((prev) => prev + 1);
+      });
+    },
+    [params, skip]
+  );
+  return {
+    action,
+    params,
+    loading,
+    data: options.data || data,
+    reloadTimes,
+    error,
+    reload,
+    setData: options.setData || setData,
+    setLoading,
+    setError
+  };
+}
 function usePrevious(value) {
   const ref = react.useRef(void 0);
   react.useEffect(() => {
@@ -644,6 +760,7 @@ exports.useEqualEffect = useEqualEffect;
 exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
+exports.useFaasStream = useFaasStream;
 exports.useFormContext = useFormContext;
 exports.usePrevious = usePrevious;
 exports.useSplittingState = useSplittingState;

package/dist/index.d.ts

@@ -158,9 +158,6 @@ declare function getClient(host?: string): FaasReactClientInstance;
  * Returns a constant value that is created by the given function.
  */
 declare function useConstant<T>(fn: () => T): T;
-declare namespace useConstant {
-    var whyDidYouRender: boolean;
-}
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -180,7 +177,6 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     };
 }> {
     static displayName: string;
-    static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
     render(): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>>;
@@ -358,7 +354,6 @@ type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, For
 declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
 declare namespace FormItem {
     var displayName: string;
-    var whyDidYouRender: boolean;
 }
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
@@ -402,7 +397,6 @@ type FormProps<Values extends Record<string, any> = Record<string, any>, FormEle
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, items, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
-    var whyDidYouRender: boolean;
 }
 
 type FormContextProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
@@ -453,9 +447,10 @@ type OptionalWrapperProps<TWrapper extends ComponentType<{
  * )
  * ```
  */
-declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
-    whyDidYouRender: boolean;
-};
+declare function OptionalWrapper({ condition, Wrapper, wrapperProps, children, }: OptionalWrapperProps): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>>;
+declare namespace OptionalWrapper {
+    var displayName: string;
+}
 
 /**
  * Creates a splitting context with the given default value.
@@ -588,6 +583,57 @@ type StatesWithSetters<T> = T & StateSetters<T>;
  */
 declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
 
+type UseFaasStreamOptions = {
+    params?: Record<string, any>;
+    data?: string;
+    setData?: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * If skip is true, the request will not be sent.
+     *
+     * However, you can still use reload to send the request.
+     */
+    skip?: boolean | ((params: Record<string, any>) => boolean);
+    /** Send the last request after milliseconds */
+    debounce?: number;
+    baseUrl?: BaseUrl;
+};
+type UseFaasStreamResult = {
+    action: string;
+    params: Record<string, any>;
+    loading: boolean;
+    reloadTimes: number;
+    data: string;
+    error: any;
+    reload: (params?: Record<string, any>) => Promise<string>;
+    setData: React.Dispatch<React.SetStateAction<string>>;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    setError: React.Dispatch<React.SetStateAction<any>>;
+};
+/**
+ * Stream faas server response with React hook
+ *
+ * @param action {string} action name
+ * @param defaultParams {object} initial action params
+ * @returns {UseFaasStreamResult}
+ *
+ * @example
+ * ```tsx
+ * function Chat() {
+ *   const [prompt, setPrompt] = useState('')
+ *   const { data, loading, reload } = useFaasStream('chat', { prompt })
+ *
+ *   return (
+ *     <div>
+ *       <textarea value={prompt} onChange={e => setPrompt(e.target.value)} />
+ *       <button onClick={reload} disabled={loading}>Send</button>
+ *       <div>{data}</div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useFaasStream(action: string, defaultParams: Record<string, any>, options?: UseFaasStreamOptions): UseFaasStreamResult;
+
 /**
  * Hook to store the previous value of a state or prop.
  *
@@ -621,4 +667,4 @@ declare function usePrevious<T = any>(value: T): T | undefined;
  */
 declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>];
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, type FaasDataWrapperRef, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, type FaasDataWrapperRef, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, type UseFaasStreamOptions, type UseFaasStreamResult, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { FaasBrowserClient } from '@faasjs/browser';
 import { useState, useImperativeHandle, cloneElement, forwardRef, useEffect, useMemo, createContext, useRef, useCallback, Component, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/client.tsx
 var AsyncFunction = (async () => {
@@ -105,8 +105,7 @@ var FaasDataWrapper = fixedForwardRef(
   }
 );
 Object.assign(FaasDataWrapper, {
-  displayName: "FaasDataWrapper",
-  whyDidYouRender: true
+  displayName: "FaasDataWrapper"
 });
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
@@ -265,10 +264,8 @@ function useConstant(fn) {
   }
   return ref.current.v;
 }
-useConstant.whyDidYouRender = true;
 var ErrorBoundary = class extends Component {
   static displayName = "ErrorBoundary";
-  static whyDidYouRender = true;
   constructor(props) {
     super(props);
     this.state = {
@@ -347,7 +344,6 @@ function createSplittingContext(defaultValue) {
     return children;
   }
   Provider.displayName = "SplittingContextProvider";
-  Provider.whyDidYouRender = true;
   function use() {
     return useConstant(() => {
       const obj = /* @__PURE__ */ Object.create(null);
@@ -364,7 +360,6 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
-  use.whyDidYouRender = true;
   return {
     Provider,
     use
@@ -433,20 +428,17 @@ function FormInput({
   );
 }
 FormInput.displayName = "FormInput";
-FormInput.whyDidYouRender = true;
 function FormItem(props) {
   const { Elements, errors } = useFormContext();
   const Label = props.label?.Label ?? Elements.Label;
   return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsx(FormInput, { name: props.name, rules: props.rules, ...props.input }) });
 }
 FormItem.displayName = "FormItem";
-FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
   return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
-FormBody.whyDidYouRender = true;
 var FormButtonElement = forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsx(
   "button",
   {
@@ -459,10 +451,8 @@ var FormButtonElement = forwardRef(({ children, submit, submitting, ...props },
   }
 ));
 FormButtonElement.displayName = "FormButtonElement";
-Object.assign(FormButtonElement, { whyDidYouRender: true });
 var FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
 FormInputElement.displayName = "FormInputElement";
-Object.assign(FormInputElement, { whyDidYouRender: true });
 var FormLabelElement = ({
   name,
   title,
@@ -478,7 +468,6 @@ var FormLabelElement = ({
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
-FormLabelElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -556,7 +545,6 @@ function FormFooter() {
   return MemoizedButton;
 }
 FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
 
 // src/Form/lang.ts
 var FormDefaultLang = {
@@ -608,12 +596,140 @@ function FormContainer({
   );
 }
 FormContainer.displayName = "FormContainer";
-FormContainer.whyDidYouRender = true;
-var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
-};
+function OptionalWrapper({
+  condition,
+  Wrapper,
+  wrapperProps,
+  children
+}) {
+  if (condition) return /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children });
+  return children;
+}
 OptionalWrapper.displayName = "OptionalWrapper";
-OptionalWrapper.whyDidYouRender = true;
+function useFaasStream(action, defaultParams, options = {}) {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState(options.data || "");
+  const [error, setError] = useState();
+  const [params, setParams] = useState(defaultParams);
+  const [reloadTimes, setReloadTimes] = useState(0);
+  const [fails, setFails] = useState(0);
+  const [skip, setSkip] = useState(
+    typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
+  );
+  const controllerRef = useRef(null);
+  const pendingReloadsRef = useRef(/* @__PURE__ */ new Map());
+  const reloadCounterRef = useRef(0);
+  useEqualEffect(() => {
+    setSkip(
+      typeof options.skip === "function" ? options.skip(params) : options.skip
+    );
+  }, [typeof options.skip === "function" ? params : options.skip]);
+  useEqualEffect(() => {
+    if (!equal(defaultParams, params)) {
+      setParams(defaultParams);
+    }
+  }, [defaultParams]);
+  useEqualEffect(() => {
+    if (!action || skip) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setData("");
+    controllerRef.current = new AbortController();
+    const client = getClient(options.baseUrl);
+    function send() {
+      client.browserClient.action(action, options.params || params, {
+        signal: controllerRef.current.signal,
+        stream: true
+      }).then(async (response) => {
+        if (!response.body) {
+          setError(new Error("Response body is null"));
+          setLoading(false);
+          return;
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let accumulatedText = "";
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            accumulatedText += decoder.decode(value, { stream: true });
+            setData(accumulatedText);
+          }
+          setFails(0);
+          setError(null);
+          setLoading(false);
+          for (const { resolve } of pendingReloadsRef.current.values())
+            resolve(accumulatedText);
+          pendingReloadsRef.current.clear();
+        } catch (readError) {
+          reader.releaseLock();
+          throw readError;
+        }
+      }).catch(async (e) => {
+        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
+          return;
+        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+          console.warn(`FaasReactClient: ${e.message} retry...`);
+          setFails(1);
+          return send();
+        }
+        let error2 = e;
+        if (client.onError)
+          try {
+            await client.onError(action, params)(e);
+          } catch (newError) {
+            error2 = newError;
+          }
+        setError(error2);
+        setLoading(false);
+        for (const { reject } of pendingReloadsRef.current.values())
+          reject(error2);
+        pendingReloadsRef.current.clear();
+        return;
+      });
+    }
+    if (options.debounce) {
+      const timeout = setTimeout(send, options.debounce);
+      return () => {
+        clearTimeout(timeout);
+        controllerRef.current?.abort();
+        setLoading(false);
+      };
+    }
+    send();
+    return () => {
+      controllerRef.current?.abort();
+      setLoading(false);
+    };
+  }, [action, options.params || params, reloadTimes, skip]);
+  const reload = useEqualCallback(
+    (params2) => {
+      if (skip) setSkip(false);
+      if (params2) setParams(params2);
+      const reloadCounter = ++reloadCounterRef.current;
+      return new Promise((resolve, reject) => {
+        pendingReloadsRef.current.set(reloadCounter, { resolve, reject });
+        setReloadTimes((prev) => prev + 1);
+      });
+    },
+    [params, skip]
+  );
+  return {
+    action,
+    params,
+    loading,
+    data: options.data || data,
+    reloadTimes,
+    error,
+    reload,
+    setData: options.setData || setData,
+    setLoading,
+    setError
+  };
+}
 function usePrevious(value) {
   const ref = useRef(void 0);
   useEffect(() => {
@@ -622,4 +738,4 @@ function usePrevious(value) {
   return ref.current;
 }
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "v8.0.0-beta.2",
+  "version": "v8.0.0-beta.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,10 +30,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": ">=v8.0.0-beta.2"
+    "@faasjs/browser": ">=v8.0.0-beta.4"
   },
   "devDependencies": {
-    "@faasjs/browser": ">=v8.0.0-beta.2",
+    "@faasjs/browser": ">=v8.0.0-beta.4",
     "@types/react": "^19.0.0",
     "react": "^19.0.0"
   },