@tanstack/svelte-form 1.26.0 → 1.27.1

package/dist/AppField.svelte

@@ -0,0 +1,19 @@
+<!-- Take "form" as an prop, pass it to context, and render children -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import InnerAppField from './InnerAppField.svelte'
+
+  interface Props {
+    form: any
+    fieldComponents: any
+    children: Snippet
+    fieldProps: any
+  }
+  const { children, form, fieldComponents, fieldProps }: Props = $props()
+</script>
+
+<form.Field {...fieldProps}>
+  {#snippet children(field: any)}
+    <InnerAppField field={field} children={children} fieldComponents={fieldComponents}/>
+  {/snippet}
+</form.Field>

package/dist/AppField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    form: any;
+    fieldComponents: any;
+    children: Snippet;
+    fieldProps: any;
+}
+declare const AppField: import("svelte").Component<Props, {}, "">;
+type AppField = ReturnType<typeof AppField>;
+export default AppField;

package/dist/AppForm.svelte

@@ -0,0 +1,16 @@
+<!-- Take "form" as an prop, pass it to context, and render children -->
+<script lang="ts">
+  import { setContext, type Snippet } from 'svelte'
+  import { formContextKey } from './context-keys.js'
+
+  interface Props {
+    form: any
+    children: Snippet
+  }
+
+  const { children, form }: Props = $props()
+
+  setContext(formContextKey, form)
+</script>
+
+{@render children?.()}

package/dist/AppForm.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    form: any;
+    children: Snippet;
+}
+declare const AppForm: import("svelte").Component<Props, {}, "">;
+type AppForm = ReturnType<typeof AppForm>;
+export default AppForm;

package/dist/InnerAppField.svelte

@@ -0,0 +1,17 @@
+<!-- Take "form" as an prop, pass it to context, and render children -->
+<script lang="ts">
+  import { setContext, type Snippet } from 'svelte'
+  import { fieldContextKey } from './context-keys.js'
+
+  interface Props {
+    field: any
+    fieldComponents: any
+    children: Snippet<[any]>
+  }
+
+  const { children, field, fieldComponents }: Props = $props()
+
+  setContext(fieldContextKey, field)
+</script>
+
+{@render children?.(Object.assign(field, fieldComponents))}

package/dist/InnerAppField.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    field: any;
+    fieldComponents: any;
+    children: Snippet<[any]>;
+}
+declare const InnerAppField: import("svelte").Component<Props, {}, "">;
+type InnerAppField = ReturnType<typeof InnerAppField>;
+export default InnerAppField;

package/dist/context-keys.d.ts

@@ -0,0 +1,2 @@
+export declare const fieldContextKey = "__tanstack_field_context_key";
+export declare const formContextKey = "__tanstack_form_context_key";

package/dist/context-keys.js

@@ -0,0 +1,2 @@
+export const fieldContextKey = '__tanstack_field_context_key';
+export const formContextKey = '__tanstack_form_context_key';

package/dist/createForm.svelte.d.ts

@@ -16,4 +16,8 @@ export interface SvelteFormApi<TParentData, TFormOnMount extends undefined | For
         children: Snippet<[NoInfer<TSelected>]>;
     }>) => SvelteComponent) & WithoutFunction<Component>;
 }
+/**
+ * An extended version of the `FormApi` class that includes Svelte-specific functionalities from `SvelteFormApi`
+ */
+export type SvelteFormExtendedApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & SvelteFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
 export declare 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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta>(opts?: () => FormOptions<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>): FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta> & SvelteFormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;

package/dist/createFormCreator.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { FieldApi, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
+import type { FieldComponent } from './types.js';
+import type { SvelteFormExtendedApi } from './createForm.svelte';
+import type { Component, Snippet } from 'svelte';
+export declare function createFormCreatorContexts(): {
+    useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+    useFormContext: () => SvelteFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+};
+interface CreateFormRuneProps<TFieldComponents extends Record<string, Component<any, any>>, TFormComponents extends Record<string, Component<any, any>>> {
+    fieldComponents: TFieldComponents;
+    formComponents: TFormComponents;
+}
+/**
+ * @private
+ */
+type AppFieldExtendedSvelteFormApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TFieldComponents extends Record<string, Component<any, any>>, TFormComponents extends Record<string, Component<any, any>>> = SvelteFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<TFormComponents> & {
+    AppField: FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, NoInfer<TFieldComponents>>;
+    AppForm: Component<{
+        children: Snippet;
+    }>;
+};
+export declare function createFormCreator<const TComponents extends Record<string, Component<any, any>>, const TFormComponents extends Record<string, Component<any, any>>>({ fieldComponents, formComponents, }: CreateFormRuneProps<TComponents, TFormComponents>): {
+    createAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: () => FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedSvelteFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
+};
+export {};

package/dist/createFormCreator.svelte.js

@@ -0,0 +1,47 @@
+import { getContext } from 'svelte';
+import { createForm } from './createForm.svelte';
+import AppFormSvelte from './AppForm.svelte';
+import AppFieldSvelte from './AppField.svelte';
+import { fieldContextKey, formContextKey } from './context-keys.js';
+export function createFormCreatorContexts() {
+    function useFieldContext() {
+        const field = getContext(fieldContextKey);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!field) {
+            throw new Error('`fieldContext` only works when within a `fieldComponent` passed to `createFormCreator`');
+        }
+        return field;
+    }
+    function useFormContext() {
+        const form = getContext(formContextKey);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!form) {
+            throw new Error('`formContext` only works when within a `formComponent` passed to `createFormCreator`');
+        }
+        return form;
+    }
+    return { useFieldContext, useFormContext };
+}
+export function createFormCreator({ fieldComponents, formComponents, }) {
+    function createAppForm(props) {
+        const form = createForm(props);
+        const AppForm = ((internal, props) => {
+            return AppFormSvelte(internal, { ...props, form });
+        });
+        const AppField = ((internal, { children, ...fieldProps }) => AppFieldSvelte(internal, {
+            fieldProps,
+            form,
+            fieldComponents,
+            children,
+        }));
+        const extendedForm = Object.assign(form, {
+            AppField,
+            AppForm,
+            ...formComponents,
+        });
+        return extendedForm;
+    }
+    return {
+        createAppForm,
+    };
+}

package/dist/index.d.ts

@@ -3,3 +3,4 @@ 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';
+export { createFormCreator, createFormCreatorContexts, } from './createFormCreator.svelte.js';

package/dist/index.js

@@ -2,3 +2,4 @@ export * from '@tanstack/form-core';
 export { useStore } from '@tanstack/svelte-store';
 export { createForm } from './createForm.svelte.js';
 export { default as Field, createField } from './Field.svelte';
+export { createFormCreator, createFormCreatorContexts, } from './createFormCreator.svelte.js';

package/dist/types.d.ts

@@ -9,10 +9,10 @@ export type WithoutFunction<T> = {
 export interface SvelteFieldApi<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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> {
     Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
 }
-export type FieldComponent<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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = (<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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(internal: any, { children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>, 'form'>) => {}) & (new <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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(opts: ComponentConstructorOptions<Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>, 'form'>>) => SvelteComponent) & WithoutFunction<Component>;
-type FieldComponentProps<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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync 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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = {
+export type FieldComponent<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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta, ExtendedApi = {}> = (<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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(internal: any, { children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi>, 'form'>) => {}) & (new <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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(opts: ComponentConstructorOptions<Omit<FieldComponentProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta, ExtendedApi>, 'form'>>) => SvelteComponent) & WithoutFunction<Component>;
+type FieldComponentProps<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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync 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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta, ExtendedApi = {}> = {
     children: Snippet<[
-        FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>
+        FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ExtendedApi
     ]>;
 } & Omit<CreateFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>, 'form'>;
 export type CreateField<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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = <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>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TSubmitMeta>(opts: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-form",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "description": "Powerful, type-safe forms for Svelte.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.7.7",
-    "@tanstack/form-core": "1.26.0"
+    "@tanstack/form-core": "1.27.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.3",

package/src/AppField.svelte

@@ -0,0 +1,19 @@
+<!-- Take "form" as an prop, pass it to context, and render children -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import InnerAppField from './InnerAppField.svelte'
+
+  interface Props {
+    form: any
+    fieldComponents: any
+    children: Snippet
+    fieldProps: any
+  }
+  const { children, form, fieldComponents, fieldProps }: Props = $props()
+</script>
+
+<form.Field {...fieldProps}>
+  {#snippet children(field: any)}
+    <InnerAppField field={field} children={children} fieldComponents={fieldComponents}/>
+  {/snippet}
+</form.Field>

package/src/AppForm.svelte

@@ -0,0 +1,16 @@
+<!-- Take "form" as an prop, pass it to context, and render children -->
+<script lang="ts">
+  import { setContext, type Snippet } from 'svelte'
+  import { formContextKey } from './context-keys.js'
+
+  interface Props {
+    form: any
+    children: Snippet
+  }
+
+  const { children, form }: Props = $props()
+
+  setContext(formContextKey, form)
+</script>
+
+{@render children?.()}

package/src/InnerAppField.svelte

@@ -0,0 +1,17 @@
+<!-- Take "form" as an prop, pass it to context, and render children -->
+<script lang="ts">
+  import { setContext, type Snippet } from 'svelte'
+  import { fieldContextKey } from './context-keys.js'
+
+  interface Props {
+    field: any
+    fieldComponents: any
+    children: Snippet<[any]>
+  }
+
+  const { children, field, fieldComponents }: Props = $props()
+
+  setContext(fieldContextKey, field)
+</script>
+
+{@render children?.(Object.assign(field, fieldComponents))}

package/src/context-keys.ts

@@ -0,0 +1,2 @@
+export const fieldContextKey = '__tanstack_field_context_key'
+export const formContextKey = '__tanstack_form_context_key'

package/src/createForm.svelte.ts

@@ -179,6 +179,51 @@ export interface SvelteFormApi<
     WithoutFunction<Component>
 }
 
+/**
+ * An extended version of the `FormApi` class that includes Svelte-specific functionalities from `SvelteFormApi`
+ */
+export type SvelteFormExtendedApi<
+  TFormData,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+> = FormApi<
+  TFormData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnDynamic,
+  TOnDynamicAsync,
+  TOnServer,
+  TSubmitMeta
+> &
+  SvelteFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta
+  >
+
 export function createForm<
   TParentData,
   TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
@@ -241,10 +286,10 @@ export function createForm<
 
   // @ts-expect-error constructor definition exists only on a type level
   extendedApi.Field = (internal, props) =>
-    Field(internal, { ...props, form: api })
+    Field(internal, { ...props, form: api as never } as never)
   extendedApi.createField = (props) =>
     createField(() => {
-      return { ...props(), form: api }
+      return { ...props(), form: api } as never
     }) 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

package/src/createFormCreator.svelte.ts

@@ -0,0 +1,273 @@
+import { getContext } from 'svelte'
+import { createForm } from './createForm.svelte'
+import AppFormSvelte from './AppForm.svelte'
+import AppFieldSvelte from './AppField.svelte'
+import { fieldContextKey, formContextKey } from './context-keys.js'
+import type {
+  AnyFieldApi,
+  AnyFormApi,
+  FieldApi,
+  FormAsyncValidateOrFn,
+  FormOptions,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+import type { FieldComponent } from './types.js'
+import type { SvelteFormExtendedApi } from './createForm.svelte'
+import type { Component, Snippet, SvelteComponent } from 'svelte'
+
+/**
+ * TypeScript inferencing is weird.
+ *
+ * If you have:
+ *
+ * @example
+ *
+ * interface Args<T> {
+ *     arg?: T
+ * }
+ *
+ * function test<T>(arg?: Partial<Args<T>>): T {
+ *     return 0 as any;
+ * }
+ *
+ * const a = test({});
+ *
+ * Then `T` will default to `unknown`.
+ *
+ * However, if we change `test` to be:
+ *
+ * @example
+ *
+ * function test<T extends undefined>(arg?: Partial<Args<T>>): T;
+ *
+ * Then `T` becomes `undefined`.
+ *
+ * Here, we are checking if the passed type `T` extends `DefaultT` and **only**
+ * `DefaultT`, as if that's the case we assume that inferencing has not occured.
+ */
+type UnwrapOrAny<T> = [unknown] extends [T] ? any : T
+type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]
+  ? [T] extends [DefaultT]
+    ? any
+    : T
+  : T
+
+export function createFormCreatorContexts() {
+  function useFieldContext<TData>() {
+    const field = getContext(fieldContextKey) as AnyFieldApi
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!field) {
+      throw new Error(
+        '`fieldContext` only works when within a `fieldComponent` passed to `createFormCreator`',
+      )
+    }
+
+    return field as FieldApi<
+      any,
+      string,
+      TData,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >
+  }
+
+  function useFormContext() {
+    const form = getContext(formContextKey) as AnyFormApi
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!form) {
+      throw new Error(
+        '`formContext` only works when within a `formComponent` passed to `createFormCreator`',
+      )
+    }
+
+    return form as SvelteFormExtendedApi<
+      // If you need access to the form data, you need to use `withForm` instead
+      Record<string, never>,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >
+  }
+
+  return { useFieldContext, useFormContext }
+}
+
+interface CreateFormRuneProps<
+  TFieldComponents extends Record<string, Component<any, any>>,
+  TFormComponents extends Record<string, Component<any, any>>,
+> {
+  fieldComponents: TFieldComponents
+  formComponents: TFormComponents
+}
+
+/**
+ * @private
+ */
+type AppFieldExtendedSvelteFormApi<
+  TFormData,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+  TFieldComponents extends Record<string, Component<any, any>>,
+  TFormComponents extends Record<string, Component<any, any>>,
+> = SvelteFormExtendedApi<
+  TFormData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnDynamic,
+  TOnDynamicAsync,
+  TOnServer,
+  TSubmitMeta
+> &
+  NoInfer<TFormComponents> & {
+    AppField: FieldComponent<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta,
+      NoInfer<TFieldComponents>
+    >
+    AppForm: Component<{ children: Snippet }>
+  }
+
+export function createFormCreator<
+  const TComponents extends Record<string, Component<any, any>>,
+  const TFormComponents extends Record<string, Component<any, any>>,
+>({
+  fieldComponents,
+  formComponents,
+}: CreateFormRuneProps<TComponents, TFormComponents>) {
+  function createAppForm<
+    TFormData,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+  >(
+    props: () => FormOptions<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta
+    >,
+  ): AppFieldExtendedSvelteFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  > {
+    const form = createForm(props)
+
+    const AppForm = ((internal, props) => {
+      return AppFormSvelte(internal, { ...props, form })
+    }) as Component<{ children: Snippet }>
+
+    const AppField = ((internal, { children, ...fieldProps }) =>
+      AppFieldSvelte(internal, {
+        fieldProps,
+        form,
+        fieldComponents,
+        children,
+      } as never)) as FieldComponent<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta,
+      TComponents
+    >
+
+    const extendedForm = Object.assign(form, {
+      AppField,
+      AppForm,
+      ...formComponents,
+    })
+
+    return extendedForm
+  }
+
+  return {
+    createAppForm,
+  }
+}

package/src/index.ts

@@ -7,3 +7,8 @@ export { createForm, type SvelteFormApi } from './createForm.svelte.js'
 export { default as Field, createField } from './Field.svelte'
 
 export type { CreateField, FieldComponent } from './types.js'
+
+export {
+  createFormCreator,
+  createFormCreatorContexts,
+} from './createFormCreator.svelte.js'

package/src/types.ts

@@ -123,6 +123,7 @@ export type FieldComponent<
   TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
   TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
   TParentSubmitMeta,
+  ExtendedApi = {},
 > =
   // This giant type allows the type
   // - to be used as a function (which they are now in Svelte 5)
@@ -178,7 +179,8 @@ export type FieldComponent<
         TFormOnDynamic,
         TFormOnDynamicAsync,
         TFormOnServer,
-        TParentSubmitMeta
+        TParentSubmitMeta,
+        ExtendedApi
       >,
       'form'
     >,
@@ -235,7 +237,8 @@ export type FieldComponent<
             TFormOnDynamic,
             TFormOnDynamicAsync,
             TFormOnServer,
-            TParentSubmitMeta
+            TParentSubmitMeta,
+            ExtendedApi
           >,
           'form'
         >
@@ -275,6 +278,7 @@ type FieldComponentProps<
   TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
   TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
   TParentSubmitMeta,
+  ExtendedApi = {},
 > = {
   children: Snippet<
     [
@@ -302,7 +306,8 @@ type FieldComponentProps<
         TFormOnDynamicAsync,
         TFormOnServer,
         TParentSubmitMeta
-      >,
+      > &
+        ExtendedApi,
     ]
   >
 } & Omit<