Skip to content

Commit 6ad8240

Browse files
authored
docs: fix various typos in reference docs (#14011)
* docs: fix note about $derived * fix some other typos * revert one change * emdash tweak
1 parent 217e409 commit 6ad8240

File tree

10 files changed

+10
-15
lines changed

10 files changed

+10
-15
lines changed

documentation/docs/01-introduction/02-getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-sv
2121

2222
## Editor tooling
2323

24-
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
24+
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
2525

2626
You can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).
2727

documentation/docs/01-introduction/03-svelte-files.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ A `<script>` tag with a `module` attribute runs once when the module first evalu
5050

5151
You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
5252

53-
> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
53+
> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
5454
5555
> [!LEGACY]
5656
> In Svelte 4, this script tag was created using `<script context="module">`

documentation/docs/02-runes/03-$derived.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
2121

2222
As with `$state`, you can mark class fields as `$derived`.
2323

24-
> [!NOTE] Code in Svelte components is only executed once at creation, without the `$derived` rune `double` would maintain it's original value.
24+
> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.
2525
2626
## `$derived.by`
2727

documentation/docs/02-runes/04-$effect.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,8 +243,7 @@ export default function readable<T>(
243243

244244
## `$effect.root`
245245

246-
The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
247-
nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.
246+
The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
248247

249248
```svelte
250249
<script>

documentation/docs/03-template-syntax/05-await.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Await blocks allow you to branch on the three possible states of a [`Promise`](h
3939

4040
> [!NOTE] During server-side rendering, only the pending branch will be rendered.
4141
>
42-
> If the provided expression is not a `Promise` only the `:then` branch will be rendered, including during server-side rendering.
42+
> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.
4343
4444
The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
4545

documentation/docs/03-template-syntax/06-snippet.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Snippets, and [render tags](@render), are a way to create reusable chunks of mar
5353
{/each}
5454
```
5555

56-
Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters however.
56+
Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters, however.
5757

5858
## Snippet scope
5959

documentation/docs/03-template-syntax/15-animate.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@
22
title: animate:
33
---
44

5-
6-
7-
85
An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
96

107
Animations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).
118

129
```svelte
13-
<!-- When `list` is reordered the animation will run-->
10+
<!-- When `list` is reordered the animation will run -->
1411
{#each list as item, index (item)}
1512
<li animate:flip>{item}</li>
1613
{/each}
@@ -115,4 +112,3 @@ A custom animation function can also return a `tick` function, which is called _
115112
<div animate:whizz>{item}</div>
116113
{/each}
117114
```
118-

documentation/docs/04-styling/04-nested-style-elements.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Nested <style> elements
33
---
44

5-
There should only be 1 top-level `<style>` tag per component.
5+
There can only be one top-level `<style>` tag per component.
66

77
However, it is possible to have a `<style>` tag nested inside other elements or logic blocks.
88

documentation/docs/06-runtime/01-stores.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Local variables (that do not represent store values) must _not_ have a `$` prefi
3636
Prior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have greatly diminished.
3737

3838
- when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)
39-
- when creating shared state, you can create a `$state` object containing the values you need and manipulating said state
39+
- when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
4040

4141
Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.
4242

documentation/docs/06-runtime/03-lifecycle-hooks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: Lifecycle hooks
77
- beforeUpdate/afterUpdate with deprecation notice?
88
- or skip this entirely and only have it in the reference docs? -->
99

10-
In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
10+
In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between when certain state is updated is not related to the component as a whole; only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
1111

1212
## `onMount`
1313

0 commit comments

Comments
 (0)