@tanstack/svelte-form 1.6.0

package/src/Field.svelte

@@ -0,0 +1,269 @@
+<script module lang="ts">
+  import {
+    type DeepKeys,
+    type DeepValue,
+    FieldApi,
+    type FieldAsyncValidateOrFn,
+    type FieldValidateOrFn,
+    type FormAsyncValidateOrFn,
+    type FormValidateOrFn,
+  } from '@tanstack/form-core'
+  import { useStore } from '@tanstack/svelte-store'
+  import { onMount, type Snippet } from 'svelte'
+  import Field from './Field.svelte'
+  import type { CreateFieldOptions, SvelteFieldApi } from './types.js'
+
+  export function createField<
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    TData extends DeepValue<TParentData, TName>,
+    TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnChangeAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnBlurAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnSubmitAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TParentSubmitMeta,
+  >(
+    opts: () => CreateFieldOptions<
+      TParentData,
+      TName,
+      TData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TFormOnMount,
+      TFormOnChange,
+      TFormOnChangeAsync,
+      TFormOnBlur,
+      TFormOnBlurAsync,
+      TFormOnSubmit,
+      TFormOnSubmitAsync,
+      TFormOnServer,
+      TParentSubmitMeta
+    >,
+  ) {
+    const options = opts()
+
+    const api = new FieldApi(options)
+
+    const extendedApi: typeof api &
+      SvelteFieldApi<
+        TParentData,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnServer,
+        TParentSubmitMeta
+      > = api as never
+
+    extendedApi.Field = Field as never
+
+    let mounted = false
+    // Instantiates field meta and removes it when unrendered
+    onMount(() => {
+      const cleanupFn = api.mount()
+      mounted = true
+      return () => {
+        cleanupFn()
+        mounted = false
+      }
+    })
+
+    $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()
+      if (!mounted) return
+      api.update(current)
+    })
+
+    const storeSub = useStore(api.store)
+    Object.defineProperty(extendedApi, 'state', {
+      get() {
+        return storeSub.current
+      },
+    })
+
+    return extendedApi
+  }
+</script>
+
+<script
+  lang="ts"
+  generics="
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    TData extends DeepValue<TParentData, TName>,
+    TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnChangeAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnBlurAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnSubmitAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TParentSubmitMeta,
+"
+>
+  type Props<
+    TParentData,
+    TName extends DeepKeys<TParentData>,
+    TData extends DeepValue<TParentData, TName>,
+    TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnChangeAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnBlurAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+    TOnSubmitAsync extends
+      | undefined
+      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+    TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+    TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+    TParentSubmitMeta,
+  > = {
+    children: Snippet<
+      [
+        FieldApi<
+          TParentData,
+          TName,
+          TData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TFormOnMount,
+          TFormOnChange,
+          TFormOnChangeAsync,
+          TFormOnBlur,
+          TFormOnBlurAsync,
+          TFormOnSubmit,
+          TFormOnSubmitAsync,
+          TFormOnServer,
+          TParentSubmitMeta
+        >,
+      ]
+    >
+  } & CreateFieldOptions<
+    TParentData,
+    TName,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TParentSubmitMeta
+  >
+
+  let {
+    children,
+    ...fieldOptions
+  }: Props<
+    TParentData,
+    TName,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TParentSubmitMeta
+  > = $props()
+
+  const fieldApi = createField<
+    TParentData,
+    TName,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TParentSubmitMeta
+  >(() => {
+    return fieldOptions
+  })
+</script>
+
+{@render children(fieldApi)}

package/src/Subscribe.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useStore } from '@tanstack/svelte-store'
+
+  // Don't bother typing this out, this component is only usable through a wrapper
+  interface Props {
+    children: any
+    store: any
+    selector?: (state: any) => any
+  }
+
+  let { children, store, selector = (state) => state }: Props = $props()
+
+  const value = useStore(store, selector)
+</script>
+
+{@render children(value.current)}

package/src/createForm.svelte.ts

@@ -0,0 +1,235 @@
+import { FormApi } from '@tanstack/form-core'
+import { useStore } from '@tanstack/svelte-store'
+import { onMount } from 'svelte'
+import Field, { createField } from './Field.svelte'
+import Subscribe from './Subscribe.svelte'
+import type {
+  Component,
+  ComponentConstructorOptions,
+  Snippet,
+  SvelteComponent,
+} from 'svelte'
+import type {
+  FormAsyncValidateOrFn,
+  FormOptions,
+  FormState,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+import type { CreateField, FieldComponent, WithoutFunction } from './types.js'
+
+export interface SvelteFormApi<
+  TParentData,
+  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TSubmitMeta,
+> {
+  Field: FieldComponent<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >
+  createField: CreateField<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >
+  useStore: <
+    TSelected = NoInfer<
+      FormState<
+        TParentData,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnServer
+      >
+    >,
+  >(
+    selector?: (
+      state: NoInfer<
+        FormState<
+          TParentData,
+          TFormOnMount,
+          TFormOnChange,
+          TFormOnChangeAsync,
+          TFormOnBlur,
+          TFormOnBlurAsync,
+          TFormOnSubmit,
+          TFormOnSubmitAsync,
+          TFormOnServer
+        >
+      >,
+    ) => TSelected,
+  ) => { current: TSelected }
+  // This giant type allows the type
+  // - to be used as a function (which they are now in Svelte 5)
+  // - to be used as a class (which they were in Svelte 4, and which Svelte intellisense still uses for backwards compat)
+  // - to preserve the generics correctly
+  // Once Svelte intellisense no longer has/needs backwards compat, we can remove the class constructor part
+  Subscribe: (<
+    TSelected = NoInfer<
+      FormState<
+        TParentData,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnServer
+      >
+    >,
+  >(
+    internal: any,
+    props: {
+      selector?: (
+        state: NoInfer<
+          FormState<
+            TParentData,
+            TFormOnMount,
+            TFormOnChange,
+            TFormOnChangeAsync,
+            TFormOnBlur,
+            TFormOnBlurAsync,
+            TFormOnSubmit,
+            TFormOnSubmitAsync,
+            TFormOnServer
+          >
+        >,
+      ) => TSelected
+      children: Snippet<[NoInfer<TSelected>]>
+    },
+  ) => {}) &
+    (new <
+      TSelected = NoInfer<
+        FormState<
+          TParentData,
+          TFormOnMount,
+          TFormOnChange,
+          TFormOnChangeAsync,
+          TFormOnBlur,
+          TFormOnBlurAsync,
+          TFormOnSubmit,
+          TFormOnSubmitAsync,
+          TFormOnServer
+        >
+      >,
+    >(
+      opts: ComponentConstructorOptions<{
+        selector?: (
+          state: NoInfer<
+            FormState<
+              TParentData,
+              TFormOnMount,
+              TFormOnChange,
+              TFormOnChangeAsync,
+              TFormOnBlur,
+              TFormOnBlurAsync,
+              TFormOnSubmit,
+              TFormOnSubmitAsync,
+              TFormOnServer
+            >
+          >,
+        ) => TSelected
+        children: Snippet<[NoInfer<TSelected>]>
+      }>,
+    ) => SvelteComponent) &
+    WithoutFunction<Component>
+}
+
+export function createForm<
+  TParentData,
+  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TSubmitMeta,
+>(
+  opts?: () => FormOptions<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >,
+) {
+  const options = opts?.()
+  const api = new FormApi<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >(options)
+  const extendedApi: typeof api &
+    SvelteFormApi<
+      TParentData,
+      TFormOnMount,
+      TFormOnChange,
+      TFormOnChangeAsync,
+      TFormOnBlur,
+      TFormOnBlurAsync,
+      TFormOnSubmit,
+      TFormOnSubmitAsync,
+      TFormOnServer,
+      TSubmitMeta
+    > = api as never
+
+  // @ts-expect-error constructor definition exists only on a type level
+  extendedApi.Field = (internal, props) =>
+    Field(internal, { ...props, form: api })
+  extendedApi.createField = (props) =>
+    createField(() => {
+      return { ...props(), form: api }
+    }) as never // Type cast because else "Error: Type instantiation is excessively deep and possibly infinite."
+  extendedApi.useStore = (selector) => useStore(api.store, selector)
+  // @ts-expect-error constructor definition exists only on a type level
+  extendedApi.Subscribe = (internal, props) =>
+    Subscribe(internal, { ...props, store: api.store })
+
+  onMount(api.mount)
+
+  // formApi.update should not have any side effects. Think of it like a `useRef`
+  // that we need to keep updated every render with the most up-to-date information.
+  $effect.pre(() => api.update(opts?.()))
+
+  return extendedApi
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from '@tanstack/form-core'
+
+export { useStore } from '@tanstack/svelte-store'
+
+export { createForm, type SvelteFormApi } from './createForm.svelte.js'
+
+export { default as Field, createField } from './Field.svelte'
+
+export type { CreateField, FieldComponent } from './types.js'