resolve todo, tweak code, add test

Author: dummdidumm

packages/svelte-form/src/Field.svelte

@@ -93,11 +93,10 @@
       }
     })
 
-    // TODO (43081j): does this do what i think? we don't access anything
-    // svelte is aware of, so maybe it'll never call this?
     $effect.pre(() => {
+      // Invoke options function before mounted check, else it wouldn't rerun on changes to options.
+      // Changes to options are seen by the effect because signals inside them are picked up.
       const current = opts()
-      Object.values(current) // make sure we're watching all the things
       if (!mounted) return
       api.update(current)
     })

packages/svelte-form/tests/simple.svelte

@@ -1,13 +1,17 @@
+<svelte:options runes />
+
 <script module lang="ts">
   interface Employee {
     firstName: string
     lastName: string
   }
 
-  export const sampleData: Employee = {
+  let sampleData: Employee = $state({
     firstName: 'Christian',
     lastName: '',
-  }
+  })
+
+  export const getSampleData = () => sampleData
 </script>
 
 <script lang="ts">
@@ -21,7 +25,7 @@
     },
   }))
 
-  const state = form.useStore()
+  const formState = form.useStore()
 </script>
 
 <form
@@ -110,4 +114,11 @@
   </div>
 </form>
 
-<pre>{JSON.stringify(state.current, null, 2)}</pre>
+<button
+  id="change"
+  onclick={() => (sampleData = { firstName: 'Julian', lastName: '' })}
+>
+  Change Sample Data
+</button>
+
+<pre>{JSON.stringify(formState.current, null, 2)}</pre>

packages/svelte-form/tests/simple.test.ts

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 import { userEvent } from '@testing-library/user-event'
 import { mount, unmount } from 'svelte'
 // @ts-ignore tsc doesn't know about named exports from svelte files
-import TestForm, { sampleData } from './simple.svelte'
+import TestForm, { getSampleData } from './simple.svelte'
 
 describe('Svelte Tests', () => {
   let element: HTMLDivElement
@@ -24,13 +24,22 @@ describe('Svelte Tests', () => {
 
   it('should have initial values', async () => {
     expect(element.querySelector<HTMLInputElement>('#firstName')).toHaveValue(
-      sampleData.firstName,
+      getSampleData().firstName,
     )
     expect(element.querySelector<HTMLInputElement>('#lastName')).toHaveValue(
-      sampleData.lastName,
+      getSampleData().lastName,
     )
   })
 
+  it('should change initial values when defaults update', async () => {
+    await userEvent.click(element.querySelector<HTMLButtonElement>('#change')!)
+
+    expect(element.querySelector<HTMLInputElement>('#firstName')).toHaveValue(
+      getSampleData().firstName,
+    )
+    expect(getSampleData().firstName).toBe('Julian')
+  })
+
   it('should mirror user input', async () => {
     const lastName = element.querySelector<HTMLInputElement>('#lastName')!
     const lastNameValue = 'Jobs'
@@ -44,10 +53,10 @@ describe('Svelte Tests', () => {
     const firstName = element.querySelector<HTMLInputElement>('#firstName')!
     await userEvent.type(firstName, '-Joseph')
 
-    expect(firstName).toHaveValue(sampleData.firstName + '-Joseph')
+    expect(firstName).toHaveValue(getSampleData().firstName + '-Joseph')
 
     await userEvent.click(element.querySelector<HTMLButtonElement>('#reset')!)
-    expect(firstName).toHaveValue(sampleData.firstName)
+    expect(firstName).toHaveValue(getSampleData().firstName)
   })
 
   it('should display validation', async () => {