feat: State declarations in class constructors (#15820)

* feat: State declarations in class constructors

* feat: Analysis phase

* misc

* feat: client

* improvements

* feat: It is now at least backwards compatible. though the new stuff may still be wrong

* feat: It works I think?

* final cleanup??

* tests

* test for better types

* changeset

* rename functions (the function doesn't test call-expression-ness)

* small readability tweak

* failing test

* fix

* disallow computed state fields

* tweak message to better accommodate the case in which state is declared after a regular property

* failing test

* wildly confusing to have so many things called 'class analysis' - rename the transform-phrase ones to transformers

* missed a spot

* and another

* store analysis for use during transformation

* move code to where it is used

* do the analysis upfront, it's way simpler

* skip failing test for now

* simplify

* get rid of the class

* on second thoughts

* reduce indirection

* make analysis available at transform time

* WIP

* WIP

* WIP

* fix

* remove unused stuff

* revert snapshot tests

* unused

* note to self

* fix

* unused

* unused

* remove some unused stuff

* unused

* lint, tidy up

* reuse helper

* tweak

* simplify/DRY

* unused

* tweak

* unused

* more

* tweak

* tweak

* fix proxying logic

* tweak

* tweak

* adjust message to accommodate more cases

* unskip and fix test

* fix

* move

* revert unneeded drive-by change

* fix

* fix

* update docs

---------

Co-authored-by: Rich Harris <[email protected]>

Author: elliott-with-the-longest-name-on-github

.changeset/mean-squids-scream.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: allow state fields to be declared inside class constructors

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

@@ -67,16 +67,15 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private):
+You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	reset() {
@@ -110,10 +109,9 @@ You can either use an inline function...
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	+++reset = () => {+++

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

@@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter
 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...
+
+```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_field_invalid_assignment
+
+```
+Cannot assign to a state field before its declaration
+```
+
 ### state_invalid_export
 
 ```
@@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_placement
 
 ```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
+`%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.
 ```
 
 ### store_invalid_scoped_subscription

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

@@ -212,13 +212,41 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 > 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_field_invalid_assignment
+
+> Cannot assign to a state field before its declaration
+
 ## 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
 
 ## state_invalid_placement
 
-> `%rune%(...)` can only be used as a variable declaration initializer or a class field
+> `%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.
 
 ## store_invalid_scoped_subscription
 

packages/svelte/src/compiler/errors.js

@@ -461,6 +461,25 @@ export function snippet_parameter_assignment(node) {
 	e(node, 'snippet_parameter_assignment', `Cannot reassign or bind to snippet parameter\nhttps://svelte.dev/e/snippet_parameter_assignment`);
 }
 
+/**
+ * `%name%` has already been declared on this class
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function state_field_duplicate(node, name) {
+	e(node, 'state_field_duplicate', `\`${name}\` has already been declared on this class\nhttps://svelte.dev/e/state_field_duplicate`);
+}
+
+/**
+ * Cannot assign to a state field before its declaration
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function state_field_invalid_assignment(node) {
+	e(node, 'state_field_invalid_assignment', `Cannot assign to a state field before its declaration\nhttps://svelte.dev/e/state_field_invalid_assignment`);
+}
+
 /**
  * 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
  * @param {null | number | NodeLike} node
@@ -471,13 +490,13 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `%rune%(...)` can only be used as a variable declaration initializer or a class field
+ * `%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.
  * @param {null | number | NodeLike} node
  * @param {string} rune
  * @returns {never}
  */
 export function state_invalid_placement(node, rune) {
-	e(node, 'state_invalid_placement', `\`${rune}(...)\` can only be used as a variable declaration initializer or a class field\nhttps://svelte.dev/e/state_invalid_placement`);
+	e(node, 'state_invalid_placement', `\`${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.\nhttps://svelte.dev/e/state_invalid_placement`);
 }
 
 /**

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -48,6 +48,7 @@ import { Literal } from './visitors/Literal.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
 import { NewExpression } from './visitors/NewExpression.js';
 import { OnDirective } from './visitors/OnDirective.js';
+import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
@@ -164,6 +165,7 @@ const visitors = {
 	MemberExpression,
 	NewExpression,
 	OnDirective,
+	PropertyDefinition,
 	RegularElement,
 	RenderTag,
 	SlotElement,
@@ -256,7 +258,8 @@ export function analyze_module(ast, options) {
 		accessors: false,
 		runes: true,
 		immutable: true,
-		tracing: false
+		tracing: false,
+		classes: new Map()
 	};
 
 	walk(
@@ -265,7 +268,7 @@ export function analyze_module(ast, options) {
 			scope,
 			scopes,
 			analysis: /** @type {ComponentAnalysis} */ (analysis),
-			derived_state: [],
+			state_fields: new Map(),
 			// TODO the following are not needed for modules, but we have to pass them in order to avoid type error,
 			// and reducing the type would result in a lot of tedious type casts elsewhere - find a good solution one day
 			ast_type: /** @type {any} */ (null),
@@ -429,6 +432,7 @@ export function analyze_component(root, source, options) {
 		elements: [],
 		runes,
 		tracing: false,
+		classes: new Map(),
 		immutable: runes || options.immutable,
 		exports: [],
 		uses_props: false,
@@ -624,7 +628,7 @@ export function analyze_component(root, source, options) {
 				has_props_rune: false,
 				component_slots: new Set(),
 				expression: null,
-				derived_state: [],
+				state_fields: new Map(),
 				function_depth: scope.function_depth,
 				reactive_statement: null
 			};
@@ -691,7 +695,7 @@ export function analyze_component(root, source, options) {
 				reactive_statement: null,
 				component_slots: new Set(),
 				expression: null,
-				derived_state: [],
+				state_fields: new Map(),
 				function_depth: scope.function_depth
 			};
 

packages/svelte/src/compiler/phases/2-analyze/types.d.ts

@@ -1,6 +1,6 @@
 import type { Scope } from '../scope.js';
 import type { ComponentAnalysis, ReactiveStatement } from '../types.js';
-import type { AST, ExpressionMetadata, ValidatedCompileOptions } from '#compiler';
+import type { AST, ExpressionMetadata, StateField, ValidatedCompileOptions } from '#compiler';
 
 export interface AnalysisState {
 	scope: Scope;
@@ -18,7 +18,10 @@ export interface AnalysisState {
 	component_slots: Set<string>;
 	/** Information about the current expression/directive/block value */
 	expression: ExpressionMetadata | null;
-	derived_state: { name: string; private: boolean }[];
+
+	/** Used to analyze class state */
+	state_fields: Map<string, StateField>;
+
 	function_depth: number;
 
 	// legacy stuff

packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js

@@ -8,7 +8,7 @@ import { validate_assignment } from './shared/utils.js';
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	validate_assignment(node, node.left, context.state);
+	validate_assignment(node, node.left, context);
 
 	if (context.state.reactive_statement) {
 		const id = node.left.type === 'MemberExpression' ? object(node.left) : node.left;

packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js

@@ -158,7 +158,7 @@ export function BindDirective(node, context) {
 		return;
 	}
 
-	validate_assignment(node, node.expression, context.state);
+	validate_assignment(node, node.expression, context);
 
 	const assignee = node.expression;
 	const left = object(assignee);

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -114,12 +114,13 @@ export function CallExpression(node, context) {
 		case '$state':
 		case '$state.raw':
 		case '$derived':
-		case '$derived.by':
-			if (
-				(parent.type !== 'VariableDeclarator' ||
-					get_parent(context.path, -3).type === 'ConstTag') &&
-				!(parent.type === 'PropertyDefinition' && !parent.static && !parent.computed)
-			) {
+		case '$derived.by': {
+			const valid =
+				is_variable_declaration(parent, context) ||
+				is_class_property_definition(parent) ||
+				is_class_property_assignment_at_constructor_root(parent, context);
+
+			if (!valid) {
 				e.state_invalid_placement(node, rune);
 			}
 
@@ -130,6 +131,7 @@ export function CallExpression(node, context) {
 			}
 
 			break;
+		}
 
 		case '$effect':
 		case '$effect.pre':
@@ -270,3 +272,40 @@ function get_function_label(nodes) {
 		return parent.id.name;
 	}
 }
+
+/**
+ * @param {AST.SvelteNode} parent
+ * @param {Context} context
+ */
+function is_variable_declaration(parent, context) {
+	return parent.type === 'VariableDeclarator' && get_parent(context.path, -3).type !== 'ConstTag';
+}
+
+/**
+ * @param {AST.SvelteNode} parent
+ */
+function is_class_property_definition(parent) {
+	return parent.type === 'PropertyDefinition' && !parent.static && !parent.computed;
+}
+
+/**
+ * @param {AST.SvelteNode} node
+ * @param {Context} context
+ */
+function is_class_property_assignment_at_constructor_root(node, context) {
+	if (
+		node.type === 'AssignmentExpression' &&
+		node.operator === '=' &&
+		node.left.type === 'MemberExpression' &&
+		node.left.object.type === 'ThisExpression' &&
+		((node.left.property.type === 'Identifier' && !node.left.computed) ||
+			node.left.property.type === 'PrivateIdentifier' ||
+			node.left.property.type === 'Literal')
+	) {
+		// MethodDefinition (-5) -> FunctionExpression (-4) -> BlockStatement (-3) -> ExpressionStatement (-2) -> AssignmentExpression (-1)
+		const parent = get_parent(context.path, -5);
+		return parent?.type === 'MethodDefinition' && parent.kind === 'constructor';
+	}
+
+	return false;
+}