@goodie-forms/core 1.0.0-alpha → 1.1.0-alpha

package/src/form/FormField.ts

@@ -1,199 +1,202 @@
-import { immerable, produce } from "immer";
-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,
-  ) {}
-
-  get value() {
-    return Field.getValue<TShape, TPath>(
-      this.controller._data as TShape,
-      this.path,
-    );
-  }
-
-  get boundElement() {
-    return this.target;
-  }
-
-  get issues() {
-    return this.controller._issues.filter(
-      (issue) => issue.path?.join(".") === 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) this.controller.events.emit("fieldTouchUpdated", this.path);
-  }
-
-  protected _setDirty(isDirty: boolean) {
-    const changed = this._isDirty !== isDirty;
-    this._isDirty = isDirty;
-    if (changed) this.controller.events.emit("fieldDirtyUpdated", this.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;
-  }
-
-  protected static 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;
-  }
-
-  setValue(
-    value: Field.GetValue<TShape, TPath>,
-    opts?: Parameters<typeof this.modifyValue>[1],
-  ) {
-    return this.modifyValue(() => value, opts);
-  }
-
-  modifyValue(
-    modifier: (
-      currentValue: Field.GetValue<TShape, TPath>,
-      field: this,
-    ) => Field.GetValue<TShape, TPath> | void,
-    opts?: {
-      shouldTouch?: boolean;
-      shouldMarkDirty?: boolean;
-    },
-  ) {
-    if (opts?.shouldTouch == null || opts?.shouldTouch) {
-      this.touch();
-    }
-
-    const initialValue = Field.getValue<TShape, TPath>(
-      this.controller._initialData as TShape,
-      this.path,
-    );
-
-    const oldValue = Field.getValue<TShape, TPath>(
-      this.controller._data as TShape,
-      this.path,
-    );
-
-    FormField.ensureImmerability(initialValue);
-    FormField.ensureImmerability(oldValue);
-
-    this.controller._data = produce(this.controller._data, (draft) => {
-      Field.modifyValue<TShape, TPath>(draft as TShape, this.path, (oldValue) =>
-        modifier(oldValue, this),
-      );
-    });
-
-    const newValue = Field.getValue<TShape, TPath>(
-      this.controller._data as TShape,
-      this.path,
-    );
-
-    FormField.ensureImmerability(newValue);
-
-    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(oldValue, newValue, compareCustom);
-
-    if (valueChanged) {
-      this.controller.events.emit(
-        "valueChanged",
-        this.path,
-        newValue,
-        oldValue,
-      );
-    }
-
-    if (opts?.shouldMarkDirty == null || opts?.shouldMarkDirty) {
-      const gotDirty = !Field.deepEqual(initialValue, newValue, 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 { 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();
+  }
+}

package/src/form/NonullFormField.ts

@@ -0,0 +1,21 @@
+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;
+  }
+>;

package/src/index.ts

@@ -1,3 +1,5 @@
-export * from "./form/Field";
-export * from "./form/FormField";
-export * from "./form/FormController";
+export * from "./form/Field";
+export * from "./form/FormField";
+export * from "./form/NonullFormField";
+export * from "./form/FormController";
+export * from "./form/CustomValidation";

package/src/types/DeepPartial.ts

@@ -1,3 +1,7 @@
-export type DeepPartial<T extends object> = {
-  [K in keyof T]?: 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

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

package/src/utils/ensureImmerability.ts

@@ -0,0 +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;
+}

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));
+}

package/test/test1.ts

@@ -0,0 +1,52 @@
+import { Field, FormController } from "@goodie-forms/core";
+
+class Inventory {
+  contents: string[] = [];
+
+  push(item: string) {
+    this.contents.push(item);
+  }
+}
+
+interface UserForm {
+  name: string;
+  surname: string;
+  address: {
+    city: string;
+    street: string;
+  };
+  scores: string[];
+  friends: {
+    name: string;
+    friendshipPoints: number;
+  }[];
+  inventory?: Inventory;
+}
+
+const formController = new FormController<UserForm>({});
+
+const nameField = formController.bindField("name", {
+  defaultValue: "Foo",
+  overrideInitialValue: true,
+});
+console.log(nameField.isTouched);
+console.log(nameField.isDirty);
+
+const addressField = formController.bindField("address", {
+  defaultValue: { city: "", street: "" },
+  overrideInitialValue: true,
+});
+addressField.modifyValue((address) => {
+  address!.city = "Foo City";
+});
+
+console.log(addressField.value);
+
+const inventoryField = formController.bindField("inventory");
+inventoryField.modifyValue((inventory) => {});
+
+const inventory1Field = formController.bindField("inventory.contents[1]");
+inventory1Field.setValue("Sword");
+
+console.log("Data =", formController._data);
+console.log("Initial Data =", formController._initialData);

package/tsconfig.json

@@ -1,7 +1,7 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "dist"
-  },
-  "include": ["src"]
-}
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src","test"]
+}

package/vite.config.ts

@@ -1,18 +1,18 @@
-import { defineConfig } from "vite";
-
-import dts from "vite-plugin-dts";
-
-export default defineConfig({
-  plugins: [dts()],
-  build: {
-    lib: {
-      entry: "src/index.ts",
-      formats: ["es"],
-      fileName: "index",
-    },
-    rollupOptions: {
-      external: [],
-    },
-    sourcemap: true,
-  },
-});
+import { defineConfig } from "vite";
+
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [dts()],
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      formats: ["es"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: [],
+    },
+    sourcemap: true,
+  },
+});

package/dist/form/Field.d.ts

@@ -1,17 +0,0 @@
-export declare namespace Field {
-    type Paths<TShape extends object> = {
-        [K in keyof TShape & string]: NonNullable<TShape[K]> extends (...args: any[]) => any ? never : NonNullable<TShape[K]> extends object ? K | `${K}.${Paths<NonNullable<TShape[K]>>}` : K;
-    }[keyof TShape & string];
-    type GetValue<TShape extends object, TPath extends string> = TPath extends `${infer K}.${infer Rest}` ? K extends keyof TShape ? GetValue<NonNullable<TShape[K]>, Rest> : never : TPath extends keyof TShape ? TShape[TPath] : never;
-    function getValue<TShape extends object, TPath extends Field.Paths<TShape>>(data: TShape, path: TPath): Field.GetValue<TShape, TPath> | undefined;
-    function deepEqual(a: any, b: any, customComparator?: (a: any, b: any) => boolean | undefined): boolean;
-    function diff<T>(prev: readonly T[], next: readonly T[], equals: (a: T, b: T) => boolean, filter?: (a: T) => boolean): {
-        added: T[];
-        removed: T[];
-        unchanged: T[];
-    };
-    function setValue<TShape extends object, TPath extends Field.Paths<TShape>>(data: TShape, key: TPath, value: Field.GetValue<TShape, TPath>): void;
-    function modifyValue<TShape extends object, TPath extends Field.Paths<TShape>>(data: TShape, key: TPath, modifier: (currentValue: Field.GetValue<TShape, TPath>) => Field.GetValue<TShape, TPath> | void): void;
-    function deleteValue<TShape extends object, TPath extends Field.Paths<TShape>>(data: TShape, key: TPath): void;
-}
-//# sourceMappingURL=Field.d.ts.map

package/dist/form/Field.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/form/Field.ts"],"names":[],"mappings":"AAAA,yBAAiB,KAAK,CAAC;IACrB,KAAY,KAAK,CAAC,MAAM,SAAS,MAAM,IAAI;SACxC,CAAC,IAAI,MAAM,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAC3D,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,GAAG,GACJ,KAAK,GACL,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACnC,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAC3C,CAAC;KACR,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC;IAEzB,KAAY,QAAQ,CAClB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,MAAM,IAClB,KAAK,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,IAAI,EAAE,GACxC,CAAC,SAAS,MAAM,MAAM,GACpB,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GACtC,KAAK,GACP,KAAK,SAAS,MAAM,MAAM,GACxB,MAAM,CAAC,KAAK,CAAC,GACb,KAAK,CAAC;IAEZ,SAAgB,QAAQ,CACtB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EACjC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,SAAS,CAatE;IAED,SAAgB,SAAS,CACvB,CAAC,EAAE,GAAG,EACN,CAAC,EAAE,GAAG,EACN,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,KAAK,OAAO,GAAG,SAAS,WAkE3D;IAED,SAAgB,IAAI,CAAC,CAAC,EACpB,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,EAC/B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO;;;;MAqB3B;IAED,SAAgB,QAAQ,CACtB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EACjC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,QAE/D;IAED,SAAgB,WAAW,CACzB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAEjC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,KAAK,EACV,QAAQ,EAAE,CACR,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,KACxC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,IAAI,QAoB1C;IAED,SAAgB,WAAW,CACzB,MAAM,SAAS,MAAM,EACrB,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EACjC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,QAczB;CACF"}