You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/06-runtime/03-lifecycle-hooks.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -95,7 +95,7 @@ Svelte 4 contained hooks that ran before and after the component as a whole was
95
95
</script>
96
96
```
97
97
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.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/06-runtime/05-hydratable.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ In Svelte, when you want to render asynchronous content data on the server, you
18
18
<h1>{user.name}</h1>
19
19
```
20
20
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).
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -295,7 +295,7 @@ E2E (short for 'end to end') tests allow you to test your full application throu
295
295
296
296
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.
297
297
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:
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/07-misc/06-v4-migration-guide.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -138,7 +138,7 @@ Transitions are now local by default to prevent confusion around page navigation
138
138
{/if}
139
139
```
140
140
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))
142
142
143
143
## Default slot bindings
144
144
@@ -151,10 +151,10 @@ Default slot bindings are no longer exposed to named slots and vice versa:
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: Svelte 5 migration guide
5
5
6
6
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.
7
7
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.
9
9
10
10
## Reactivity syntax changes
11
11
@@ -24,7 +24,7 @@ In Svelte 4, a `let` declaration at the top level of a component was implicitly
24
24
Nothing else changes. `count` is still the number itself, and you read and write directly to it, without a wrapper like `.value` or `getCount()`.
25
25
26
26
> [!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.
28
28
29
29
### $: → $derived/$effect
30
30
@@ -121,7 +121,7 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
121
121
122
122
## Event changes
123
123
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):
125
125
126
126
```svelte
127
127
<script>
@@ -155,7 +155,7 @@ Since they're just properties, you can use the normal shorthand syntax...
155
155
156
156
In Svelte 4, components could emit events by creating a dispatcher with `createEventDispatcher`.
157
157
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:
159
159
160
160
```svelte
161
161
<!--- file: App.svelte --->
@@ -463,7 +463,7 @@ In Svelte 4, you would pass data to a `<slot />` and then retrieve it with `let:
463
463
464
464
## Migration script
465
465
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.
467
467
468
468
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:
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,7 @@ There are several [UI component libraries](/packages#component-libraries) as wel
70
70
71
71
## How do I test Svelte apps?
72
72
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.
74
74
75
75
A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -237,7 +237,7 @@ Hydration failed because the initial UI does not match what was rendered on the
237
237
238
238
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.
239
239
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.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -244,7 +244,7 @@ Hydration failed because the initial UI does not match what was rendered on the
244
244
245
245
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.
246
246
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.
0 commit comments