diff --git a/docs/framework/svelte/guides/form-composition.md b/docs/framework/svelte/guides/form-composition.md index f9fbc0dda..da55ec10e 100644 --- a/docs/framework/svelte/guides/form-composition.md +++ b/docs/framework/svelte/guides/form-composition.md @@ -7,13 +7,13 @@ A common criticism of TanStack Form is its verbosity out-of-the-box. While this As a result, while `form.Field` enables the most powerful and flexible usage of TanStack Form, we provide APIs that wrap it and make your application code less verbose. -## Custom Form Runes +## Custom Form Methods -The most powerful way to compose forms is to create custom form runes. This allows you to create a form rune that is tailored to your application's needs, including pre-bound custom UI components and more. +The most powerful way to compose forms is to create custom form methods. This allows you to create a form method that is tailored to your application's needs, including pre-bound custom UI components and more. -At its most basic, `createFormCreator` is a function that returns a `createAppForm` rune. +At its most basic, `createFormCreator` is a function that returns a `createAppForm` method. -> This un-customized `createAppForm` rune is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`. +> This un-customized `createAppForm` method is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`. ```ts // form-context.ts @@ -55,7 +55,7 @@ export const { createAppForm } = createFormCreator({ ### Pre-bound Field Components -Once this scaffolding is in place, you can start adding custom field and form components to your form rune. +Once this scaffolding is in place, you can start adding custom field and form components to your form method. > Note: the `useFieldContext` must be the same one exported from your custom form context @@ -79,7 +79,7 @@ Once this scaffolding is in place, you can start adding custom field and form co ``` -You're then able to register this component with your form rune. +You're then able to register this component with your form method. ```ts import { createFormCreator } from '@tanstack/svelte-form' @@ -327,12 +327,12 @@ We can now use these grouped fields in any form that implements the required fie ## Tree-shaking form and field components While the above examples are great for getting started, they're not ideal for certain use-cases where you might have hundreds of form and field components. -In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form rune. +In particular, you may not want to include all of your form and field components in the bundle of every file that uses your form method. To solve this, you can use dynamic imports with Svelte's component loading: ```ts -// src/runes/form-context.ts +// src/utils/form-context.ts import { createFormCreatorContexts } from '@tanstack/svelte-form' export const { useFieldContext, useFormContext } = createFormCreatorContexts() @@ -341,7 +341,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts() ```svelte