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

package/package.json

@@ -1,42 +1,38 @@
 {
   "name": "@faasjs/react",
-  "version": "v8.0.0-beta.2",
-  "license": "MIT",
-  "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
-  },
+  "version": "8.0.0-beta.21",
   "homepage": "https://faasjs.com/doc/react/",
+  "bugs": {
+    "url": "https://github.com/faasjs/faasjs/issues"
+  },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/faasjs/faasjs.git",
     "directory": "packages/react"
   },
-  "bugs": {
-    "url": "https://github.com/faasjs/faasjs/issues"
-  },
   "funding": "https://github.com/sponsors/faasjs",
-  "scripts": {
-    "build": "tsup src/index.tsx --config ../../tsup.config.ts --external react"
-  },
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "@faasjs/browser": ">=v8.0.0-beta.2"
+  "type": "module",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    }
   },
   "devDependencies": {
-    "@faasjs/browser": ">=v8.0.0-beta.2",
+    "@faasjs/types": ">=8.0.0-beta.21",
     "@types/react": "^19.0.0",
     "react": "^19.0.0"
   },
+  "peerDependencies": {
+    "@faasjs/types": ">=8.0.0-beta.21"
+  },
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=11.0.0"

package/dist/index.cjs

@@ -1,652 +0,0 @@
-'use strict';
-
-var browser = require('@faasjs/browser');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/client.tsx
-var AsyncFunction = (async () => {
-}).constructor;
-function equal(a, b) {
-  if (a === b) return true;
-  if ((a === null || a === void 0) && (b === null || b === void 0))
-    return true;
-  if (typeof a !== typeof b) return false;
-  if (a === null || a === void 0 || b === null || b === void 0)
-    return false;
-  const ctor = a.constructor;
-  if (ctor !== b.constructor) return false;
-  switch (ctor) {
-    case String:
-    case Boolean:
-      return a === b;
-    case Number:
-      return Number.isNaN(a) && Number.isNaN(b) || a === b;
-    case Array: {
-      if (a.length !== b.length) return false;
-      for (let i = 0; i < a.length; i++) {
-        if (!equal(a[i], b[i])) return false;
-      }
-      return true;
-    }
-    case Date:
-      return a.getTime() === b.getTime();
-    case RegExp:
-    case Function:
-    case AsyncFunction:
-      return a.toString() === b.toString();
-    case Map:
-    case Set:
-      return equal(Array.from(a), Array.from(b));
-    case Promise:
-      return a === b;
-    case Object: {
-      for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]))
-        if (!equal(a[key], b[key])) return false;
-      return true;
-    }
-    default:
-      throw Error(`Unsupported type: ${ctor}`);
-  }
-}
-function useEqualMemoize(value) {
-  const ref = react.useRef(value);
-  const signalRef = react.useRef(0);
-  if (!equal(value, ref.current)) {
-    ref.current = value;
-    signalRef.current += 1;
-  }
-  return react.useMemo(() => ref.current, [signalRef.current]);
-}
-function useEqualEffect(callback, dependencies) {
-  return react.useEffect(callback, useEqualMemoize(dependencies));
-}
-function useEqualMemo(callback, dependencies) {
-  return react.useMemo(callback, useEqualMemoize(dependencies));
-}
-function useEqualCallback(callback, dependencies) {
-  return react.useCallback(
-    (...args) => callback(...args),
-    useEqualMemoize(dependencies)
-  );
-}
-var fixedForwardRef = react.forwardRef;
-var FaasDataWrapper = fixedForwardRef(
-  (props, ref) => {
-    const request = getClient(props.baseUrl).useFaas(
-      props.action,
-      props.params,
-      {
-        data: props.data,
-        setData: props.setData
-      }
-    );
-    const [loaded, setLoaded] = react.useState(false);
-    react.useImperativeHandle(ref, () => request, [request]);
-    useEqualEffect(() => {
-      if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
-    }, [request.loading]);
-    useEqualEffect(() => {
-      if (props.onDataChange) props.onDataChange(request);
-    }, [request.data]);
-    const child = useEqualMemo(() => {
-      if (loaded) {
-        if (props.children) return react.cloneElement(props.children, request);
-        if (props.render) return props.render(request);
-      }
-      return props.fallback || null;
-    }, [
-      loaded,
-      request.action,
-      request.params,
-      request.data,
-      request.error,
-      request.loading
-    ]);
-    return child;
-  }
-);
-Object.assign(FaasDataWrapper, {
-  displayName: "FaasDataWrapper",
-  whyDidYouRender: true
-});
-function withFaasData(Component2, faasProps) {
-  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);
-  const [data, setData] = react.useState();
-  const [error, setError] = react.useState();
-  const [params, setParams] = react.useState(defaultParams);
-  const [reloadTimes, setReloadTimes] = react.useState(0);
-  const [fails, setFails] = react.useState(0);
-  const [skip, setSkip] = react.useState(
-    typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
-  );
-  const promiseRef = react.useRef(null);
-  const controllerRef = react.useRef(null);
-  const pendingReloadsRef = react.useRef(/* @__PURE__ */ new Map());
-  const reloadCounterRef = react.useRef(0);
-  useEqualEffect(() => {
-    setSkip(
-      typeof options.skip === "function" ? options.skip(params) : options.skip
-    );
-  }, [typeof options.skip === "function" ? params : options.skip]);
-  useEqualEffect(() => {
-    if (!equal(defaultParams, params)) {
-      setParams(defaultParams);
-    }
-  }, [defaultParams]);
-  useEqualEffect(() => {
-    if (!action || skip) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    controllerRef.current = new AbortController();
-    const client = getClient(options.baseUrl);
-    function send() {
-      const request = client.faas(
-        action,
-        options.params || params,
-        { signal: controllerRef.current.signal }
-      );
-      promiseRef.current = request;
-      request.then((r) => {
-        setFails(0);
-        setError(null);
-        options.setData ? options.setData(r.data) : setData(r.data);
-        setLoading(false);
-        for (const { resolve } of pendingReloadsRef.current.values())
-          resolve(r.data);
-        pendingReloadsRef.current.clear();
-      }).catch(async (e) => {
-        if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
-          return;
-        if (!fails && typeof e?.message === "string" && e.message.indexOf("Failed to fetch") >= 0) {
-          console.warn(`FaasReactClient: ${e.message} retry...`);
-          setFails(1);
-          return send();
-        }
-        let error2 = e;
-        if (client.onError)
-          try {
-            await client.onError(action, params)(e);
-          } catch (newError) {
-            error2 = newError;
-          }
-        setError(error2);
-        setLoading(false);
-        for (const { reject } of pendingReloadsRef.current.values())
-          reject(error2);
-        pendingReloadsRef.current.clear();
-        return;
-      });
-    }
-    if (options.debounce) {
-      const timeout = setTimeout(send, options.debounce);
-      return () => {
-        clearTimeout(timeout);
-        controllerRef.current?.abort();
-        setLoading(false);
-      };
-    }
-    send();
-    return () => {
-      controllerRef.current?.abort();
-      setLoading(false);
-    };
-  }, [action, options.params || params, reloadTimes, skip]);
-  const reload = useEqualCallback(
-    (params2) => {
-      if (skip) setSkip(false);
-      if (params2) setParams(params2);
-      const reloadCounter = ++reloadCounterRef.current;
-      setReloadTimes((prev) => prev + 1);
-      return new Promise((resolve, reject) => {
-        pendingReloadsRef.current.set(reloadCounter, { resolve, reject });
-        setReloadTimes((prev) => prev + 1);
-      });
-    },
-    [params, skip]
-  );
-  return {
-    action,
-    params,
-    loading,
-    data: options.data || data,
-    reloadTimes,
-    error,
-    promise: promiseRef.current,
-    reload,
-    setData: options.setData || setData,
-    setLoading,
-    setPromise: (newPromise) => typeof newPromise === "function" ? newPromise(promiseRef.current) : promiseRef.current = newPromise,
-    setError
-  };
-}
-var clients = {};
-function FaasReactClient({ baseUrl, options, onError } = {
-  baseUrl: "/"
-}) {
-  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 }),
-    onError,
-    browserClient: client
-  };
-  clients[baseUrl] = reactClient;
-  return reactClient;
-}
-function getClient(host) {
-  const client = clients[host || Object.keys(clients)[0]];
-  if (!client) {
-    console.warn("FaasReactClient is not initialized manually, use default.");
-    return FaasReactClient();
-  }
-  return client;
-}
-function useConstant(fn) {
-  const ref = react.useRef(null);
-  if (!ref.current) {
-    ref.current = { v: fn() };
-  }
-  return ref.current.v;
-}
-useConstant.whyDidYouRender = true;
-var ErrorBoundary = class extends react.Component {
-  static displayName = "ErrorBoundary";
-  static whyDidYouRender = true;
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: void 0,
-      info: { componentStack: "" }
-    };
-  }
-  componentDidCatch(error, info) {
-    this.setState({
-      error,
-      info
-    });
-  }
-  render() {
-    const errorMessage = (this.state.error || "").toString();
-    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);
-      if (this.props.errorChildren)
-        return react.cloneElement(this.props.errorChildren, {
-          error: this.state.error,
-          info: this.state.info,
-          errorMessage,
-          errorDescription
-        });
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: errorMessage }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { children: errorDescription })
-      ] });
-    }
-    return this.props.children;
-  }
-};
-function useStateRef(initialValue) {
-  const [state, setState] = react.useState(initialValue ?? null);
-  const ref = react.useRef(state);
-  react.useEffect(() => {
-    ref.current = state;
-  }, [state]);
-  return [state, setState, ref];
-}
-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]
-    });
-  }
-  return states;
-}
-function createSplittingContext(defaultValue) {
-  const keys = Array.isArray(defaultValue) ? defaultValue : Object.keys(defaultValue);
-  const defaultValues = Array.isArray(defaultValue) ? keys.reduce(
-    (prev, cur) => {
-      prev[cur] = null;
-      return prev;
-    },
-    {}
-  ) : defaultValue;
-  const contexts = {};
-  for (const key of keys) contexts[key] = react.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] ?? states[key] ?? 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);
-      for (const key of Object.keys(contexts)) {
-        Object.defineProperty(obj, key, {
-          get: () => {
-            if (!contexts[key]) {
-              throw new Error(`Context for key "${key}" is undefined`);
-            }
-            return react.useContext(contexts[key]);
-          }
-        });
-      }
-      return Object.freeze(obj);
-    });
-  }
-  use.whyDidYouRender = true;
-  return {
-    Provider,
-    use
-  };
-}
-
-// src/Form/context.tsx
-var FormContext = createSplittingContext([
-  "items",
-  "onSubmit",
-  "Elements",
-  "lang",
-  "rules",
-  "submitting",
-  "setSubmitting",
-  "values",
-  "setValues",
-  "errors",
-  "setErrors",
-  "valuesRef"
-]);
-var FormContextProvider = FormContext.Provider;
-var useFormContext = FormContext.use;
-function processValue(input, rules) {
-  switch (rules?.type) {
-    case "number":
-      return Number(input);
-    case "string":
-      return String(input);
-    default:
-      return input;
-  }
-}
-function FormInput({
-  name,
-  rules,
-  ...rest
-}) {
-  const { Elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if (rest.Input) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      rest.Input,
-      {
-        name,
-        value,
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: processValue(v, rules)
-        })),
-        ...rest.props
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Elements.Input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      })),
-      ...rest.props
-    }
-  );
-}
-FormInput.displayName = "FormInput";
-FormInput.whyDidYouRender = true;
-function FormItem(props) {
-  const { Elements, errors } = useFormContext();
-  const Label = props.label?.Label ?? Elements.Label;
-  return /* @__PURE__ */ jsxRuntime.jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsxRuntime.jsx(FormInput, { name: props.name, rules: props.rules, ...props.input }) });
-}
-FormItem.displayName = "FormItem";
-FormItem.whyDidYouRender = true;
-function FormBody() {
-  const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormItem, { ...item }, item.name));
-}
-FormBody.displayName = "FormBody";
-FormBody.whyDidYouRender = true;
-var FormButtonElement = react.forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "button",
-  {
-    type: "button",
-    disabled: submitting,
-    onClick: submit,
-    ...props,
-    ref,
-    children
-  }
-));
-FormButtonElement.displayName = "FormButtonElement";
-Object.assign(FormButtonElement, { whyDidYouRender: true });
-var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
-FormInputElement.displayName = "FormInputElement";
-Object.assign(FormInputElement, { whyDidYouRender: true });
-var FormLabelElement = ({
-  name,
-  title,
-  description,
-  error,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-    title ?? name,
-    children,
-    description,
-    error && /* @__PURE__ */ jsxRuntime.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/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);
-  }
-};
-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;
-        }
-      }
-    }
-  }
-  return errors;
-}
-function FormFooter() {
-  const {
-    submitting,
-    setSubmitting,
-    onSubmit,
-    valuesRef,
-    Elements,
-    items,
-    setErrors,
-    lang,
-    rules
-  } = useFormContext();
-  const handleSubmit = react.useCallback(async () => {
-    setSubmitting(true);
-    setErrors({});
-    const errors = await validValues(rules, items, valuesRef.current, lang);
-    if (Object.keys(errors).length) {
-      setErrors(errors);
-      setSubmitting(false);
-      return;
-    }
-    onSubmit(valuesRef.current).finally(() => setSubmitting(false));
-  }, [setSubmitting, setErrors, rules, items, lang, onSubmit]);
-  const MemoizedButton = react.useMemo(
-    () => /* @__PURE__ */ jsxRuntime.jsx(Elements.Button, { submitting, submit: handleSubmit, children: lang.submit }),
-    [submitting, handleSubmit, lang.submit, Elements.Button]
-  );
-  return MemoizedButton;
-}
-FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
-
-// 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,
-  rules,
-  lang,
-  items,
-  ...props
-}) {
-  const [values, setValues, valuesRef] = useStateRef(
-    mergeValues(items, defaultValues)
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    FormContextProvider,
-    {
-      initializeStates: {
-        errors: {},
-        submitting: false
-      },
-      value: {
-        Elements: Object.assign(FormDefaultElements, Elements),
-        lang: Object.assign(FormDefaultLang, lang),
-        rules: Object.assign(FormDefaultRules, rules),
-        items,
-        values,
-        setValues,
-        valuesRef,
-        ...props
-      },
-      memo: true,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(FormFooter, {})
-      ]
-    }
-  );
-}
-FormContainer.displayName = "FormContainer";
-FormContainer.whyDidYouRender = true;
-var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
-  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-};
-OptionalWrapper.displayName = "OptionalWrapper";
-OptionalWrapper.whyDidYouRender = true;
-function usePrevious(value) {
-  const ref = react.useRef(void 0);
-  react.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-exports.ErrorBoundary = ErrorBoundary;
-exports.FaasDataWrapper = FaasDataWrapper;
-exports.FaasReactClient = FaasReactClient;
-exports.Form = FormContainer;
-exports.FormContextProvider = FormContextProvider;
-exports.FormDefaultElements = FormDefaultElements;
-exports.FormDefaultLang = FormDefaultLang;
-exports.FormDefaultRules = FormDefaultRules;
-exports.FormItem = FormItem;
-exports.OptionalWrapper = OptionalWrapper;
-exports.createSplittingContext = createSplittingContext;
-exports.equal = equal;
-exports.faas = faas;
-exports.getClient = getClient;
-exports.useConstant = useConstant;
-exports.useEqualCallback = useEqualCallback;
-exports.useEqualEffect = useEqualEffect;
-exports.useEqualMemo = useEqualMemo;
-exports.useEqualMemoize = useEqualMemoize;
-exports.useFaas = useFaas;
-exports.useFormContext = useFormContext;
-exports.usePrevious = usePrevious;
-exports.useSplittingState = useSplittingState;
-exports.useStateRef = useStateRef;
-exports.validValues = validValues;
-exports.withFaasData = withFaasData;