Skip to content

Commit a61f12f

Browse files
Sync svelte docs (#1684)
sync svelte docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 3a7b9f6 commit a61f12f

File tree

10 files changed

+42
-16
lines changed

10 files changed

+42
-16
lines changed

apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ Svelte 4 contained hooks that ran before and after the component as a whole was
9595
</script>
9696
```
9797

98-
Instead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead - these runes offer more granular control and only react to the changes you're actually interested in.
98+
Instead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead these runes offer more granular control and only react to the changes you're actually interested in.
9999

100100
### Chat window example
101101

apps/svelte.dev/content/docs/svelte/06-runtime/05-hydratable.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ In Svelte, when you want to render asynchronous content data on the server, you
1818
<h1>{user.name}</h1>
1919
```
2020

21-
That's silly, though. If we've already done the hard work of getting the data on the server, we don't want to get it again during hydration on the client. `hydratable` is a low-level API built to solve this problem. You probably won't need this very often -- it will be used behind the scenes by whatever datafetching library you use. For example, it powers [remote functions in SvelteKit](/docs/kit/remote-functions).
21+
That's silly, though. If we've already done the hard work of getting the data on the server, we don't want to get it again during hydration on the client. `hydratable` is a low-level API built to solve this problem. You probably won't need this very often it will be used behind the scenes by whatever datafetching library you use. For example, it powers [remote functions in SvelteKit](/docs/kit/remote-functions).
2222

2323
To fix the example above:
2424

apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ E2E (short for 'end to end') tests allow you to test your full application throu
295295

296296
You can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE.
297297

298-
If you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests - mainly starting your application at a certain port. For example:
298+
If you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests mainly starting your application at a certain port. For example:
299299

300300
```js
301301
/// file: playwright.config.js

apps/svelte.dev/content/docs/svelte/07-misc/06-v4-migration-guide.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ Transitions are now local by default to prevent confusion around page navigation
138138
{/if}
139139
```
140140
141-
To make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
141+
To make transitions global, add the `|global` modifier then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
142142
143143
## Default slot bindings
144144
@@ -151,10 +151,10 @@ Default slot bindings are no longer exposed to named slots and vice versa:
151151

152152
<Nested let:count>
153153
<p>
154-
count in default slot - is available: {count}
154+
count in default slot is available: {count}
155155
</p>
156156
<p slot="bar">
157-
count in bar slot - is not available: {count}
157+
count in bar slot is not available: {count}
158158
</p>
159159
</Nested>
160160
```

apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: Svelte 5 migration guide
55

66
Version 5 comes with an overhauled syntax and reactivity system. While it may look different at first, you'll soon notice many similarities. This guide goes over the changes in detail and shows you how to upgrade. Along with it, we also provide information on _why_ we did these changes.
77

8-
You don't have to migrate to the new syntax right away - Svelte 5 still supports the old Svelte 4 syntax, and you can mix and match components using the new syntax with components using the old and vice versa. We expect many people to be able to upgrade with only a few lines of code changed initially. There's also a [migration script](#Migration-script) that helps you with many of these steps automatically.
8+
You don't have to migrate to the new syntax right away Svelte 5 still supports the old Svelte 4 syntax, and you can mix and match components using the new syntax with components using the old and vice versa. We expect many people to be able to upgrade with only a few lines of code changed initially. There's also a [migration script](#Migration-script) that helps you with many of these steps automatically.
99

1010
## Reactivity syntax changes
1111

@@ -24,7 +24,7 @@ In Svelte 4, a `let` declaration at the top level of a component was implicitly
2424
Nothing else changes. `count` is still the number itself, and you read and write directly to it, without a wrapper like `.value` or `getCount()`.
2525

2626
> [!DETAILS] Why we did this
27-
> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
27+
> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
2828
2929
### $: → $derived/$effect
3030

@@ -121,7 +121,7 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
121121
122122
## Event changes
123123

124-
Event handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the `on:` directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words - remove the colon):
124+
Event handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the `on:` directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words remove the colon):
125125

126126
```svelte
127127
<script>
@@ -155,7 +155,7 @@ Since they're just properties, you can use the normal shorthand syntax...
155155

156156
In Svelte 4, components could emit events by creating a dispatcher with `createEventDispatcher`.
157157

158-
This function is deprecated in Svelte 5. Instead, components should accept _callback props_ - which means you then pass functions as properties to these components:
158+
This function is deprecated in Svelte 5. Instead, components should accept _callback props_ which means you then pass functions as properties to these components:
159159

160160
```svelte
161161
<!--- file: App.svelte --->
@@ -463,7 +463,7 @@ In Svelte 4, you would pass data to a `<slot />` and then retrieve it with `let:
463463
464464
## Migration script
465465

466-
By now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive - something you don't want to do by hand.
466+
By now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive something you don't want to do by hand.
467467

468468
We thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following things:
469469

apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ There are several [UI component libraries](/packages#component-libraries) as wel
7070

7171
## How do I test Svelte apps?
7272

73-
How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
73+
How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
7474

7575
A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
7676

apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ Hydration failed because the initial UI does not match what was rendered on the
237237
238238
This warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.
239239
240-
During development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.
240+
During development, this error is often preceded by a `console.error` detailing the offending HTML, which needs fixing.
241241
242242
### invalid_raw_snippet_render
243243

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
migrate,
1515
parse,
1616
preprocess,
17+
print,
1718
walk
1819
} from 'svelte/compiler';
1920
```
@@ -158,6 +159,31 @@ function preprocess(
158159

159160

160161

162+
## print
163+
164+
`print` converts a Svelte AST node back into Svelte source code.
165+
It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
166+
167+
`print(ast)` requires an AST node produced by parse with modern: true, or any sub-node within that modern AST.
168+
The result contains the generated source and a corresponding source map.
169+
The output is valid Svelte, but formatting details such as whitespace or quoting may differ from the original.
170+
171+
<div class="ts-block">
172+
173+
```dts
174+
function print(
175+
ast: AST.SvelteNode,
176+
options?: Options | undefined
177+
): {
178+
code: string;
179+
map: any;
180+
};
181+
```
182+
183+
</div>
184+
185+
186+
161187
## walk
162188

163189
<blockquote class="tag deprecated note">
@@ -414,7 +440,7 @@ namespace AST {
414440
expression: null | Expression;
415441
}
416442
417-
interface BaseElement extends BaseNode {
443+
export interface BaseElement extends BaseNode {
418444
name: string;
419445
attributes: Array<
420446
Attribute | SpreadAttribute | Directive | AttachTag

apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ Hydration failed because the initial UI does not match what was rendered on the
244244
245245
This warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.
246246
247-
During development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.
247+
During development, this error is often preceded by a `console.error` detailing the offending HTML, which needs fixing.
248248
249249
### invalid_raw_snippet_render
250250

apps/svelte.dev/content/docs/svelte/99-legacy/10-legacy-on.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ The following modifiers are available:
4444

4545
- `preventDefault` — calls `event.preventDefault()` before running the handler
4646
- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
47-
- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
47+
- `stopImmediatePropagation` calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
4848
- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
4949
- `nonpassive` — explicitly set `passive: false`
5050
- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase

0 commit comments

Comments
 (0)