feat: State declarations in class constructors

.changeset/mean-squids-scream.md

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

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

@@ -208,6 +208,37 @@ Cannot assign to %thing%
 Cannot bind to %thing%
 ```
 
+### constructor_state_reassignment
+
+```
+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
 
 ```
@@ -855,7 +886,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

@@ -10,6 +10,35 @@
 
 > Cannot bind to %thing%
 
+## constructor_state_reassignment
+
+> 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
 
 > `%name%` has already been declared
@@ -218,7 +247,7 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 ## 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

@@ -104,6 +104,15 @@ export function constant_binding(node, thing) {
 	e(node, 'constant_binding', `Cannot bind to ${thing}\nhttps://svelte.dev/e/constant_binding`);
 }
 
+/**
+ * A state field declaration in a constructor must be the first assignment, and the only one that uses a rune
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function constructor_state_reassignment(node) {
+	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`);
+}
+
 /**
  * `%name%` has already been declared
  * @param {null | number | NodeLike} node
@@ -471,13 +480,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

@@ -256,7 +256,8 @@ export function analyze_module(ast, options) {
 		accessors: false,
 		runes: true,
 		immutable: true,
-		tracing: false
+		tracing: false,
+		classes: new Map()
 	};
 
 	walk(
@@ -265,7 +266,7 @@ export function analyze_module(ast, options) {
 			scope,
 			scopes,
 			analysis: /** @type {ComponentAnalysis} */ (analysis),
-			derived_state: [],
+			state_fields: null,
 			// 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 +430,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 +626,7 @@ export function analyze_component(root, source, options) {
 				has_props_rune: false,
 				component_slots: new Set(),
 				expression: null,
-				derived_state: [],
+				state_fields: null,
 				function_depth: scope.function_depth,
 				reactive_statement: null
 			};
@@ -691,7 +693,7 @@ export function analyze_component(root, source, options) {
 				reactive_statement: null,
 				component_slots: new Set(),
 				expression: null,
-				derived_state: [],
+				state_fields: null,
 				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: Record<string, StateField> | null;
+
 	function_depth: number;
 
 	// legacy stuff

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;
+}

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

@@ -1,30 +1,116 @@
-/** @import { ClassBody } from 'estree' */
+/** @import { AssignmentExpression, CallExpression, ClassBody, PropertyDefinition, Expression, PrivateIdentifier, MethodDefinition } from 'estree' */
+/** @import { StateField } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
 import { get_rune } from '../../scope.js';
+import * as e from '../../../errors.js';
+import { is_state_creation_rune } from '../../../../utils.js';
+import { get_name } from '../../nodes.js';
+import { regex_invalid_identifier_chars } from '../../patterns.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	/** @type {{name: string, private: boolean}[]} */
-	const derived_state = [];
+	if (!context.state.analysis.runes) {
+		context.next();
+		return;
+	}
+
+	/** @type {string[]} */
+	const private_ids = [];
 
-	for (const definition of node.body) {
+	for (const prop of node.body) {
 		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'PrivateIdentifier' || definition.key.type === 'Identifier') &&
-			definition.value?.type === 'CallExpression'
+			(prop.type === 'MethodDefinition' || prop.type === 'PropertyDefinition') &&
+			prop.key.type === 'PrivateIdentifier'
 		) {
-			const rune = get_rune(definition.value, context.state.scope);
-			if (rune === '$derived' || rune === '$derived.by') {
-				derived_state.push({
-					name: definition.key.name,
-					private: definition.key.type === 'PrivateIdentifier'
-				});
+			private_ids.push(prop.key.name);
+		}
+	}
+
+	/** @type {Record<string, StateField>} */
+	const state_fields = {};
+
+	context.state.analysis.classes.set(node, state_fields);
+
+	/** @type {string[]} */
+	const seen = [];
+
+	/** @type {MethodDefinition | null} */
+	let constructor = null;
+
+	/**
+	 * @param {PropertyDefinition | AssignmentExpression} node
+	 * @param {Expression | PrivateIdentifier} key
+	 * @param {Expression | null | undefined} value
+	 */
+	function handle(node, key, value) {
+		const name = get_name(key);
+		if (name === null) return;
+
+		const rune = get_rune(value, context.state.scope);
+
+		if (rune && is_state_creation_rune(rune)) {
+			if (seen.includes(name)) {
+				e.constructor_state_reassignment(node); // TODO the same thing applies to duplicate fields, so the code/message needs to change
 			}
+
+			state_fields[name] = {
+				node,
+				type: rune,
+				// @ts-expect-error for public state this is filled out in a moment
+				key: key.type === 'PrivateIdentifier' ? key : null,
+				value: /** @type {CallExpression} */ (value)
+			};
+		}
+
+		if (value) {
+			seen.push(name);
+		}
+	}
+
+	for (const child of node.body) {
+		if (child.type === 'PropertyDefinition' && !child.computed) {
+			handle(child, child.key, child.value);
+		}
+
+		if (child.type === 'MethodDefinition' && child.kind === 'constructor') {
+			constructor = child;
+		}
+	}
+
+	if (constructor) {
+		for (const statement of constructor.value.body.body) {
+			if (statement.type !== 'ExpressionStatement') continue;
+			if (statement.expression.type !== 'AssignmentExpression') continue;
+
+			const { left, right } = statement.expression;
+
+			if (left.type !== 'MemberExpression') continue;
+			if (left.object.type !== 'ThisExpression') continue;
+			if (left.computed && left.property.type !== 'Literal') continue;
+
+			handle(statement.expression, left.property, right);
+		}
+	}
+
+	for (const name in state_fields) {
+		if (name[0] === '#') {
+			continue;
 		}
+
+		const field = state_fields[name];
+
+		let deconflicted = name.replace(regex_invalid_identifier_chars, '_');
+		while (private_ids.includes(deconflicted)) {
+			deconflicted = '_' + deconflicted;
+		}
+
+		private_ids.push(deconflicted);
+		field.key = b.private_id(deconflicted);
 	}
 
-	context.next({ ...context.state, derived_state });
+	context.next({ ...context.state, state_fields });
 }