feat: allow update or reset with index

packages/conform-dom/form.ts

@@ -8,6 +8,7 @@ import {
 	isPrefix,
 	setValue,
 	normalize,
+	formatName,
 } from './formdata';
 import {
 	type FieldElement,
@@ -289,7 +290,7 @@ function getDefaultKey(
 	>((result, [key, value]) => {
 		if (Array.isArray(value)) {
 			for (let i = 0; i < value.length; i++) {
-				result[formatPaths([...getPaths(key), i])] = generateId();
+				result[formatName(key, i)] = generateId();
 			}
 		}
 
@@ -327,7 +328,8 @@ function handleIntent<Error>(
 			break;
 		}
 		case 'update': {
-			const { name, validated, value } = intent.payload;
+			const { validated, value } = intent.payload;
+			const name = formatName(intent.payload.name, intent.payload.index);
 
 			if (typeof value !== 'undefined') {
 				updateValue(meta, name ?? '', serialize(value));
@@ -362,7 +364,7 @@ function handleIntent<Error>(
 			break;
 		}
 		case 'reset': {
-			const name = intent.payload.name ?? '';
+			const name = formatName(intent.payload.name, intent.payload.index);
 			const value = getValue(meta.defaultValue, name);
 
 			updateValue(meta, name, value);

packages/conform-dom/formdata.ts

@@ -30,7 +30,7 @@ export function getFormData(
  * const paths = getPaths('todos[0].content'); // ['todos', 0, 'content']
  * ```
  */
-export function getPaths(name: string): Array<string | number> {
+export function getPaths(name: string | undefined): Array<string | number> {
 	if (!name) {
 		return [];
 	}
@@ -72,6 +72,15 @@ export function formatPaths(paths: Array<string | number>): string {
 	}, '');
 }
 
+/**
+ * Format based on a prefix and a path
+ */
+export function formatName(prefix: string | undefined, path?: string | number) {
+	return typeof path !== 'undefined'
+		? formatPaths([...getPaths(prefix), path])
+		: prefix ?? '';
+}
+
 /**
  * Check if a name match the prefix paths
  */

packages/conform-dom/submission.ts

@@ -6,6 +6,7 @@ import {
 	setValue,
 	isPrefix,
 	getValue,
+	formatName,
 } from './formdata';
 import { invariant } from './util';
 
@@ -164,7 +165,7 @@ export function parse<FormValue, FormError>(
 	if (intent) {
 		switch (intent.type) {
 			case 'update': {
-				const { name } = intent.payload;
+				const name = formatName(intent.payload.name, intent.payload.index);
 				const value = serialize(intent.payload.value);
 
 				if (typeof value !== 'undefined') {
@@ -178,7 +179,7 @@ export function parse<FormValue, FormError>(
 				break;
 			}
 			case 'reset': {
-				const { name } = intent.payload;
+				const name = formatName(intent.payload.name, intent.payload.index);
 
 				if (name) {
 					setValue(context.payload, name, () => undefined);
@@ -308,18 +309,34 @@ export type ValidateIntent<Schema = any> = {
 
 export type ResetIntent<Schema = any> = {
 	type: 'reset';
-	payload: {
-		name?: FieldName<Schema>;
-	};
+	payload:
+		| {
+				name?: FieldName<Schema>;
+				index?: never;
+		  }
+		| {
+				name: FieldName<Schema>;
+				index: Schema extends Array<unknown> ? number : never;
+		  };
 };
 
 export type UpdateIntent<Schema = unknown> = {
 	type: 'update';
-	payload: {
-		name?: FieldName<Schema>;
-		value?: NonNullable<DefaultValue<Schema>>;
-		validated?: boolean;
-	};
+	payload:
+		| {
+				name?: FieldName<Schema>;
+				index?: never;
+				value?: NonNullable<DefaultValue<Schema>>;
+				validated?: boolean;
+		  }
+		| {
+				name: FieldName<Schema>;
+				index: Schema extends Array<unknown> ? number : never;
+				value?: NonNullable<
+					DefaultValue<Schema extends Array<infer Item> ? Item : unknown>
+				>;
+				validated?: boolean;
+		  };
 };
 
 export type RemoveIntent<Schema extends Array<any> = any> = {

playground/app/routes/simple-list.tsx

@@ -89,7 +89,8 @@ export default function SimpleList() {
 									<button
 										className="rounded-md border p-2 hover:border-black"
 										{...form.update.getButtonProps({
-											name: task.name,
+											name: fields.items.name,
+											index,
 											value: '',
 											validated: false,
 										})}
@@ -99,7 +100,8 @@ export default function SimpleList() {
 									<button
 										className="rounded-md border p-2 hover:border-black"
 										{...form.reset.getButtonProps({
-											name: task.name,
+											name: fields.items.name,
+											index,
 										})}
 									>
 										Reset

tests/conform-dom.spec.ts

@@ -281,6 +281,7 @@ describe('conform-dom', () => {
 	});
 
 	test('getPaths()', () => {
+		expect(getPaths(undefined)).toEqual([]);
 		expect(getPaths('')).toEqual([]);
 		expect(getPaths('title')).toEqual(['title']);
 		expect(getPaths('123')).toEqual(['123']);