chore: add tests and fix issues with usage

Author: crutchcorn

packages/svelte-form/src/AppField.svelte

@@ -7,11 +7,12 @@
     form: any
     fieldComponents: any
     children: Snippet
+    fieldProps: any
   }
-  const { children, form, fieldComponents }: Props = $props()
+  const { children, form, fieldComponents, fieldProps }: Props = $props()
 </script>
 
-<form.Field name="fullName">
+<form.Field {...fieldProps}>
   {#snippet children(field: any)}
     <InnerAppField field={field} children={children} fieldComponents={fieldComponents}/>
   {/snippet}

packages/svelte-form/src/createFormRune.svelte.ts

@@ -241,7 +241,7 @@ export function createFormRune<
   fieldComponents,
   formComponents,
 }: CreateFormRuneProps<TComponents, TFormComponents>) {
-  function useAppForm<
+  function createAppForm<
     TFormData,
     TOnMount extends undefined | FormValidateOrFn<TFormData>,
     TOnChange extends undefined | FormValidateOrFn<TFormData>,
@@ -291,7 +291,7 @@ export function createFormRune<
       return AppFormSvelte(internal, { ...props, form })
     }) as Component<{ children: Snippet }>
 
-    const AppField = ((internal, props) => AppFieldSvelte(internal, { ...props, form, fieldComponents } as never)) as FieldComponent<
+    const AppField = ((internal, {children, ...fieldProps}) => AppFieldSvelte(internal, { fieldProps, form, fieldComponents, children } as never)) as FieldComponent<
       TFormData,
       TOnMount,
       TOnChange,
@@ -317,6 +317,6 @@ export function createFormRune<
   }
 
   return {
-    useAppForm,
+    createAppForm,
   }
 }

packages/svelte-form/src/index.ts

@@ -7,3 +7,5 @@ export { createForm, type SvelteFormApi } from './createForm.svelte.js'
 export { default as Field, createField } from './Field.svelte'
 
 export type { CreateField, FieldComponent } from './types.js'
+
+export { createFormRune, createFormRuneContexts } from "./createFormRune.svelte.js"

packages/svelte-form/tests/large-components/context.ts

@@ -0,0 +1,3 @@
+import { createFormRuneContexts } from "../../src/index.js";
+
+export const { useFieldContext } = createFormRuneContexts()

packages/svelte-form/tests/large-components/rune.ts

@@ -0,0 +1,9 @@
+import { createFormRune } from "../../src/createFormRune.svelte.js";
+import TextField from "./text-field.svelte";
+
+export const { createAppForm } = createFormRune({
+  fieldComponents: {
+    TextField,
+  },
+  formComponents: {},
+})

packages/svelte-form/tests/large-components/text-field.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useFieldContext } from './context.js'
+
+  const field = useFieldContext<string>()
+
+  const { label }: { label: string } = $props()
+</script>
+
+<label>
+  <span>{label}</span>
+  <input
+    id={field.name}
+    value={field.state.value}
+    oninput={(e) => field.handleChange((e.target as any).value)}
+  />
+</label>

packages/svelte-form/tests/large.svelte

@@ -0,0 +1,42 @@
+<svelte:options runes />
+
+<script module lang="ts">
+  interface Employee {
+    firstName: string
+  }
+
+  let sampleData: Employee = $state({
+    firstName: 'Corbin',
+  })
+
+  export const getSampleData = () => sampleData
+</script>
+
+<script lang="ts">
+  import { createAppForm } from './large-components/rune.js'
+
+  const form = createAppForm(() => ({
+    defaultValues: sampleData,
+  }))
+
+  const formState = form.useStore()
+</script>
+
+<form
+  id="form"
+  onsubmit={(e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    form.handleSubmit()
+  }}
+>
+  <h1>TanStack Form - Svelte Demo</h1>
+
+  <form.AppField name="firstName">
+    {#snippet children(field)}
+      <field.TextField label="First name" />
+    {/snippet}
+  </form.AppField>
+</form>
+
+<pre>{JSON.stringify(formState.current, null, 2)}</pre>

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

@@ -0,0 +1,36 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { userEvent } from '@testing-library/user-event'
+import { mount, unmount } from 'svelte'
+import TestForm, { getSampleData } from './large.svelte'
+
+describe('Svelte Tests', () => {
+  let element: HTMLDivElement
+  let instance: any
+  beforeEach(async () => {
+    element = document.createElement('div')
+    document.body.appendChild(element)
+    instance = mount(TestForm, {
+      target: element,
+    })
+  })
+
+  afterEach(() => {
+    unmount(instance)
+    element.remove()
+  })
+
+  it('should have initial values', async () => {
+    expect(element.querySelector<HTMLInputElement>('#firstName')).toHaveValue(
+      getSampleData().firstName,
+    )
+  })
+
+  it('should mirror user input', async () => {
+    const firstName = element.querySelector<HTMLInputElement>('#firstName')!
+    const firstNameValue = 'Jobs'
+    await userEvent.type(firstName, firstNameValue)
+
+    const form = JSON.parse(element.querySelector('pre')!.textContent!)
+    expect(form.values.firstName).toBe(getSampleData().firstName + firstNameValue)
+  })
+})