8000 Merge branch 'main' into from-action · sveltejs/svelte@35a3b47 · GitHub
[go: up one dir, main page]
Skip to content

Commit 35a3b47

Browse files
Rich-HarrisRich-Harris
authored
Merge branch 'main' into from-action
2 parents 42662e4 + 22a0211 commit 35a3b47

File tree

88 files changed

+1537
-714
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+1537
-714
lines changed

‎.changeset/silly-apples-remain.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎documentation/docs/02-runes/02-$state.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,16 +67,15 @@ todos[0].done = !todos[0].done;
6767

6868
### Classes
6969

70-
You can also use `$state` in class fields (whether public or private):
70+
You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
7171

7272
```js
7373
// @errors: 7006 2554
7474
class Todo {
7575
done = $state(false);
76-
text = $state();
7776

7877
constructor(text) {
79-
this.text = text;
78+
this.text = $state(text);
8079
}
8180

8281
reset() {
@@ -110,10 +109,9 @@ You can either use an inline function...
110109
// @errors: 7006 2554
111110
class Todo {
112111
done = $state(false);
113-
text = $state();
114112

115113
constructor(text) {
116-
this.text = text;
114+
this.text = $state(text);
117115
}
118116

119117
+++reset = () => {+++

‎documentation/docs/03-template-syntax/09-@attach.md

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
title: {@attach ...}
33
---
44

5-
Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
5+
Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
6+
7+
Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
68

79
> [!NOTE]
810
> Attachments are available in Svelte 5.29 and newer.
@@ -55,7 +57,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur
5557
</button>
5658
```
5759

58-
Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
60+
Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)
5961

6062
## Inline attachments
6163

@@ -126,9 +128,42 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl
126128
</Button>
127129
```
128130

129-
### Converting actions to attachments
131+
## Controlling when attachments re-run
132+
133+
Attachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):
134+
135+
```js
136+
// @errors: 7006 2304 2552
137+
function foo(bar) {
138+
return (node) => {
139+
veryExpensiveSetupWork(node);
140+
update(node, bar);
141+
};
142+
}
143+
```
144+
145+
In the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:
146+
147+
```js
148+
// @errors: 7006 2304 2552
149+
function foo(+++getBar+++) {
150+
return (node) => {
151+
veryExpensiveSetupWork(node);
152+
153+
+++ $effect(() => {
154+
update(node, getBar());
155+
});+++
156+
}
157+
}
158+
```
159+
160+
## Creating attachments programmatically
161+
162+
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
130163

131-
If you want to use this functionality on Components but you are using a library that only provides actions you can use the `fromAction` utility exported from `svelte/attachments` to convert between the two.
164+
## Converting actions to attachments
165+
166+
If you want to use this functionality on components but you are using a library that only provides actions you can use the [`fromAction`](svelte/attachments#fromAction) utility.
132167

133168
This function accept an action as the first argument and a function returning the arguments of the action as the second argument and returns an attachment.
134169

@@ -146,9 +181,4 @@ This function accept an action as the first argument and a function returning th
146181
{@attach fromAction(log, () => count)}
147182
>
148183
{count}
149-
</Button>
150-
```
151-
152-
## Creating attachments programmatically
153-
154-
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
184+
</Button>

‎documentation/docs/06-runtime/02-context.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ In many cases this is perfectly fine, but there is a risk: if you mutate the sta
125125
```svelte
126126
<!--- file: App.svelte ---->
127127
<script>
128-
import { myGlobalState } from 'svelte';
128+
import { myGlobalState } from './state.svelte.js';
129129
130130
let { data } = $props();
131131

‎documentation/docs/98-reference/.generated/compile-errors.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter
846846
This snippet is shadowing the prop `%prop%` with the same name
847847
```
848848

849+
### state_field_duplicate
850+
851+
```
852+
`%name%` has already been declared on this class
853+
```
854+
855+
An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
856+
857+
```js
858+
class Counter {
859+
count = $state(0);
860+
}
861+
```
862+
863+
...or inside the constructor...
864+
865+
```js
866+
class Counter {
867+
constructor() {
868+
this.count = $state(0);
869+
}
870+
}
871+
```
872+
873+
...but it can only happen once.
874+
875+
### state_field_invalid_assignment
876+
877+
```
878+
Cannot assign to a state field before its declaration
879+
```
880+
849881
### state_invalid_export
850882

851883
```
@@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function
855887
### state_invalid_placement
856888

857889
```
858-
`%rune%(...)` can only be used as a variable declaration initializer or a class field
890+
`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
859891
```
860892

861893
### store_invalid_scoped_subscription

‎packages/svelte/CHANGELOG.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
# svelte
22

3+
## 5.31.1
4+
5+
### Patch Changes
6+
7+
- fix: avoid auto-parenthesis for special-keywords-only `MediaQuery` ([#15937](https://github.com/sveltejs/svelte/pull/15937))
8+
9+
## 5.31.0
10+
11+
### Minor Changes
12+
13+
- feat: allow state fields to be declared inside class constructors ([#15820](https://github.com/sveltejs/svelte/pull/15820))
14+
15+
### Patch Changes
16+
17+
- fix: Add missing `AttachTag` in `Tag` union type inside the `AST` namespace from `"svelte/compiler"` ([#15946](https://github.com/sveltejs/svelte/pull/15946))
18+
19+
## 5.30.2
20+
21+
### Patch Changes
22+
23+
- fix: falsy attachments types ([#15939](https://github.com/sveltejs/svelte/pull/15939))
24+
25+
- fix: handle more hydration mismatches ([#15851](https://github.com/sveltejs/svelte/pull/15851))
26+
327
## 5.30.1
428

529
### Patch Changes

‎packages/svelte/elements.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -863,8 +863,8 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
863863
// allow any data- attribute
864864
[key: `data-${string}`]: any;
865865

866-
// allow any attachment
867-
[key: symbol]: Attachment<T>;
866+
// allow any attachment and falsy values (by using false we prevent the usage of booleans values by themselves)
867+
[key: symbol]: Attachment<T> | false | undefined | null;
868868
}
869869

870870
export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});

‎packages/svelte/messages/compile-errors/script.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,13 +212,41 @@ It's possible to export a snippet from a `<script module>` block, but only if it
212212

213213
> Cannot reassign or bind to snippet parameter
214214
215+
## state_field_duplicate
216+
217+
> `%name%` has already been declared on this class
218+
219+
An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
220+
221+
```js
222+
class Counter {
223+
count = $state(0);
224+
}
225+
```
226+
227+
...or inside the constructor...
228+
229+
```js
230+
class Counter {
231+
constructor() {
232+
this.count = $state(0);
233+
}
234+
}
235+
```
236+
237+
...but it can only happen once.
238+
239+
## state_field_invalid_assignment
240+
241+
> Cannot assign to a state field before its declaration
242+
215243
## state_invalid_export
216244

217245
> Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
218246
219247
## state_invalid_placement
220248

221-
> `%rune%(...)` can only be used as a variable declaration initializer or a class field
249+
> `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
222250
223251
## store_invalid_scoped_subscription
224252

‎packages/svelte/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "svelte",
33
"description": "Cybernetically enhanced web apps",
44
"license": "MIT",
5-
"version": "5.30.1",
5+
"version": "5.31.1",
66
"type": "module",
77
"types": "./types/index.d.ts",
88
"engines": {
@@ -136,7 +136,7 @@
136136
],
137137
"scripts": {
138138
"build": "node scripts/process-messages && rollup -c && pnpm generate:types && node scripts/check-treeshakeability.js",
139-
"dev": "node scripts/process-messages && rollup -cw",
139+
"dev": "node scripts/process-messages -w & rollup -cw",
140140
"check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
141141
"check:watch": "tsc --watch",
142142
"generate:version": "node ./scripts/generate-version.js",

0 commit comments

Comments
 (0)
0