[form] Use keyed array in array fields

Author: x0k

packages/form/src/form/fields/array/array-field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { createKeyedArray } from "@/lib/keyed-array.svelte.js";
   import { isFixedItems, type Schema } from "@/core/index.js";
 
   import {
@@ -17,10 +18,7 @@
 
   import type { FieldProps } from "../model.js";
 
-  import {
-    setArrayContext,
-    type ArrayContext,
-  } from "./context.js";
+  import { setArrayContext, type ArrayContext } from "./context.js";
 
   let { value = $bindable(), config }: FieldProps<"array"> = $props();
 
@@ -51,6 +49,8 @@
     validateField(ctx, config, value);
   }
 
+  const keyedArray = createKeyedArray(() => value ?? []);
+
   const arrayCtx: ArrayContext = {
     get errors() {
       return errors;
@@ -74,45 +74,29 @@
       return copyable;
     },
     validate,
+    key(index) {
+      return keyedArray.key(index);
+    },
     pushItem(itemSchema: Schema) {
-      if (value === undefined) {
-        return;
-      }
-      value.push(getDefaultFieldState(ctx, itemSchema, undefined));
+      keyedArray.push(getDefaultFieldState(ctx, itemSchema, undefined));
       validate();
     },
     moveItemUp(index) {
-      if (value === undefined || index < 1) {
-        return;
-      }
-      const tmp = value[index];
-      value[index] = value[index - 1];
-      value[index - 1] = tmp;
+      keyedArray.swap(index, index - 1);
       validate();
     },
     moveItemDown(index) {
-      if (value === undefined || index > value.length - 2) {
-        return;
-      }
-      const tmp = value[index];
-      value[index] = value[index + 1];
-      value[index + 1] = tmp;
+      keyedArray.swap(index, index + 1);
       validate();
     },
     copyItem(index) {
-      if (value === undefined) {
-        return
-      }
-      value.splice(index, 0, $state.snapshot(value[index]))
-      validate()
+      keyedArray.insert(index, $state.snapshot(value![index]));
+      validate();
     },
     removeItem(index) {
-      if (value === undefined) {
-        return
-      }
-      value.splice(index, 1)
-      validate()
-    }
+      keyedArray.remove(index);
+      validate();
+    },
   };
   setArrayContext(arrayCtx);
 

packages/form/src/form/fields/array/context.ts

@@ -1,19 +1,14 @@
 import { getContext, setContext } from "svelte";
 
-import {
-  isFilesArray2 as isFilesArrayInternal,
-  type SchemaArrayValue,
-  type Schema,
-  type SchemaValue,
-} from "@/core/index.js";
+import type { SchemaArrayValue, Schema, SchemaValue } from "@/core/index.js";
 
-import type { ValidationError } from "../../validator.js";
 import {
   type FormContext,
   makeArrayItemId,
   makeIdSchema,
 } from "../../context/index.js";
-import { type IdSchema } from "../../id-schema.js";
+import type { ValidationError } from "../../validator.js";
+import type { IdSchema } from "../../id-schema.js";
 
 export interface ArrayContext {
   disabled: boolean;
@@ -25,6 +20,7 @@ export interface ArrayContext {
   errors: ValidationError<unknown>[];
   /** @deprecated */
   validate: () => void;
+  key(index: number): number;
   pushItem(itemSchema: Schema): void;
   moveItemUp(index: number): void;
   moveItemDown(index: number): void;

packages/form/src/form/fields/array/fixed-array-field.svelte

@@ -78,7 +78,7 @@
   addButton={arrayCtx.canAdd && schemaAdditionalItems ? addButton : undefined}
 >
   {#if value}
-    {#each value as item, index}
+    {#each value as item, index (arrayCtx.key(index))}
       {@const isAdditional = index >= schemaItems.length}
       {@const itemSchema = isAdditional && schemaAdditionalItems ? retrieveSchema(ctx, schemaAdditionalItems, item) : schemaItems[index]!}
       {@const uiSchema = config.uiSchema}

packages/form/src/form/fields/array/normal-array-field.svelte

@@ -63,7 +63,7 @@
   addButton={arrayCtx.canAdd ? addButton : undefined}
 >
   {#if value}
-    {#each value as item, index}
+    {#each value as item, index (arrayCtx.key(index))}
       {@const itemSchema = retrieveSchema(ctx, schemaItems, item)}
       {@const itemIdSchema = makeIdSchema(
         ctx,