cross-state 0.19.3 → 0.20.0

package/dist/cjs/hash.cjs

@@ -0,0 +1,18 @@
+"use strict";
+function hash(value) {
+  if (value instanceof Set) {
+    return `s[${[...value].map(hash).sort().join(",")}]`;
+  }
+  if (value instanceof Map) {
+    return `m[${[...value.entries()].map(hash).sort().join(",")}]`;
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map(hash).join(",")}]`;
+  }
+  if (value instanceof Object) {
+    return `o[${Object.entries(value).map(hash).sort().join(",")}]`;
+  }
+  return JSON.stringify(value);
+}
+exports.hash = hash;
+//# sourceMappingURL=hash.cjs.map

package/dist/cjs/hash.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash.cjs","sources":["../../src/lib/hash.ts"],"sourcesContent":["export function hash(value: unknown): string {\n  if (value instanceof Set) {\n    return `s[${[...value].map(hash).sort().join(',')}]`;\n  }\n\n  if (value instanceof Map) {\n    return `m[${[...value.entries()].map(hash).sort().join(',')}]`;\n  }\n\n  if (Array.isArray(value)) {\n    return `[${value.map(hash).join(',')}]`;\n  }\n\n  if (value instanceof Object) {\n    return `o[${Object.entries(value).map(hash).sort().join(',')}]`;\n  }\n\n  return JSON.stringify(value);\n}\n"],"names":[],"mappings":";AAAO,SAAS,KAAK,OAAwB;AAC3C,MAAI,iBAAiB,KAAK;AACxB,WAAO,KAAK,CAAC,GAAG,KAAK,EAAE,IAAI,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC;AAAA,EACnD;AAEA,MAAI,iBAAiB,KAAK;AACxB,WAAO,KAAK,CAAC,GAAG,MAAM,QAAS,CAAA,EAAE,IAAI,IAAI,EAAE,KAAA,EAAO,KAAK,GAAG,CAAC;AAAA,EAC7D;AAEI,MAAA,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,IAAI,MAAM,IAAI,IAAI,EAAE,KAAK,GAAG,CAAC;AAAA,EACtC;AAEA,MAAI,iBAAiB,QAAQ;AAC3B,WAAO,KAAK,OAAO,QAAQ,KAAK,EAAE,IAAI,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC;AAAA,EAC9D;AAEO,SAAA,KAAK,UAAU,KAAK;AAC7B;;"}

package/dist/cjs/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const store = require("./store.cjs");
-const cache = require("./cache.cjs");
-const scope = require("./scope.cjs");
+const scope = require("./scope2.cjs");
 const urlStore = require("./urlStore.cjs");
+require("./hash.cjs");
 class SubstriptionCache extends store.Store {
   constructor(connectFunction, options, derivedFromSubscriptionCache, _call) {
     super(options.default, options, void 0, _call);
@@ -68,7 +68,7 @@ function create(cacheFunction, ...[options = {}]) {
   options = Object.assign({}, defaultOptions, options);
   const { clearUnusedAfter, resourceGroup } = options;
   let baseInstance;
-  const instanceCache = new cache.InstanceCache(
+  const instanceCache = new scope.InstanceCache(
     (...args) => {
       if (args.length === 0 && baseInstance) {
         return baseInstance;
@@ -107,7 +107,7 @@ function create(cacheFunction, ...[options = {}]) {
     }
   );
   const groups = Array.isArray(resourceGroup) ? resourceGroup : resourceGroup ? [resourceGroup] : [];
-  for (const group of groups.concat(cache.allResources)) {
+  for (const group of groups.concat(scope.allResources)) {
     group.add(baseInstance);
   }
   get(...[]);
@@ -429,13 +429,13 @@ exports.mapMethods = store.mapMethods;
 exports.recordMethods = store.recordMethods;
 exports.set = store.set;
 exports.setMethods = store.setMethods;
-exports.Cache = cache.Cache;
-exports.InstanceCache = cache.InstanceCache;
-exports.ResourceGroup = cache.ResourceGroup;
-exports.allResources = cache.allResources;
-exports.createCache = cache.createCache;
-exports.createResourceGroup = cache.createResourceGroup;
+exports.Cache = scope.Cache;
+exports.InstanceCache = scope.InstanceCache;
+exports.ResourceGroup = scope.ResourceGroup;
 exports.Scope = scope.Scope;
+exports.allResources = scope.allResources;
+exports.createCache = scope.createCache;
+exports.createResourceGroup = scope.createResourceGroup;
 exports.createScope = scope.createScope;
 exports.connectUrl = urlStore.connectUrl;
 exports.createUrlStore = urlStore.createUrlStore;

package/dist/cjs/react/index.cjs

@@ -1,20 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const useCache = require("../useCache.cjs");
+const scope = require("../scope.cjs");
 const require$$0 = require("react");
 const store = require("../store.cjs");
-const scope = require("../scope.cjs");
+const hash = require("../hash.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const urlStore = require("../urlStore.cjs");
-function wildcardMatch(s, w) {
-  if (typeof s === "string") {
-    s = store.castArrayPath(s);
-  }
-  if (typeof w === "string") {
-    w = store.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] = store.castArrayPath(path);
@@ -40,8 +31,8 @@ function getWildCardMatches(object, path) {
 }
 function FormArray({ 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 = require$$0.useCallback(
@@ -80,8 +71,9 @@ function FormArray({ name, renderElement, children }) {
   ] });
 }
 function FormError({ name }) {
-  const { errors, isDirty } = this.useField(name);
-  return isDirty ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: errors.join(", ") }) : null;
+  const hasTriggeredValidations = this.useFormState((form) => form.hasTriggeredValidations);
+  const { errors } = this.useField(name);
+  return hasTriggeredValidations ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: errors.join(", ") }) : null;
 }
 function FormField({
   // id,
@@ -96,16 +88,12 @@ function FormField({
   ...restProps
 }) {
   const id = "";
-  const form = this.useForm();
-  const state = useCache.useScope(this.state);
+  const { options } = this.useForm();
   const { value, setValue, errors } = this.useField(name);
-  const errorString = require$$0.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] = require$$0.useState();
   const _id = require$$0.useMemo(
     () => `f${Math.random().toString(36).slice(2, 15)}${Math.random().toString(36).slice(2, 15)}`,
@@ -148,15 +136,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) {
@@ -171,11 +150,65 @@ function FormField({
   }
   return require$$0.createElement(component, props);
 }
+function useFormAutosave(form) {
+  var _a;
+  const { formState, options, getDraft } = form;
+  const debounceTime = store.calcDuration(((_a = options.autoSave) == null ? void 0 : _a.debounce) ?? 2e3);
+  const latestRef = require$$0.useRef({ options });
+  const lastValue = require$$0.useRef();
+  const q = require$$0.useMemo(() => store.queue(), []);
+  const run = require$$0.useMemo(
+    () => store.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]
+  );
+  require$$0.useEffect(() => {
+    var _a2;
+    if (!((_a2 = options.autoSave) == null ? void 0 : _a2.save)) {
+      return;
+    }
+    return formState.map((state) => state.draft).subscribe(
+      () => {
+        if (store.deepEqual(getDraft(), lastValue.current)) {
+          return;
+        }
+        run();
+        formState.set("saveScheduled", true);
+      },
+      { runNow: false }
+    );
+  }, [formState]);
+  require$$0.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__ */ jsxRuntime.jsx(
     "form",
@@ -186,16 +219,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) {
@@ -205,147 +238,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 ? store.get(original, path) : void 0;
-        },
-        get value() {
-          return store.get(draft.get(), path);
-        },
-        setValue(update) {
-          draft.set(path, update);
-        },
-        get isDirty() {
-          const comparisonValue = this.originalValue ?? store.get(options.defaultValue, path);
-          return state.get().hasTriggeredValidations || !store.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 ? store.get(original, path) : void 0;
     },
-    get hasChanges() {
-      const { draft } = state.get();
-      return !!draft && !store.deepEqual(draft, original ?? options.defaultValue);
+    get value() {
+      const { draft } = derivedState.get();
+      return store.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 hasChange() {
+      return !store.deepEqual(this.originalValue, this.value);
     },
-    get isValid() {
-      return instance.errors.length === 0;
+    get errors() {
+      const { errors } = derivedState.get();
+      return errors.get(path) ?? [];
     },
-    validate: () => {
-      state.set("hasTriggeredValidations", true);
-      return instance.isValid;
+    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 = require$$0.createContext({
-      original: void 0,
-      options: this.options
-    });
-    this.state = new scope.Scope({
-      touched: /* @__PURE__ */ new Set(),
-      errors: /* @__PURE__ */ new Map()
-    });
+    this.context = require$$0.createContext(null);
     store.autobind(Form);
   }
   useForm() {
-    const { original, options } = require$$0.useContext(this.context);
-    const state = useCache.useScope(this.state);
-    return require$$0.useMemo(() => getFormInstance(original, options, state), [original, options, state]);
-  }
-  useFormState(selector) {
-    const { original, options } = require$$0.useContext(this.context);
-    const state = useCache.useScope(this.state);
-    return useCache.useStore(state.map(() => selector(getFormInstance(original, options, state))));
+    const context = require$$0.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 = useCache.useScope(this.state);
-    useCache.useStore(
-      form.draft.map((draft) => store.get(draft, path)),
-      useStoreOptions
-    );
-    useCache.useStore(
-      state.map((state2) => state2.hasTriggeredValidations),
+    return scope.useStore(
+      form.derivedState.map(
+        (state) => selector({
+          ...form,
+          ...state
+        })
+      ),
       useStoreOptions
     );
-    return form.getField(path);
   }
-  useHasChanges() {
-    const form = this.useForm();
-    return useCache.useStore(form.draft.map(() => form.hasChanges));
-  }
-  useIsValid() {
-    const form = this.useForm();
-    return useCache.useStore(form.draft.map(() => form.isValid));
+  useField(path, useStoreOptions) {
+    return this.useFormState((form) => form.getField(path), useStoreOptions);
   }
   // ///////////////////////////////////////////////////////////////////////////
   // React Components
@@ -356,34 +334,117 @@ class Form {
     validations,
     localizeError,
     urlState,
+    autoSave,
+    transform,
     ...formProps
   }) {
-    const value = require$$0.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 = require$$0.useMemo(() => {
+      return store.createStore({
+        draft: void 0,
+        hasTriggeredValidations: false,
+        saveScheduled: false,
+        saveInProgress: false
+      });
+    }, []);
+    const derivedState = require$$0.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 && !store.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 = require$$0.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$1 = require$$0.useMemo(() => {
-      return store.createStore(this.state.defaultValue);
-    }, []);
+      };
+    }, [formState, derivedState, original, defaultValue, validations, localizeError, urlState]);
     require$$0.useEffect(() => {
       if (urlState) {
         return urlStore.connectUrl(
-          store$1.map("draft"),
+          formState.map("draft"),
           typeof urlState === "object" ? urlState : { key: "form" }
         );
       }
       return void 0;
-    }, [store$1, scope.hash(urlState)]);
-    return /* @__PURE__ */ jsxRuntime.jsx(this.context.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(useCache.ScopeProvider, { scope: this.state, store: store$1, children: /* @__PURE__ */ jsxRuntime.jsx(FormContainer, { ...formProps, form: this }) }) });
+    }, [formState, hash.hash(urlState)]);
+    require$$0.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 ? store.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__ */ jsxRuntime.jsx(this.context.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FormContainer, { ...formProps, form: this }) });
   }
-  Subscribe({
+  FormState({
     selector,
     children
   }) {
@@ -404,7 +465,7 @@ function createForm(options) {
   return new Form(options);
 }
 function read(cache, options) {
-  const { status, value, error } = useCache.useCache(cache, options);
+  const { status, value, error } = scope.useCache(cache, options);
   if (status === "value") {
     return value;
   }
@@ -438,7 +499,7 @@ function useDecoupledState(value, onChange, options = {}) {
       setDirty({ v: value2 });
       delayedUpdate(value2);
     };
-  }, [scope.hash([options.debounce, options.throttle])]);
+  }, [hash.hash([options.debounce, options.throttle])]);
   return [dirty ? dirty.v : value, update];
 }
 function castArray(value) {
@@ -458,15 +519,15 @@ function useUrlParamScope({
       url[type] = parameters.toString();
       window.history.replaceState(null, "", url.toString());
     },
-    [scope.hash(key), type]
+    [hash.hash(key), type]
   );
 }
-exports.ScopeProvider = useCache.ScopeProvider;
-exports.reactMethods = useCache.reactMethods;
-exports.useCache = useCache.useCache;
-exports.useProp = useCache.useProp;
-exports.useScope = useCache.useScope;
-exports.useStore = useCache.useStore;
+exports.ScopeProvider = scope.ScopeProvider;
+exports.reactMethods = scope.reactMethods;
+exports.useCache = scope.useCache;
+exports.useProp = scope.useProp;
+exports.useScope = scope.useScope;
+exports.useStore = scope.useStore;
 exports.Form = Form;
 exports.createForm = createForm;
 exports.read = read;