@goodie-forms/core 1.2.5-alpha → 1.3.0

package/src/form/FormField.ts

@@ -1,7 +1,9 @@
-import { produce } from "immer";
+import { Draft, produce } from "immer";
 import { FieldPath } from "../field/FieldPath";
-import { Reconsile } from "../field/Reconcile";
+import { Reconcile } from "../field/Reconcile";
 import { FormController } from "../form/FormController";
+import { DeepReadonly } from "../types/DeepHelpers";
+import { Suppliable, supply } from "../types/Suppliable";
 import { ensureImmerability } from "../utils/ensureImmerability";
 import { getId } from "../utils/getId";
 
@@ -13,9 +15,11 @@ export class FormField<TOutput extends object, TValue> {
   protected _isTouched = false;
   protected _isDirty = false;
 
+  /** @internal register via `FormController::registerField` instead */
   constructor(
     public readonly controller: FormController<TOutput>,
     public readonly path: FieldPath.Segments,
+    public readonly defaultValue?: Suppliable<TValue>,
     initialState?: {
       isTouched?: boolean;
       isDirty?: boolean;
@@ -25,20 +29,16 @@ export class FormField<TOutput extends object, TValue> {
     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 value(): DeepReadonly<TValue> | undefined {
+    return FieldPath.getValue(this.controller.data, this.path);
   }
 
-  get initialValue(): TValue | undefined {
-    return FieldPath.getValue(this.controller._initialData, this.path);
+  get initialValue(): DeepReadonly<TValue> | undefined {
+    return FieldPath.getValue(this.controller.initialData, this.path);
   }
 
   get boundElement() {
@@ -63,6 +63,16 @@ export class FormField<TOutput extends object, TValue> {
     return this.issues.length === 0;
   }
 
+  ensureDefault(opts?: Parameters<typeof this.modifyData>[1]) {
+    if (this.value == null && this.defaultValue != null) {
+      const defaultValue = supply(this.defaultValue);
+
+      if (defaultValue != null) {
+        this.setValue(defaultValue, opts);
+      }
+    }
+  }
+
   protected _setTouched(isTouched: boolean) {
     const changed = this._isTouched !== isTouched;
     this._isTouched = isTouched;
@@ -92,26 +102,33 @@ export class FormField<TOutput extends object, TValue> {
   }
 
   bindElement(el: HTMLElement | undefined) {
-    this.target = el;
     if (el != null) {
+      this.target = el;
       this.controller.events.emit("elementBound", this.path, el);
     } else {
+      this.unbindElement();
+    }
+  }
+
+  unbindElement() {
+    if (this.target != null) {
+      this.target = undefined;
       this.controller.events.emit("elementUnbound", this.path);
     }
   }
 
-  setValue(value: TValue, opts?: Parameters<typeof this.modifyValue>[1]) {
-    return this.modifyValue(() => value, opts);
+  clearIssues() {
+    return this.controller.clearFieldIssues(this.path);
   }
 
-  modifyValue(
-    modifier: (currentValue: TValue | undefined) => TValue | void,
+  private modifyData(
+    draftConsumer: (draft: Draft<typeof this.controller.data>) => void,
     opts?: {
       shouldTouch?: boolean;
       shouldMarkDirty?: boolean;
     },
-  ): void {
-    if (opts?.shouldTouch == null || opts?.shouldTouch) {
+  ) {
+    if (opts?.shouldTouch == null || opts?.shouldTouch === true) {
       this.touch();
     }
 
@@ -123,11 +140,7 @@ export class FormField<TOutput extends object, TValue> {
     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);
-      });
-    });
+    this.controller._data = produce(this.controller._data, draftConsumer);
 
     const newValues = ascendantFields.map((field) => field?.value);
     newValues.forEach((v) => ensureImmerability(v));
@@ -138,10 +151,10 @@ export class FormField<TOutput extends object, TValue> {
       const ctorA = a.constructor;
       const ctorB = b.constructor;
       if (ctorA !== ctorB) return;
-      return this.controller.equalityComparators?.[ctorA]?.(a, b);
+      return this.controller.equalityComparators?.get(ctorA)?.(a, b);
     };
 
-    const valueChanged = !Reconsile.deepEqual(
+    const valueChanged = !Reconcile.deepEqual(
       oldValues[oldValues.length - 1],
       newValues[newValues.length - 1],
       compareCustom,
@@ -151,7 +164,7 @@ export class FormField<TOutput extends object, TValue> {
       for (let i = ascendantFields.length - 1; i >= 0; i--) {
         const field = ascendantFields[i];
         this.controller.events.emit(
-          "valueChanged",
+          "fieldValueChanged",
           field.path,
           newValues[i],
           oldValues[i],
@@ -160,7 +173,7 @@ export class FormField<TOutput extends object, TValue> {
     }
 
     if (opts?.shouldMarkDirty == null || opts?.shouldMarkDirty) {
-      const gotDirty = !Reconsile.deepEqual(
+      const gotDirty = !Reconcile.deepEqual(
         initialValues[initialValues.length - 1],
         newValues[newValues.length - 1],
         compareCustom,
@@ -169,9 +182,30 @@ export class FormField<TOutput extends object, TValue> {
     }
   }
 
+  // TODO: impl
+  // private modifyInitialData() {}
+
+  setValue(value: TValue, opts?: Parameters<typeof this.modifyData>[1]) {
+    return this.modifyData((data) => {
+      FieldPath.setValue(data as TOutput, this.path, value as never);
+    }, opts);
+  }
+
+  modifyValue(
+    modifier: (currentValue: TValue) => undefined,
+    opts?: Parameters<typeof this.modifyData>[1],
+  ): void {
+    return this.modifyData((data) => {
+      FieldPath.modifyValue(data as TOutput, this.path, (oldValue) => {
+        modifier(oldValue as TValue);
+      });
+    }, opts);
+  }
+
   reset() {
     this._setTouched(false);
     this._setDirty(false);
+    this.controller.events.emit("fieldReset", this.path);
   }
 
   touch() {
@@ -179,22 +213,24 @@ export class FormField<TOutput extends object, TValue> {
   }
 
   markDirty() {
-    this.touch();
     this._setDirty(true);
   }
 
-  triggerValidation() {
+  validate() {
     this.controller.validateField(this.path);
   }
 
-  focus(opts?: { shouldTouch?: boolean }) {
+  focus(opts?: {
+    shouldTouch?: boolean;
+    scrollOptions?: ScrollIntoViewOptions;
+  }) {
     if (opts?.shouldTouch == null || opts.shouldTouch) {
       this.target?.addEventListener("focus", () => this.touch(), {
         once: true,
       });
     }
 
-    this.target?.scrollIntoView();
+    this.target?.scrollIntoView(opts?.scrollOptions);
     this.target?.focus();
   }
 }

package/src/index.ts

@@ -4,9 +4,9 @@ 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/DeepHelpers";
+export * from "./types/Suppliable";
 export * from "./types/Mixin";

package/src/types/DeepHelpers.ts

@@ -0,0 +1,15 @@
+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 DeepReadonly<T> = {
+  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K];
+} & {
+  readonly [K in keyof T as T[K] extends (...args: any[]) => any
+    ? never
+    : K]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
+};

package/src/types/FormHelpers.ts

@@ -0,0 +1,13 @@
+import { FormField } from "packages/core/src/form/FormField";
+
+// TODO: Consider
+export type FieldValue<T extends FormField<any, any>> =
+  NonNullable<T> extends { value: infer V } ? NonNullable<V> : never;
+
+// TODO: Move to a proper test file
+// declare const x: FormField<{ a: 1; b: 2 }, number>;
+
+// type X0 = FieldValue<typeof x>;
+// //   ^?
+// type X1 = (typeof x)["value"];
+// //   ^?

package/src/types/Suppliable.ts

@@ -0,0 +1,7 @@
+export type Suppliable<T> = T | (() => T);
+
+export function supply<T>(suppliable: T | (() => T)): T {
+  return typeof suppliable === "function"
+    ? (suppliable as () => T)()
+    : suppliable;
+}

package/src/validation/CustomValidation.ts

@@ -1,5 +1,5 @@
 import { StandardSchemaV1 } from "@standard-schema/spec";
-import { DeepPartial } from "../types/DeepPartial";
+import { DeepPartial } from "../types/DeepHelpers";
 import { FieldPath } from "../field/FieldPath";
 
 export type CustomValidationIssue<TOutput extends object> = {

package/dist/form/NonullFormField.d.ts

@@ -1,9 +0,0 @@
-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;
-}>;
-//# sourceMappingURL=NonullFormField.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NonullFormField.d.ts","sourceRoot":"","sources":["../../src/form/NonullFormField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAM,EAAE,MAAM,IAAI,KAAK,CAClE,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,EAC1B;IACE,WAAW,EAAE,CACX,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,EACjD,IAAI,CAAC,EAAE;QACL,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,KACE,IAAI,CAAC;CACX,CACF,CAAC"}

package/dist/types/DeepPartial.d.ts

@@ -1,6 +0,0 @@
-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];
-};
-//# sourceMappingURL=DeepPartial.d.ts.map

package/dist/types/DeepPartial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeepPartial.d.ts","sourceRoot":"","sources":["../../src/types/DeepPartial.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;CACzE,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,GACjD,KAAK,GACL,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACxD,CAAC"}

package/src/form/NonullFormField.ts

@@ -1,15 +0,0 @@
-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/types/DeepPartial.ts

@@ -1,7 +0,0 @@
-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/tsconfig.json

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

package/vite.config.ts

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