cross-state 0.53.3 → 0.54.0

package/dist/cjs/react/index.cjs

@@ -1,628 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const storeMethods = require('../storeMethods.cjs');
-const require$$0 = require('react');
-const store = require('../store.cjs');
-const hash = require('../hash.cjs');
-const jsxRuntime = require('react/jsx-runtime');
-const urlStore = require('../urlStore.cjs');
-const propAccess = require('../propAccess.cjs');
-
-function CustomInput({ name, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ...props,
-      style: {
-        position: "relative",
-        ...props.style
-      },
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            name,
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              opacity: 0,
-              width: "100%",
-              height: "100%",
-              pointerEvents: "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-function getWildCardMatches(object, path) {
-  const matches = {};
-  const [first, second, ...rest] = propAccess.castArrayPath(path);
-  if (first === undefined) {
-    throw new Error("Path is empty");
-  }
-  if (!Array.isArray(object) && !propAccess.isObject(object)) {
-    object = {};
-  }
-  for (const [key, value] of first !== "*" ? [[first, object[first]]] : Object.entries(object)) {
-    if (first !== "*" && first !== key) {
-      continue;
-    }
-    if (second === undefined) {
-      matches[key] = value;
-      continue;
-    }
-    for (const [subKey, subValue] of Object.entries(getWildCardMatches(value, [second, ...rest]))) {
-      matches[`${key}.${subKey}`] = subValue;
-    }
-  }
-  return matches;
-}
-
-function FormField({
-  // id,
-  name = "",
-  component,
-  commitOnBlur,
-  commitDebounce,
-  render,
-  inputFilter,
-  defaultValue,
-  serialize,
-  deserialize = (x) => x,
-  onChange,
-  onBlur,
-  ...restProps
-}) {
-  const form = this.useForm();
-  const getFormState = () => ({ ...form, ...getDerivedState(form) });
-  const [localValue, setLocalValue] = require$$0.useState();
-  const value = this.useFormState((form2) => {
-    const value2 = form2.getField(name).value;
-    if (serialize) {
-      return serialize(value2, getFormState());
-    }
-    if (value2 !== undefined) {
-      return value2;
-    }
-    return defaultValue;
-  });
-  const setValue = (x) => form.getField(name).setValue(deserialize(x, getFormState()));
-  const hasTriggeredValidations = this.useFormState((form2) => form2.hasTriggeredValidations);
-  require$$0.useEffect(() => {
-    if (localValue === undefined || !commitDebounce) {
-      return;
-    }
-    const timeout = setTimeout(() => {
-      setValue(localValue);
-      setLocalValue(undefined);
-    }, commitDebounce);
-    return () => clearTimeout(timeout);
-  }, [localValue, commitDebounce]);
-  const props = {
-    name,
-    value: localValue ?? value,
-    onChange: (event, ...moreArgs) => {
-      const value2 = typeof event === "object" && event !== null && "target" in event ? event.target.value : event;
-      if (inputFilter && !inputFilter(value2)) {
-        return;
-      }
-      if (commitOnBlur || commitDebounce) {
-        setLocalValue(value2);
-      } else {
-        setValue(value2);
-      }
-      onChange?.(event, ...moreArgs);
-    },
-    onBlur(...args) {
-      if (localValue !== undefined) {
-        setValue(localValue);
-        setLocalValue(undefined);
-      }
-      onBlur?.(...args);
-    }
-  };
-  if (render) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(props, { ...form.getField(name), hasTriggeredValidations }, form) ?? null });
-  }
-  if (component) {
-    return require$$0.createElement(component, { ...restProps, ...props });
-  }
-  return null;
-}
-
-function FormForEach({ name, renderElement, children }) {
-  const form = this.useForm();
-  const names = this.useFormState(() => {
-    const field = form.getField(name);
-    return field.names;
-  });
-  const add = require$$0.useCallback(
-    (...args) => {
-      const field = form.getField(name);
-      field.add(...args);
-    },
-    [form]
-  );
-  const remove = require$$0.useCallback(
-    (key) => {
-      const field = form.getField(name);
-      field.remove(key);
-    },
-    [form]
-  );
-  const setValue = require$$0.useCallback(
-    (value) => {
-      const field = form.getField(name);
-      field.setValue(value);
-    },
-    [form]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    renderElement && names.map((name2, index) => {
-      const key = name2.split(".").pop();
-      return /* @__PURE__ */ jsxRuntime.jsx(require$$0.Fragment, { children: renderElement({
-        name: name2,
-        key,
-        index,
-        remove: () => remove(key)
-      }) }, key);
-    }),
-    children?.({
-      names,
-      add,
-      remove,
-      setValue
-    })
-  ] });
-}
-
-function useFormAutosave(form) {
-  const { formState, options, getDraft } = form;
-  const debounceTime = store.calcDuration(options.autoSave?.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 () => {
-      const { options: options2 } = latestRef.current;
-      const save = options2.autoSave?.save;
-      const draft = getDraft();
-      lastValue.current = draft;
-      q.clear();
-      q(async () => {
-        try {
-          formState.set("saveInProgress", true);
-          await save?.(draft, form);
-          if (q.size === 0 && options2.autoSave?.resetAfterSave) {
-            form.reset();
-          }
-        } finally {
-          formState.set("saveInProgress", false);
-          if (q.size === 0) {
-            formState.set("saveScheduled", false);
-          }
-        }
-      });
-    }, debounceTime),
-    [formState, debounceTime]
-  );
-  require$$0.useEffect(() => {
-    if (!options.autoSave?.save) {
-      return;
-    }
-    return formState.map((state) => state.draft).subscribe(
-      () => {
-        if (propAccess.deepEqual(getDraft(), lastValue.current)) {
-          return;
-        }
-        run();
-        formState.set("saveScheduled", true);
-      },
-      { runNow: false }
-    );
-  }, [formState]);
-  require$$0.useEffect(() => {
-    latestRef.current = { options };
-  });
-}
-
-function FormContainer({
-  form,
-  ...formProps
-}) {
-  const formInstance = form.useForm();
-  const hasTriggeredValidations = form.useFormState((state) => state.hasTriggeredValidations);
-  const formRef = require$$0.useRef(null);
-  function updateValidity(errors, buttonElement) {
-    const formElement = formRef.current;
-    if (!formElement) {
-      return;
-    }
-    const localizedErrors = new Map(
-      [...errors.entries()].map(
-        ([field, errors2]) => [
-          field,
-          errors2.map((error) => formInstance.options.localizeError?.(error, field) ?? error)
-        ]
-      )
-    );
-    for (const element of Array.from(formElement.elements)) {
-      if ("name" in element && "setCustomValidity" in element) {
-        element.setCustomValidity(
-          localizedErrors.get(element.name)?.join("\n") ?? ""
-        );
-      }
-    }
-    if (buttonElement && "setCustomValidity" in buttonElement) {
-      const errorString = [...errors.values()].flat().join("\n");
-      buttonElement.setCustomValidity(errorString);
-    }
-  }
-  require$$0.useEffect(() => {
-    return formInstance.formState.map(() => formInstance.getErrors()).subscribe((errors) => updateValidity(errors));
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "form",
-    {
-      ref: formRef,
-      noValidate: true,
-      ...formProps,
-      className: [
-        formProps.className,
-        hasTriggeredValidations ? formInstance.options.validatedClass ?? "validated" : undefined
-      ].filter(Boolean).join(" "),
-      onSubmit: async (event) => {
-        if (formInstance.saveInProgress()) {
-          return;
-        }
-        try {
-          formInstance.formState.set("saveInProgress", true);
-          event.preventDefault();
-          const formElement = event.currentTarget;
-          const buttonElement = event.nativeEvent instanceof SubmitEvent && event.nativeEvent.submitter instanceof HTMLButtonElement ? event.nativeEvent.submitter : void 0;
-          updateValidity(formInstance.getErrors(), buttonElement);
-          formElement.reportValidity();
-          const isValid = formInstance.validate();
-          if (isValid) {
-            await formProps.onSubmit?.(event, {
-              ...formInstance,
-              ...getDerivedState(formInstance)
-            });
-          }
-        } finally {
-          formInstance.formState.set("saveInProgress", false);
-        }
-      }
-    }
-  );
-}
-function getField(form, path) {
-  const field = {
-    get originalValue() {
-      return form.original !== undefined ? propAccess.get(form.original, path) : undefined;
-    },
-    get value() {
-      const draft = form.getDraft();
-      return propAccess.get(draft ?? form.original ?? form.options.defaultValue, path);
-    },
-    setValue(update) {
-      form.formState.set("draft", (draft = form.original ?? form.options.defaultValue) => {
-        if (update instanceof Function) {
-          update = update(propAccess.get(draft, path));
-        }
-        return propAccess.set(draft, path, update);
-      });
-    },
-    get hasChange() {
-      return !propAccess.deepEqual(this.originalValue, this.value);
-    },
-    get errors() {
-      const errors = form.getErrors();
-      return errors.get(path) ?? [];
-    },
-    get names() {
-      const { value } = this;
-      if (Array.isArray(value)) {
-        return value.map((_, index) => propAccess.join(path, String(index)));
-      }
-      if (propAccess.isObject(value)) {
-        return Object.keys(value).map((key) => propAccess.join(path, key));
-      }
-      return [];
-    },
-    add(...args) {
-      this.setValue((value) => {
-        if (!value) {
-          throw new Error(`Cannot add element to ${JSON.stringify(value)}`);
-        }
-        if (Array.isArray(value)) {
-          return [...value ?? [], args[0]];
-        }
-        if (propAccess.isObject(value)) {
-          return {
-            ...value,
-            [args[0]]: args[1]
-          };
-        }
-        throw new Error(`Cannot add element to ${JSON.stringify(value)}`);
-      });
-    },
-    remove(key) {
-      this.setValue((value) => {
-        if (!value) {
-          throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);
-        }
-        if (Array.isArray(value)) {
-          return value.filter((_, index) => index !== Number(key));
-        }
-        if (propAccess.isObject(value)) {
-          const { [key]: _, ...rest } = value;
-          return rest;
-        }
-        throw new Error(`Cannot remove element from ${JSON.stringify(value)}`);
-      });
-    }
-  };
-  return field;
-}
-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(undefined, { draft, original, field: path })) {
-          const fieldErrors = errors.get(path) ?? [];
-          fieldErrors.push(validationName);
-          errors.set(path, fieldErrors);
-        }
-      }
-    }
-  }
-  return errors;
-}
-function getDerivedState(instance) {
-  return {
-    draft: instance.getDraft(),
-    hasTriggeredValidations: instance.hasTriggeredValidations(),
-    saveScheduled: instance.saveScheduled(),
-    saveInProgress: instance.saveInProgress(),
-    hasChanges: instance.hasChanges(),
-    errors: instance.getErrors(),
-    isValid: instance.isValid()
-  };
-}
-class Form {
-  constructor(options) {
-    this.options = options;
-    this.context = require$$0.createContext(null);
-    store.autobind(Form);
-  }
-  useForm() {
-    const context = require$$0.useContext(this.context);
-    if (!context) {
-      throw new Error("Form context not found");
-    }
-    return context;
-  }
-  useFormState(selector, useStoreOptions) {
-    const form = this.useForm();
-    return storeMethods.useStore(
-      form.formState,
-      () => selector({
-        ...form,
-        ...getDerivedState(form)
-      }),
-      useStoreOptions
-    );
-  }
-  useField(path, useStoreOptions) {
-    const form = this.useForm();
-    this.useFormState((form2) => [form2.getField(path).value, form2.original], useStoreOptions);
-    return form.getField(path);
-  }
-  // ///////////////////////////////////////////////////////////////////////////
-  // React Components
-  // ///////////////////////////////////////////////////////////////////////////
-  Form({
-    original,
-    defaultValue,
-    validations,
-    localizeError,
-    urlState,
-    autoSave,
-    transform,
-    validatedClass,
-    ...formProps
-  }) {
-    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,
-      validatedClass: validatedClass ?? this.options.validatedClass
-    };
-    const formState = require$$0.useMemo(() => {
-      return store.createStore({
-        draft: undefined,
-        hasTriggeredValidations: false,
-        saveScheduled: false,
-        saveInProgress: false
-      });
-    }, []);
-    let lastDraft;
-    const cache = /* @__PURE__ */ new Map();
-    function lazy(key, fn) {
-      if (lastDraft !== formState.get().draft) {
-        cache.clear();
-        lastDraft = formState.get().draft;
-      }
-      let value = cache.get(key);
-      if (!cache.has(key)) {
-        value = fn();
-        cache.set(key, value);
-      }
-      return value;
-    }
-    const context = {
-      formState,
-      options,
-      original,
-      getField() {
-        throw new Error("Not implemented");
-      },
-      getDraft() {
-        return formState.get().draft ?? original ?? options.defaultValue;
-      },
-      hasTriggeredValidations() {
-        return formState.get().hasTriggeredValidations;
-      },
-      saveScheduled() {
-        return formState.get().saveScheduled;
-      },
-      saveInProgress() {
-        return formState.get().saveInProgress;
-      },
-      hasChanges() {
-        return lazy(
-          "hasChanges",
-          () => !propAccess.deepEqual(this.getDraft(), original ?? options.defaultValue)
-        );
-      },
-      getErrors() {
-        return lazy("getErrors", () => getErrors(this.getDraft(), original, options.validations));
-      },
-      isValid() {
-        return lazy("isValid", () => this.getErrors().size === 0);
-      },
-      validate() {
-        formState.set("hasTriggeredValidations", true);
-        return this.isValid();
-      },
-      reset() {
-        formState.set("draft", undefined);
-        formState.set("hasTriggeredValidations", false);
-      }
-    };
-    context.getField = (path) => lazy(path, () => getField(context, path));
-    require$$0.useEffect(() => {
-      if (urlState) {
-        return urlStore.connectUrl(
-          formState.map("draft"),
-          typeof urlState === "object" ? urlState : { key: "form" }
-        );
-      }
-      return undefined;
-    }, [formState, hash.simpleHash(urlState)]);
-    useFormAutosave(context);
-    return /* @__PURE__ */ jsxRuntime.jsx(this.context.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FormContainer, { ...formProps, form: this }) });
-  }
-  FormState({
-    selector,
-    children
-  }) {
-    const selectedState = this.useFormState(selector);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(selectedState) });
-  }
-  Field(props) {
-    return Reflect.apply(FormField, this, [{ component: "input", ...props }]);
-  }
-  ForEach(props) {
-    return Reflect.apply(FormForEach, this, [props]);
-  }
-  withForm(Component, formProps) {
-    const { Form: Form2 } = this;
-    return function FormWrapper(props) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Form2, { ...formProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
-    };
-  }
-}
-function createForm(options) {
-  return new Form(options);
-}
-
-function useDecoupledState(value, onChange, options = {}) {
-  const [dirty, setDirty] = require$$0.useState();
-  const ref = require$$0.useRef({ onChange, onCommit: options.onCommit });
-  require$$0.useEffect(() => {
-    ref.current = { onChange, onCommit: options.onCommit };
-  }, [onChange]);
-  const update = require$$0.useMemo(() => {
-    const { onChange: onChange2, onCommit } = ref.current;
-    const update2 = (value2) => {
-      onChange2(value2);
-      setDirty(undefined);
-      onCommit?.(value2);
-    };
-    let delayedUpdate;
-    if (options.debounce) {
-      delayedUpdate = store.debounce(update2, options.debounce);
-    } else if (options.throttle) {
-      delayedUpdate = store.throttle(update2, options.throttle);
-    } else {
-      delayedUpdate = (value2) => require$$0.startTransition(() => update2(value2));
-    }
-    return (value2) => {
-      setDirty({ v: value2 });
-      delayedUpdate(value2);
-    };
-  }, [hash.simpleHash([options.debounce, options.throttle])]);
-  return [dirty ? dirty.v : value, update];
-}
-
-function castArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-
-function useUrlParamScope({
-  key,
-  type = "search"
-}) {
-  require$$0.useEffect(
-    () => () => {
-      const url = new URL(window.location.href);
-      const parameters = new URLSearchParams(url[type].slice(1));
-      for (const _key of castArray(key)) {
-        parameters.delete(_key);
-      }
-      url[type] = parameters.toString();
-      window.history.replaceState(null, "", url.toString());
-    },
-    [hash.simpleHash(key), type]
-  );
-}
-
-exports.LoadingBoundary = storeMethods.LoadingBoundary;
-exports.ScopeProvider = storeMethods.ScopeProvider;
-exports.cacheMethods = storeMethods.cacheMethods;
-exports.scopeMethods = storeMethods.scopeMethods;
-exports.storeMethods = storeMethods.storeMethods;
-exports.useCache = storeMethods.useCache;
-exports.useLoadingBoundary = storeMethods.useLoadingBoundary;
-exports.useProp = storeMethods.useProp;
-exports.useScope = storeMethods.useScope;
-exports.useStore = storeMethods.useStore;
-exports.CustomInput = CustomInput;
-exports.Form = Form;
-exports.createForm = createForm;
-exports.useDecoupledState = useDecoupledState;
-exports.useUrlParamScope = useUrlParamScope;
-//# sourceMappingURL=index.cjs.map