Skip to content

Commit 92896df

Browse files
docs(svelte): remove runes references (#1894)
* docs(svelte): remove runes references * ci: apply automated fixes and generate docs --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 15f3e39 commit 92896df

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

docs/framework/svelte/guides/form-composition.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ A common criticism of TanStack Form is its verbosity out-of-the-box. While this
77

88
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.
99

10-
## Custom Form Runes
10+
## Custom Form Methods
1111

12-
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.
12+
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.
1313

14-
At its most basic, `createFormCreator` is a function that returns a `createAppForm` rune.
14+
At its most basic, `createFormCreator` is a function that returns a `createAppForm` method.
1515

16-
> This un-customized `createAppForm` rune is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`.
16+
> This un-customized `createAppForm` method is identical to `createForm`, but that will quickly change as we add more options to `createFormCreator`.
1717
1818
```ts
1919
// form-context.ts
@@ -55,7 +55,7 @@ export const { createAppForm } = createFormCreator({
5555

5656
### Pre-bound Field Components
5757

58-
Once this scaffolding is in place, you can start adding custom field and form components to your form rune.
58+
Once this scaffolding is in place, you can start adding custom field and form components to your form method.
5959

6060
> Note: the `useFieldContext` must be the same one exported from your custom form context
6161
@@ -79,7 +79,7 @@ Once this scaffolding is in place, you can start adding custom field and form co
7979
</label>
8080
```
8181

82-
You're then able to register this component with your form rune.
82+
You're then able to register this component with your form method.
8383

8484
```ts
8585
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
327327
## Tree-shaking form and field components
328328

329329
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.
330-
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.
330+
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.
331331

332332
To solve this, you can use dynamic imports with Svelte's component loading:
333333

334334
```ts
335-
// src/runes/form-context.ts
335+
// src/utils/form-context.ts
336336
import { createFormCreatorContexts } from '@tanstack/svelte-form'
337337

338338
export const { useFieldContext, useFormContext } = createFormCreatorContexts()
@@ -341,7 +341,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
341341
```svelte
342342
<!-- src/components/text-field.svelte -->
343343
<script lang="ts">
344-
import { useFieldContext } from '../runes/form-context.js'
344+
import { useFieldContext } from '../utils/form-context.js'
345345
346346
const field = useFieldContext<string>()
347347
@@ -358,7 +358,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
358358
```
359359

360360
```ts
361-
// src/runes/form.ts
361+
// src/utils/form.ts
362362
import { createFormCreator } from '@tanstack/svelte-form'
363363
import TextField from '../components/text-field.svelte'
364364
import SubscribeButton from '../components/subscribe-button.svelte'
@@ -384,10 +384,10 @@ export const { createAppForm } = createFormCreator({
384384

385385
## Putting it all together
386386

387-
Now that we've covered the basics of creating custom form runes, let's put it all together in a single example.
387+
Now that we've covered the basics of creating custom form methods, let's put it all together in a single example.
388388

389389
```ts
390-
// /src/runes/form-context.ts, to be used across the entire app
390+
// /src/utils/form-context.ts, to be used across the entire app
391391
import { createFormCreatorContexts } from '@tanstack/svelte-form'
392392

393393
export const { useFieldContext, useFormContext } = createFormCreatorContexts()
@@ -396,7 +396,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
396396
```svelte
397397
<!-- /src/components/text-field.svelte -->
398398
<script lang="ts">
399-
import { useFieldContext } from '../runes/form-context.js'
399+
import { useFieldContext } from '../utils/form-context.js'
400400
401401
const field = useFieldContext<string>()
402402
@@ -415,7 +415,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
415415
```svelte
416416
<!-- /src/components/subscribe-button.svelte -->
417417
<script lang="ts">
418-
import { useFormContext } from '../runes/form-context.js'
418+
import { useFormContext } from '../utils/form-context.js'
419419
420420
const form = useFormContext()
421421
@@ -432,7 +432,7 @@ export const { useFieldContext, useFormContext } = createFormCreatorContexts()
432432
```
433433

434434
```ts
435-
// /src/runes/form.ts
435+
// /src/utils/form.ts
436436
import { createFormCreator } from '@tanstack/svelte-form'
437437
import TextField from '../components/text-field.svelte'
438438
import SubscribeButton from '../components/subscribe-button.svelte'
@@ -462,7 +462,7 @@ export const peopleFormOpts = formOptions({
462462
```svelte
463463
<!-- /src/features/people/child-form.svelte, to be used in the `people` page -->
464464
<script lang="ts">
465-
import type { createAppForm } from '../../runes/form.js'
465+
import type { createAppForm } from '../../utils/form.js'
466466
import { peopleFormOpts } from './shared-form.js'
467467
468468
type AppForm = ReturnType<typeof createAppForm<typeof peopleFormOpts.defaultValues>>
@@ -488,7 +488,7 @@ export const peopleFormOpts = formOptions({
488488
```svelte
489489
<!-- /src/features/people/page.svelte -->
490490
<script lang="ts">
491-
import { createAppForm } from '../../runes/form.js'
491+
import { createAppForm } from '../../utils/form.js'
492492
import { peopleFormOpts } from './shared-form.js'
493493
import ChildForm from './child-form.svelte'
494494

0 commit comments

Comments
 (0)