@tanstack/svelte-form 1.33.3 → 2.0.0-alpha.0

package/dist/createForm.svelte.d.ts

@@ -1,29 +1,13 @@
-import { FormApi } from '@tanstack/form-core';
-import type { Component, ComponentConstructorOptions, Snippet, SvelteComponent } from 'svelte';
-import type { FormAsyncValidateOrFn, FormOptions, FormState, FormValidateOrFn } from '@tanstack/form-core';
-import type { FieldComponent, FormGroupComponent, 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>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> {
-    Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
-    FormGroup: FormGroupComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>;
-    useSelector: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => {
-        current: TSelected;
+import type { FormOptions } from '@tanstack/form-core';
+import type { Component } from 'svelte';
+import type { AnyInternalFormApi } from '@tanstack/form-core/internals';
+import type { SvelteTanStackFormComponents } from './Components.public';
+export interface InternalSvelteFormApi extends AnyInternalFormApi, SvelteTanStackFormComponents<any, any, any> {
+    _Subscribe: Component<any>;
+    useSelector: <TSelected = any>(selector?: (state: any) => TSelected) => {
+        readonly current: TSelected;
     };
-    /**
-     * @deprecated Use `form.useSelector` instead.
-     */
-    useStore: <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected) => {
-        current: TSelected;
-    };
-    Subscribe: (<TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(internal: any, props: {
-        selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected;
-        children: Snippet<[NoInfer<TSelected>]>;
-    }) => {}) & (new <TSelected = NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>>(opts: ComponentConstructorOptions<{
-        selector?: (state: NoInfer<FormState<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer>>) => TSelected;
-        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>;
+export declare function attachSvelteFormComponents(form: AnyInternalFormApi, fieldComponents: Record<string, Component<any>> | null): InternalSvelteFormApi;
+export declare function initializeForm(options: FormOptions<any, any, any>): InternalSvelteFormApi;
+export declare function createInternalForm(options: () => FormOptions<any, any, any>, initialize: (options: FormOptions<any, any, any>) => InternalSvelteFormApi): InternalSvelteFormApi;

package/dist/createForm.svelte.js

@@ -1,25 +1,35 @@
-import { FormApi } from '@tanstack/form-core';
+import { InternalFormApi } from '@tanstack/form-core/internals';
 import { useSelector } from '@tanstack/svelte-store';
 import { onMount } from 'svelte';
 import Field from './Field.svelte';
 import FormGroup from './FormGroup.svelte';
 import Subscribe from './Subscribe.svelte';
-export function createForm(opts) {
-    const options = opts?.();
-    const api = new FormApi(options);
-    const extendedApi = api;
-    // @ts-expect-error constructor definition exists only on a type level
-    extendedApi.Field = (internal, props) => Field(internal, { ...props, form: api });
-    // @ts-expect-error constructor definition exists only on a type level
-    extendedApi.FormGroup = (internal, props) => FormGroup(internal, { ...props, form: api });
-    extendedApi.useSelector = (selector) => useSelector(api.store, selector);
-    /** @deprecated Use `form.useSelector` instead. */
-    extendedApi.useStore = extendedApi.useSelector;
-    // @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;
+import { withComponentProps } from './utils.lib.js';
+export function attachSvelteFormComponents(form, fieldComponents) {
+    const result = form;
+    result.Field = ((internals, props) => Field(internals, withComponentProps(props, {
+        form,
+        fieldComponents: fieldComponents ?? {},
+    })));
+    result.ArrayField = ((internals, props) => Field(internals, withComponentProps(props, {
+        form,
+        array: true,
+        fieldComponents: fieldComponents ?? {},
+    })));
+    result._Subscribe = (internals, props) => Subscribe(internals, props);
+    result.Subscribe = ((internals, props) => Subscribe(internals, withComponentProps(props, { source: form.atom })));
+    result.FormGroup = ((internals, props) => FormGroup(internals, withComponentProps(props, { form })));
+    result.useSelector = ((selector) => useSelector(form.atom, selector));
+    return result;
+}
+export function initializeForm(options) {
+    return attachSvelteFormComponents(new InternalFormApi(options), null);
+}
+export function createInternalForm(options, initialize) {
+    const form = initialize(options());
+    $effect.pre(() => {
+        form._update(options());
+    });
+    onMount(() => form.mount());
+    return form;
 }

package/dist/formApiTypes.public.d.ts

@@ -0,0 +1,13 @@
+import type { AnyFormApi, FormApi, FormErrorTypes, FormState } from '@tanstack/form-core';
+import type { Component } from 'svelte';
+import type { SvelteTanStackFormComponents } from './Components.public';
+import type { AnySvelteFormComponentMap, DefaultSvelteFormComponentMap } from './AppForm/componentMap.public';
+export interface SvelteFormSelectors<TFormData, TFormErrorTypes extends FormErrorTypes> {
+    useSelector: <TSelected = FormState<TFormData, TFormErrorTypes>>(selector?: (state: FormState<TFormData, TFormErrorTypes>) => TSelected) => {
+        readonly current: TSelected;
+    };
+}
+type ExtendedFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TFieldComponents extends Record<string, Component<any>>> = FormApi<TFormData, TFormErrorTypes> & SvelteTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents> & SvelteFormSelectors<TFormData, TFormErrorTypes>;
+export type SvelteFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TComponents extends AnySvelteFormComponentMap = DefaultSvelteFormComponentMap> = unknown extends TComponents['formComponents'] ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> : ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> & TComponents['formComponents'];
+export type AnySvelteFormApi = AnyFormApi & SvelteTanStackFormComponents<any, any, any> & SvelteFormSelectors<any, any>;
+export type { SvelteFormComponentMap } from './AppForm/componentMap.public';

package/dist/formApiTypes.public.js

@@ -0,0 +1 @@
+export {};

package/dist/formType.public.d.ts

@@ -0,0 +1,7 @@
+import type { AnyFormOptions, FormOptions, FormValidators, ToFormErrorTypes } from '@tanstack/form-core';
+import type { AppFormOptions } from './AppForm/appFormOptions.public';
+import type { AnySvelteFormComponentMap, DefaultSvelteFormComponentMap } from './AppForm/componentMap.public';
+import type { SvelteFormApi } from './formApiTypes.public';
+type SvelteFormTypeErrorTypes<TValidators extends FormValidators<any>, TSubmitReturn> = unknown extends TSubmitReturn ? any : ToFormErrorTypes<TValidators, TSubmitReturn>;
+export type SvelteFormType<TOptions extends AnyFormOptions | AppFormOptions<any, any, any, AnySvelteFormComponentMap>> = TOptions extends AppFormOptions<infer TData, infer TValidators, infer TSubmitReturn, infer TComponents> ? SvelteFormApi<TData, SvelteFormTypeErrorTypes<TValidators, TSubmitReturn>, TComponents> : TOptions extends FormOptions<infer TData, infer TValidators, infer TSubmitReturn> ? SvelteFormApi<TData, SvelteFormTypeErrorTypes<TValidators, TSubmitReturn>, DefaultSvelteFormComponentMap> : never;
+export {};

package/dist/formType.public.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,7 +1,16 @@
 export * from '@tanstack/form-core';
-export { useSelector, useStore } from '@tanstack/svelte-store';
-export { createForm, type SvelteFormApi } from './createForm.svelte.js';
+export * from '@tanstack/svelte-store';
+export * from './createForm.public';
+export * from './formApiTypes.public';
+export * from './formType.public';
+export * from './Components.public';
 export { default as Field, createField } from './Field.svelte';
 export { default as FormGroup, createFormGroup } from './FormGroup.svelte';
-export type { FieldComponent, FormGroupComponent } from './types.js';
-export { createFormCreator, createFormCreatorContexts, } from './createFormCreator.svelte.js';
+export * from './FieldGroup/FieldGroupApi.public';
+export * from './FieldGroup/withFields.public';
+export * from './AppForm/SvelteAppFormApi.public';
+export * from './AppForm/appFormOptions.public';
+export * from './AppForm/componentMap.public';
+export * from './AppForm/createFormHook.public';
+export * from './AppForm/createFormHookTypes.public';
+export * from './AppForm/getFormHookHelpers.public';

package/dist/index.js

@@ -1,6 +1,16 @@
 export * from '@tanstack/form-core';
-export { useSelector, useStore } from '@tanstack/svelte-store';
-export { createForm } from './createForm.svelte.js';
+export * from '@tanstack/svelte-store';
+export * from './createForm.public';
+export * from './formApiTypes.public';
+export * from './formType.public';
+export * from './Components.public';
 export { default as Field, createField } from './Field.svelte';
 export { default as FormGroup, createFormGroup } from './FormGroup.svelte';
-export { createFormCreator, createFormCreatorContexts, } from './createFormCreator.svelte.js';
+export * from './FieldGroup/FieldGroupApi.public';
+export * from './FieldGroup/withFields.public';
+export * from './AppForm/SvelteAppFormApi.public';
+export * from './AppForm/appFormOptions.public';
+export * from './AppForm/componentMap.public';
+export * from './AppForm/createFormHook.public';
+export * from './AppForm/createFormHookTypes.public';
+export * from './AppForm/getFormHookHelpers.public';

package/dist/utils.lib.d.ts

@@ -0,0 +1 @@
+export declare function withComponentProps<TProps extends object, TExtra extends object>(props: TProps, extra: TExtra): TProps & TExtra;

package/dist/utils.lib.js

@@ -0,0 +1,28 @@
+export function withComponentProps(props, extra) {
+    return new Proxy(props, {
+        get(target, property, receiver) {
+            if (Reflect.has(extra, property))
+                return Reflect.get(extra, property);
+            return Reflect.get(target, property, receiver);
+        },
+        has(target, property) {
+            return Reflect.has(extra, property) || Reflect.has(target, property);
+        },
+        ownKeys(target) {
+            return [
+                ...new Set([...Reflect.ownKeys(target), ...Reflect.ownKeys(extra)]),
+            ];
+        },
+        getOwnPropertyDescriptor(target, property) {
+            if (Reflect.has(extra, property)) {
+                return {
+                    configurable: true,
+                    enumerable: true,
+                    value: Reflect.get(extra, property),
+                    writable: false,
+                };
+            }
+            return Reflect.getOwnPropertyDescriptor(target, property);
+        },
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-form",
-  "version": "1.33.3",
+  "version": "2.0.0-alpha.0",
   "description": "Powerful, type-safe forms for Svelte.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -31,15 +31,15 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/form-core": "1.33.3"
+    "@tanstack/svelte-store": "^0.12.1",
+    "@tanstack/form-core": "2.0.0-alpha.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.3",
-    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@testing-library/svelte": "^5.2.8",
     "svelte": "^5.39.4",
-    "svelte-check": "^4.3.1"
+    "svelte-check": "^4.7.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/AppForm/AppForm.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { setContext, untrack, type Snippet } from 'svelte'
+  import { formContextKey } from '../context-keys.js'
+
+  interface Props {
+    form: any
+    children: Snippet
+  }
+
+  const { children, form }: Props = $props()
+  setContext(formContextKey, untrack(() => form))
+</script>
+
+{@render children()}

package/src/AppForm/Components.lib.ts

@@ -0,0 +1,28 @@
+import { attachSvelteFormComponents } from '../createForm.svelte'
+import { withComponentProps } from '../utils.lib.js'
+import AppForm from './AppForm.svelte'
+import type { AnyInternalFormApi } from '@tanstack/form-core/internals'
+import type { Component } from 'svelte'
+import type { AnySvelteFormComponentMap } from './componentMap.public'
+import type { SvelteAppFormApi } from './SvelteAppFormApi.public'
+
+type AnySvelteAppFormApi = SvelteAppFormApi<any, any, AnySvelteFormComponentMap>
+
+export function attachSvelteAppFormComponents(
+  form: AnyInternalFormApi,
+  formComponents: Record<string, Component<any>>,
+  fieldComponents: Record<string, Component<any>>,
+): AnySvelteAppFormApi {
+  const result = attachSvelteFormComponents(
+    form,
+    fieldComponents,
+  ) as never as AnySvelteAppFormApi
+
+  result.AppForm = ((internals: any, props: any) =>
+    AppForm(
+      internals,
+      withComponentProps(props, { form: result }),
+    )) as Component<any>
+
+  return Object.assign(result, formComponents)
+}

package/src/AppForm/SvelteAppFormApi.public.ts

@@ -0,0 +1,14 @@
+import type { FormErrorTypes } from '@tanstack/form-core'
+import type { Component, Snippet } from 'svelte'
+import type { SvelteFormApi } from '../formApiTypes.public'
+import type { AnySvelteFormComponentMap } from './componentMap.public'
+
+export type AppFormComponent = Component<{ children: Snippet }>
+
+export type SvelteAppFormApi<
+  TFormData,
+  TFormErrorTypes extends FormErrorTypes,
+  TComponents extends AnySvelteFormComponentMap,
+> = SvelteFormApi<TFormData, TFormErrorTypes, TComponents> & {
+  AppForm: AppFormComponent
+}

package/src/AppForm/appFormOptions.public.ts

@@ -0,0 +1,57 @@
+import type {
+  FormOptions,
+  FormValidatorData,
+  FormValidators,
+  InferUnion,
+  NullableSchemaData,
+} from '@tanstack/form-core'
+import type { AnySvelteFormComponentMap } from './componentMap.public'
+
+declare const componentsSymbol: unique symbol
+
+export interface AppFormOptions<
+  TFormData,
+  TFormValidators extends FormValidators<TFormData>,
+  TSubmitReturn,
+  TComponents extends AnySvelteFormComponentMap,
+> extends FormOptions<TFormData, TFormValidators, TSubmitReturn> {
+  [componentsSymbol]: TComponents
+}
+
+export interface AppFormOptionsApi<
+  TComponents extends AnySvelteFormComponentMap,
+> {
+  <
+    TFormData,
+    const TFormValidators extends FormValidators<TFormData>,
+    TSubmitReturn,
+  >(
+    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+  ): AppFormOptions<TFormData, TFormValidators, TSubmitReturn, TComponents>
+
+  strictSchema: <
+    const TFormValidators extends FormValidators<any>,
+    TFormData extends FormValidatorData<TFormValidators>,
+    TSubmitReturn,
+  >(
+    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+  ) => AppFormOptions<
+    FormValidatorData<TFormValidators>,
+    TFormValidators,
+    TSubmitReturn,
+    TComponents
+  >
+
+  looseSchema: <
+    const TFormValidators extends FormValidators<any>,
+    const TFormData extends NullableSchemaData<TFormValidators>,
+    TSubmitReturn,
+  >(
+    options: FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+  ) => AppFormOptions<
+    InferUnion<TFormData, FormValidatorData<TFormValidators>>,
+    TFormValidators,
+    TSubmitReturn,
+    TComponents
+  >
+}

package/src/AppForm/componentMap.public.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'svelte'
+
+export interface SvelteFormComponentMap<
+  TFormComponents extends Record<string, Component<any>>,
+  TFieldComponents extends Record<string, Component<any>>,
+> {
+  formComponents: TFormComponents
+  fieldComponents: TFieldComponents
+}
+
+export type AnySvelteFormComponentMap = SvelteFormComponentMap<
+  Record<string, Component<any>>,
+  Record<string, Component<any>>
+>
+
+export type DefaultSvelteFormComponentMap = SvelteFormComponentMap<
+  Record<never, never>,
+  Record<never, never>
+>

package/src/AppForm/contexts.lib.ts

@@ -0,0 +1,24 @@
+import { getContext } from 'svelte'
+import { fieldContextKey, formContextKey } from '../context-keys.js'
+import type { AnyInternalFieldApi } from '@tanstack/form-core/internals'
+import type { InternalSvelteFormApi } from '../createForm.svelte.js'
+
+export function useFieldContext(): AnyInternalFieldApi {
+  const field = getContext<AnyInternalFieldApi | undefined>(fieldContextKey)
+  if (field === undefined) {
+    throw new Error(
+      'TanStack Form: Field components must be used within a `form.Field` component.',
+    )
+  }
+  return field
+}
+
+export function useFormContext(): InternalSvelteFormApi {
+  const form = getContext<InternalSvelteFormApi | undefined>(formContextKey)
+  if (form === undefined) {
+    throw new Error(
+      'TanStack Form: Form components must be used within a `form.AppForm` component.',
+    )
+  }
+  return form
+}

package/src/AppForm/createFormHook.public.ts

@@ -0,0 +1,33 @@
+import { createInternalForm } from '../createForm.svelte'
+import { defineFieldGroup } from '../FieldGroup/withFields.public'
+import { createAppFormInitializer } from './initializeAppForm.lib'
+import { useFormContext } from './contexts.lib'
+import type { AppFormOptionsApi } from './appFormOptions.public'
+import type { AnySvelteFormComponentMap } from './componentMap.public'
+import type {
+  AppFormHookResult,
+  UseAppFormHook,
+} from './createFormHookTypes.public'
+import type { FormOptions } from '@tanstack/form-core'
+
+const appFormOptions = ((opts: unknown) => opts) as AppFormOptionsApi<any>
+appFormOptions.strictSchema = (opts) => opts as never
+appFormOptions.looseSchema = (opts) => opts as never
+
+export function createFormHook<
+  const TComponents extends AnySvelteFormComponentMap,
+>(createOptions: TComponents): AppFormHookResult<TComponents> {
+  const initializeAppForm = createAppFormInitializer(createOptions)
+
+  function useExtendedForm(options: () => FormOptions<any, any, any>) {
+    return createInternalForm(options, initializeAppForm)
+  }
+  const useAppForm = useExtendedForm as never as UseAppFormHook<TComponents>
+
+  return {
+    useFormContext: useFormContext as never,
+    appFormOptions,
+    defineAppFieldGroup: defineFieldGroup,
+    useAppForm,
+  }
+}

package/src/AppForm/createFormHookTypes.public.ts

@@ -0,0 +1,30 @@
+import type { AppFormOptionsApi } from './appFormOptions.public'
+import type { AnySvelteFormComponentMap } from './componentMap.public'
+import type { SvelteAppFormApi } from './SvelteAppFormApi.public'
+import type { DefineFieldGroupFn } from '../FieldGroup/withFields.public'
+import type {
+  FormOptions,
+  FormValidators,
+  ToFormErrorTypes,
+} from '@tanstack/form-core'
+
+export type UseAppFormHook<TComponents extends AnySvelteFormComponentMap> = <
+  TFormData,
+  TFormValidators extends FormValidators<TFormData>,
+  TSubmitReturn,
+>(
+  options: () => FormOptions<TFormData, TFormValidators, TSubmitReturn>,
+) => SvelteAppFormApi<
+  TFormData,
+  ToFormErrorTypes<TFormValidators, TSubmitReturn>,
+  TComponents
+>
+
+export interface AppFormHookResult<
+  TComponents extends AnySvelteFormComponentMap,
+> {
+  appFormOptions: AppFormOptionsApi<TComponents>
+  defineAppFieldGroup: DefineFieldGroupFn<TComponents['fieldComponents']>
+  useAppForm: UseAppFormHook<TComponents>
+  useFormContext: () => SvelteAppFormApi<any, any, TComponents>
+}

package/src/AppForm/fieldComponentHelpers.lib.ts

@@ -0,0 +1,24 @@
+import { withComponentProps } from '../utils.lib.js'
+import { useFieldContext } from './contexts.lib'
+import type { Component } from 'svelte'
+
+type AnyFieldComponent = Component<any>
+
+export function wrapField(
+  Component: AnyFieldComponent,
+  fieldPropKey: string,
+): AnyFieldComponent {
+  return ((internals: any, props: any) =>
+    Component(
+      internals,
+      withComponentProps(props, {
+        [fieldPropKey]: useFieldContext(),
+      }),
+    )) as AnyFieldComponent
+}
+
+export function brandComponentFactory(): (
+  component: AnyFieldComponent,
+) => AnyFieldComponent {
+  return (component) => component
+}

package/src/AppForm/getFormHookHelpers.public.ts

@@ -0,0 +1,82 @@
+import { brandComponentFactory, wrapField } from './fieldComponentHelpers.lib'
+import type { Component, ComponentProps } from 'svelte'
+import type { FieldWithValue } from '@tanstack/form-core'
+
+type ExactFieldBrand<out TValue> = {
+  readonly __tanstackFieldExactType: TValue
+}
+type AcceptsFieldBrand<out TAcceptedValue> = {
+  readonly __tanstackFieldAcceptsType: TAcceptedValue
+}
+type AnyFieldComponent = Component<any>
+type PropsOf<TComponent extends AnyFieldComponent> = ComponentProps<TComponent>
+type FieldValuePropKeys<TProps> = {
+  [K in keyof TProps]-?: TProps[K] extends FieldWithValue<any> ? K : never
+}[keyof TProps]
+type FieldValueFromProp<TProp> =
+  TProp extends FieldWithValue<infer TValue> ? TValue : never
+type PublicPropsReplacingField<
+  TProps,
+  TFieldPropKey extends keyof TProps,
+> = Omit<TProps, TFieldPropKey>
+
+type StrictInjectedFieldComponent<
+  TComponent extends AnyFieldComponent,
+  TProps = PropsOf<TComponent>,
+  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
+> = Component<PublicPropsReplacingField<TProps, TFieldPropKey>> &
+  ExactFieldBrand<FieldValueFromProp<TProps[TFieldPropKey]>>
+type LooseInjectedFieldComponent<
+  TComponent extends AnyFieldComponent,
+  TProps = PropsOf<TComponent>,
+  TFieldPropKey extends FieldValuePropKeys<TProps> = FieldValuePropKeys<TProps>,
+> = Component<PublicPropsReplacingField<TProps, TFieldPropKey>> &
+  AcceptsFieldBrand<FieldValueFromProp<TProps[TFieldPropKey]>>
+
+interface FieldComponentHelper {
+  strict: <
+    TComponent extends AnyFieldComponent,
+    TProps = PropsOf<TComponent>,
+    TFieldPropKey extends FieldValuePropKeys<TProps> =
+      FieldValuePropKeys<TProps>,
+  >(
+    Component: TComponent,
+    fieldPropKey: TFieldPropKey,
+  ) => StrictInjectedFieldComponent<TComponent, TProps, TFieldPropKey>
+  loose: <
+    TComponent extends AnyFieldComponent,
+    TProps = PropsOf<TComponent>,
+    TFieldPropKey extends FieldValuePropKeys<TProps> =
+      FieldValuePropKeys<TProps>,
+  >(
+    Component: TComponent,
+    fieldPropKey: TFieldPropKey,
+  ) => LooseInjectedFieldComponent<TComponent, TProps, TFieldPropKey>
+}
+
+interface FieldBrandHelper {
+  strict: <TValue>() => <TComponent extends AnyFieldComponent>(
+    component: TComponent,
+  ) => TComponent & ExactFieldBrand<TValue>
+  loose: <TValue>() => <TComponent extends AnyFieldComponent>(
+    component: TComponent,
+  ) => TComponent & AcceptsFieldBrand<TValue>
+}
+
+export interface FormHookHelpers {
+  fieldBrand: FieldBrandHelper
+  fieldComponent: FieldComponentHelper
+}
+
+export function getFormHookHelpers(): FormHookHelpers {
+  return {
+    fieldComponent: {
+      strict: wrapField as FieldComponentHelper['strict'],
+      loose: wrapField as FieldComponentHelper['loose'],
+    },
+    fieldBrand: {
+      strict: brandComponentFactory as FieldBrandHelper['strict'],
+      loose: brandComponentFactory as FieldBrandHelper['loose'],
+    },
+  }
+}

package/src/AppForm/initializeAppForm.lib.ts

@@ -0,0 +1,18 @@
+import { InternalFormApi } from '@tanstack/form-core/internals'
+import { attachSvelteAppFormComponents } from './Components.lib'
+import type { FormOptions } from '@tanstack/form-core'
+import type { InternalSvelteFormApi } from '../createForm.svelte.js'
+import type { AnySvelteFormComponentMap } from './componentMap.public'
+
+export function createAppFormInitializer<
+  TComponents extends AnySvelteFormComponentMap,
+>(
+  createOptions: TComponents,
+): (options: FormOptions<any, any, any>) => InternalSvelteFormApi {
+  return (options) =>
+    attachSvelteAppFormComponents(
+      new InternalFormApi(options),
+      createOptions.formComponents,
+      createOptions.fieldComponents,
+    ) as never
+}