Merge pull request #170 from x0k/fix-169-2

Preserve array keys by injecting default values instead of state replacing

Author: x0k

.changeset/social-walls-post.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Preserve array keys by injecting default values instead of state replacing

packages/form/src/core/schema.ts

@@ -171,3 +171,54 @@ export function isSubSchemasArrayKey(key: string): key is SubSchemasArrayKey {
 export function isSubSchemasRecordKey(key: string): key is SubSchemasRecordKey {
   return SET_OF_RECORDS_OF_SUB_SCHEMAS.has(key as SubSchemasRecordKey);
 }
+
+export const UNCHANGED = Symbol("unchanged");
+
+export function reconcileSchemaValues(
+  target: SchemaValue | undefined,
+  source: SchemaValue | undefined
+): SchemaValue | undefined | typeof UNCHANGED {
+  if (target === source) {
+    return UNCHANGED;
+  }
+  if (typeof target === "object" && typeof source === "object") {
+    const isTArr = Array.isArray(target);
+    const isSArr = Array.isArray(source);
+    if (isTArr && isSArr) {
+      const l = Math.min(target.length, source.length);
+      let i = 0;
+      for (; i < l; i++) {
+        const v = reconcileSchemaValues(target[i], source[i]);
+        if (v !== UNCHANGED) {
+          target[i] = v;
+        }
+      }
+      for (; i < source.length; i++) {
+        target.push(source[i]);
+      }
+      target.splice(source.length);
+      return UNCHANGED;
+    }
+    if (!isTArr && !isSArr && target !== null && source !== null) {
+      const tKeys = Object.keys(target);
+      let l = tKeys.length;
+      for (let i = 0; i < l; i++) {
+        const key = tKeys[i]!;
+        if (!(key in source)) {
+          delete target[key];
+        }
+      }
+      const sKeys = Object.keys(source);
+      l = sKeys.length;
+      for (let i = 0; i < l; i++) {
+        const key = sKeys[i]!;
+        const v = reconcileSchemaValues(target[key], source[key]);
+        if (v !== UNCHANGED) {
+          target[key] = v;
+        }
+      }
+      return UNCHANGED;
+    }
+  }
+  return source;
+}

packages/form/src/fields/object/context.svelte.ts

@@ -1,4 +1,4 @@
-import { getContext, setContext, untrack } from "svelte";
+import { getContext, setContext } from "svelte";
 
 import {
   getDefaultValueForType,
@@ -31,6 +31,7 @@ import {
   retrieveUiOption,
   uiTitleOption,
   type Translate,
+  markSchemaChange,
 } from "@/form/index.js";
 
 import {
@@ -86,20 +87,10 @@ export function createObjectContext<V extends Validator>(
     return lastSchemaProperties;
   });
 
-  // NOTE: This code should populate `defaults` for properties from
-  // `dependencies` before new `fields` will populate their `defaults`.
+  // NOTE: `defaults` population
   $effect(() => {
     schemaProperties;
-    setValue(
-      untrack(
-        () =>
-          getDefaultFieldState(
-            ctx,
-            retrievedSchema,
-            value()
-          ) as SchemaObjectValue
-      )
-    );
+    markSchemaChange(ctx);
   });
 
   const uiOption: UiOption = (opt) => retrieveUiOption(ctx, config(), opt);

packages/form/src/form/context/context.ts

@@ -32,6 +32,7 @@ export interface FormInternalContext<V extends Validator>
     Readonly<Required<IdOptions>> {
   value: FormValue;
   isChanged: boolean;
+  readonly markSchemaChange: () => void;
   readonly rootId: Id;
   readonly fieldsValidationMode: number;
   readonly isSubmitted: boolean;

packages/form/src/form/context/schema.ts

@@ -88,3 +88,9 @@ export function getDefaultFieldState<V extends Validator>(
 ) {
   return ctx.merger.mergeFormDataAndSchemaDefaults(formData, schema);
 }
+
+export function markSchemaChange<V extends Validator>(
+  ctx: FormInternalContext<V>
+) {
+  ctx.markSchemaChange();
+}

packages/form/src/form/create-form.svelte.ts

@@ -11,7 +11,12 @@ import {
   type TasksCombinator,
   type FailedTask,
 } from "@/lib/task.svelte.js";
-import type { Schema, Validator } from "@/core/index.js";
+import {
+  UNCHANGED,
+  reconcileSchemaValues,
+  type Schema,
+  type Validator,
+} from "@/core/index.js";
 
 import {
   type ValidationError,
@@ -541,9 +546,27 @@ export function createForm<T, V extends Validator>(
     },
     submitHandler,
     resetHandler,
+    markSchemaChange() {
+      if (isDefaultsInjectionQueued) return;
+      isDefaultsInjectionQueued = true;
+      queueMicrotask(injectSchemaDefaults);
+    },
   };
   const fieldTypeResolver = $derived(options.resolver(context));
 
+  let isDefaultsInjectionQueued = false;
+  function injectSchemaDefaults() {
+    isDefaultsInjectionQueued = false;
+    const nextValue = merger.mergeFormDataAndSchemaDefaults(
+      valueRef.current,
+      options.schema
+    );
+    const change = reconcileSchemaValues(valueRef.current, nextValue);
+    if (change !== UNCHANGED) {
+      valueRef.current = change;
+    }
+  }
+
   return {
     context,
     [FORM_CONTEXT]: context,