A state field declaration in a constructor must be the first assignment, and the only one that uses a rune
```
[State fields]($state#Classes) can be declared as normal class fields or inside the constructor, in which case the declaration must be the _first_ assignment.
Assignments thereafter must not use the rune.
```ts
constructor() {
this.count = $state(0);
this.count = $state(1); // invalid, assigning to the same property with `$state` again
}
constructor() {
this.count = $state(0);
this.count = $state.raw(1); // invalid, assigning to the same property with a different rune
}
constructor() {
this.count = 0;
this.count = $state(1); // invalid, this property was created as a regular property, not state
}
constructor() {
this.count = $state(0);
this.count = 1; // valid, this is setting the state that has already been declared
}
```
### css_empty_declaration
### css_empty_declaration
```
```
@ -877,6 +846,32 @@ Cannot reassign or bind to snippet parameter
This snippet is shadowing the prop `%prop%` with the same name
This snippet is shadowing the prop `%prop%` with the same name
```
```
### state_field_duplicate
```
`%name%` has already been declared on this class
```
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...
> A state field declaration in a constructor must be the first assignment, and the only one that uses a rune
[State fields]($state#Classes) can be declared as normal class fields or inside the constructor, in which case the declaration must be the _first_ assignment.
Assignments thereafter must not use the rune.
```ts
constructor() {
this.count = $state(0);
this.count = $state(1); // invalid, assigning to the same property with `$state` again
}
constructor() {
this.count = $state(0);
this.count = $state.raw(1); // invalid, assigning to the same property with a different rune
}
constructor() {
this.count = 0;
this.count = $state(1); // invalid, this property was created as a regular property, not state
}
constructor() {
this.count = $state(0);
this.count = 1; // valid, this is setting the state that has already been declared
}
```
## declaration_duplicate
## declaration_duplicate
> `%name%` has already been declared
> `%name%` has already been declared
@ -241,6 +212,30 @@ It's possible to export a snippet from a `<script module>` block, but only if it
> Cannot reassign or bind to snippet parameter
> Cannot reassign or bind to snippet parameter
## state_field_duplicate
> `%name%` has already been declared on this class
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...
```js
class Counter {
count = $state(0);
}
```
...or inside the constructor...
```js
class Counter {
constructor() {
this.count = $state(0);
}
}
```
...but it can only happen once.
## state_invalid_export
## state_invalid_export
> 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
> 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
e(node,'constructor_state_reassignment',`A state field declaration in a constructor must be the first assignment, and the only one that uses a rune\nhttps://svelte.dev/e/constructor_state_reassignment`);
e(node,'state_field_duplicate',`\`${name}\` has already been declared on this class\nhttps://svelte.dev/e/state_field_duplicate`);
Rich Harris
4 months ago