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

package/dist/formApiTypes.public.d.ts

@@ -9,5 +9,29 @@ export interface SvelteFormSelectors<TFormData, TFormErrorTypes extends FormErro
 }
 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'];
+/**
+ * A Svelte form API whose form data and error types are erased.
+ *
+ * Use it for reusable Svelte components that only need core form operations,
+ * selectors, and the `Field`, `ArrayField`, `Subscribe`, or `FormGroup`
+ * components common to every Svelte form. Field paths and values are not
+ * checked against a particular form shape; use `SvelteFormType` when a
+ * component depends on one known form.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const { form }: { form: AnySvelteFormApi } = $props()
+ * </script>
+ *
+ * <form.Subscribe selector={(state) => state.isSubmitting}>
+ *   {#snippet children(isSubmitting)}
+ *     <button type="submit" disabled={isSubmitting}>
+ *       {isSubmitting ? 'Saving...' : 'Save'}
+ *     </button>
+ *   {/snippet}
+ * </form.Subscribe>
+ * ```
+ */
 export type AnySvelteFormApi = AnyFormApi & SvelteTanStackFormComponents<any, any, any> & SvelteFormSelectors<any, any>;
 export type { SvelteFormComponentMap } from './AppForm/componentMap.public';

package/dist/index.d.ts

@@ -4,8 +4,10 @@ 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 * from './Field.svelte';
+export { default as Field } from './Field.svelte';
+export * from './FormGroup.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
 export * from './FieldGroup/FieldGroupApi.public';
 export * from './FieldGroup/withFields.public';
 export * from './AppForm/SvelteAppFormApi.public';

package/dist/index.js

@@ -4,8 +4,10 @@ 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 * from './Field.svelte';
+export { default as Field } from './Field.svelte';
+export * from './FormGroup.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
 export * from './FieldGroup/FieldGroupApi.public';
 export * from './FieldGroup/withFields.public';
 export * from './AppForm/SvelteAppFormApi.public';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-form",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "Powerful, type-safe forms for Svelte.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -27,12 +27,11 @@
   },
   "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.1",
-    "@tanstack/form-core": "2.0.0-alpha.0"
+    "@tanstack/form-core": "2.0.0-alpha.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.3",

package/src/AppForm/AppForm.svelte

@@ -1,14 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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
-}