cross-state 0.19.3 → 0.21.0

package/dist/es/react/index.mjs

@@ -1,19 +1,10 @@
-import { a as useScope, d as useStore, S as ScopeProvider, u as useCache } from "../useCache.mjs";
-import { r, e } from "../useCache.mjs";
-import { useCallback, Fragment as Fragment$1, useMemo, useState, useEffect, createElement, createContext, useContext, useRef, startTransition } from "react";
-import { e as castArrayPath, a as autobind, g as get, c as createStore, d as deepEqual, l as debounce, t as throttle } from "../store.mjs";
-import { S as Scope, h as hash } from "../scope.mjs";
+import { d as useStore, u as useCache } from "../scope.mjs";
+import { S, r, e, a } from "../scope.mjs";
+import { useCallback, Fragment as Fragment$1, useState, useMemo, useEffect, createElement, useRef, createContext, useContext, startTransition } from "react";
+import { e as castArrayPath, b as calcDuration, q as queue, l as debounce, d as deepEqual, a as autobind, c as createStore, g as get, t as throttle } from "../store.mjs";
+import { h as hash } from "../hash.mjs";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { c as connectUrl } from "../urlStore.mjs";
-function wildcardMatch(s, w) {
-  if (typeof s === "string") {
-    s = castArrayPath(s);
-  }
-  if (typeof w === "string") {
-    w = castArrayPath(w);
-  }
-  return s.length === w.length && s.every((s2, i) => w[i] === "*" || s2 === w[i]);
-}
 function getWildCardMatches(object, path) {
   const matches = {};
   const [first, second, ...rest] = castArrayPath(path);
@@ -37,10 +28,10 @@ function getWildCardMatches(object, path) {
   }
   return matches;
 }
-function FormArray({ name, renderElement, children }) {
+function FormArrayField({ name, renderElement, children }) {
   const form = this.useForm();
-  const names = this.useFormState((form2) => {
-    const field = form2.getField(name);
+  const names = this.useFormState(() => {
+    const field = form.getField(name);
     return field.names;
   });
   const append = useCallback(
@@ -79,8 +70,9 @@ function FormArray({ name, renderElement, children }) {
   ] });
 }
 function FormError({ name }) {
-  const { errors, isDirty } = this.useField(name);
-  return isDirty ? /* @__PURE__ */ jsx(Fragment, { children: errors.join(", ") }) : null;
+  const hasTriggeredValidations = this.useFormState((form) => form.hasTriggeredValidations);
+  const { errors } = this.useField(name);
+  return hasTriggeredValidations ? /* @__PURE__ */ jsx(Fragment, { children: errors.join(", ") }) : null;
 }
 function FormField({
   // id,
@@ -95,16 +87,12 @@ function FormField({
   ...restProps
 }) {
   const id = "";
-  const form = this.useForm();
-  const state = useScope(this.state);
+  const { options } = this.useForm();
   const { value, setValue, errors } = this.useField(name);
-  const errorString = useMemo(
-    () => errors.map((error) => {
-      var _a, _b;
-      return ((_b = (_a = form.options).localizeError) == null ? void 0 : _b.call(_a, error, name)) ?? error;
-    }).join("\n"),
-    [errors, form.options.localizeError]
-  );
+  const errorString = errors.map((error) => {
+    var _a;
+    return ((_a = options.localizeError) == null ? void 0 : _a.call(options, error, name)) ?? error;
+  }).join("\n");
   const [localValue, setLocalValue] = useState();
   const _id = useMemo(
     () => `f${Math.random().toString(36).slice(2, 15)}${Math.random().toString(36).slice(2, 15)}`,
@@ -147,15 +135,6 @@ function FormField({
       }
       (_a = restProps.onChange) == null ? void 0 : _a.call(restProps, event, ...moreArgs);
     },
-    onFocus(...args) {
-      var _a;
-      state.set("touched", (touched) => {
-        touched = new Set(touched);
-        touched.add(_id);
-        return touched;
-      });
-      (_a = restProps.onFocus) == null ? void 0 : _a.apply(null, args);
-    },
     onBlur(...args) {
       var _a;
       if (localValue !== void 0) {
@@ -170,11 +149,65 @@ function FormField({
   }
   return createElement(component, props);
 }
+function useFormAutosave(form) {
+  var _a;
+  const { formState, options, getDraft } = form;
+  const debounceTime = calcDuration(((_a = options.autoSave) == null ? void 0 : _a.debounce) ?? 2e3);
+  const latestRef = useRef({ options });
+  const lastValue = useRef();
+  const q = useMemo(() => queue(), []);
+  const run = useMemo(
+    () => debounce(async () => {
+      var _a2;
+      const { options: options2 } = latestRef.current;
+      const save = (_a2 = options2.autoSave) == null ? void 0 : _a2.save;
+      const draft = getDraft();
+      lastValue.current = draft;
+      q.clear();
+      q(async () => {
+        var _a3;
+        try {
+          formState.set("saveInProgress", true);
+          await (save == null ? void 0 : save(draft, form));
+          if (q.size === 0 && ((_a3 = options2.autoSave) == null ? void 0 : _a3.resetAfterSave)) {
+            form.reset();
+          }
+        } finally {
+          formState.set("saveInProgress", false);
+          if (q.size === 0) {
+            formState.set("saveScheduled", false);
+          }
+        }
+      });
+    }, debounceTime),
+    [formState, debounceTime]
+  );
+  useEffect(() => {
+    var _a2;
+    if (!((_a2 = options.autoSave) == null ? void 0 : _a2.save)) {
+      return;
+    }
+    return formState.map((state) => state.draft).subscribe(
+      () => {
+        if (deepEqual(getDraft(), lastValue.current)) {
+          return;
+        }
+        run();
+        formState.set("saveScheduled", true);
+      },
+      { runNow: false }
+    );
+  }, [formState]);
+  useEffect(() => {
+    latestRef.current = { options };
+  });
+}
 function FormContainer({
   form,
   ...formProps
 }) {
-  const _form = form.useForm();
+  const { validate, options, getErrors: getErrors2 } = form.useForm();
+  const errors = getErrors2();
   const hasTriggeredValidations = form.useFormState((state) => state.hasTriggeredValidations);
   return /* @__PURE__ */ jsx(
     "form",
@@ -185,16 +218,16 @@ function FormContainer({
       onSubmit: (event) => {
         var _a;
         event.preventDefault();
-        const isValid = _form.validate();
+        const isValid = validate();
         let button;
         if (event.nativeEvent instanceof SubmitEvent && (button = event.nativeEvent.submitter) && (button instanceof HTMLButtonElement || button instanceof HTMLInputElement) && button.setCustomValidity) {
-          const errors = _form.errors.map(
-            ({ field, error }) => {
-              var _a2, _b;
-              return ((_b = (_a2 = _form.options).localizeError) == null ? void 0 : _b.call(_a2, error, field)) ?? error;
-            }
-          );
-          button.setCustomValidity(errors.join("\n"));
+          const errorString = [...errors.entries()].flatMap(
+            ([field, errors2]) => errors2.map((error) => {
+              var _a2;
+              return ((_a2 = options.localizeError) == null ? void 0 : _a2.call(options, error, field)) ?? error;
+            })
+          ).join("\n");
+          button.setCustomValidity(errorString);
         }
         event.currentTarget.reportValidity();
         if (isValid) {
@@ -204,147 +237,92 @@ function FormContainer({
     }
   );
 }
-function getFormInstance(original, options, state) {
-  const instance = {
-    original,
-    draft: state.map(
-      (state2) => state2.draft ?? original ?? options.defaultValue,
-      (draft) => (state2) => ({ ...state2, draft })
-    ),
-    options,
-    getField: (path) => {
-      const { draft } = instance;
-      return {
-        get originalValue() {
-          return original !== void 0 ? get(original, path) : void 0;
-        },
-        get value() {
-          return get(draft.get(), path);
-        },
-        setValue(update) {
-          draft.set(path, update);
-        },
-        get isDirty() {
-          const comparisonValue = this.originalValue ?? get(options.defaultValue, path);
-          return state.get().hasTriggeredValidations || !deepEqual(comparisonValue, this.value);
-        },
-        get errors() {
-          const blocks = Object.entries(options.validations ?? {}).filter(([key]) => wildcardMatch(path, key)).map(([, value2]) => value2);
-          const value = this.value;
-          const draftValue = draft.get();
-          const errors = [];
-          for (const block of blocks ?? []) {
-            for (const [validationName, validate] of Object.entries(block)) {
-              if (!validate(value, { draft: draftValue, original, field: path })) {
-                errors.push(validationName);
-              }
-            }
-          }
-          return errors;
-        },
-        get names() {
-          const { value } = this;
-          return Array.isArray(value) ? value.map((_, index) => `${path}.${index}`) : [];
-        },
-        append(...elements) {
-          this.setValue(
-            (value) => Array.isArray(value) ? [...value, ...elements] : elements
-          );
-        },
-        remove(index) {
-          this.setValue(
-            (value) => Array.isArray(value) ? [...value.slice(0, index), ...value.slice(index + 1)] : value
-          );
-        }
-      };
+function getField(derivedState, original, path) {
+  return {
+    get originalValue() {
+      return original !== void 0 ? get(original, path) : void 0;
     },
-    get hasChanges() {
-      const { draft } = state.get();
-      return !!draft && !deepEqual(draft, original ?? options.defaultValue);
+    get value() {
+      const { draft } = derivedState.get();
+      return get(draft, path);
     },
-    get errors() {
-      const draft = instance.draft.get();
-      const errors = /* @__PURE__ */ new Set();
-      for (const [path, block] of Object.entries(options.validations ?? {})) {
-        for (const [validationName, validate] of Object.entries(
-          block
-        )) {
-          let matched = false;
-          for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {
-            matched = true;
-            if (!validate(value, { draft, original, field })) {
-              errors.add({ field, error: validationName });
-            }
-          }
-          if (!matched && !path.includes("*")) {
-            if (!validate(void 0, { draft, original, field: path })) {
-              errors.add({ field: path, error: validationName });
-            }
-          }
-        }
-      }
-      return [...errors];
+    setValue(update) {
+      derivedState.set(`draft.${path}`, update);
     },
-    get isValid() {
-      return instance.errors.length === 0;
+    get hasChange() {
+      return !deepEqual(this.originalValue, this.value);
     },
-    validate: () => {
-      state.set("hasTriggeredValidations", true);
-      return instance.isValid;
+    get errors() {
+      const { errors } = derivedState.get();
+      return errors.get(path) ?? [];
+    },
+    get names() {
+      const { value } = this;
+      return Array.isArray(value) ? value.map((_, index) => `${path}.${index}`) : [];
     },
-    get hasTriggeredValidations() {
-      return state.get().hasTriggeredValidations;
+    append(...elements) {
+      this.setValue((value) => Array.isArray(value) ? [...value, ...elements] : elements);
     },
-    reset() {
-      state.set("draft", void 0);
-      state.set("hasTriggeredValidations", false);
+    remove(index) {
+      this.setValue(
+        (value) => Array.isArray(value) ? [...value.slice(0, index), ...value.slice(index + 1)] : value
+      );
     }
   };
-  return instance;
+}
+function getErrors(draft, original, validations) {
+  const errors = /* @__PURE__ */ new Map();
+  for (const [path, block] of Object.entries(validations ?? {})) {
+    for (const [validationName, validate] of Object.entries(
+      block
+    )) {
+      let matched = false;
+      for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {
+        matched = true;
+        if (!validate(value, { draft, original, field })) {
+          const fieldErrors = errors.get(field) ?? [];
+          fieldErrors.push(validationName);
+          errors.set(field, fieldErrors);
+        }
+      }
+      if (!matched && !path.includes("*")) {
+        if (!validate(void 0, { draft, original, field: path })) {
+          const fieldErrors = errors.get(path) ?? [];
+          fieldErrors.push(validationName);
+          errors.set(path, fieldErrors);
+        }
+      }
+    }
+  }
+  return errors;
 }
 class Form {
   constructor(options) {
     this.options = options;
-    this.context = createContext({
-      original: void 0,
-      options: this.options
-    });
-    this.state = new Scope({
-      touched: /* @__PURE__ */ new Set(),
-      errors: /* @__PURE__ */ new Map()
-    });
+    this.context = createContext(null);
     autobind(Form);
   }
   useForm() {
-    const { original, options } = useContext(this.context);
-    const state = useScope(this.state);
-    return useMemo(() => getFormInstance(original, options, state), [original, options, state]);
-  }
-  useFormState(selector) {
-    const { original, options } = useContext(this.context);
-    const state = useScope(this.state);
-    return useStore(state.map(() => selector(getFormInstance(original, options, state))));
+    const context = useContext(this.context);
+    if (!context) {
+      throw new Error("Form context not found");
+    }
+    return context;
   }
-  useField(path, useStoreOptions) {
+  useFormState(selector, useStoreOptions) {
     const form = this.useForm();
-    const state = useScope(this.state);
-    useStore(
-      form.draft.map((draft) => get(draft, path)),
+    return useStore(
+      form.derivedState.map(
+        (state) => selector({
+          ...form,
+          ...state
+        })
+      ),
       useStoreOptions
     );
-    useStore(
-      state.map((state2) => state2.hasTriggeredValidations),
-      useStoreOptions
-    );
-    return form.getField(path);
   }
-  useHasChanges() {
-    const form = this.useForm();
-    return useStore(form.draft.map(() => form.hasChanges));
-  }
-  useIsValid() {
-    const form = this.useForm();
-    return useStore(form.draft.map(() => form.isValid));
+  useField(path, useStoreOptions) {
+    return this.useFormState((form) => form.getField(path), useStoreOptions);
   }
   // ///////////////////////////////////////////////////////////////////////////
   // React Components
@@ -355,34 +333,117 @@ class Form {
     validations,
     localizeError,
     urlState,
+    autoSave,
+    transform,
     ...formProps
   }) {
-    const value = useMemo(
-      () => ({
+    const options = {
+      defaultValue: { ...this.options.defaultValue, ...defaultValue },
+      validations: { ...this.options.validations, ...validations },
+      localizeError: localizeError ?? this.options.localizeError,
+      autoSave: autoSave ?? this.options.autoSave,
+      transform: transform ?? this.options.transform
+    };
+    const formState = useMemo(() => {
+      return createStore({
+        draft: void 0,
+        hasTriggeredValidations: false,
+        saveScheduled: false,
+        saveInProgress: false
+      });
+    }, []);
+    const derivedState = useMemo(() => {
+      return formState.map(
+        (state) => {
+          const {
+            draft = original ?? options.defaultValue,
+            hasTriggeredValidations,
+            saveScheduled,
+            saveInProgress
+          } = state;
+          const errors = getErrors(draft, original, options.validations);
+          return {
+            draft,
+            hasTriggeredValidations,
+            saveScheduled,
+            saveInProgress,
+            hasChanges: !!draft && !deepEqual(draft, original),
+            errors,
+            isValid: errors.size === 0
+          };
+        },
+        (newState) => ({
+          draft: newState.draft,
+          hasTriggeredValidations: newState.hasTriggeredValidations,
+          saveScheduled: newState.saveScheduled,
+          saveInProgress: newState.saveInProgress
+        })
+      );
+    }, [formState, original, options.validations, options.defaultValue]);
+    const context = useMemo(() => {
+      return {
+        formState,
+        derivedState,
+        options,
         original,
-        options: {
-          defaultValue: { ...this.options.defaultValue, ...defaultValue },
-          validations: { ...this.options.validations, ...validations },
-          localizeError: localizeError ?? this.options.localizeError
+        getField(path) {
+          return getField(derivedState, original, path);
+        },
+        getDraft() {
+          return formState.get().draft ?? original ?? options.defaultValue;
+        },
+        hasTriggeredValidations() {
+          return formState.get().hasTriggeredValidations;
+        },
+        hasChanges() {
+          return derivedState.get().hasChanges;
+        },
+        getErrors() {
+          return derivedState.get().errors;
+        },
+        isValid() {
+          return derivedState.get().isValid;
+        },
+        validate() {
+          formState.set("hasTriggeredValidations", true);
+          return derivedState.get().isValid;
+        },
+        reset() {
+          formState.set("draft", void 0);
+          formState.set("hasTriggeredValidations", false);
         }
-      }),
-      [original, defaultValue, validations]
-    );
-    const store = useMemo(() => {
-      return createStore(this.state.defaultValue);
-    }, []);
+      };
+    }, [formState, derivedState, original, defaultValue, validations, localizeError, urlState]);
     useEffect(() => {
       if (urlState) {
         return connectUrl(
-          store.map("draft"),
+          formState.map("draft"),
           typeof urlState === "object" ? urlState : { key: "form" }
         );
       }
       return void 0;
-    }, [store, hash(urlState)]);
-    return /* @__PURE__ */ jsx(this.context.Provider, { value, children: /* @__PURE__ */ jsx(ScopeProvider, { scope: this.state, store, children: /* @__PURE__ */ jsx(FormContainer, { ...formProps, form: this }) }) });
+    }, [formState, hash(urlState)]);
+    useEffect(() => {
+      var _a;
+      const handles = (_a = options.transform) == null ? void 0 : _a.map(({ trigger, update }) => {
+        const draft = derivedState.map("draft");
+        const triggerStore = trigger ? draft.map(trigger) : draft;
+        return triggerStore.subscribe(() => {
+          const value = trigger ? get(draft.get(), trigger) : draft.get();
+          const result = update(value, draft);
+          if (result !== void 0) {
+            draft.set(result);
+          }
+        });
+      });
+      return () => {
+        handles == null ? void 0 : handles.forEach((handle) => handle());
+      };
+    }, [options.transform]);
+    useFormAutosave(context);
+    return /* @__PURE__ */ jsx(this.context.Provider, { value: context, children: /* @__PURE__ */ jsx(FormContainer, { ...formProps, form: this }) });
   }
-  Subscribe({
+  FormState({
     selector,
     children
   }) {
@@ -392,8 +453,8 @@ class Form {
   Field(props) {
     return Reflect.apply(FormField, this, [{ component: "input", ...props }]);
   }
-  Array(props) {
-    return Reflect.apply(FormArray, this, [props]);
+  ArrayField(props) {
+    return Reflect.apply(FormArrayField, this, [props]);
   }
   Error({ name }) {
     return Reflect.apply(FormError, this, [{ name }]);
@@ -462,14 +523,14 @@ function useUrlParamScope({
 }
 export {
   Form,
-  ScopeProvider,
+  S as ScopeProvider,
   createForm,
   r as reactMethods,
   read,
   useCache,
   useDecoupledState,
   e as useProp,
-  useScope,
+  a as useScope,
   useStore,
   useUrlParamScope
 };