From d103adff9c0fc7802e0bf6000bcc75c77f4b2e3f Mon Sep 17 00:00:00 2001
From: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Date: Mon, 19 May 2025 09:48:58 -0600
Subject: [PATCH] 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 <rich.harris@vercel.com>
---
 .changeset/mean-squids-scream.md              |   5 +
 documentation/docs/02-runes/02-$state.md      |   8 +-
 .../98-reference/.generated/compile-errors.md |  34 ++-
 .../svelte/messages/compile-errors/script.md  |  30 ++-
 packages/svelte/src/compiler/errors.js        |  23 +-
 .../src/compiler/phases/2-analyze/index.js    |  12 +-
 .../src/compiler/phases/2-analyze/types.d.ts  |   7 +-
 .../visitors/AssignmentExpression.js          |   2 +-
 .../2-analyze/visitors/BindDirective.js       |   2 +-
 .../2-analyze/visitors/CallExpression.js      |  51 +++-
 .../phases/2-analyze/visitors/ClassBody.js    | 105 +++++++--
 .../2-analyze/visitors/PropertyDefinition.js  |  21 ++
 .../2-analyze/visitors/UpdateExpression.js    |   2 +-
 .../phases/2-analyze/visitors/shared/utils.js |  50 +++-
 .../3-transform/client/transform-client.js    |   6 +-
 .../phases/3-transform/client/types.d.ts      |  10 +-
 .../client/visitors/AssignmentExpression.js   |  51 ++--
 .../client/visitors/CallExpression.js         |  35 ++-
 .../3-transform/client/visitors/ClassBody.js  | 222 ++++++------------
 .../client/visitors/MemberExpression.js       |   6 +-
 .../client/visitors/UpdateExpression.js       |   2 +-
 .../3-transform/server/transform-server.js    |   6 +-
 .../phases/3-transform/server/types.d.ts      |   2 -
 .../server/visitors/AssignmentExpression.js   |  25 ++
 .../server/visitors/CallExpression.js         |   9 +
 .../3-transform/server/visitors/ClassBody.js  | 133 ++++-------
 .../server/visitors/MemberExpression.js       |  23 --
 .../compiler/phases/3-transform/types.d.ts    |   4 +-
 packages/svelte/src/compiler/phases/nodes.js  |  13 +
 .../svelte/src/compiler/phases/types.d.ts     |  15 +-
 packages/svelte/src/compiler/types/index.d.ts |  14 ++
 packages/svelte/src/utils.js                  |  26 +-
 .../class-state-field-static/_config.js       |   2 +-
 .../samples/runes-no-rune-each/_config.js     |   3 +-
 .../runes-wrong-derived-placement/_config.js  |   2 +-
 .../runes-wrong-state-placement/_config.js    |   3 +-
 .../_config.js                                |   0
 .../main.svelte                               |   0
 .../_config.js                                |  13 +
 .../main.svelte                               |  13 +
 .../_config.js                                |  13 +
 .../main.svelte                               |  12 +
 .../_config.js                                |   3 +
 .../main.svelte                               |   9 +
 .../_config.js                                |  45 ++++
 .../main.svelte                               |  37 +++
 .../_config.js                                |  20 ++
 .../main.svelte                               |  12 +
 .../_config.js                                |  20 ++
 .../main.svelte                               |  22 ++
 .../class-state-constructor/_config.js        |  20 ++
 .../class-state-constructor/main.svelte       |  18 ++
 .../class-state-constructor-1/errors.json     |  14 ++
 .../class-state-constructor-1/input.svelte.js |   7 +
 .../class-state-constructor-10/errors.json    |  14 ++
 .../input.svelte.js                           |   9 +
 .../class-state-constructor-2/errors.json     |  14 ++
 .../class-state-constructor-2/input.svelte.js |   7 +
 .../class-state-constructor-3/errors.json     |  14 ++
 .../class-state-constructor-3/input.svelte.js |   7 +
 .../class-state-constructor-4/errors.json     |  14 ++
 .../class-state-constructor-4/input.svelte.js |   7 +
 .../class-state-constructor-5/errors.json     |  14 ++
 .../class-state-constructor-5/input.svelte.js |   7 +
 .../class-state-constructor-6/errors.json     |  14 ++
 .../class-state-constructor-6/input.svelte.js |   6 +
 .../class-state-constructor-7/errors.json     |  14 ++
 .../class-state-constructor-7/input.svelte.js |   7 +
 .../class-state-constructor-8/errors.json     |  14 ++
 .../class-state-constructor-8/input.svelte.js |   6 +
 .../class-state-constructor-9/errors.json     |  14 ++
 .../class-state-constructor-9/input.svelte.js |   7 +
 .../const-tag-invalid-rune-usage/errors.json  |   2 +-
 73 files changed, 1070 insertions(+), 363 deletions(-)
 create mode 100644 .changeset/mean-squids-scream.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
 rename packages/svelte/tests/runtime-runes/samples/{class-state-constructor-closure-private => class-state-constructor-closure-private-1}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{class-state-constructor-closure-private => class-state-constructor-closure-private-1}/main.svelte (100%)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js

diff --git a/.changeset/mean-squids-scream.md b/.changeset/mean-squids-scream.md
new file mode 100644
index 0000000000..2157ea85a6
--- /dev/null
+++ b/.changeset/mean-squids-scream.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: allow state fields to be declared inside class constructors
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index aac006d2f5..f7314e2950 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/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 = () => {+++
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index e8669ead53..db848a0299 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/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
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index aabcbeae48..e11975aef2 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/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
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index c99f597468..25e72340c6 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/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`);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 09cb41b23f..fded183b86 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/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
 			};
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
index 17c8123de1..080239bac0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
+++ b/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
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
index a64c89cd88..673c79f2df 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
+++ b/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;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 18ea79262b..9f02e7fa5a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/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);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 904817b014..33abb52cac 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/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;
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
index 0463e4da85..ffc39ac00d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
@@ -1,30 +1,107 @@
-/** @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 {Map<string, StateField>} */
+	const state_fields = new Map();
+
+	context.state.analysis.classes.set(node, state_fields);
+
+	/** @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 (state_fields.has(name)) {
+				e.state_field_duplicate(node, name);
 			}
+
+			state_fields.set(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)
+			});
+		}
+	}
+
+	for (const child of node.body) {
+		if (child.type === 'PropertyDefinition' && !child.computed && !child.static) {
+			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, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
+
+		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 });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
new file mode 100644
index 0000000000..99d05cb47c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
@@ -0,0 +1,21 @@
+/** @import { PropertyDefinition } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { get_name } from '../../nodes.js';
+
+/**
+ * @param {PropertyDefinition} node
+ * @param {Context} context
+ */
+export function PropertyDefinition(node, context) {
+	const name = get_name(node.key);
+	const field = name && context.state.state_fields.get(name);
+
+	if (field && node !== field.node && node.value) {
+		if (/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)) {
+			e.state_field_invalid_assignment(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
index 741effc67a..13f4b9019e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
@@ -8,7 +8,7 @@ import { validate_assignment } from './shared/utils.js';
  * @param {Context} context
  */
 export function UpdateExpression(node, context) {
-	validate_assignment(node, node.argument, context.state);
+	validate_assignment(node, node.argument, context);
 
 	if (context.state.reactive_statement) {
 		const id = node.argument.type === 'MemberExpression' ? object(node.argument) : node.argument;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 12e21c386c..d7b682da08 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -4,24 +4,25 @@
 /** @import { Scope } from '../../../scope' */
 /** @import { NodeLike } from '../../../../errors.js' */
 import * as e from '../../../../errors.js';
-import { extract_identifiers } from '../../../../utils/ast.js';
+import { extract_identifiers, get_parent } from '../../../../utils/ast.js';
 import * as w from '../../../../warnings.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {AssignmentExpression | UpdateExpression | AST.BindDirective} node
  * @param {Pattern | Expression} argument
- * @param {AnalysisState} state
+ * @param {Context} context
  */
-export function validate_assignment(node, argument, state) {
-	validate_no_const_assignment(node, argument, state.scope, node.type === 'BindDirective');
+export function validate_assignment(node, argument, context) {
+	validate_no_const_assignment(node, argument, context.state.scope, node.type === 'BindDirective');
 
 	if (argument.type === 'Identifier') {
-		const binding = state.scope.get(argument.name);
+		const binding = context.state.scope.get(argument.name);
 
-		if (state.analysis.runes) {
-			if (binding?.node === state.analysis.props_id) {
+		if (context.state.analysis.runes) {
+			if (binding?.node === context.state.analysis.props_id) {
 				e.constant_assignment(node, '$props.id()');
 			}
 
@@ -34,6 +35,41 @@ export function validate_assignment(node, argument, state) {
 			e.snippet_parameter_assignment(node);
 		}
 	}
+
+	if (argument.type === 'MemberExpression' && argument.object.type === 'ThisExpression') {
+		const name =
+			argument.computed && argument.property.type !== 'Literal'
+				? null
+				: get_name(argument.property);
+
+		const field = name !== null && context.state.state_fields?.get(name);
+
+		// check we're not assigning to a state field before its declaration in the constructor
+		if (field && field.node.type === 'AssignmentExpression' && node !== field.node) {
+			let i = context.path.length;
+			while (i--) {
+				const parent = context.path[i];
+
+				if (
+					parent.type === 'FunctionDeclaration' ||
+					parent.type === 'FunctionExpression' ||
+					parent.type === 'ArrowFunctionExpression'
+				) {
+					const grandparent = get_parent(context.path, i - 1);
+
+					if (
+						grandparent.type === 'MethodDefinition' &&
+						grandparent.kind === 'constructor' &&
+						/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)
+					) {
+						e.state_field_invalid_assignment(node);
+					}
+
+					break;
+				}
+			}
+		}
+	}
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 9a2f4dd34c..f2eda3a7d2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -163,8 +163,7 @@ export function client_component(analysis, options) {
 		},
 		events: new Set(),
 		preserve_whitespace: options.preserveWhitespace,
-		public_state: new Map(),
-		private_state: new Map(),
+		state_fields: new Map(),
 		transform: {},
 		in_constructor: false,
 		instance_level_snippets: [],
@@ -671,8 +670,7 @@ export function client_module(analysis, options) {
 		options,
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
-		public_state: new Map(),
-		private_state: new Map(),
+		state_fields: new Map(),
 		transform: {},
 		in_constructor: false
 	};
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 243e1c64a3..763b6773c7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -9,15 +9,12 @@ import type {
 	UpdateExpression,
 	VariableDeclaration
 } from 'estree';
-import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
+import type { AST, Namespace, StateField, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
 import type { SourceLocation } from '#shared';
 
 export interface ClientTransformState extends TransformState {
-	readonly private_state: Map<string, StateField>;
-	readonly public_state: Map<string, StateField>;
-
 	/**
 	 * `true` if the current lexical scope belongs to a class constructor. this allows
 	 * us to rewrite `this.foo` as `this.#foo.value`
@@ -94,11 +91,6 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly module_level_snippets: VariableDeclaration[];
 }
 
-export interface StateField {
-	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
-	id: PrivateIdentifier;
-}
-
 export type Context = import('zimmerframe').Context<AST.SvelteNode, ClientTransformState>;
 export type Visitors = import('zimmerframe').Visitors<AST.SvelteNode, any>;
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index e3f9450050..a46b318601 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -11,6 +11,8 @@ import { dev, locate_node } from '../../../../state.js';
 import { should_proxy } from '../utils.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 import { validate_mutation } from './shared/utils.js';
+import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {AssignmentExpression} node
@@ -50,25 +52,42 @@ const callees = {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
-	// Handle class private/public state assignment cases
-	if (
-		context.state.analysis.runes &&
-		left.type === 'MemberExpression' &&
-		left.property.type === 'PrivateIdentifier'
-	) {
-		const private_state = context.state.private_state.get(left.property.name);
+	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		if (field) {
+			// special case — state declaration in class constructor
+			if (field.node.type === 'AssignmentExpression' && left === field.node.left) {
+				const rune = get_rune(right, context.state.scope);
+
+				if (rune) {
+					const child_state = {
+						...context.state,
+						in_constructor: rune !== '$derived' && rune !== '$derived.by'
+					};
+
+					return b.assignment(
+						operator,
+						b.member(b.this, field.key),
+						/** @type {Expression} */ (context.visit(right, child_state))
+					);
+				}
+			}
 
-		if (private_state !== undefined) {
-			let value = /** @type {Expression} */ (
-				context.visit(build_assignment_value(operator, left, right))
-			);
+			// special case — assignment to private state field
+			if (left.property.type === 'PrivateIdentifier') {
+				let value = /** @type {Expression} */ (
+					context.visit(build_assignment_value(operator, left, right))
+				);
 
-			const needs_proxy =
-				private_state.kind === 'state' &&
-				is_non_coercive_operator(operator) &&
-				should_proxy(value, context.state.scope);
+				const needs_proxy =
+					field.type === '$state' &&
+					is_non_coercive_operator(operator) &&
+					should_proxy(value, context.state.scope);
 
-			return b.call('$.set', left, value, needs_proxy && b.true);
+				return b.call('$.set', left, value, needs_proxy && b.true);
+			}
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
index b110f8eae8..665be9e23b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -4,19 +4,52 @@ import { dev, is_ignored } from '../../../../state.js';
 import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 import { transform_inspect_rune } from '../../utils.js';
+import { should_proxy } from '../utils.js';
 
 /**
  * @param {CallExpression} node
  * @param {Context} context
  */
 export function CallExpression(node, context) {
-	switch (get_rune(node, context.state.scope)) {
+	const rune = get_rune(node, context.state.scope);
+
+	switch (rune) {
 		case '$host':
 			return b.id('$$props.$$host');
 
 		case '$effect.tracking':
 			return b.call('$.effect_tracking');
 
+		// transform state field assignments in constructors
+		case '$state':
+		case '$state.raw': {
+			let arg = node.arguments[0];
+
+			/** @type {Expression | undefined} */
+			let value = undefined;
+
+			if (arg) {
+				value = /** @type {Expression} */ (context.visit(node.arguments[0]));
+
+				if (
+					rune === '$state' &&
+					should_proxy(/** @type {Expression} */ (arg), context.state.scope)
+				) {
+					value = b.call('$.proxy', value);
+				}
+			}
+
+			return b.call('$.state', value);
+		}
+
+		case '$derived':
+		case '$derived.by': {
+			let fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+			if (rune === '$derived') fn = b.thunk(fn);
+
+			return b.call('$.derived', fn);
+		}
+
 		case '$state.snapshot':
 			return b.call(
 				'$.snapshot',
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index f3ebd94069..71a8fc3d05 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -1,184 +1,96 @@
-/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition } from 'estree' */
-/** @import { Context, StateField } from '../types' */
+/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
+/** @import { StateField } from '#compiler' */
+/** @import { Context } from '../types' */
 import * as b from '#compiler/builders';
-import { regex_invalid_identifier_chars } from '../../../patterns.js';
-import { get_rune } from '../../../scope.js';
-import { should_proxy } from '../utils.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	if (!context.state.analysis.runes) {
+	const state_fields = context.state.analysis.classes.get(node);
+
+	if (!state_fields) {
+		// in legacy mode, do nothing
 		context.next();
 		return;
 	}
 
-	/** @type {Map<string, StateField>} */
-	const public_state = new Map();
+	/** @type {Array<MethodDefinition | PropertyDefinition | StaticBlock>} */
+	const body = [];
 
-	/** @type {Map<string, StateField>} */
-	const private_state = new Map();
+	const child_state = { ...context.state, state_fields };
 
-	/** @type {Map<(MethodDefinition|PropertyDefinition)["key"], string>} */
-	const definition_names = new Map();
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
 
-	/** @type {string[]} */
-	const private_ids = [];
+		// insert backing fields for stuff declared in the constructor
+		if (field.node.type === 'AssignmentExpression') {
+			const member = b.member(b.this, field.key);
 
-	for (const definition of node.body) {
-		if (
-			(definition.type === 'PropertyDefinition' || definition.type === 'MethodDefinition') &&
-			(definition.key.type === 'Identifier' ||
-				definition.key.type === 'PrivateIdentifier' ||
-				definition.key.type === 'Literal')
-		) {
-			const type = definition.key.type;
-			const name = get_name(definition.key, public_state);
-			if (!name) continue;
-
-			// we store the deconflicted name in the map so that we can access it later
-			definition_names.set(definition.key, name);
-
-			const is_private = type === 'PrivateIdentifier';
-			if (is_private) private_ids.push(name);
-
-			if (definition.value?.type === 'CallExpression') {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (
-					rune === '$state' ||
-					rune === '$state.raw' ||
-					rune === '$derived' ||
-					rune === '$derived.by'
-				) {
-					/** @type {StateField} */
-					const field = {
-						kind:
-							rune === '$state'
-								? 'state'
-								: rune === '$state.raw'
-									? 'raw_state'
-									: rune === '$derived.by'
-										? 'derived_by'
-										: 'derived',
-						// @ts-expect-error this is set in the next pass
-						id: is_private ? definition.key : null
-					};
-
-					if (is_private) {
-						private_state.set(name, field);
-					} else {
-						public_state.set(name, field);
-					}
-				}
-			}
-		}
-	}
+			const should_proxy = field.type === '$state' && true; // TODO
 
-	// each `foo = $state()` needs a backing `#foo` field
-	for (const [name, field] of public_state) {
-		let deconflicted = name;
-		while (private_ids.includes(deconflicted)) {
-			deconflicted = '_' + deconflicted;
-		}
+			const key = b.key(name);
 
-		private_ids.push(deconflicted);
-		field.id = b.private_id(deconflicted);
-	}
+			body.push(
+				b.prop_def(field.key, null),
 
-	/** @type {Array<MethodDefinition | PropertyDefinition>} */
-	const body = [];
+				b.method('get', key, [], [b.return(b.call('$.get', member))]),
 
-	const child_state = { ...context.state, public_state, private_state };
+				b.method(
+					'set',
+					key,
+					[b.id('value')],
+					[b.stmt(b.call('$.set', member, b.id('value'), should_proxy && b.true))]
+				)
+			);
+		}
+	}
 
 	// Replace parts of the class body
 	for (const definition of node.body) {
-		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' ||
-				definition.key.type === 'PrivateIdentifier' ||
-				definition.key.type === 'Literal')
-		) {
-			const name = definition_names.get(definition.key);
-			if (!name) continue;
-
-			const is_private = definition.key.type === 'PrivateIdentifier';
-			const field = (is_private ? private_state : public_state).get(name);
-
-			if (definition.value?.type === 'CallExpression' && field !== undefined) {
-				let value = null;
-
-				if (definition.value.arguments.length > 0) {
-					const init = /** @type {Expression} **/ (
-						context.visit(definition.value.arguments[0], child_state)
-					);
-
-					value =
-						field.kind === 'state'
-							? b.call(
-									'$.state',
-									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
-								)
-							: field.kind === 'raw_state'
-								? b.call('$.state', init)
-								: field.kind === 'derived_by'
-									? b.call('$.derived', init)
-									: b.call('$.derived', b.thunk(init));
-				} else {
-					// if no arguments, we know it's state as `$derived()` is a compile error
-					value = b.call('$.state');
-				}
-
-				if (is_private) {
-					body.push(b.prop_def(field.id, value));
-				} else {
-					// #foo;
-					const member = b.member(b.this, field.id);
-					body.push(b.prop_def(field.id, value));
-
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
-
-					// set foo(value) { this.#foo = value; }
-					const val = b.id('value');
-
-					body.push(
-						b.method(
-							'set',
-							definition.key,
-							[val],
-							[b.stmt(b.call('$.set', member, val, field.kind === 'state' && b.true))]
-						)
-					);
-				}
-				continue;
-			}
+		if (definition.type !== 'PropertyDefinition') {
+			body.push(
+				/** @type {MethodDefinition | StaticBlock} */ (context.visit(definition, child_state))
+			);
+			continue;
 		}
 
-		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
-	}
+		const name = get_name(definition.key);
+		const field = name && /** @type {StateField} */ (state_fields.get(name));
 
-	return { ...node, body };
-}
+		if (!field) {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			continue;
+		}
 
-/**
- * @param {Identifier | PrivateIdentifier | Literal} node
- * @param {Map<string, StateField>} public_state
- */
-function get_name(node, public_state) {
-	if (node.type === 'Literal') {
-		let name = node.value?.toString().replace(regex_invalid_identifier_chars, '_');
-
-		// the above could generate conflicts because it has to generate a valid identifier
-		// so stuff like `0` and `1` or `state%` and `state^` will result in the same string
-		// so we have to de-conflict. We can only check `public_state` because private state
-		// can't have literal keys
-		while (name && public_state.has(name)) {
-			name = '_' + name;
+		if (name[0] === '#') {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+		} else if (field.node === definition) {
+			const member = b.member(b.this, field.key);
+
+			const should_proxy = field.type === '$state' && true; // TODO
+
+			body.push(
+				b.prop_def(
+					field.key,
+					/** @type {CallExpression} */ (context.visit(field.value, child_state))
+				),
+
+				b.method('get', definition.key, [], [b.return(b.call('$.get', member))]),
+
+				b.method(
+					'set',
+					definition.key,
+					[b.id('value')],
+					[b.stmt(b.call('$.set', member, b.id('value'), should_proxy && b.true))]
+				)
+			);
 		}
-		return name;
-	} else {
-		return node.name;
 	}
+
+	return { ...node, body };
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
index ab88345ddd..7e89b0e705 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
@@ -9,9 +9,11 @@ import * as b from '#compiler/builders';
 export function MemberExpression(node, context) {
 	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
 	if (node.property.type === 'PrivateIdentifier') {
-		const field = context.state.private_state.get(node.property.name);
+		const field = context.state.state_fields.get('#' + node.property.name);
+
 		if (field) {
-			return context.state.in_constructor && (field.kind === 'raw_state' || field.kind === 'state')
+			return context.state.in_constructor &&
+				(field.type === '$state.raw' || field.type === '$state')
 				? b.member(node, 'v')
 				: b.call('$.get', node);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
index 96be119b84..66952eb298 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -15,7 +15,7 @@ export function UpdateExpression(node, context) {
 		argument.type === 'MemberExpression' &&
 		argument.object.type === 'ThisExpression' &&
 		argument.property.type === 'PrivateIdentifier' &&
-		context.state.private_state.has(argument.property.name)
+		context.state.state_fields.has('#' + argument.property.name)
 	) {
 		let fn = '$.update';
 		if (node.prefix) fn += '_pre';
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index e7896991d9..3498b2636b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -23,7 +23,6 @@ import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
-import { MemberExpression } from './visitors/MemberExpression.js';
 import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
@@ -49,7 +48,6 @@ const global_visitors = {
 	ExpressionStatement,
 	Identifier,
 	LabeledStatement,
-	MemberExpression,
 	PropertyDefinition,
 	UpdateExpression,
 	VariableDeclaration
@@ -99,7 +97,7 @@ export function server_component(analysis, options) {
 		template: /** @type {any} */ (null),
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
-		private_derived: new Map(),
+		state_fields: new Map(),
 		skip_hydration_boundaries: false
 	};
 
@@ -395,7 +393,7 @@ export function server_module(analysis, options) {
 		// to be present for `javascript_visitors_legacy` and so is included in module
 		// transform state as well as component transform state
 		legacy_reactive_statements: new Map(),
-		private_derived: new Map()
+		state_fields: new Map()
 	};
 
 	const module = /** @type {Program} */ (
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
index 971271642c..adde7480cb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
@@ -2,12 +2,10 @@ import type { Expression, Statement, ModuleDeclaration, LabeledStatement } from
 import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
-import type { StateField } from '../client/types.js';
 
 export interface ServerTransformState extends TransformState {
 	/** The $: calls, which will be ordered in the end */
 	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
-	readonly private_derived: Map<string, StateField>;
 }
 
 export interface ComponentServerTransformState extends ServerTransformState {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index 071a12f9bc..280c16dbd2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -3,6 +3,8 @@
 /** @import { Context, ServerTransformState } from '../types.js' */
 import * as b from '#compiler/builders';
 import { build_assignment_value } from '../../../../utils/ast.js';
+import { get_name } from '../../../nodes.js';
+import { get_rune } from '../../../scope.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 
 /**
@@ -22,6 +24,29 @@ export function AssignmentExpression(node, context) {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
+	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		// special case — state declaration in class constructor
+		if (field && field.node.type === 'AssignmentExpression' && left === field.node.left) {
+			const rune = get_rune(right, context.state.scope);
+
+			if (rune) {
+				const key =
+					left.property.type === 'PrivateIdentifier' || rune === '$state' || rune === '$state.raw'
+						? left.property
+						: field.key;
+
+				return b.assignment(
+					operator,
+					b.member(b.this, key, key.type === 'Literal'),
+					/** @type {Expression} */ (context.visit(right))
+				);
+			}
+		}
+	}
+
 	let object = left;
 
 	while (object.type === 'MemberExpression') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
index 5bcbdee9fb..e36dc820b3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
@@ -25,6 +25,15 @@ export function CallExpression(node, context) {
 		return b.arrow([], b.block([]));
 	}
 
+	if (rune === '$state' || rune === '$state.raw') {
+		return node.arguments[0] ? context.visit(node.arguments[0]) : b.void0;
+	}
+
+	if (rune === '$derived' || rune === '$derived.by') {
+		const fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+		return b.call('$.once', rune === '$derived' ? b.thunk(fn) : fn);
+	}
+
 	if (rune === '$state.snapshot') {
 		return b.call(
 			'$.snapshot',
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index c0ebdeae08..6797b0beff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -1,120 +1,77 @@
-/** @import { ClassBody, Expression, MethodDefinition, PropertyDefinition } from 'estree' */
+/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
 /** @import { Context } from '../types.js' */
-/** @import { StateField } from '../../client/types.js' */
-import { dev } from '../../../../state.js';
 import * as b from '#compiler/builders';
-import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	if (!context.state.analysis.runes) {
+	const state_fields = context.state.analysis.classes.get(node);
+
+	if (!state_fields) {
+		// in legacy mode, do nothing
 		context.next();
 		return;
 	}
 
-	/** @type {Map<string, StateField>} */
-	const public_derived = new Map();
+	/** @type {Array<MethodDefinition | PropertyDefinition | StaticBlock>} */
+	const body = [];
 
-	/** @type {Map<string, StateField>} */
-	const private_derived = new Map();
+	const child_state = { ...context.state, state_fields };
 
-	/** @type {string[]} */
-	const private_ids = [];
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
 
-	for (const definition of node.body) {
+		// insert backing fields for stuff declared in the constructor
 		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' || definition.key.type === 'PrivateIdentifier')
+			field &&
+			field.node.type === 'AssignmentExpression' &&
+			(field.type === '$derived' || field.type === '$derived.by')
 		) {
-			const { type, name } = definition.key;
-
-			const is_private = type === 'PrivateIdentifier';
-			if (is_private) private_ids.push(name);
+			const member = b.member(b.this, field.key);
 
-			if (definition.value?.type === 'CallExpression') {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (rune === '$derived' || rune === '$derived.by') {
-					/** @type {StateField} */
-					const field = {
-						kind: rune === '$derived.by' ? 'derived_by' : 'derived',
-						// @ts-expect-error this is set in the next pass
-						id: is_private ? definition.key : null
-					};
-
-					if (is_private) {
-						private_derived.set(name, field);
-					} else {
-						public_derived.set(name, field);
-					}
-				}
-			}
+			body.push(
+				b.prop_def(field.key, null),
+				b.method('get', b.key(name), [], [b.return(b.call(member))])
+			);
 		}
 	}
 
-	// each `foo = $derived()` needs a backing `#foo` field
-	for (const [name, field] of public_derived) {
-		let deconflicted = name;
-		while (private_ids.includes(deconflicted)) {
-			deconflicted = '_' + deconflicted;
-		}
-
-		private_ids.push(deconflicted);
-		field.id = b.private_id(deconflicted);
-	}
-
-	/** @type {Array<MethodDefinition | PropertyDefinition>} */
-	const body = [];
-
-	const child_state = { ...context.state, private_derived };
-
 	// Replace parts of the class body
 	for (const definition of node.body) {
-		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' || definition.key.type === 'PrivateIdentifier')
-		) {
-			const name = definition.key.name;
-
-			const is_private = definition.key.type === 'PrivateIdentifier';
-			const field = (is_private ? private_derived : public_derived).get(name);
+		if (definition.type !== 'PropertyDefinition') {
+			body.push(
+				/** @type {MethodDefinition | StaticBlock} */ (context.visit(definition, child_state))
+			);
+			continue;
+		}
 
-			if (definition.value?.type === 'CallExpression' && field !== undefined) {
-				const init = /** @type {Expression} **/ (
-					context.visit(definition.value.arguments[0], child_state)
-				);
-				const value =
-					field.kind === 'derived_by' ? b.call('$.once', init) : b.call('$.once', b.thunk(init));
+		const name = get_name(definition.key);
+		const field = name && state_fields.get(name);
 
-				if (is_private) {
-					body.push(b.prop_def(field.id, value));
-				} else {
-					// #foo;
-					const member = b.member(b.this, field.id);
-					body.push(b.prop_def(field.id, value));
+		if (!field) {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			continue;
+		}
 
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
+		if (name[0] === '#' || field.type === '$state' || field.type === '$state.raw') {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+		} else if (field.node === definition) {
+			const member = b.member(b.this, field.key);
 
-					if (dev && (field.kind === 'derived' || field.kind === 'derived_by')) {
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[b.id('_')],
-								[b.throw_error(`Cannot update a derived property ('${name}')`)]
-							)
-						);
-					}
-				}
+			body.push(
+				b.prop_def(
+					field.key,
+					/** @type {CallExpression} */ (context.visit(field.value, child_state))
+				),
 
-				continue;
-			}
+				b.method('get', definition.key, [], [b.return(b.call(member))])
+			);
 		}
-
-		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
 	}
 
 	return { ...node, body };
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
deleted file mode 100644
index 73631395e6..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @import { MemberExpression } from 'estree' */
-/** @import { Context } from '../types.js' */
-import * as b from '#compiler/builders';
-
-/**
- * @param {MemberExpression} node
- * @param {Context} context
- */
-export function MemberExpression(node, context) {
-	if (
-		context.state.analysis.runes &&
-		node.object.type === 'ThisExpression' &&
-		node.property.type === 'PrivateIdentifier'
-	) {
-		const field = context.state.private_derived.get(node.property.name);
-
-		if (field) {
-			return b.call(node);
-		}
-	}
-
-	context.next();
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
index 5d860207dd..887ad447b9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
@@ -1,5 +1,5 @@
 import type { Scope } from '../scope.js';
-import type { AST, ValidatedModuleCompileOptions } from '#compiler';
+import type { AST, StateField, ValidatedModuleCompileOptions } from '#compiler';
 import type { Analysis } from '../types.js';
 
 export interface TransformState {
@@ -7,4 +7,6 @@ export interface TransformState {
 	readonly options: ValidatedModuleCompileOptions;
 	readonly scope: Scope;
 	readonly scopes: Map<AST.SvelteNode, Scope>;
+
+	readonly state_fields: Map<string, StateField>;
 }
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 003c3a2c49..2043747ed0 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -1,4 +1,6 @@
+/** @import { Expression, PrivateIdentifier } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
+
 /**
  * All nodes that can appear elsewhere than the top level, have attributes and can contain children
  */
@@ -64,3 +66,14 @@ export function create_expression_metadata() {
 		has_call: false
 	};
 }
+
+/**
+ * @param {Expression | PrivateIdentifier} node
+ */
+export function get_name(node) {
+	if (node.type === 'Literal') return String(node.value);
+	if (node.type === 'PrivateIdentifier') return '#' + node.name;
+	if (node.type === 'Identifier') return node.name;
+
+	return null;
+}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index f98cbe1415..67cbd75ff8 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -1,6 +1,15 @@
-import type { AST, Binding } from '#compiler';
-import type { Identifier, LabeledStatement, Node, Program } from 'estree';
+import type { AST, Binding, StateField } from '#compiler';
+import type {
+	AssignmentExpression,
+	ClassBody,
+	Identifier,
+	LabeledStatement,
+	Node,
+	Program
+} from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
+import type { StateCreationRuneName } from '../../utils.js';
+import type { AnalysisState } from './2-analyze/types.js';
 
 export interface Js {
 	ast: Program;
@@ -29,6 +38,8 @@ export interface Analysis {
 	immutable: boolean;
 	tracing: boolean;
 
+	classes: Map<ClassBody, Map<string, StateField>>;
+
 	// TODO figure out if we can move this to ComponentAnalysis
 	accessors: boolean;
 }
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 616c346ad3..ef52552a2e 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -2,6 +2,13 @@ import type { SourceMap } from 'magic-string';
 import type { Binding } from '../phases/scope.js';
 import type { AST, Namespace } from './template.js';
 import type { ICompileDiagnostic } from '../utils/compile_diagnostic.js';
+import type { StateCreationRuneName } from '../../utils.js';
+import type {
+	AssignmentExpression,
+	CallExpression,
+	PrivateIdentifier,
+	PropertyDefinition
+} from 'estree';
 
 /** The return value of `compile` from `svelte/compiler` */
 export interface CompileResult {
@@ -269,6 +276,13 @@ export interface ExpressionMetadata {
 	has_call: boolean;
 }
 
+export interface StateField {
+	type: StateCreationRuneName;
+	node: PropertyDefinition | AssignmentExpression;
+	key: PrivateIdentifier;
+	value: CallExpression;
+}
+
 export * from './template.js';
 
 export { Binding, Scope } from '../phases/scope.js';
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index ada318e85a..921eaec57c 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -428,15 +428,19 @@ export function is_mathml(name) {
 	return MATHML_ELEMENTS.includes(name);
 }
 
-const RUNES = /** @type {const} */ ([
+export const STATE_CREATION_RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
+	'$derived',
+	'$derived.by'
+]);
+
+const RUNES = /** @type {const} */ ([
+	...STATE_CREATION_RUNES,
 	'$state.snapshot',
 	'$props',
 	'$props.id',
 	'$bindable',
-	'$derived',
-	'$derived.by',
 	'$effect',
 	'$effect.pre',
 	'$effect.tracking',
@@ -447,12 +451,24 @@ const RUNES = /** @type {const} */ ([
 	'$host'
 ]);
 
+/** @typedef {RUNES[number]} RuneName */
+
 /**
  * @param {string} name
- * @returns {name is RUNES[number]}
+ * @returns {name is RuneName}
  */
 export function is_rune(name) {
-	return RUNES.includes(/** @type {RUNES[number]} */ (name));
+	return RUNES.includes(/** @type {RuneName} */ (name));
+}
+
+/** @typedef {STATE_CREATION_RUNES[number]} StateCreationRuneName */
+
+/**
+ * @param {string} name
+ * @returns {name is StateCreationRuneName}
+ */
+export function is_state_creation_rune(name) {
+	return STATE_CREATION_RUNES.includes(/** @type {StateCreationRuneName} */ (name));
 }
 
 /** List of elements that require raw contents and should not have SSR comments put in them */
diff --git a/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js b/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
index e6551031cc..f5b116117e 100644
--- a/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
@@ -4,7 +4,7 @@ export default test({
 	error: {
 		code: 'state_invalid_placement',
 		message:
-			'`$state(...)` can only be used as a variable declaration initializer or a class field',
+			'`$state(...)` 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.',
 		position: [33, 41]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
index 1185ca6b45..592b2634a3 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'state_invalid_placement',
-		message: '`$state(...)` can only be used as a variable declaration initializer or a class field'
+		message:
+			'`$state(...)` 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.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
index 476d7239a3..f31748d26a 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'state_invalid_placement',
 		message:
-			'`$derived(...)` can only be used as a variable declaration initializer or a class field'
+			'`$derived(...)` 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.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
index 1185ca6b45..592b2634a3 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'state_invalid_placement',
-		message: '`$state(...)` can only be used as a variable declaration initializer or a class field'
+		message:
+			'`$state(...)` 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.'
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
new file mode 100644
index 0000000000..dd847ce2f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10</button>`,
+	ssrHtml: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>10</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
new file mode 100644
index 0000000000..3d8ea41418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	class Counter {
+		constructor() {
+			this.count = $state(0);
+			$effect(() => {
+				this.count = 10;
+			});
+		}
+	}
+	const counter = new Counter();
+</script>
+
+<button on:click={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
new file mode 100644
index 0000000000..dd847ce2f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10</button>`,
+	ssrHtml: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>10</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
new file mode 100644
index 0000000000..47b8c901eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const counter = new class Counter {
+		constructor() {
+			this.count = $state(0);
+			$effect(() => {
+				this.count = 10;
+			});
+		}
+	}
+</script>
+
+<button on:click={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
new file mode 100644
index 0000000000..e2c4f302b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	class Test {
+		0 = $state();
+
+		constructor() {
+			this[1] = $state();
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
new file mode 100644
index 0000000000..4cf1aea213
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// The component context class instance gets shared between tests, strangely, causing hydration to fail?
+	mode: ['client', 'server'],
+
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [
+			0,
+			'class trigger false',
+			'local trigger false',
+			1,
+			2,
+			3,
+			4,
+			'class trigger true',
+			'local trigger true'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
new file mode 100644
index 0000000000..03687d01bb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
@@ -0,0 +1,37 @@
+<script module>
+	class SomeLogic {
+		trigger() {
+			this.someValue++;
+		}
+
+		constructor() {
+			this.someValue = $state(0);
+			this.isAboveThree = $derived(this.someValue > 3);
+		}
+	}
+
+	const someLogic = new SomeLogic();
+</script>
+
+<script>
+	function increment() {
+		someLogic.trigger();
+	}
+
+	let localDerived = $derived(someLogic.someValue > 3);
+
+	$effect(() => {
+		console.log(someLogic.someValue);
+	});
+	$effect(() => {
+		console.log('class trigger ' + someLogic.isAboveThree)
+	});
+	$effect(() => {
+		console.log('local trigger ' + localDerived)
+	});
+
+</script>
+
+<button on:click={increment}>
+	clicks: {someLogic.someValue}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
new file mode 100644
index 0000000000..02cf36d900
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>1</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>2</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
new file mode 100644
index 0000000000..5dbbb10afd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	class Counter {
+		count;
+
+		constructor(count) {
+			this.count = $state(count);
+		}
+	}
+	const counter = new Counter(0);
+</script>
+
+<button onclick={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
new file mode 100644
index 0000000000..32cca6c693
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10: 20</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>11: 22</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>12: 24</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
new file mode 100644
index 0000000000..d8feb554cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	class Counter {
+		constructor(initial) {
+			this.count = $state(initial);
+		}
+
+		increment = () => {
+			this.count++;
+		}
+	}
+
+	class PluggableCounter extends Counter {
+		constructor(initial, plugin) {
+			super(initial)
+			this.custom = $derived(plugin(this.count));
+		}
+	}
+
+	const counter = new PluggableCounter(10, (count) => count * 2);
+</script>
+
+<button onclick={counter.increment}>{counter.count}: {counter.custom}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
new file mode 100644
index 0000000000..f35dc57228
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>20</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>22</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>24</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
new file mode 100644
index 0000000000..aa8ba1658b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	class Counter {
+		/** @type {number} */
+		#count;
+
+		constructor(initial) {
+			this.#count = $state(initial);
+			this.doubled = $derived(this.#count * 2);
+		}
+
+		increment = () => {
+			this.#count++;
+		}
+	}
+	const counter = new Counter(10);
+</script>
+
+<button onclick={counter.increment}>{counter.doubled}</button>
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
new file mode 100644
index 0000000000..82765c51c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
new file mode 100644
index 0000000000..05cd4d9d9d
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	count = $state(0);
+
+	constructor() {
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
new file mode 100644
index 0000000000..c4cb0991d0
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 4,
+			"column": 3
+		},
+		"end": {
+			"line": 4,
+			"column": 18
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
new file mode 100644
index 0000000000..e5ad562727
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
@@ -0,0 +1,9 @@
+export class Counter {
+	constructor() {
+		if (true) {
+			this.count = -1;
+		}
+
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
new file mode 100644
index 0000000000..82765c51c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
new file mode 100644
index 0000000000..e37be4b3e6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		this.count = $state(0);
+		this.count = 1;
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
new file mode 100644
index 0000000000..175c41f98c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 28
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
new file mode 100644
index 0000000000..f9196ff3cd
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		this.count = $state(0);
+		this.count = 1;
+		this.count = $state.raw(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
new file mode 100644
index 0000000000..9f959874c8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$state(...)` 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.",
+		"start": {
+			"line": 4,
+			"column": 16
+		},
+		"end": {
+			"line": 4,
+			"column": 25
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
new file mode 100644
index 0000000000..bf1aada1b5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		if (true) {
+			this.count = $state(0);
+		}
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
new file mode 100644
index 0000000000..af2f30dade
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 27
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
new file mode 100644
index 0000000000..bc3d19a14f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	// prettier-ignore
+	'count' = $state(0);
+	constructor() {
+		this['count'] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
new file mode 100644
index 0000000000..ae7a47f31b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 4,
+			"column": 2
+		},
+		"end": {
+			"line": 4,
+			"column": 27
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
new file mode 100644
index 0000000000..2ebe52e685
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
@@ -0,0 +1,6 @@
+export class Counter {
+	count = $state(0);
+	constructor() {
+		this['count'] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
new file mode 100644
index 0000000000..64e56f8d5c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$state(...)` 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.",
+		"start": {
+			"line": 5,
+			"column": 16
+		},
+		"end": {
+			"line": 5,
+			"column": 25
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
new file mode 100644
index 0000000000..50c8559837
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
@@ -0,0 +1,7 @@
+const count = 'count';
+
+export class Counter {
+	constructor() {
+		this[count] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
new file mode 100644
index 0000000000..2e0bd10ff8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 3,
+			"column": 2
+		},
+		"end": {
+			"line": 3,
+			"column": 17
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
new file mode 100644
index 0000000000..0a76c6fec9
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
@@ -0,0 +1,6 @@
+export class Counter {
+	constructor() {
+		this.count = -1;
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
new file mode 100644
index 0000000000..b7dd4c8ed4
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 2,
+			"column": 12
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js
new file mode 100644
index 0000000000..a8469e13af
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	count = -1;
+
+	constructor() {
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
index 32594e4268..e1906b181a 100644
--- a/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
+++ b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "state_invalid_placement",
-		"message": "`$derived(...)` can only be used as a variable declaration initializer or a class field",
+		"message": "`$derived(...)` 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.",
 		"start": {
 			"line": 2,
 			"column": 15