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

package/dist/index.d.mts

@@ -153,7 +153,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
     use: <NewT extends T = T>() => Readonly<NewT>;
 };
 
-type SetPrefix<S extends string | number | symbol> = S extends string ? (S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never) : never;
+type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
 type StateSetters<T> = {
     [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
 };
@@ -374,9 +374,10 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
+type FormButtonElementProps = {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    submit?: () => void;
 };
 
 type FormInputElementProps = {
@@ -385,6 +386,11 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+type FormRules = {
+    type?: 'string' | 'number';
+    required?: boolean;
+};
+
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
     Input?: ComponentType<FormInputElementProps>;
@@ -400,12 +406,6 @@ type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTy
     input?: FormInputProps<FormElements>;
 };
 
-type FormButtonElementProps = {
-    children?: React.ReactNode;
-    disabled?: boolean;
-    onClick?: () => void;
-};
-
 type FormElementTypes = {
     Label: ComponentType<FormLabelElementProps>;
     Input: ComponentType<FormInputElementProps>;
@@ -414,7 +414,7 @@ type FormElementTypes = {
 declare const FormDefaultElements: FormElementTypes;
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelElementProps[];
+    items: FormLabelElementProps<FormElements>[];
     onSubmit?: (values: Values) => Promise<void>;
     elements?: Partial<FormElements>;
     defaultValues?: Values;

package/dist/index.d.ts

@@ -153,7 +153,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
     use: <NewT extends T = T>() => Readonly<NewT>;
 };
 
-type SetPrefix<S extends string | number | symbol> = S extends string ? (S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never) : never;
+type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
 type StateSetters<T> = {
     [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
 };
@@ -374,9 +374,10 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
+type FormButtonElementProps = {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    submit?: () => void;
 };
 
 type FormInputElementProps = {
@@ -385,6 +386,11 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+type FormRules = {
+    type?: 'string' | 'number';
+    required?: boolean;
+};
+
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
     Input?: ComponentType<FormInputElementProps>;
@@ -400,12 +406,6 @@ type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTy
     input?: FormInputProps<FormElements>;
 };
 
-type FormButtonElementProps = {
-    children?: React.ReactNode;
-    disabled?: boolean;
-    onClick?: () => void;
-};
-
 type FormElementTypes = {
     Label: ComponentType<FormLabelElementProps>;
     Input: ComponentType<FormInputElementProps>;
@@ -414,7 +414,7 @@ type FormElementTypes = {
 declare const FormDefaultElements: FormElementTypes;
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelElementProps[];
+    items: FormLabelElementProps<FormElements>[];
     onSubmit?: (values: Values) => Promise<void>;
     elements?: Partial<FormElements>;
     defaultValues?: Values;

package/dist/index.js

@@ -4,37 +4,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var browser = require('@faasjs/browser');
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
+// src/constant.ts
 function useConstant(fn) {
   const ref = react.useRef();
   if (!ref.current) {
@@ -118,14 +88,13 @@ function createSplittingContext(defaultValue) {
   const contexts = {};
   for (const key of keys) contexts[key] = react.createContext(defaultValues[key]);
   function Provider(props) {
-    var _a, _b;
     let children = props.memo ? useEqualMemo(
       () => props.children,
       props.memo === true ? [] : props.memo
     ) : props.children;
     for (const key of keys) {
       const Context = contexts[key];
-      const value = (_b = (_a = props.value) == null ? void 0 : _a[key]) != null ? _b : defaultValues[key];
+      const value = props.value?.[key] ?? defaultValues[key];
       children = /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
     }
     return children;
@@ -153,7 +122,10 @@ function useSplittingState(initialStates) {
   const states = {};
   for (const key of Object.keys(initialStates)) {
     const state = react.useState(initialStates[key]);
-    Object.assign(states, { [key]: state[0], [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1] });
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
   }
   return states;
 }
@@ -192,7 +164,18 @@ function FaasDataWrapper(props) {
 FaasDataWrapper.displayName = "FaasDataWrapper";
 FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
-  return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, __spreadProps(__spreadValues({}, faasProps), { children: /* @__PURE__ */ jsxRuntime.jsx(Component2, __spreadValues({}, props)) }));
+  return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
+}
+
+// src/faas.ts
+async function faas(action, params, options) {
+  const client = getClient(options?.baseUrl);
+  if (client.onError)
+    return client.browserClient.action(action, params, options).catch(async (res) => {
+      await client.onError(action, params)(res);
+      return Promise.reject(res);
+    });
+  return client.browserClient.action(action, params, options);
 }
 function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = react.useState(true);
@@ -235,9 +218,9 @@ function useFaas(action, defaultParams, options = {}) {
         options.setData ? options.setData(r.data) : setData(r.data);
         setLoading(false);
       }).catch(async (e) => {
-        if (typeof (e == null ? void 0 : e.message) === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
+        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
           return;
-        if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
           console.warn(`FaasReactClient: ${e.message} retry...`);
           setFails(1);
           return send();
@@ -256,16 +239,14 @@ function useFaas(action, defaultParams, options = {}) {
     if (options.debounce) {
       const timeout = setTimeout(send, options.debounce);
       return () => {
-        var _a;
         clearTimeout(timeout);
-        (_a = controllerRef.current) == null ? void 0 : _a.abort();
+        controllerRef.current?.abort();
         setLoading(false);
       };
     }
     send();
     return () => {
-      var _a;
-      (_a = controllerRef.current) == null ? void 0 : _a.abort();
+      controllerRef.current?.abort();
       setLoading(false);
     };
   }, [action, options.params || params, reloadTimes, skip]);
@@ -294,17 +275,6 @@ function useFaas(action, defaultParams, options = {}) {
   };
 }
 useFaas.whyDidYouRender = true;
-
-// src/faas.ts
-async function faas(action, params, options) {
-  const client = getClient(options == null ? void 0 : options.baseUrl);
-  if (client.onError)
-    return client.browserClient.action(action, params, options).catch(async (res) => {
-      await client.onError(action, params)(res);
-      return Promise.reject(res);
-    });
-  return client.browserClient.action(action, params, options);
-}
 var clients = {};
 function FaasReactClient({ baseUrl, options, onError } = {
   baseUrl: "/"
@@ -312,9 +282,9 @@ function FaasReactClient({ baseUrl, options, onError } = {
   const client = new browser.FaasBrowserClient(baseUrl, options);
   const reactClient = {
     id: client.id,
-    faas: async (action, params, options2) => faas(action, params, __spreadValues({ baseUrl }, options2)),
-    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, __spreadValues({ baseUrl }, options2)),
-    FaasDataWrapper: (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, __spreadValues({ baseUrl }, props)),
+    faas: async (action, params, options2) => faas(action, params, { baseUrl, ...options2 }),
+    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, { baseUrl, ...options2 }),
+    FaasDataWrapper: (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { baseUrl, ...props }),
     onError,
     browserClient: client
   };
@@ -330,6 +300,8 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends react.Component {
+  static displayName = "ErrorBoundary";
+  static whyDidYouRender = true;
   constructor(props) {
     super(props);
     this.state = {
@@ -344,9 +316,8 @@ var ErrorBoundary = class extends react.Component {
     });
   }
   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;
+    const errorDescription = this.state.info?.componentStack ? this.state.info.componentStack : null;
     if (this.state.error) {
       if (this.props.onError)
         this.props.onError(this.state.error, this.state.info);
@@ -365,35 +336,67 @@ var ErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
-ErrorBoundary.displayName = "ErrorBoundary";
-ErrorBoundary.whyDidYouRender = true;
 var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, __spreadProps(__spreadValues({}, wrapperProps), { children })) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
 OptionalWrapper.displayName = "OptionalWrapper";
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
-var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext([
+  "items",
+  "onSubmit",
+  "Elements",
+  "submitting",
+  "setSubmitting",
+  "values",
+  "setValues"
+]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
 function FormLabel(props) {
   const { Elements } = useFormContext();
-  if (props.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.Label, __spreadValues({}, props));
-  return /* @__PURE__ */ jsxRuntime.jsx(Elements.Label, __spreadValues({}, props));
+  if (props.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.Label, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Elements.Label, { ...props });
 }
 FormLabel.displayName = "FormLabel";
 FormLabel.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, __spreadValues({}, item), item.name));
+  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
-var FormInputElement = react.forwardRef((_a, ref) => {
-  var _b = _a, { onChange } = _b, props = __objRest(_b, ["onChange"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, props), { onChange: (e) => onChange(e.target.value), ref }));
-});
+function FormFooter() {
+  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Elements.Button,
+    {
+      disabled: submitting,
+      submit: () => {
+        setSubmitting(true);
+        onSubmit(values).finally(() => setSubmitting(false));
+      },
+      children: "Submit"
+    }
+  );
+}
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
+var FormButtonElement = react.forwardRef(({ disabled, children, submit, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick: submit,
+    ...props,
+    ref,
+    children
+  }
+));
+FormButtonElement.displayName = "FormButtonElement";
+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";
 FormInputElement.whyDidYouRender = true;
 var FormLabelElement = ({
@@ -415,13 +418,14 @@ var FormLabelElement = ({
       }
     );
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-    title != null ? title : name,
-    (input == null ? void 0 : input.Input) ? /* @__PURE__ */ jsxRuntime.jsx(
+    title ?? name,
+    input?.Input ? /* @__PURE__ */ jsxRuntime.jsx(
       input.Input,
       {
         name,
         value: values[name],
-        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
           [name]: v
         }))
       }
@@ -430,7 +434,8 @@ var FormLabelElement = ({
       {
         name,
         value: values[name],
-        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
           [name]: v
         }))
       }
@@ -440,22 +445,6 @@ var FormLabelElement = ({
 };
 FormLabelElement.displayName = "FormLabelElement";
 FormLabelElement.whyDidYouRender = true;
-var FormButtonElement = react.forwardRef((_a, ref) => {
-  var _b = _a, { disabled, children, onClick } = _b, props = __objRest(_b, ["disabled", "children", "onClick"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      disabled,
-      onClick
-    }, props), {
-      ref,
-      children
-    })
-  );
-});
-FormButtonElement.displayName = "FormButtonElement";
-FormButtonElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -463,31 +452,13 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
-function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Elements.Button,
-    {
-      disabled: submitting,
-      onClick: () => {
-        setSubmitting(true);
-        onSubmit(values).finally(() => setSubmitting(false));
-      },
-      children: "Submit"
-    }
-  );
-}
-FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
-  var _a;
   const values = {};
   for (const item of items)
-    values[item.name] = (_a = defaultValues[item.name]) != null ? _a : "";
+    values[item.name] = defaultValues[item.name] ?? "";
   return values;
 }
-function FormContainer(_a) {
-  var _b = _a, { defaultValues, elements } = _b, props = __objRest(_b, ["defaultValues", "elements"]);
+function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
     submitting: false,
@@ -496,7 +467,11 @@ function FormContainer(_a) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormContextProvider,
     {
-      value: __spreadValues(__spreadValues({}, states), props),
+      value: {
+        ...states,
+        ...props
+      },
+      memo: true,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
         /* @__PURE__ */ jsxRuntime.jsx(FormFooter, {})

package/dist/index.mjs

@@ -2,37 +2,7 @@ import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, use
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
+// src/constant.ts
 function useConstant(fn) {
   const ref = useRef();
   if (!ref.current) {
@@ -116,14 +86,13 @@ function createSplittingContext(defaultValue) {
   const contexts = {};
   for (const key of keys) contexts[key] = createContext(defaultValues[key]);
   function Provider(props) {
-    var _a, _b;
     let children = props.memo ? useEqualMemo(
       () => props.children,
       props.memo === true ? [] : props.memo
     ) : props.children;
     for (const key of keys) {
       const Context = contexts[key];
-      const value = (_b = (_a = props.value) == null ? void 0 : _a[key]) != null ? _b : defaultValues[key];
+      const value = props.value?.[key] ?? defaultValues[key];
       children = /* @__PURE__ */ jsx(Context.Provider, { value, children });
     }
     return children;
@@ -151,7 +120,10 @@ function useSplittingState(initialStates) {
   const states = {};
   for (const key of Object.keys(initialStates)) {
     const state = useState(initialStates[key]);
-    Object.assign(states, { [key]: state[0], [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1] });
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
   }
   return states;
 }
@@ -190,7 +162,18 @@ function FaasDataWrapper(props) {
 FaasDataWrapper.displayName = "FaasDataWrapper";
 FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
-  return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, __spreadProps(__spreadValues({}, faasProps), { children: /* @__PURE__ */ jsx(Component2, __spreadValues({}, props)) }));
+  return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+}
+
+// src/faas.ts
+async function faas(action, params, options) {
+  const client = getClient(options?.baseUrl);
+  if (client.onError)
+    return client.browserClient.action(action, params, options).catch(async (res) => {
+      await client.onError(action, params)(res);
+      return Promise.reject(res);
+    });
+  return client.browserClient.action(action, params, options);
 }
 function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = useState(true);
@@ -233,9 +216,9 @@ function useFaas(action, defaultParams, options = {}) {
         options.setData ? options.setData(r.data) : setData(r.data);
         setLoading(false);
       }).catch(async (e) => {
-        if (typeof (e == null ? void 0 : e.message) === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
+        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
           return;
-        if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
           console.warn(`FaasReactClient: ${e.message} retry...`);
           setFails(1);
           return send();
@@ -254,16 +237,14 @@ function useFaas(action, defaultParams, options = {}) {
     if (options.debounce) {
       const timeout = setTimeout(send, options.debounce);
       return () => {
-        var _a;
         clearTimeout(timeout);
-        (_a = controllerRef.current) == null ? void 0 : _a.abort();
+        controllerRef.current?.abort();
         setLoading(false);
       };
     }
     send();
     return () => {
-      var _a;
-      (_a = controllerRef.current) == null ? void 0 : _a.abort();
+      controllerRef.current?.abort();
       setLoading(false);
     };
   }, [action, options.params || params, reloadTimes, skip]);
@@ -292,17 +273,6 @@ function useFaas(action, defaultParams, options = {}) {
   };
 }
 useFaas.whyDidYouRender = true;
-
-// src/faas.ts
-async function faas(action, params, options) {
-  const client = getClient(options == null ? void 0 : options.baseUrl);
-  if (client.onError)
-    return client.browserClient.action(action, params, options).catch(async (res) => {
-      await client.onError(action, params)(res);
-      return Promise.reject(res);
-    });
-  return client.browserClient.action(action, params, options);
-}
 var clients = {};
 function FaasReactClient({ baseUrl, options, onError } = {
   baseUrl: "/"
@@ -310,9 +280,9 @@ function FaasReactClient({ baseUrl, options, onError } = {
   const client = new FaasBrowserClient(baseUrl, options);
   const reactClient = {
     id: client.id,
-    faas: async (action, params, options2) => faas(action, params, __spreadValues({ baseUrl }, options2)),
-    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, __spreadValues({ baseUrl }, options2)),
-    FaasDataWrapper: (props) => /* @__PURE__ */ jsx(FaasDataWrapper, __spreadValues({ baseUrl }, props)),
+    faas: async (action, params, options2) => faas(action, params, { baseUrl, ...options2 }),
+    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, { baseUrl, ...options2 }),
+    FaasDataWrapper: (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { baseUrl, ...props }),
     onError,
     browserClient: client
   };
@@ -328,6 +298,8 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends Component {
+  static displayName = "ErrorBoundary";
+  static whyDidYouRender = true;
   constructor(props) {
     super(props);
     this.state = {
@@ -342,9 +314,8 @@ var ErrorBoundary = class extends Component {
     });
   }
   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;
+    const errorDescription = this.state.info?.componentStack ? this.state.info.componentStack : null;
     if (this.state.error) {
       if (this.props.onError)
         this.props.onError(this.state.error, this.state.info);
@@ -363,35 +334,67 @@ var ErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
-ErrorBoundary.displayName = "ErrorBoundary";
-ErrorBoundary.whyDidYouRender = true;
 var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsx(Wrapper, __spreadProps(__spreadValues({}, wrapperProps), { children })) : /* @__PURE__ */ jsx(Fragment, { children });
+  return condition ? /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
 };
 OptionalWrapper.displayName = "OptionalWrapper";
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
-var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext([
+  "items",
+  "onSubmit",
+  "Elements",
+  "submitting",
+  "setSubmitting",
+  "values",
+  "setValues"
+]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
 function FormLabel(props) {
   const { Elements } = useFormContext();
-  if (props.Label) return /* @__PURE__ */ jsx(props.Label, __spreadValues({}, props));
-  return /* @__PURE__ */ jsx(Elements.Label, __spreadValues({}, props));
+  if (props.Label) return /* @__PURE__ */ jsx(props.Label, { ...props });
+  return /* @__PURE__ */ jsx(Elements.Label, { ...props });
 }
 FormLabel.displayName = "FormLabel";
 FormLabel.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, __spreadValues({}, item), item.name));
+  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
-var FormInputElement = forwardRef((_a, ref) => {
-  var _b = _a, { onChange } = _b, props = __objRest(_b, ["onChange"]);
-  return /* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({}, props), { onChange: (e) => onChange(e.target.value), ref }));
-});
+function FormFooter() {
+  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Elements.Button,
+    {
+      disabled: submitting,
+      submit: () => {
+        setSubmitting(true);
+        onSubmit(values).finally(() => setSubmitting(false));
+      },
+      children: "Submit"
+    }
+  );
+}
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
+var FormButtonElement = forwardRef(({ disabled, children, submit, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick: submit,
+    ...props,
+    ref,
+    children
+  }
+));
+FormButtonElement.displayName = "FormButtonElement";
+FormButtonElement.whyDidYouRender = true;
+var FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
 FormInputElement.displayName = "FormInputElement";
 FormInputElement.whyDidYouRender = true;
 var FormLabelElement = ({
@@ -413,13 +416,14 @@ var FormLabelElement = ({
       }
     );
   return /* @__PURE__ */ jsxs("label", { children: [
-    title != null ? title : name,
-    (input == null ? void 0 : input.Input) ? /* @__PURE__ */ jsx(
+    title ?? name,
+    input?.Input ? /* @__PURE__ */ jsx(
       input.Input,
       {
         name,
         value: values[name],
-        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
           [name]: v
         }))
       }
@@ -428,7 +432,8 @@ var FormLabelElement = ({
       {
         name,
         value: values[name],
-        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
           [name]: v
         }))
       }
@@ -438,22 +443,6 @@ var FormLabelElement = ({
 };
 FormLabelElement.displayName = "FormLabelElement";
 FormLabelElement.whyDidYouRender = true;
-var FormButtonElement = forwardRef((_a, ref) => {
-  var _b = _a, { disabled, children, onClick } = _b, props = __objRest(_b, ["disabled", "children", "onClick"]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      disabled,
-      onClick
-    }, props), {
-      ref,
-      children
-    })
-  );
-});
-FormButtonElement.displayName = "FormButtonElement";
-FormButtonElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -461,31 +450,13 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
-function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    Elements.Button,
-    {
-      disabled: submitting,
-      onClick: () => {
-        setSubmitting(true);
-        onSubmit(values).finally(() => setSubmitting(false));
-      },
-      children: "Submit"
-    }
-  );
-}
-FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
-  var _a;
   const values = {};
   for (const item of items)
-    values[item.name] = (_a = defaultValues[item.name]) != null ? _a : "";
+    values[item.name] = defaultValues[item.name] ?? "";
   return values;
 }
-function FormContainer(_a) {
-  var _b = _a, { defaultValues, elements } = _b, props = __objRest(_b, ["defaultValues", "elements"]);
+function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
     submitting: false,
@@ -494,7 +465,11 @@ function FormContainer(_a) {
   return /* @__PURE__ */ jsxs(
     FormContextProvider,
     {
-      value: __spreadValues(__spreadValues({}, states), props),
+      value: {
+        ...states,
+        ...props
+      },
+      memo: true,
       children: [
         /* @__PURE__ */ jsx(FormBody, {}),
         /* @__PURE__ */ jsx(FormFooter, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.4",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,10 +34,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "3.7.0-beta.2"
+    "@faasjs/browser": "3.7.0-beta.4"
   },
   "devDependencies": {
-    "@faasjs/browser": "3.7.0-beta.2",
+    "@faasjs/browser": "3.7.0-beta.4",
     "@types/react": "*",
     "react": "*"
   },