Adding more cases for issue 164.

Author: ciscoheat

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

@@ -0,0 +1,5 @@
+<script>
+  export let data;
+</script>
+
+<a href="/tests/issue-164-3/view">Start here</a>

src/routes/tests/issue-164-3/[viewOrEdit]/+page.server.ts

@@ -0,0 +1,16 @@
+import { superValidate } from "$lib/server";
+import { z } from "zod";
+
+const schema = z.object({
+	name: z.string().min(1, "Cannot be empty"),
+});
+
+export const load = async ({request, params}) => {
+	const initialData = {
+		name: "Testing"
+	}
+	const form = await superValidate(initialData, schema)
+	console.log("🚀 ~ file: +page.server.ts:13 /issue-164-3", form)
+
+	return {form}
+}

src/routes/tests/issue-164-3/[viewOrEdit]/+page.svelte

@@ -0,0 +1,63 @@
+<script>
+  import { page } from '$app/stores';
+  import { goto, invalidateAll } from '$app/navigation';
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  export let data;
+
+  const baseUrl = '/tests/issue-164-3';
+
+  const { form, errors, reset, enhance } = superForm(data.form, {
+    taintedMessage: null
+  });
+
+  $: editing = $page.params.viewOrEdit === 'edit';
+
+  const gotoView = async () => {
+    goto(baseUrl + '/view');
+  };
+  const back = async () => {
+    history.back();
+  };
+  const resetAndBack = async () => {
+    console.log('BEFORE reset', $form, $page.data.form.data);
+    reset();
+    console.log('AFTER reset', $form, $page.data.form.data);
+    await gotoView();
+    console.log('AFTER goto', $form, $page.data.form.data);
+  };
+  const resetInvalidateBack = async () => {
+    reset();
+    await invalidateAll();
+    gotoView();
+  };
+</script>
+
+<form method="POST" use:enhance>
+  Name: <input name="name" bind:value={$form.name} disabled={!editing} />
+  {#if $errors.name}
+    <span style:color="red">{$errors.name}</span>
+  {/if}
+</form>
+
+{#if !editing}
+  <a href={baseUrl + '/edit'}>Edit</a>
+{:else}
+  <button on:click={gotoView}>Goto View</button>
+  <button on:click={back}>Back to View</button>
+  <button on:click={() => reset()}>Reset</button>
+  <button on:click={resetAndBack}>Reset & back</button>
+  <button on:click={resetInvalidateBack}>Reset, invalidate, back</button>
+
+  <ul>
+    <li>Edit the name above</li>
+    <li>Clicking the "Reset" will reset the form as expected</li>
+    <li>Clicking the "Reset & back" button doesn't reset the form</li>
+    <li>
+      Clicking the browser's back button, "Goto View" or "Back to View" all
+      are similar to the "Reset & back" button - form is not reset
+    </li>
+    <li>Clicking the "Reset, invalidate, back" button works</li>
+  </ul>
+{/if}

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

@@ -4,13 +4,14 @@
   import SuperDebug from '$lib/client/SuperDebug.svelte';
 
   export let data: PageData;
+  console.log('🚀 ~ file: +page.svelte:7 ~ page created:', data.form.data);
 
   let isEditing = false;
   const toggleEdit = (enable: boolean) => {
     isEditing = !!enable;
   };
 
-  $: console.log('data.form:', data.form.data);
+  $: console.log('initial data.form:', data.form.data);
 </script>
 
 <div>isEditing: {isEditing}</div>

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

@@ -15,6 +15,11 @@
   onMount(() => {
     console.log('onMount', data.data);
   });
+
+  $: {
+    console.log('Form initial data:', data.data);
+    console.log('Form $form:', $form);
+  }
 </script>
 
 <SuperDebug data={$form} />
@@ -23,8 +28,9 @@
   type="button"
   on:click={() => {
     //debugger;
+    console.log('Resetting, before:', $form, 'initial:', data.data);
     reset();
-    console.log('Resetting', $form, data.data);
+    console.log('Resetting, after:', $form, 'initial:', data.data);
     cancel?.();
   }}>Close Edit</button
 >

src/routes/tests/issue-176/+page.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import {
+    setError,
+    setMessage,
+    superForm,
+    superValidateSync
+  } from '$lib/client';
+  import { page } from '$app/stores';
+  import { z } from 'zod';
+
+  const loginSchema = z.object({
+    email: z.string().email(),
+    password: z.string().min(8)
+  });
+
+  const { form, errors, message, constraints, enhance } = superForm(
+    superValidateSync(loginSchema),
+    {
+      SPA: true,
+      validators: loginSchema,
+      onUpdate({ form }) {
+        if (form.data.email.includes('spam')) {
+          setError(form, 'email', 'Suspicious email address.');
+        } else if (form.valid) {
+          setMessage(form, 'Valid data!');
+          // TODO: Do something with the validated data
+        }
+      },
+      onError({ result, message }) {
+        message.set(result.error.message);
+      }
+    }
+  );
+</script>
+
+<h3>#176</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<form method="POST" use:enhance>
+  {#if $errors._errors}
+    <div class="status error">{$errors._errors}</div>
+  {/if}
+
+  <label for="email">E-mail</label>
+  <input
+    name="email"
+    type="email"
+    data-invalid={$errors.email}
+    bind:value={$form.email}
+    {...$constraints.email}
+  />
+  {#if $errors.email}
+    <span class="invalid">{$errors.email}</span>
+  {/if}
+
+  <label for="password">Password</label>
+  <input
+    name="password"
+    type="password"
+    data-invalid={$errors.password}
+    bind:value={$form.password}
+    {...$constraints.password}
+  />
+  {#if $errors.password}
+    <span class="invalid">{$errors.password}</span>
+  {/if}
+
+  <button>Submit</button>
+</form>
+
+<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;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>