@faasjs/react 3.7.0-beta.1 → 3.7.0-beta.3

package/README.md

@@ -78,8 +78,11 @@ 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)

package/dist/index.d.mts

@@ -3,7 +3,7 @@ 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 } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -212,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;
 }
 /**
@@ -336,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;
@@ -383,16 +385,19 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
-type FormLabelElementProps = {
+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>;
+    props?: InferFormInputProps<FormElements['Input']>;
+};
+
+type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
     name: string;
     rules?: FormRules;
     title?: ReactNode;
     description?: ReactNode;
-    Label?: React.ComponentType<FormLabelElementProps>;
-    input?: {
-        Input?: ComponentType<FormInputElementProps>;
-        props?: FormInputElementProps;
-    };
+    Label?: FormElements['Label'];
+    input?: FormInputProps<FormElements>;
 };
 
 type FormButtonElementProps = {
@@ -409,12 +414,16 @@ 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?: 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[];
@@ -432,4 +441,4 @@ declare const FormContextProvider: <NewT extends FormContextProps<Record<string,
 }) => 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 FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, 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

@@ -3,7 +3,7 @@ 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 } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -212,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;
 }
 /**
@@ -336,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;
@@ -383,16 +385,19 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
-type FormLabelElementProps = {
+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>;
+    props?: InferFormInputProps<FormElements['Input']>;
+};
+
+type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
     name: string;
     rules?: FormRules;
     title?: ReactNode;
     description?: ReactNode;
-    Label?: React.ComponentType<FormLabelElementProps>;
-    input?: {
-        Input?: ComponentType<FormInputElementProps>;
-        props?: FormInputElementProps;
-    };
+    Label?: FormElements['Label'];
+    input?: FormInputProps<FormElements>;
 };
 
 type FormButtonElementProps = {
@@ -409,12 +414,16 @@ 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?: 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[];
@@ -432,4 +441,4 @@ declare const FormContextProvider: <NewT extends FormContextProps<Record<string,
 }) => 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 FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, 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

@@ -99,6 +99,8 @@ function createSplittingContext(defaultValue) {
     }
     return children;
   }
+  Provider.displayName = "SplittingContextProvider";
+  Provider.whyDidYouRender = true;
   function use() {
     return useConstant(() => {
       const obj = /* @__PURE__ */ Object.create(null);
@@ -110,6 +112,7 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
+  use.whyDidYouRender = true;
   return {
     Provider,
     use
@@ -155,6 +158,7 @@ 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 }) });
@@ -293,6 +297,7 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends react.Component {
+  static displayName = "ErrorBoundary";
   static whyDidYouRender = true;
   constructor(props) {
     super(props);
@@ -328,10 +333,10 @@ var ErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
-ErrorBoundary.whyDidYouRender = true;
 var OptionalWrapper = ({ condition, Wrapper, wrapperProps, 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
@@ -343,11 +348,17 @@ function FormLabel(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, { ...item }, item.name));
 }
+FormBody.displayName = "FormBody";
+FormBody.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 = ({
   name,
   title,
@@ -356,7 +367,16 @@ var FormLabelElement = ({
   input
 }) => {
   const { values, setValues } = useFormContext();
-  if (Label) return /* @__PURE__ */ jsxRuntime.jsx(Label, { name, title, description, input });
+  if (Label)
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Label,
+      {
+        name,
+        title,
+        description,
+        input
+      }
+    );
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
     title ?? name,
     input?.Input ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -383,6 +403,8 @@ var FormLabelElement = ({
     description
   ] });
 };
+FormLabelElement.displayName = "FormLabelElement";
+FormLabelElement.whyDidYouRender = true;
 var FormButtonElement = react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
@@ -394,6 +416,8 @@ var FormButtonElement = react.forwardRef(({ disabled, children, onClick, ...prop
     children
   }
 ));
+FormButtonElement.displayName = "FormButtonElement";
+FormButtonElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -415,6 +439,8 @@ function FormFooter() {
     }
   );
 }
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
@@ -434,6 +460,7 @@ function FormContainer({ defaultValues, elements, ...props }) {
         ...states,
         ...props
       },
+      memo: true,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
         /* @__PURE__ */ jsxRuntime.jsx(FormFooter, {})
@@ -441,6 +468,8 @@ function FormContainer({ defaultValues, elements, ...props }) {
     }
   );
 }
+FormContainer.displayName = "FormContainer";
+FormContainer.whyDidYouRender = true;
 
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;

package/dist/index.mjs

@@ -97,6 +97,8 @@ function createSplittingContext(defaultValue) {
     }
     return children;
   }
+  Provider.displayName = "SplittingContextProvider";
+  Provider.whyDidYouRender = true;
   function use() {
     return useConstant(() => {
       const obj = /* @__PURE__ */ Object.create(null);
@@ -108,6 +110,7 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
+  use.whyDidYouRender = true;
   return {
     Provider,
     use
@@ -153,6 +156,7 @@ 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 }) });
@@ -291,6 +295,7 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends Component {
+  static displayName = "ErrorBoundary";
   static whyDidYouRender = true;
   constructor(props) {
     super(props);
@@ -326,10 +331,10 @@ var ErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
-ErrorBoundary.whyDidYouRender = true;
 var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
   return condition ? /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
 };
+OptionalWrapper.displayName = "OptionalWrapper";
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
@@ -341,11 +346,17 @@ function FormLabel(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, { ...item }, item.name));
 }
+FormBody.displayName = "FormBody";
+FormBody.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 = ({
   name,
   title,
@@ -354,7 +365,16 @@ var FormLabelElement = ({
   input
 }) => {
   const { values, setValues } = useFormContext();
-  if (Label) return /* @__PURE__ */ jsx(Label, { name, title, description, input });
+  if (Label)
+    return /* @__PURE__ */ jsx(
+      Label,
+      {
+        name,
+        title,
+        description,
+        input
+      }
+    );
   return /* @__PURE__ */ jsxs("label", { children: [
     title ?? name,
     input?.Input ? /* @__PURE__ */ jsx(
@@ -381,6 +401,8 @@ var FormLabelElement = ({
     description
   ] });
 };
+FormLabelElement.displayName = "FormLabelElement";
+FormLabelElement.whyDidYouRender = true;
 var FormButtonElement = forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx(
   "button",
   {
@@ -392,6 +414,8 @@ var FormButtonElement = forwardRef(({ disabled, children, onClick, ...props }, r
     children
   }
 ));
+FormButtonElement.displayName = "FormButtonElement";
+FormButtonElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -413,6 +437,8 @@ function FormFooter() {
     }
   );
 }
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
@@ -432,6 +458,7 @@ function FormContainer({ defaultValues, elements, ...props }) {
         ...states,
         ...props
       },
+      memo: true,
       children: [
         /* @__PURE__ */ jsx(FormBody, {}),
         /* @__PURE__ */ jsx(FormFooter, {})
@@ -439,5 +466,7 @@ function FormContainer({ defaultValues, elements, ...props }) {
     }
   );
 }
+FormContainer.displayName = "FormContainer";
+FormContainer.whyDidYouRender = true;
 
 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.1",
+  "version": "3.7.0-beta.3",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,10 +34,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "3.7.0-beta.1"
+    "@faasjs/browser": "3.7.0-beta.3"
   },
   "devDependencies": {
-    "@faasjs/browser": "3.7.0-beta.1",
+    "@faasjs/browser": "3.7.0-beta.3",
     "@types/react": "*",
     "react": "*"
   },