Request: Add field array helpers (push, pop, splice, etc)

[sillvva]

Describe the problem

There's should be an easier way to add, remove, or sort items in a field array than something like this:

<button onclick={() => form.fields.arr.set([...form.fields.arr.value(), ""])}> 
	Add Item 
</button>

<button onclick={() => {
  const values = form.fields.arr.value();
  values.pop();
  form.fields.arr.set(values)
}> 
	Remove Last Item 
</button>

https://stackblitz.com/edit/array-methods-308957?file=src%2Froutes%2Ftest.remote.js,src%2Froutes%2F%2Bpage.svelte,package.json

Describe the proposed solution

Array methods:

<button onclick={() => form.fields.arr.push("")}> 
	Add Item 
</button>

<button onclick={() => form.fields.arr.pop()}> 
	Remove Last Item 
</button>

Alternatives considered

Helper functions or a class with static methods

<button onclick={() => push(form.fields.arr, "")}> 
	Add Item 
</button>

<button onclick={() => FieldArr.pop(form.fields.arr)}> 
	Remove Last Item 
</button>

Importance

would make my life easier

Additional Information

No response

[PatrickG]

How about that?

<script lang="ts">
  import { testForm } from "./test.remote.js";
  let count = testForm.fields.arr.value()?.length || 1;
</script>

<button onclick={() => count++}>Add Item</button>

<form {...testForm}>
  {#each { length: count } as _, i}
    <p>
      <label>{i + 1}</label>
      <input {...testForm.fields.arr[i].as('text')} />
    </p>
  {/each}
  <p><button>Submit</button></p>
</form>

[sillvva]

That helps with push and pop, but not with any of the other methods.

[sillvva]

It could be added like this:

type RemoteFormArrayFieldMethods<T> = T extends Array<infer U> ? {
	push(item: U): void;
	pop(): U;
	unshift(item: U): void;
	shift(): U;
	splice(start: number, deleteCount: number, ...insert: U[]): U[];
	sort(fn: (a: U, b: U) => number): U[];
	// you could add more, but the mutate fns are all we really need.
	// the rest could be used like `.value().slice(...)` or `.value().at(-1)`
} : {};

export type RemoteFormField<Value extends RemoteFormFieldValue> = 
	RemoteFormFieldMethods<Value> & 
	RemoteFormArrayFieldMethods<Value> & 
	{ ... }

I tried to create wrappers myself, but RemoteFormFieldValue doesn't support any arrays other than string[] and File[], even though you can actually create fields or groups of fields representing an array of numbers or objects. See the MRE as an example.

Something like this creates a type error when you try to pass a field to it that represents an array of anything other than strings or files.

// ❌ type error on `infer U` - "U is not assignable to type string"
export function push<T extends RemoteFormField<Array<infer U>>>(field: T, item: U) {
	field.set([...field.value(), item]);
}

// ✅ no type error
export function push<T extends RemoteFormField<any[]>>(field: T, item: ReturnType<T["value"]>[index]) {
	field.set([...field.value(), item]);
}

// push(form.field.strings, ""); ✅
// push(form.field.numbers, 0); ❌
// push(form.field.users, { name: "" }); ❌

[sillvva]

Ah, I see now. What the custom wrapper above needed was the RemoteFormFields type (plural), not RemoteFormField. With some local testing and exporting the type, this works:

// ✅ works now using `RemoteFormFields` instead of `RemoteFormField`
export function push<T extends RemoteFormFields<U[]>, U>(field: T, item: U) {
	field.set([...field.value(), item]);
}

// push(form.field.strings, ""); ✅
// push(form.field.numbers, 0); ✅
// push(form.field.users, { name: "" }); ✅

Unfortunately, RemoteFormFields is not currently exported.

And the previously mentioned solution would be added to RemoteFormFieldContainer instead.

type RemoteFormArrayFieldMethods<T> = T extends Array<infer U> ? {
	push(item: U): void;
	pop(): U;
	unshift(item: U): void;
	shift(): U;
	splice(start: number, deleteCount: number, ...insert: U[]): U[];
	sort(fn: (a: U, b: U) => number): U[];
	// you could add more, but the mutate fns are all we really need.
	// the rest could be used like `.value().slice(...)` or `.value().at(-1)`
} : {};

export type RemoteFormFieldContainer<Value> = 
	RemoteFormFieldMethods<Value> &
	RemoteFormArrayFieldMethods<Value> & {
		/** Validation issues belonging to this or any of the fields that belong to it, if any */
		allIssues(): RemoteFormIssue[] | undefined;
	};

And voila! 🥳 Although I haven't looked into the actual implementation yet.

[teemingc]

I'd probably prefer the React/React Query way where, in a callback function, you receive the old value and you return the new one. e.g.,

form.fields.colours.set((colours) => {
  colours.push('blue');
  return colours;
});

[sillvva]

form.fields.colours.set((colours) => {
colours.push('blue');
return colours;
});

I think that would be a fine improvement to the set function, but it doesn't alleviate the problem I mentioned in the opening post in the slightest. I still think the array methods would be a very useful addition even if that change were also implemented.

[dummdidumm]

Wondering if we should somehow support it when you're passing a state proxy into set, i.e. this:

<script lang="ts">
  import { testForm } from "./test.remote.js";
  let x = $state({ arr: [""], nums: [0] })
  testForm.fields.set(x);
</script>

<p>
  <button onclick={() => {
    x.arr.push('')
  }}>
    Add String
  </button>
  <button onclick={() => {
    x.nums.push(0)
  }}>
    Add Number
  </button>
</p>

Right now this works until you modify the form via inputs, at which point the state will be overridden. The reason is that we're right now making the underlying object a $state.raw and update the object in an immutable fashion. Wondering if we should detect that it's a $state and not do that in this case, or always use $state.

[sillvva]

I think that would also work.

This would be a pretty simple change.

  <script lang="ts">
    import * as API from "$lib/remote";

    let { params } = $props();

    let form = API.something.forms.form;
+   let initial = $state(await API.something.forms.getInitial(params.id));
  </script>

  <Form {form} {initial}>
    <!-- the form -->
  </Form>

Note

However, I still request that the RemoteFormFields type be exported so that we could still create wrappers on array fields if necessary.