react-f0rm 0.11.1 → 1.1.0

package/dist/index.umd.js

@@ -63,6 +63,16 @@
     const result = [];
     let identifier = "";
     const flushIdentifier = () => {
+      if (isIndex(identifier)) {
+        const dotted = [...result.map(String), identifier].join(".");
+        const bracket = result.reduce(
+          (acc, seg) => acc + (typeof seg === "number" ? `[${seg}]` : `${acc ? "." : ""}${seg}`),
+          ""
+        );
+        throw new TypeError(
+          `Numeric path segment must use bracket notation: "${dotted}" \u2192 "${bracket}[${identifier}]" (path: ${path})`
+        );
+      }
       result.push(identifier);
       identifier = "";
     };
@@ -239,7 +249,23 @@
       isSubmitSuccessful: void 0
     };
   }
+  const valuesCaches = /* @__PURE__ */ new WeakMap();
+  function bumpValuesVersion(form) {
+    const cache = valuesCaches.get(form);
+    if (cache) cache.version++;
+  }
   function getValues(form) {
+    let cache = valuesCaches.get(form);
+    if (!cache) {
+      cache = { version: 0, result: computeValues(form) };
+      valuesCaches.set(form, cache);
+    } else if (cache.version > 0) {
+      cache.result = computeValues(form);
+      cache.version = 0;
+    }
+    return cache.result;
+  }
+  function computeValues(form) {
     const { initialValues, parsedValues, values, deleted } = form;
     const owned = /* @__PURE__ */ new Set();
     let merged = parsedValues ?? initialValues;
@@ -277,10 +303,23 @@
     pruneDirtyBaselines(form, path);
     if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
     bumpDirtyVersion(form);
+    bumpValuesVersion(form);
     if (options?.shouldTouch) setTouchedByPath(form, path);
     if (options?.shouldValidate) form.validators.get(path.key)?.();
     emit(emitter, "change", path);
   }
+  function seedValueByPath(form, path, value) {
+    const { values, deleted } = form;
+    values.set(path.key, value);
+    pruneDescendantKeys(values, path);
+    reviveBranch(deleted, path);
+    pruneDirtyBaselines(form, path);
+    bumpDirtyVersion(form);
+    bumpValuesVersion(form);
+  }
+  function emitChangeByPath({ emitter }, path) {
+    emit(emitter, "change", path);
+  }
   function changeValue(form, name, value, options) {
     changeValueByPath(form, create$1(name), value, options);
   }
@@ -482,7 +521,8 @@
   function removeField(form, name) {
     removeFieldByPath(form, create$1(name));
   }
-  function removeFieldByPath(form, { key, value: segments }) {
+  function removeFieldByPath(form, path) {
+    const { key, value: segments } = path;
     const { emitter, values, touched, errors, validating, deleted } = form;
     values.delete(key);
     touched.delete(key);
@@ -491,10 +531,11 @@
     clearDirtyBaselines(form, key);
     if (!hasLiveBranch(values, segments)) deleted.add(key);
     bumpDirtyVersion(form);
-    emit(emitter, "change");
-    emit(emitter, "touched");
-    emit(emitter, "errors");
-    emit(emitter, "validating");
+    bumpValuesVersion(form);
+    emit(emitter, "change", path);
+    emit(emitter, "touched", path);
+    emit(emitter, "errors", path);
+    emit(emitter, "validating", path);
   }
   function hasLiveBranch(values, segments) {
     for (let i = 1; i < segments.length; i++) {
@@ -531,13 +572,19 @@
     form.deleted.clear();
     clearDirtyBaselines(form);
     bumpDirtyVersion(form);
+    bumpValuesVersion(form);
     emit(form.emitter, "change");
   }
   function reset(form, initialValues, options) {
-    const dirtyValues = options?.keepDirtyValues ? Object.keys(getDirtyFields(form)).map((key) => ({
-      key,
-      value: getValue(form, key)
-    })) : [];
+    const dirtyValues = [];
+    if (options?.keepDirtyValues) {
+      for (const [key, value] of form.values) {
+        const segments = JSON.parse(key);
+        if (getDirtyBaseline(form, key, segments) !== value) {
+          dirtyValues.push({ segments, value });
+        }
+      }
+    }
     form.initialValues = initialValues;
     form.parsedValues = void 0;
     if (!options?.keepErrors) clearErrors(form);
@@ -551,8 +598,9 @@
     if (!options?.keepSubmitCount) form.submitCount = 0;
     if (!options?.keepIsSubmitted) form.isSubmitSuccessful = void 0;
     bumpDirtyVersion(form);
-    for (const { key, value } of dirtyValues) {
-      setValueByPath(form, create$1(key), value);
+    bumpValuesVersion(form);
+    for (const { segments, value } of dirtyValues) {
+      setValueByPath(form, create$1(segments), value);
     }
     emit(emitter, "change");
     emit(emitter, "touched");
@@ -584,15 +632,16 @@
       emit(emitter, "errors", path);
     }
     bumpDirtyVersion(form);
+    bumpValuesVersion(form);
   }
   function hasErrors({ errors }) {
     return errors.size > 0;
   }
   async function trigger(form, name) {
-    const settle = () => waitUntil(
+    const settle = (keys2) => waitUntil(
       form.emitter,
       "validating",
-      () => fieldsSettled(form),
+      () => keys2 === void 0 ? fieldsSettled(form) : keys2.every((key) => !form.validating.has(key)),
       () => false
     );
     if (name === void 0) {
@@ -603,7 +652,7 @@
     }
     const keys = typeof name === "string" || isSegmentsPath(name) ? [create$1(name).key] : name.map((one) => create$1(one).key);
     keys.forEach((key) => form.validators.get(key)?.());
-    await settle();
+    await settle(keys);
     return keys.every((key) => !form.errors.has(key));
   }
   function isSegmentsPath(name) {
@@ -614,7 +663,10 @@
   }
   function setFormErrors(form, result, segments = [], footprint) {
     Object.entries(result).forEach(([key, value]) => {
-      const path = [...segments, ...normalizePath(key)];
+      const path = [
+        ...segments,
+        ...isIndex(key) ? [key] : normalizePath(key)
+      ];
       if (typeof value === "string") {
         if (value) {
           setError(form, path, value);
@@ -640,6 +692,7 @@
   function setParsedValues(form, values) {
     if (values === void 0 || values === form.parsedValues) return;
     form.parsedValues = values;
+    bumpValuesVersion(form);
     emit(form.emitter, "change");
   }
   function applyValidateResult(form, result) {
@@ -781,6 +834,46 @@
       });
     }
   }
+  const fieldValidateDeps = /* @__PURE__ */ new WeakMap();
+  function registerFieldValidateDeps(form, key, depKeys) {
+    let deps = fieldValidateDeps.get(form);
+    if (!deps) {
+      deps = /* @__PURE__ */ new Map();
+      fieldValidateDeps.set(form, deps);
+    }
+    for (const depKey of depKeys) {
+      let dependents = deps.get(depKey);
+      if (!dependents) {
+        dependents = /* @__PURE__ */ new Set();
+        deps.set(depKey, dependents);
+      }
+      dependents.add(key);
+    }
+  }
+  function unregisterFieldValidateDeps(form, key, depKeys) {
+    const deps = fieldValidateDeps.get(form);
+    if (!deps) return;
+    for (const depKey of depKeys) {
+      const dependents = deps.get(depKey);
+      if (!dependents?.delete(key)) continue;
+      if (!dependents.size) deps.delete(depKey);
+    }
+  }
+  function revalidateDependentsOnChange(form, path, mode) {
+    const dependents = fieldValidateDeps.get(form)?.get(path.key);
+    if (!dependents?.size) return;
+    for (const dependent of dependents) {
+      if (dependent === path.key) continue;
+      if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || form.reValidateMode === "onChange" && form.errors.has(dependent)) {
+        form.validators.get(dependent)?.();
+      }
+    }
+  }
+  function validationError(form) {
+    const error = new Error(getFirstError(form));
+    error.errors = getErrors(form);
+    return error;
+  }
   async function ensureValidate(form) {
     form.validators.forEach((validator) => validator());
     await waitUntil(
@@ -789,11 +882,11 @@
       () => fieldsSettled(form),
       () => hasErrors(form)
     ).catch(() => {
-      throw new Error(getFirstError(form));
+      throw validationError(form);
     });
     if (form.validate) {
       await runFormValidate(form);
-      if (hasErrors(form)) throw new Error(getFirstError(form));
+      if (hasErrors(form)) throw validationError(form);
     }
   }
   async function validate(form) {
@@ -1203,6 +1296,7 @@
     if (seededRef.current === null)
       seededRef.current = { done: false, source: void 0 };
     React.useEffect(() => {
+      if (initialValues === void 0) return;
       const seeded = seededRef.current;
       if (seeded.done && (seeded.source === initialValues || isEqual(seeded.source, initialValues))) {
         return;
@@ -1499,6 +1593,7 @@
     validate,
     rules,
     validateDebounce,
+    validateDeps,
     delayError,
     disabled,
     mode: modeOption
@@ -1507,6 +1602,17 @@
     const form = f1 || contextForm;
     if (!form) throw new Error("no form provided");
     const path = usePath(name);
+    const seededRef = React.useRef(false);
+    const seeded = initialValue !== void 0 && getValueByPath(form, path) === void 0;
+    if (seeded) {
+      seedValueByPath(form, path, initialValue);
+      seededRef.current = true;
+    }
+    React.useEffect(() => {
+      if (!seededRef.current) return;
+      seededRef.current = false;
+      emitChangeByPath(form, path);
+    });
     const validator = useValidate(
       combineRulesAndValidate(rules, validate),
       path,
@@ -1522,17 +1628,12 @@
     const value = useValueByPath(form, path);
     const formDisabled = useWatch(form.emitter, "disabled", () => form.disabled);
     const mode = modeOption ?? form.mode;
-    React.useEffect(() => {
-      if (initialValue === void 0) return;
-      if (getValueByPath(form, path) === void 0) {
-        setValueByPath(form, path, initialValue);
-      }
-    }, [form, path, initialValue]);
     const onChange = useStageFn((v) => {
       setValueByPath(form, path, v);
       if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
         validator();
       revalidateFormOnChange(form, path, mode);
+      revalidateDependentsOnChange(form, path, mode);
     });
     React.useEffect(() => {
       form.changeHandlers.set(path.key, onChange);
@@ -1541,6 +1642,13 @@
           form.changeHandlers.delete(path.key);
       };
     }, [form, path.key, onChange]);
+    const depsKey = validateDeps?.length ? validateDeps.join("\n") : void 0;
+    React.useEffect(() => {
+      if (!depsKey) return;
+      const depKeys = validateDeps.map((dep) => create$1(dep).key);
+      registerFieldValidateDeps(form, path.key, depKeys);
+      return () => unregisterFieldValidateDeps(form, path.key, depKeys);
+    }, [form, path.key, depsKey]);
     const onBlur = useStageFn(() => {
       setTouchedByPath(form, path);
       if (mode === "onBlur" || mode === "onTouched" || mode === "all" || liveErrors.length > 0 && form.reValidateMode === "onBlur")
@@ -1570,9 +1678,11 @@
     return useFieldCore(options, FormContext);
   }
 
-  let idCounter = 0;
-  function generateId() {
-    return `_${++idCounter}`;
+  const idCounters = /* @__PURE__ */ new WeakMap();
+  function generateId(form) {
+    const next = (idCounters.get(form) ?? 0) + 1;
+    idCounters.set(form, next);
+    return `_${next}`;
   }
   const arrayIdsRegistry = /* @__PURE__ */ new WeakMap();
   function getArrayIds(form, key) {
@@ -1608,13 +1718,13 @@
     const computeFields = React.useCallback(() => {
       const arr = getArray();
       while (idsRef.current.length < arr.length) {
-        idsRef.current.push(generateId());
+        idsRef.current.push(generateId(form));
       }
       while (idsRef.current.length > arr.length) {
         idsRef.current.pop();
       }
       return idsRef.current.map((id, index) => ({ id, index }));
-    }, [getArray]);
+    }, [getArray, form]);
     const [fields, syncFields] = React.useReducer(
       computeFields,
       void 0,
@@ -1634,17 +1744,17 @@
     }, [form, path.key]);
     const append = useStageFn((value) => {
       const arr = getArray();
-      idsRef.current.push(generateId());
+      idsRef.current.push(generateId(form));
       setArray([...arr, value]);
     });
     const prepend = useStageFn((value) => {
       const arr = getArray();
-      idsRef.current.unshift(generateId());
+      idsRef.current.unshift(generateId(form));
       setArray([value, ...arr]);
     });
     const insert = useStageFn((index, value) => {
       const arr = getArray();
-      idsRef.current.splice(index, 0, generateId());
+      idsRef.current.splice(index, 0, generateId(form));
       const newArr = [...arr.slice(0, index), value, ...arr.slice(index)];
       setArray(newArr);
     });
@@ -1674,7 +1784,7 @@
       setArray(newArr);
     });
     const replace = useStageFn((values) => {
-      idsRef.current = values.map(() => generateId());
+      idsRef.current = values.map(() => generateId(form));
       setArray([...values]);
     });
     const update = useStageFn((index, value) => {
@@ -2061,6 +2171,7 @@
   exports.clearErrors = clearErrors;
   exports.createForm = create;
   exports.createFormContext = createFormContext;
+  exports.emitChangeByPath = emitChangeByPath;
   exports.ensureValidate = ensureValidate;
   exports.fieldErrorId = fieldErrorId;
   exports.getDirtyFields = getDirtyFields;
@@ -2082,11 +2193,14 @@
   exports.incrementSubmitCount = incrementSubmitCount;
   exports.isDirty = isDirty;
   exports.isTouched = isTouched;
+  exports.registerFieldValidateDeps = registerFieldValidateDeps;
   exports.removeField = removeField;
   exports.removeFieldByPath = removeFieldByPath;
   exports.reset = reset;
   exports.resetField = resetField;
+  exports.revalidateDependentsOnChange = revalidateDependentsOnChange;
   exports.revalidateFormOnChange = revalidateFormOnChange;
+  exports.seedValueByPath = seedValueByPath;
   exports.setDisabled = setDisabled;
   exports.setError = setError;
   exports.setErrorByPath = setErrorByPath;
@@ -2102,6 +2216,7 @@
   exports.setValueByPath = setValueByPath;
   exports.subscribe = subscribe;
   exports.trigger = trigger;
+  exports.unregisterFieldValidateDeps = unregisterFieldValidateDeps;
   exports.unsetValidatingByPath = unsetValidatingByPath;
   exports.useCanSubmit = useCanSubmit;
   exports.useCheckboxGroupContext = useCheckboxGroupContext;