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

package/README.md

@@ -45,6 +45,7 @@ npm install @faasjs/react
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
 - [Form](functions/Form.md)
+- [FormContextProvider](functions/FormContextProvider.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
@@ -53,6 +54,7 @@ npm install @faasjs/react
 - [useEqualMemo](functions/useEqualMemo.md)
 - [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
+- [useFormContext](functions/useFormContext.md)
 - [useSplittingState](functions/useSplittingState.md)
 - [withFaasData](functions/withFaasData.md)
 
@@ -76,8 +78,18 @@ npm install @faasjs/react
 - [FaasParams](type-aliases/FaasParams.md)
 - [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
+- [FormButtonElementProps](type-aliases/FormButtonElementProps.md)
+- [FormContextProps](type-aliases/FormContextProps.md)
+- [FormElementTypes](type-aliases/FormElementTypes.md)
+- [FormInputElementProps](type-aliases/FormInputElementProps.md)
+- [FormLabelElementProps](type-aliases/FormLabelElementProps.md)
+- [FormProps](type-aliases/FormProps.md)
 - [OnError](type-aliases/OnError.md)
 - [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
 - [Options](type-aliases/Options.md)
 - [ResponseHeaders](type-aliases/ResponseHeaders.md)
 - [useFaasOptions](type-aliases/useFaasOptions.md)
+
+## Variables
+
+- [FormDefaultElements](variables/FormDefaultElements.md)

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
+import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -211,6 +212,7 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
 };
 declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 declare namespace FaasDataWrapper {
+    var displayName: string;
     var whyDidYouRender: boolean;
 }
 /**
@@ -335,6 +337,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
         componentStack?: string;
     };
 }> {
+    static displayName: string;
     static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
@@ -376,59 +379,66 @@ type FormRules = {
     required?: boolean;
 };
 
-type FormInputComponentProps = {
+type FormInputElementProps = {
     name: string;
     value: any;
     onChange: (value: any) => void;
 };
-type FormInputComponent<Extra extends Record<string, any> = Record<string, any>> = ComponentType<FormInputComponentProps & Extra>;
-type InferFormInputProps<T extends FormInputComponent | JSXElementConstructor<any>> = T extends FormInputComponent ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
+
+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: FormInputComponent;
-} | {
-    type?: 'input';
-    props?: InferFormInputProps<FormElements['input']>;
-} | {
-    type: 'select';
-    props?: InferFormInputProps<FormElements['select']>;
+    Input?: ComponentType<FormInputElementProps>;
+    props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelProps<FormElements extends FormElementTypes = FormElementTypes> = {
+type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
     name: string;
     rules?: FormRules;
-    label?: {
-        title?: ReactNode;
-        description?: ReactNode;
-        Label?: React.ComponentType<FormLabelProps>;
-    };
+    title?: ReactNode;
+    description?: ReactNode;
+    Label?: FormElements['Label'];
     input?: FormInputProps<FormElements>;
 };
 
-type FormButtonProps = {
+type FormButtonElementProps = {
     children?: React.ReactNode;
     disabled?: boolean;
     onClick?: () => void;
 };
 
-type FormSelectOption = {
-    value: string | number;
-    label: string;
-};
 type FormElementTypes = {
-    label: ComponentType<FormLabelProps>;
-    input: FormInputComponent;
-    select: FormInputComponent<{
-        options?: FormSelectOption[];
-    }>;
-    button: ComponentType<FormButtonProps>;
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
 };
+declare const FormDefaultElements: FormElementTypes;
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelProps<FormElements>[];
+    items: FormLabelElementProps[];
     onSubmit?: (values: Values) => Promise<void>;
-    elements?: FormElements;
+    elements?: Partial<FormElements>;
     defaultValues?: Values;
 };
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes>({ defaultValues, elements, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
+declare namespace FormContainer {
+    var displayName: string;
+    var whyDidYouRender: boolean;
+}
+
+type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+    items: FormLabelElementProps[];
+    onSubmit: (values: Values) => Promise<void>;
+    Elements: FormElementTypes;
+    submitting: boolean;
+    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+};
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
+    value?: NewT;
+    children: react.ReactNode;
+    memo?: true | any[];
+}) => react.ReactNode;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormInputElementProps, type FormLabelElementProps, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
+import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -211,6 +212,7 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
 };
 declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 declare namespace FaasDataWrapper {
+    var displayName: string;
     var whyDidYouRender: boolean;
 }
 /**
@@ -335,6 +337,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
         componentStack?: string;
     };
 }> {
+    static displayName: string;
     static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
@@ -376,59 +379,66 @@ type FormRules = {
     required?: boolean;
 };
 
-type FormInputComponentProps = {
+type FormInputElementProps = {
     name: string;
     value: any;
     onChange: (value: any) => void;
 };
-type FormInputComponent<Extra extends Record<string, any> = Record<string, any>> = ComponentType<FormInputComponentProps & Extra>;
-type InferFormInputProps<T extends FormInputComponent | JSXElementConstructor<any>> = T extends FormInputComponent ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
+
+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: FormInputComponent;
-} | {
-    type?: 'input';
-    props?: InferFormInputProps<FormElements['input']>;
-} | {
-    type: 'select';
-    props?: InferFormInputProps<FormElements['select']>;
+    Input?: ComponentType<FormInputElementProps>;
+    props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelProps<FormElements extends FormElementTypes = FormElementTypes> = {
+type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
     name: string;
     rules?: FormRules;
-    label?: {
-        title?: ReactNode;
-        description?: ReactNode;
-        Label?: React.ComponentType<FormLabelProps>;
-    };
+    title?: ReactNode;
+    description?: ReactNode;
+    Label?: FormElements['Label'];
     input?: FormInputProps<FormElements>;
 };
 
-type FormButtonProps = {
+type FormButtonElementProps = {
     children?: React.ReactNode;
     disabled?: boolean;
     onClick?: () => void;
 };
 
-type FormSelectOption = {
-    value: string | number;
-    label: string;
-};
 type FormElementTypes = {
-    label: ComponentType<FormLabelProps>;
-    input: FormInputComponent;
-    select: FormInputComponent<{
-        options?: FormSelectOption[];
-    }>;
-    button: ComponentType<FormButtonProps>;
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
 };
+declare const FormDefaultElements: FormElementTypes;
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelProps<FormElements>[];
+    items: FormLabelElementProps[];
     onSubmit?: (values: Values) => Promise<void>;
-    elements?: FormElements;
+    elements?: Partial<FormElements>;
     defaultValues?: Values;
 };
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes>({ defaultValues, elements, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
+declare namespace FormContainer {
+    var displayName: string;
+    var whyDidYouRender: boolean;
+}
+
+type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+    items: FormLabelElementProps[];
+    onSubmit: (values: Values) => Promise<void>;
+    Elements: FormElementTypes;
+    submitting: boolean;
+    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+};
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
+    value?: NewT;
+    children: react.ReactNode;
+    memo?: true | any[];
+}) => react.ReactNode;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormInputElementProps, type FormLabelElementProps, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.js

@@ -4,7 +4,37 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var browser = require('@faasjs/browser');
 
-// src/constant.ts
+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;
+};
 function useConstant(fn) {
   const ref = react.useRef();
   if (!ref.current) {
@@ -88,17 +118,20 @@ 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 = props.value?.[key] ?? defaultValues[key];
+      const value = (_b = (_a = props.value) == null ? void 0 : _a[key]) != null ? _b : defaultValues[key];
       children = /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
     }
     return children;
   }
+  Provider.displayName = "SplittingContextProvider";
+  Provider.whyDidYouRender = true;
   function use() {
     return useConstant(() => {
       const obj = /* @__PURE__ */ Object.create(null);
@@ -110,6 +143,7 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
+  use.whyDidYouRender = true;
   return {
     Provider,
     use
@@ -155,9 +189,10 @@ function FaasDataWrapper(props) {
   ]);
   return child;
 }
+FaasDataWrapper.displayName = "FaasDataWrapper";
 FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
-  return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
+  return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, __spreadProps(__spreadValues({}, faasProps), { children: /* @__PURE__ */ jsxRuntime.jsx(Component2, __spreadValues({}, props)) }));
 }
 function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = react.useState(true);
@@ -200,9 +235,9 @@ function useFaas(action, defaultParams, options = {}) {
         options.setData ? options.setData(r.data) : setData(r.data);
         setLoading(false);
       }).catch(async (e) => {
-        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
+        if (typeof (e == null ? void 0 : e.message) === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
           return;
-        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+        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();
@@ -221,14 +256,16 @@ function useFaas(action, defaultParams, options = {}) {
     if (options.debounce) {
       const timeout = setTimeout(send, options.debounce);
       return () => {
+        var _a;
         clearTimeout(timeout);
-        controllerRef.current?.abort();
+        (_a = controllerRef.current) == null ? void 0 : _a.abort();
         setLoading(false);
       };
     }
     send();
     return () => {
-      controllerRef.current?.abort();
+      var _a;
+      (_a = controllerRef.current) == null ? void 0 : _a.abort();
       setLoading(false);
     };
   }, [action, options.params || params, reloadTimes, skip]);
@@ -260,7 +297,7 @@ useFaas.whyDidYouRender = true;
 
 // src/faas.ts
 async function faas(action, params, options) {
-  const client = getClient(options?.baseUrl);
+  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);
@@ -275,9 +312,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, { baseUrl, ...options2 }),
-    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, { baseUrl, ...options2 }),
-    FaasDataWrapper: (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { baseUrl, ...props }),
+    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)),
     onError,
     browserClient: client
   };
@@ -293,7 +330,6 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends react.Component {
-  static whyDidYouRender = true;
   constructor(props) {
     super(props);
     this.state = {
@@ -308,8 +344,9 @@ var ErrorBoundary = class extends react.Component {
     });
   }
   render() {
+    var _a;
     const errorMessage = (this.state.error || "").toString();
-    const errorDescription = this.state.info?.componentStack ? this.state.info.componentStack : null;
+    const errorDescription = ((_a = this.state.info) == null ? void 0 : _a.componentStack) ? this.state.info.componentStack : null;
     if (this.state.error) {
       if (this.props.onError)
         this.props.onError(this.state.error, this.state.info);
@@ -328,117 +365,108 @@ 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, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, __spreadProps(__spreadValues({}, 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?.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.label.Label, { ...props });
-  return /* @__PURE__ */ jsxRuntime.jsx(elements.label, { ...props });
+  const { Elements } = useFormContext();
+  if (props.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.Label, __spreadValues({}, props));
+  return /* @__PURE__ */ jsxRuntime.jsx(Elements.Label, __spreadValues({}, props));
 }
+FormLabel.displayName = "FormLabel";
+FormLabel.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...item }, item.name));
-}
-function processValue(input, rules) {
-  let value = input;
-  if (typeof input === "object" && "target" in input) {
-    value = input.target.value;
-  }
-  switch (rules?.type) {
-    case "number":
-      return Number(value);
-    case "string":
-      return String(value);
-    default:
-      return value;
-  }
+  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, __spreadValues({}, item), item.name));
 }
-function FormInput({
+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 }));
+});
+FormInputElement.displayName = "FormInputElement";
+FormInputElement.whyDidYouRender = true;
+var FormLabelElement = ({
   name,
-  rules,
-  ...rest
-}) {
-  const { elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if ("Input" in rest && rest.Input) {
+  title,
+  description,
+  Label,
+  input
+}) => {
+  const { values, setValues } = useFormContext();
+  if (Label)
     return /* @__PURE__ */ jsxRuntime.jsx(
-      rest.Input,
+      Label,
       {
         name,
-        value,
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
+        title,
+        description,
+        input
+      }
+    );
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+    title != null ? title : name,
+    (input == null ? void 0 : input.Input) ? /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        name,
+        value: values[name],
+        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
           [name]: v
         }))
       }
-    );
-  }
-  if ("type" in rest || "props" in rest) {
-    switch (rest.type) {
-      case "select":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          elements.select,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          elements.input,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-    }
-  }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      FormInputElement,
+      {
+        name,
+        value: values[name],
+        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: v
+        }))
+      }
+    ),
+    description
+  ] });
+};
+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(
-    elements.input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      }))
-    }
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      disabled,
+      onClick
+    }, props), {
+      ref,
+      children
+    })
   );
-}
-var FormElements = {
-  label: react.forwardRef(({ name, label, input, rules }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, children: [
-    label?.title ?? name,
-    /* @__PURE__ */ jsxRuntime.jsx(FormInput, { name, rules, ...input }),
-    label?.description
-  ] })),
-  input: react.forwardRef(
-    (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, ref })
-  ),
-  select: react.forwardRef(({ options, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("select", { ...props, ref, children: options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })),
-  button: react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled, onClick, ...props, ref, children }))
+});
+FormButtonElement.displayName = "FormButtonElement";
+FormButtonElement.whyDidYouRender = true;
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  Input: FormInputElement,
+  Button: FormButtonElement
 };
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    elements.button,
+    Elements.Button,
     {
       disabled: submitting,
       onClick: () => {
@@ -449,25 +477,26 @@ function FormFooter() {
     }
   );
 }
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
+  var _a;
   const values = {};
   for (const item of items)
-    values[item.name] = defaultValues[item.name] ?? "";
+    values[item.name] = (_a = defaultValues[item.name]) != null ? _a : "";
   return values;
 }
-function FormContainer({ defaultValues, elements, ...props }) {
+function FormContainer(_a) {
+  var _b = _a, { defaultValues, elements } = _b, props = __objRest(_b, ["defaultValues", "elements"]);
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
     submitting: false,
-    elements: Object.assign(FormElements, elements)
+    Elements: Object.assign(FormDefaultElements, elements)
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormContextProvider,
     {
-      value: {
-        ...states,
-        ...props
-      },
+      value: __spreadValues(__spreadValues({}, states), props),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
         /* @__PURE__ */ jsxRuntime.jsx(FormFooter, {})
@@ -475,11 +504,15 @@ function FormContainer({ defaultValues, elements, ...props }) {
     }
   );
 }
+FormContainer.displayName = "FormContainer";
+FormContainer.whyDidYouRender = true;
 
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
 exports.Form = FormContainer;
+exports.FormContextProvider = FormContextProvider;
+exports.FormDefaultElements = FormDefaultElements;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;
@@ -491,5 +524,6 @@ exports.useEqualEffect = useEqualEffect;
 exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
+exports.useFormContext = useFormContext;
 exports.useSplittingState = useSplittingState;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,8 +1,38 @@
 import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
-// src/constant.ts
+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;
+};
 function useConstant(fn) {
   const ref = useRef();
   if (!ref.current) {
@@ -86,17 +116,20 @@ 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 = props.value?.[key] ?? defaultValues[key];
+      const value = (_b = (_a = props.value) == null ? void 0 : _a[key]) != null ? _b : defaultValues[key];
       children = /* @__PURE__ */ jsx(Context.Provider, { value, children });
     }
     return children;
   }
+  Provider.displayName = "SplittingContextProvider";
+  Provider.whyDidYouRender = true;
   function use() {
     return useConstant(() => {
       const obj = /* @__PURE__ */ Object.create(null);
@@ -108,6 +141,7 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
+  use.whyDidYouRender = true;
   return {
     Provider,
     use
@@ -153,9 +187,10 @@ function FaasDataWrapper(props) {
   ]);
   return child;
 }
+FaasDataWrapper.displayName = "FaasDataWrapper";
 FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
-  return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+  return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, __spreadProps(__spreadValues({}, faasProps), { children: /* @__PURE__ */ jsx(Component2, __spreadValues({}, props)) }));
 }
 function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = useState(true);
@@ -198,9 +233,9 @@ function useFaas(action, defaultParams, options = {}) {
         options.setData ? options.setData(r.data) : setData(r.data);
         setLoading(false);
       }).catch(async (e) => {
-        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
+        if (typeof (e == null ? void 0 : e.message) === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
           return;
-        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
+        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();
@@ -219,14 +254,16 @@ function useFaas(action, defaultParams, options = {}) {
     if (options.debounce) {
       const timeout = setTimeout(send, options.debounce);
       return () => {
+        var _a;
         clearTimeout(timeout);
-        controllerRef.current?.abort();
+        (_a = controllerRef.current) == null ? void 0 : _a.abort();
         setLoading(false);
       };
     }
     send();
     return () => {
-      controllerRef.current?.abort();
+      var _a;
+      (_a = controllerRef.current) == null ? void 0 : _a.abort();
       setLoading(false);
     };
   }, [action, options.params || params, reloadTimes, skip]);
@@ -258,7 +295,7 @@ useFaas.whyDidYouRender = true;
 
 // src/faas.ts
 async function faas(action, params, options) {
-  const client = getClient(options?.baseUrl);
+  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);
@@ -273,9 +310,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, { baseUrl, ...options2 }),
-    useFaas: (action, defaultParams, options2) => useFaas(action, defaultParams, { baseUrl, ...options2 }),
-    FaasDataWrapper: (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { baseUrl, ...props }),
+    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)),
     onError,
     browserClient: client
   };
@@ -291,7 +328,6 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends Component {
-  static whyDidYouRender = true;
   constructor(props) {
     super(props);
     this.state = {
@@ -306,8 +342,9 @@ var ErrorBoundary = class extends Component {
     });
   }
   render() {
+    var _a;
     const errorMessage = (this.state.error || "").toString();
-    const errorDescription = this.state.info?.componentStack ? this.state.info.componentStack : null;
+    const errorDescription = ((_a = this.state.info) == null ? void 0 : _a.componentStack) ? this.state.info.componentStack : null;
     if (this.state.error) {
       if (this.props.onError)
         this.props.onError(this.state.error, this.state.info);
@@ -326,117 +363,108 @@ 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, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+  return condition ? /* @__PURE__ */ jsx(Wrapper, __spreadProps(__spreadValues({}, 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?.Label) return /* @__PURE__ */ jsx(props.label.Label, { ...props });
-  return /* @__PURE__ */ jsx(elements.label, { ...props });
+  const { Elements } = useFormContext();
+  if (props.Label) return /* @__PURE__ */ jsx(props.Label, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx(Elements.Label, __spreadValues({}, props));
 }
+FormLabel.displayName = "FormLabel";
+FormLabel.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
-}
-function processValue(input, rules) {
-  let value = input;
-  if (typeof input === "object" && "target" in input) {
-    value = input.target.value;
-  }
-  switch (rules?.type) {
-    case "number":
-      return Number(value);
-    case "string":
-      return String(value);
-    default:
-      return value;
-  }
+  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, __spreadValues({}, item), item.name));
 }
-function FormInput({
+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 }));
+});
+FormInputElement.displayName = "FormInputElement";
+FormInputElement.whyDidYouRender = true;
+var FormLabelElement = ({
   name,
-  rules,
-  ...rest
-}) {
-  const { elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if ("Input" in rest && rest.Input) {
+  title,
+  description,
+  Label,
+  input
+}) => {
+  const { values, setValues } = useFormContext();
+  if (Label)
     return /* @__PURE__ */ jsx(
-      rest.Input,
+      Label,
       {
         name,
-        value,
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
+        title,
+        description,
+        input
+      }
+    );
+  return /* @__PURE__ */ jsxs("label", { children: [
+    title != null ? title : name,
+    (input == null ? void 0 : input.Input) ? /* @__PURE__ */ jsx(
+      input.Input,
+      {
+        name,
+        value: values[name],
+        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
           [name]: v
         }))
       }
-    );
-  }
-  if ("type" in rest || "props" in rest) {
-    switch (rest.type) {
-      case "select":
-        return /* @__PURE__ */ jsx(
-          elements.select,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx(
-          elements.input,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-    }
-  }
+    ) : /* @__PURE__ */ jsx(
+      FormInputElement,
+      {
+        name,
+        value: values[name],
+        onChange: (v) => setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+          [name]: v
+        }))
+      }
+    ),
+    description
+  ] });
+};
+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(
-    elements.input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      }))
-    }
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      disabled,
+      onClick
+    }, props), {
+      ref,
+      children
+    })
   );
-}
-var FormElements = {
-  label: forwardRef(({ name, label, input, rules }, ref) => /* @__PURE__ */ jsxs("label", { ref, children: [
-    label?.title ?? name,
-    /* @__PURE__ */ jsx(FormInput, { name, rules, ...input }),
-    label?.description
-  ] })),
-  input: forwardRef(
-    (props, ref) => /* @__PURE__ */ jsx("input", { ...props, ref })
-  ),
-  select: forwardRef(({ options, ...props }, ref) => /* @__PURE__ */ jsx("select", { ...props, ref, children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) })),
-  button: forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick, ...props, ref, children }))
+});
+FormButtonElement.displayName = "FormButtonElement";
+FormButtonElement.whyDidYouRender = true;
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  Input: FormInputElement,
+  Button: FormButtonElement
 };
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
   return /* @__PURE__ */ jsx(
-    elements.button,
+    Elements.Button,
     {
       disabled: submitting,
       onClick: () => {
@@ -447,25 +475,26 @@ function FormFooter() {
     }
   );
 }
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
+  var _a;
   const values = {};
   for (const item of items)
-    values[item.name] = defaultValues[item.name] ?? "";
+    values[item.name] = (_a = defaultValues[item.name]) != null ? _a : "";
   return values;
 }
-function FormContainer({ defaultValues, elements, ...props }) {
+function FormContainer(_a) {
+  var _b = _a, { defaultValues, elements } = _b, props = __objRest(_b, ["defaultValues", "elements"]);
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
     submitting: false,
-    elements: Object.assign(FormElements, elements)
+    Elements: Object.assign(FormDefaultElements, elements)
   });
   return /* @__PURE__ */ jsxs(
     FormContextProvider,
     {
-      value: {
-        ...states,
-        ...props
-      },
+      value: __spreadValues(__spreadValues({}, states), props),
       children: [
         /* @__PURE__ */ jsx(FormBody, {}),
         /* @__PURE__ */ jsx(FormFooter, {})
@@ -473,5 +502,7 @@ function FormContainer({ defaultValues, elements, ...props }) {
     }
   );
 }
+FormContainer.displayName = "FormContainer";
+FormContainer.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useSplittingState, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, withFaasData };

package/package.json

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