Snapshots with componentized form about sveltekit-superforms

[ciscoheat]

You need to export a custom capture and restore object, similar to this, and then bind it to the component, so the component can modify it.

[singingwolfboy]

I ended up doing this:

<!-- MyForm.svelte -->
<script lang="ts">
  import type { Snapshot } from '@sveltejs/kit';
  import { superForm, type SuperValidated, type Infer } from 'sveltekit-superforms/client';
  import { schema } from './schema';

  export let data: SuperValidated<Infer<typeof schema>>;
  export let snapshot: Snapshot;

  const form = superForm(data, {
    SPA: true,
    validators: zod(schema),
    ...
  });
  const { form: formData, capture, restore, enhance } = form;
  snapshot = { capture, restore }
</script>

<form use:enhance method="POST">
  <!-- form fields here -->
</form>

<!-- +page.svelte -->
<script lang="ts">
  import type { Snapshot } from '@sveltejs/kit';
  import MyForm from './MyForm.svelte'

  export let data;
  export let snapshot: Snapshot = { capture() {}, restore(snapshot) {} };
</script>

<!-- not sure why this is needed, but it doesn't seem to work without it... -->
<svelte:options accessors />

<MyForm data={data.form} bind:snapshot />

Is that basically what you had in mind? I'm not sure if I need to be concerned about the accessors thing, or why it's needed. I'm also a bit surprised that this works; I thought that the restore function would run when the page component loaded, before the child <MyForm> component had a chance to set it to something meaningful. It seems to work, but I don't know if this introduces a race condition or not.