Fixed #164 finally!

Author: ciscoheat

CHANGELOG.md

@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Fixed exception message when the `dataType` option isn't set to `'json'` and the schema contains a nested object.
+- Fixed persisting form data when component used data from `$page` in combination with `onDestroy`. ([#164](https://github.com/ciscoheat/sveltekit-superforms/issues/164), thank you to everyone in that thread!)
+- Fixed exception message when the `dataType` option isn't set to `'json'` and the schema contains a nested object. ([#225](https://github.com/ciscoheat/sveltekit-superforms/issues/225))
 - Superforms are now ignoring normal SvelteKit form actions when they are posted. ([#230](https://github.com/ciscoheat/sveltekit-superforms/issues/230))
 
 ## [1.2.0] - 2023-07-06

src/lib/client/index.ts

@@ -423,13 +423,17 @@ export function superForm<
         value: Parameters<typeof _formData.set>[0],
         options: { taint?: TaintOption<UnwrappedT> } = {}
       ) => {
+        // Need to clone the value, so it won't refer
+        // to $page for example.
+        const newValue = clone(value);
+
         Tainted_update(
-          value,
+          newValue,
           Context.taintedFormState,
           options.taint ?? true
         );
-        Context.taintedFormState = clone(value);
-        return _formData.set(value);
+        Context.taintedFormState = newValue;
+        return _formData.set(newValue);
       },
       update: (
         updater: Parameters<typeof _formData.update>[0],

src/routes/tests/issue-164-4/+page.server.ts

@@ -0,0 +1,31 @@
+import { superValidate, message } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { z } from 'zod';
+
+import type { Actions, PageServerLoad } from './$types';
+
+const schema = z.object({
+  name: z.string().min(1).default('TEST'),
+  email: z.string().email()
+});
+
+///// Load //////////////////////////////////////////////////////////
+
+export const load: PageServerLoad = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions //////////////////////////////////////////////////
+
+export const actions: Actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Form posted successfully!');
+  }
+};

src/routes/tests/issue-164-4/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Form from './Form.svelte';
+  import { page } from '$app/stores';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { browser } from '$app/environment';
+
+  let isOpen = false;
+
+  page.subscribe(($page) => {
+    console.log('🚀 ~ file: +page.svelte:12 ~ page:', $page.data.form.data);
+  });
+
+  /*
+  if (browser) {
+    setInterval(() => {
+      console.log('$page - +page.svelte', $page.data.form.data);
+    }, 500);
+  }
+  */
+</script>
+
+<SuperDebug label="$page.data" data={$page.data.form.data} /><br />
+
+{#if isOpen}
+  <Form
+    on:cancel={() => {
+      isOpen = false;
+    }}
+  />
+{:else}
+  <button
+    style="margin-bottom: 12px;"
+    on:click={() => {
+      isOpen = !isOpen;
+    }}
+  >
+    Toggle
+  </button>
+{/if}

src/routes/tests/issue-164-4/Form.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { get } from 'svelte/store';
+
+  const dispatch = createEventDispatcher();
+
+  const frm = superForm($page.data.form);
+  const { form, errors, message, enhance, reset } = frm;
+
+  page.subscribe(($page) => {
+    console.log(
+      '🚀 ~ file: Form.svelte:18 ~ page.subscribe ~ page:',
+      $page.data.form.data
+    );
+  });
+</script>
+
+<SuperDebug label="Form" data={$form} />
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<form method="POST" use:enhance>
+  <label>
+    Name<br />
+    <input name="name" data-invalid={$errors.name} bind:value={$form.name} />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+
+  <label>
+    Email<br />
+    <input
+      name="email"
+      type="email"
+      data-invalid={$errors.email}
+      bind:value={$form.email}
+    />
+    {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+  </label>
+
+  <button disabled>Submit</button>
+  <button
+    type="button"
+    on:click={() => {
+      reset();
+      console.log('Resetted:', get(frm.form));
+      setTimeout(() => dispatch('cancel'), 500);
+    }}>Cancel</button
+  >
+</form>
+
+<hr />
+<p>
+  <a target="_blank" href="https://superforms.vercel.app/api"
+    >API Reference</a
+  >
+</p>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  .status {
+    color: white;
+    padding: 4px;
+    padding-left: 8px;
+    border-radius: 2px;
+    font-weight: 500;
+  }
+
+  .status.success {
+    background-color: seagreen;
+  }
+
+  .status.error {
+    background-color: #ff2a02;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>