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

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useEffect, useCallback, useState, createContext, cloneElement, Component, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
 // src/constant.ts
@@ -18,6 +18,7 @@ function equal(a, b) {
   if ((a === null || a === void 0) && (b === null || b === void 0))
     return true;
   if (typeof a !== typeof b) return false;
+  if (b === null || b === void 0) return false;
   const ctor = a.constructor;
   if (ctor !== b.constructor) return false;
   switch (ctor) {
@@ -45,11 +46,8 @@ function equal(a, b) {
     case Promise:
       return a === b;
     case Object: {
-      const keys = Object.keys(a);
-      if (keys.length !== Object.keys(b).length) return false;
-      for (const key of keys) {
+      for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]))
         if (!equal(a[key], b[key])) return false;
-      }
       return true;
     }
     default:
@@ -77,6 +75,24 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+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]
+    });
+  }
+  return states;
+}
 function createSplittingContext(defaultValue) {
   const keys = Array.isArray(defaultValue) ? defaultValue : Object.keys(defaultValue);
   const defaultValues = Array.isArray(defaultValue) ? keys.reduce((prev, cur) => {
@@ -86,17 +102,20 @@ function createSplittingContext(defaultValue) {
   const contexts = {};
   for (const key of keys) contexts[key] = createContext(defaultValues[key]);
   function Provider(props) {
+    const states = props.initializeStates ? useSplittingState(props.initializeStates) : {};
     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 = props.value?.[key] ?? states[key] ?? 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,19 +127,12 @@ function createSplittingContext(defaultValue) {
       return Object.freeze(obj);
     });
   }
+  use.whyDidYouRender = true;
   return {
     Provider,
     use
   };
 }
-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] });
-  }
-  return states;
-}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -153,10 +165,22 @@ 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 }) });
 }
+
+// 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);
   const [data, setData] = useState();
@@ -255,17 +279,6 @@ function useFaas(action, defaultParams, options = {}) {
   };
 }
 useFaas.whyDidYouRender = true;
-
-// 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);
-}
 var clients = {};
 function FaasReactClient({ baseUrl, options, onError } = {
   baseUrl: "/"
@@ -291,6 +304,7 @@ function getClient(host) {
   return client;
 }
 var ErrorBoundary = class extends Component {
+  static displayName = "ErrorBoundary";
   static whyDidYouRender = true;
   constructor(props) {
     super(props);
@@ -326,146 +340,200 @@ 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
-var FormContext = createSplittingContext(["items", "onSubmit", "elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext([
+  "items",
+  "onSubmit",
+  "Elements",
+  "lang",
+  "submitting",
+  "setSubmitting",
+  "values",
+  "setValues",
+  "errors",
+  "setErrors",
+  "rules"
+]);
 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 });
+function FormItem(props) {
+  const { Elements, values, setValues, errors } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  const Input = props.input?.Input ?? Elements.Input;
+  return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      name: props.name,
+      value: values[props.name],
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [props.name]: v
+      }))
+    }
+  ) });
 }
+FormItem.displayName = "FormItem";
+FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
+  return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...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;
+FormBody.displayName = "FormBody";
+FormBody.whyDidYouRender = true;
+
+// src/Form/rules.ts
+var FormDefaultRules = {
+  required: async (value, _, lang) => {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
+      throw Error(lang?.required);
+    }
+  },
+  type: async (value, options, lang) => {
+    switch (options) {
+      case "string":
+        if (typeof value !== "string") throw Error(lang?.string);
+        break;
+      case "number":
+        if (Number.isNaN(Number(value))) throw Error(lang?.number);
+        break;
+    }
+  },
+  custom: async (value, options) => {
+    return options(value);
   }
-}
-function FormInput({
-  name,
-  rules,
-  ...rest
-}) {
-  const { elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if ("Input" in rest && rest.Input) {
-    return /* @__PURE__ */ jsx(
-      rest.Input,
-      {
-        name,
-        value,
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
+};
+async function validValues(rules, items, values, lang) {
+  const errors = {};
+  for (const item of items) {
+    const value = values[item.name];
+    const rulesOptions = item.rules;
+    if (rulesOptions) {
+      for (const [name, options] of Object.entries(rulesOptions)) {
+        try {
+          await rules[name](value, options, lang);
+        } catch (error) {
+          errors[item.name] = error;
+          break;
+        }
       }
-    );
-  }
-  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
-          }
-        );
     }
   }
-  return /* @__PURE__ */ jsx(
-    elements.input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      }))
-    }
-  );
+  return errors;
 }
-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 }))
-};
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors,
+    lang,
+    rules
+  } = useFormContext();
   return /* @__PURE__ */ jsx(
-    elements.button,
+    Elements.Button,
     {
       disabled: submitting,
-      onClick: () => {
+      submit: async () => {
         setSubmitting(true);
+        const errors = await validValues(rules, items, values, lang);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
         onSubmit(values).finally(() => setSubmitting(false));
       },
-      children: "Submit"
+      children: lang.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 = ({
+  name,
+  title,
+  description,
+  error,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs("label", { children: [
+    title ?? name,
+    children,
+    description,
+    error && /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: error.message })
+  ] });
+};
+FormLabelElement.displayName = "FormLabelElement";
+FormLabelElement.whyDidYouRender = true;
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  Input: FormInputElement,
+  Button: FormButtonElement
+};
+
+// src/Form/lang.ts
+var FormDefaultLang = {
+  submit: "Submit",
+  required: "This field is required",
+  string: "This field must be a string",
+  number: "This field must be a number"
+};
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
     values[item.name] = defaultValues[item.name] ?? "";
   return values;
 }
-function FormContainer({ defaultValues, elements, ...props }) {
-  const states = useSplittingState({
-    values: mergeValues(props.items, defaultValues),
-    submitting: false,
-    elements: Object.assign(FormElements, elements)
-  });
+function FormContainer({
+  defaultValues,
+  Elements,
+  rules,
+  lang,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs(
     FormContextProvider,
     {
-      value: {
-        ...states,
-        ...props
+      initializeStates: {
+        values: mergeValues(props.items, defaultValues),
+        errors: {},
+        submitting: false,
+        Elements: Object.assign(
+          FormDefaultElements,
+          Elements
+        ),
+        lang: Object.assign(FormDefaultLang, lang),
+        rules: Object.assign(FormDefaultRules, rules)
       },
+      value: props,
+      memo: true,
       children: [
         /* @__PURE__ */ jsx(FormBody, {}),
         /* @__PURE__ */ jsx(FormFooter, {})
@@ -473,5 +541,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, FormDefaultLang, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, usePrevious, useSplittingState, validValues, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.7.0-beta.0",
+  "version": "3.7.0-beta.10",
   "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.10"
   },
   "devDependencies": {
-    "@faasjs/browser": "3.7.0-beta.0",
+    "@faasjs/browser": "3.7.0-beta.10",
     "@types/react": "*",
     "react": "*"
   },