@goodie-forms/core 1.1.5-alpha → 1.2.0-alpha

package/src/form/FormField.ts

@@ -1,202 +1,200 @@
-import { produce } from "immer";
-import { ensureImmerability } from "../utils/ensureImmerability";
-import { getId } from "../utils/getId";
-import { Field } from "./Field";
-import { FormController } from "./FormController";
-
-export class FormField<
-  TShape extends object,
-  TPath extends Field.Paths<TShape>
-> {
-  public readonly id = getId();
-
-  protected target?: HTMLElement;
-
-  protected _isTouched = false;
-  protected _isDirty = false;
-
-  constructor(
-    public readonly controller: FormController<TShape>,
-    public readonly path: TPath,
-    initialState?: {
-      isTouched?: boolean;
-      isDirty?: boolean;
-    }
-  ) {
-    if (initialState?.isTouched) this._setTouched(true);
-    if (initialState?.isDirty) this._setDirty(true);
-  }
-
-  get value(): Field.GetValue<TShape, TPath> | undefined {
-    return Field.getValue<TShape, TPath>(
-      this.controller._data as TShape,
-      this.path
-    );
-  }
-
-  get initialValue(): Field.GetValue<TShape, TPath> | undefined {
-    return Field.getValue<TShape, TPath>(
-      this.controller._initialData as TShape,
-      this.path
-    );
-  }
-
-  get boundElement() {
-    return this.target;
-  }
-
-  get issues() {
-    return this.controller._issues.filter(
-      (issue) => Field.parsePath(issue.path ?? []) === this.path
-    );
-  }
-
-  get isTouched() {
-    return this._isTouched;
-  }
-
-  get isDirty() {
-    return this._isDirty;
-  }
-
-  get isValid() {
-    return this.issues.length === 0;
-  }
-
-  protected _setTouched(isTouched: boolean) {
-    const changed = this._isTouched !== isTouched;
-    this._isTouched = isTouched;
-
-    if (changed) {
-      const ascendantFields = this.controller.getAscendantFields(this.path);
-      for (let i = ascendantFields.length - 1; i >= 0; i--) {
-        const field = ascendantFields[i];
-        if (field == null) continue;
-        this.controller.events.emit("fieldTouchUpdated", field.path);
-      }
-    }
-  }
-
-  protected _setDirty(isDirty: boolean) {
-    const changed = this._isDirty !== isDirty;
-    this._isDirty = isDirty;
-
-    if (changed) {
-      const ascendantFields = this.controller.getAscendantFields(this.path);
-      for (let i = ascendantFields.length - 1; i >= 0; i--) {
-        const field = ascendantFields[i];
-        if (field == null) continue;
-        this.controller.events.emit("fieldDirtyUpdated", field.path);
-      }
-    }
-  }
-
-  bindElement(el: HTMLElement | undefined) {
-    if (el != null) this.controller.events.emit("elementBound", this.path, el);
-    else this.controller.events.emit("elementUnbound", this.path);
-    this.target = el;
-  }
-
-  setValue(
-    value: Field.GetValue<TShape, TPath>,
-    opts?: Parameters<typeof this.modifyValue>[1]
-  ) {
-    return this.modifyValue(() => value, opts);
-  }
-
-  modifyValue(
-    modifier: (
-      currentValue: Field.GetValue<TShape, TPath> | undefined
-    ) => Field.GetValue<TShape, TPath> | void,
-    opts?: {
-      shouldTouch?: boolean;
-      shouldMarkDirty?: boolean;
-    }
-  ): void {
-    if (opts?.shouldTouch == null || opts?.shouldTouch) {
-      this.touch();
-    }
-
-    const ascendantFields = this.controller.getAscendantFields(this.path);
-
-    const initialValues = ascendantFields.map((field) => field?.initialValue);
-    initialValues.forEach((v) => ensureImmerability(v));
-
-    const oldValues = ascendantFields.map((field) => field?.value);
-    oldValues.forEach((v) => ensureImmerability(v));
-
-    this.controller._data = produce(this.controller._data, (draft) => {
-      Field.modifyValue(draft as TShape, this.path, (oldValue) => {
-        return modifier(oldValue);
-      });
-    });
-
-    const newValues = ascendantFields.map((field) => field?.value);
-    newValues.forEach((v) => ensureImmerability(v));
-
-    const compareCustom = (a: any, b: any) => {
-      if (typeof a !== "object") return;
-      if (typeof b !== "object") return;
-      const ctorA = a.constructor;
-      const ctorB = b.constructor;
-      if (ctorA !== ctorB) return;
-      return this.controller.equalityComparators?.[ctorA]?.(a, b);
-    };
-
-    const valueChanged = !Field.deepEqual(
-      oldValues[oldValues.length - 1],
-      newValues[newValues.length - 1],
-      compareCustom
-    );
-
-    if (valueChanged) {
-      for (let i = ascendantFields.length - 1; i >= 0; i--) {
-        const field = ascendantFields[i];
-        this.controller.events.emit(
-          "valueChanged",
-          field.path,
-          newValues[i],
-          oldValues[i]
-        );
-      }
-    }
-
-    if (opts?.shouldMarkDirty == null || opts?.shouldMarkDirty) {
-      const gotDirty = !Field.deepEqual(
-        initialValues[initialValues.length - 1],
-        newValues[newValues.length - 1],
-        compareCustom
-      );
-      this._setDirty(gotDirty);
-    }
-  }
-
-  reset() {
-    this._setTouched(false);
-    this._setDirty(false);
-  }
-
-  touch() {
-    this._setTouched(true);
-  }
-
-  markDirty() {
-    this.touch();
-    this._setDirty(true);
-  }
-
-  triggerValidation() {
-    this.controller.validateField(this.path);
-  }
-
-  focus(opts?: { shouldTouch?: boolean }) {
-    if (opts?.shouldTouch == null || opts.shouldTouch) {
-      this.target?.addEventListener("focus", () => this.touch(), {
-        once: true,
-      });
-    }
-
-    this.target?.scrollIntoView();
-    this.target?.focus();
-  }
-}
+import { produce } from "immer";
+import { FieldPath } from "../field/FieldPath";
+import { Reconsile } from "../field/Reconcile";
+import { FormController } from "../form/FormController";
+import { ensureImmerability } from "../utils/ensureImmerability";
+import { getId } from "../utils/getId";
+
+export class FormField<TOutput extends object, TValue> {
+  public readonly id = getId();
+
+  protected target?: HTMLElement;
+
+  protected _isTouched = false;
+  protected _isDirty = false;
+
+  constructor(
+    public readonly controller: FormController<TOutput>,
+    public readonly path: FieldPath.Segments,
+    initialState?: {
+      isTouched?: boolean;
+      isDirty?: boolean;
+    },
+  ) {
+    if (initialState?.isTouched) this._setTouched(true);
+    if (initialState?.isDirty) this._setDirty(true);
+  }
+
+  get canonicalPath() {
+    return FieldPath.toCanonicalPath(this.path);
+  }
+
+  get stringPath() {
+    return FieldPath.toStringPath(this.path);
+  }
+
+  get value(): TValue | undefined {
+    return FieldPath.getValue(this.controller._data, this.path);
+  }
+
+  get initialValue(): TValue | undefined {
+    return FieldPath.getValue(this.controller._initialData, this.path);
+  }
+
+  get boundElement() {
+    return this.target;
+  }
+
+  get issues() {
+    return this.controller._issues.filter((issue) =>
+      FieldPath.equals(FieldPath.normalize(issue.path), this.path),
+    );
+  }
+
+  get isTouched() {
+    return this._isTouched;
+  }
+
+  get isDirty() {
+    return this._isDirty;
+  }
+
+  get isValid() {
+    return this.issues.length === 0;
+  }
+
+  protected _setTouched(isTouched: boolean) {
+    const changed = this._isTouched !== isTouched;
+    this._isTouched = isTouched;
+
+    if (changed) {
+      const ascendantFields = this.controller.getAscendantFields(this.path);
+      for (let i = ascendantFields.length - 1; i >= 0; i--) {
+        const field = ascendantFields[i];
+        if (field == null) continue;
+        this.controller.events.emit("fieldTouchUpdated", field.path);
+      }
+    }
+  }
+
+  protected _setDirty(isDirty: boolean) {
+    const changed = this._isDirty !== isDirty;
+    this._isDirty = isDirty;
+
+    if (changed) {
+      const ascendantFields = this.controller.getAscendantFields(this.path);
+      for (let i = ascendantFields.length - 1; i >= 0; i--) {
+        const field = ascendantFields[i];
+        if (field == null) continue;
+        this.controller.events.emit("fieldDirtyUpdated", field.path);
+      }
+    }
+  }
+
+  bindElement(el: HTMLElement | undefined) {
+    this.target = el;
+    if (el != null) {
+      this.controller.events.emit("elementBound", this.path, el);
+    } else {
+      this.controller.events.emit("elementUnbound", this.path);
+    }
+  }
+
+  setValue(value: TValue, opts?: Parameters<typeof this.modifyValue>[1]) {
+    return this.modifyValue(() => value, opts);
+  }
+
+  modifyValue(
+    modifier: (currentValue: TValue | undefined) => TValue | void,
+    opts?: {
+      shouldTouch?: boolean;
+      shouldMarkDirty?: boolean;
+    },
+  ): void {
+    if (opts?.shouldTouch == null || opts?.shouldTouch) {
+      this.touch();
+    }
+
+    const ascendantFields = this.controller.getAscendantFields(this.path);
+
+    const initialValues = ascendantFields.map((field) => field?.initialValue);
+    initialValues.forEach((v) => ensureImmerability(v));
+
+    const oldValues = ascendantFields.map((field) => field?.value);
+    oldValues.forEach((v) => ensureImmerability(v));
+
+    this.controller._data = produce(this.controller._data, (draft) => {
+      FieldPath.modifyValue(draft as TOutput, this.path, (oldValue) => {
+        return modifier(oldValue);
+      });
+    });
+
+    const newValues = ascendantFields.map((field) => field?.value);
+    newValues.forEach((v) => ensureImmerability(v));
+
+    const compareCustom = (a: any, b: any) => {
+      if (typeof a !== "object") return;
+      if (typeof b !== "object") return;
+      const ctorA = a.constructor;
+      const ctorB = b.constructor;
+      if (ctorA !== ctorB) return;
+      return this.controller.equalityComparators?.[ctorA]?.(a, b);
+    };
+
+    const valueChanged = !Reconsile.deepEqual(
+      oldValues[oldValues.length - 1],
+      newValues[newValues.length - 1],
+      compareCustom,
+    );
+
+    if (valueChanged) {
+      for (let i = ascendantFields.length - 1; i >= 0; i--) {
+        const field = ascendantFields[i];
+        this.controller.events.emit(
+          "valueChanged",
+          field.path,
+          newValues[i],
+          oldValues[i],
+        );
+      }
+    }
+
+    if (opts?.shouldMarkDirty == null || opts?.shouldMarkDirty) {
+      const gotDirty = !Reconsile.deepEqual(
+        initialValues[initialValues.length - 1],
+        newValues[newValues.length - 1],
+        compareCustom,
+      );
+      this._setDirty(gotDirty);
+    }
+  }
+
+  reset() {
+    this._setTouched(false);
+    this._setDirty(false);
+  }
+
+  touch() {
+    this._setTouched(true);
+  }
+
+  markDirty() {
+    this.touch();
+    this._setDirty(true);
+  }
+
+  triggerValidation() {
+    this.controller.validateField(this.path);
+  }
+
+  focus(opts?: { shouldTouch?: boolean }) {
+    if (opts?.shouldTouch == null || opts.shouldTouch) {
+      this.target?.addEventListener("focus", () => this.touch(), {
+        once: true,
+      });
+    }
+
+    this.target?.scrollIntoView();
+    this.target?.focus();
+  }
+}

package/src/form/NonullFormField.ts

@@ -1,21 +1,15 @@
-import { Field } from "../form/Field";
-import { FormField } from "../form/FormField";
-import { Mixin } from "../types/Mixin";
-
-export type NonnullFormField<
-  TShape extends object,
-  TPath extends Field.Paths<TShape>,
-> = Mixin<
-  FormField<TShape, TPath>,
-  {
-    modifyValue: (
-      modifier: (
-        currentValue: Field.GetValue<TShape, TPath>,
-      ) => Field.GetValue<TShape, TPath> | void,
-      opts?: {
-        shouldTouch?: boolean;
-        shouldMarkDirty?: boolean;
-      },
-    ) => void;
-  }
->;
+import { FormField } from "./FormField";
+import { Mixin } from "../types/Mixin";
+
+export type NonnullFormField<TOutput extends object, TValue> = Mixin<
+  FormField<TOutput, TValue>,
+  {
+    modifyValue: (
+      modifier: (currentValue: TValue) => TValue | void,
+      opts?: {
+        shouldTouch?: boolean;
+        shouldMarkDirty?: boolean;
+      },
+    ) => void;
+  }
+>;

package/src/index.ts

@@ -1,5 +1,12 @@
-export * from "./form/Field";
-export * from "./form/FormField";
-export * from "./form/NonullFormField";
-export * from "./form/FormController";
-export * from "./form/CustomValidation";
+export * from "./field/FieldPath";
+export * from "./field/FieldPathBuilder";
+export * from "./field/Reconcile";
+
+export * from "./form/FormController";
+export * from "./form/FormField";
+export * from "./form/NonullFormField";
+
+export * from "./validation/CustomValidation";
+
+export * from "./types/DeepPartial";
+export * from "./types/Mixin";

package/src/types/DeepPartial.ts

@@ -1,7 +1,7 @@
-export type DeepPartial<T> = {
-  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K];
-} & {
-  [K in keyof T as T[K] extends (...args: any[]) => any
-    ? never
-    : K]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
-};
+export type DeepPartial<T> = {
+  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K];
+} & {
+  [K in keyof T as T[K] extends (...args: any[]) => any
+    ? never
+    : K]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};

package/src/types/Mixin.ts

@@ -1,2 +1,2 @@
-export type Mixin<T extends object, U extends Partial<T>> = Omit<T, keyof U> &
-  U;
+export type Mixin<T extends object, U extends Partial<T>> = Omit<T, keyof U> &
+  U;

package/src/utils/ensureImmerability.ts

@@ -1,30 +1,30 @@
-import { immerable } from "immer";
-
-export function ensureImmerability(value: any) {
-  if (typeof value !== "object" || value === null) return;
-
-  // Skip plain objects
-  const proto = Object.getPrototypeOf(value);
-  if (proto === Object.prototype || proto === null) return;
-
-  const ctor = proto.constructor;
-  if (typeof ctor !== "function") return;
-
-  // Skip known built-ins
-  if (
-    value instanceof Date ||
-    value instanceof RegExp ||
-    value instanceof Map ||
-    value instanceof Set ||
-    value instanceof WeakMap ||
-    value instanceof WeakSet ||
-    ArrayBuffer.isView(value)
-  ) {
-    return;
-  }
-
-  if (ctor[immerable] === true) return;
-
-  // Define non-enumerable immerable flag
-  ctor[immerable] = true;
-}
+import { immerable } from "immer";
+
+export function ensureImmerability(value: any) {
+  if (typeof value !== "object" || value === null) return;
+
+  // Skip plain objects
+  const proto = Object.getPrototypeOf(value);
+  if (proto === Object.prototype || proto === null) return;
+
+  const ctor = proto.constructor;
+  if (typeof ctor !== "function") return;
+
+  // Skip known built-ins
+  if (
+    value instanceof Date ||
+    value instanceof RegExp ||
+    value instanceof Map ||
+    value instanceof Set ||
+    value instanceof WeakMap ||
+    value instanceof WeakSet ||
+    ArrayBuffer.isView(value)
+  ) {
+    return;
+  }
+
+  if (ctor[immerable] === true) return;
+
+  // Define non-enumerable immerable flag
+  ctor[immerable] = true;
+}

package/src/utils/getId.ts

@@ -1,5 +1,5 @@
-let id = 0;
-
-export function getId() {
-  return id++;
-}
+let id = 0;
+
+export function getId() {
+  return id++;
+}

package/src/utils/removeBy.ts

@@ -1,11 +1,11 @@
-export function removeBy<T>(arr: T[], predicate: (item: T) => boolean) {
-  let indices: number[] = [];
-
-  for (let i = arr.length - 1; i >= 0; i--) {
-    if (predicate(arr[i])) {
-      indices.push(i);
-    }
-  }
-
-  indices.forEach((i) => arr.splice(i, 1));
-}
+export function removeBy<T>(arr: T[], predicate: (item: T) => boolean) {
+  let indices: number[] = [];
+
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      indices.push(i);
+    }
+  }
+
+  indices.forEach((i) => arr.splice(i, 1));
+}