add support for class fields

Author: Ocean-OS

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

@@ -828,10 +828,35 @@ Cannot export state from a module if it is reassigned. Either export a function
 `%rune%(...)` can only be used as a variable declaration initializer or a class field
 ```
 
+### state_invalidate_invalid_this_property
+
+```
+`$state.invalidate` can only be called with an argument referencing `this` in a class using a non-computed property
+```
+
+Like how you can't use `$state` or `$derived` when declaring computed class fields, you can't use `$state.invalidate` to invalidate a computed class field. For example, while `count` here is not itself a computed property, you can't invalidate it if you reference it in a computed property:
+```js
+class Box {
+	value;
+	constructor(initial) {
+		this.value = initial;
+	}
+}
+const property = 'count';
+class Counter {
+	count = $state(new Box(0));
+	increment() {
+		this.count.value += 1;
+		$state.invalidate(this[property]); // this doesn't work
+		$state.invalidate(this.count); // this works
+	}
+}
+```
+
 ### state_invalidate_nonreactive_argument
 
 ```
-`$state.invalidate` only takes a variable declared with `$state` or `$state.raw` as its argument
+`$state.invalidate` only takes a variable or non-computed class field declared with `$state` or `$state.raw` as its argument
 ```
 
 ### store_invalid_scoped_subscription

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

@@ -220,9 +220,32 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 > `%rune%(...)` can only be used as a variable declaration initializer or a class field
 
+## state_invalidate_invalid_this_property
+
+> `$state.invalidate` can only be called with an argument referencing `this` in a class using a non-computed property
+
+Like how you can't use `$state` or `$derived` when declaring computed class fields, you can't use `$state.invalidate` to invalidate a computed class field. For example, while `count` here is not itself a computed property, you can't invalidate it if you reference it in a computed property:
+```js
+class Box {
+	value;
+	constructor(initial) {
+		this.value = initial;
+	}
+}
+const property = 'count';
+class Counter {
+	count = $state(new Box(0));
+	increment() {
+		this.count.value += 1;
+		$state.invalidate(this[property]); // this doesn't work
+		$state.invalidate(this.count); // this works
+	}
+}
+```
+
 ## state_invalidate_nonreactive_argument
 
-> `$state.invalidate` only takes a variable declared with `$state` or `$state.raw` as its argument
+> `$state.invalidate` only takes a variable or non-computed class field declared with `$state` or `$state.raw` as its argument
 
 ## store_invalid_scoped_subscription
 

packages/svelte/src/ambient.d.ts

@@ -94,7 +94,7 @@ declare namespace $state {
 						: never;
 
 	/**
-	 * Forces an update on a `$state` or `$state.raw` variable.
+	 * Forces an update on a `$state` or `$state.raw` variable or class field.
 	 * This is primarily meant as an escape hatch to be able to use external or native classes
 	 * with Svelte's reactivity system.
 	 * If you used Svelte 3 or 4, this is the equivalent of `foo = foo`.

packages/svelte/src/compiler/errors.js

@@ -481,12 +481,21 @@ export function state_invalid_placement(node, rune) {
 }
 
 /**
- * `$state.invalidate` only takes a variable declared with `$state` or `$state.raw` as its argument
+ * `$state.invalidate` can only be called with an argument referencing `this` in a class using a non-computed property
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function state_invalidate_invalid_this_property(node) {
+	e(node, 'state_invalidate_invalid_this_property', `\`$state.invalidate\` can only be called with an argument referencing \`this\` in a class using a non-computed property\nhttps://svelte.dev/e/state_invalidate_invalid_this_property`);
+}
+
+/**
+ * `$state.invalidate` only takes a variable or non-computed class field declared with `$state` or `$state.raw` as its argument
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function state_invalidate_nonreactive_argument(node) {
-	e(node, 'state_invalidate_nonreactive_argument', `\`$state.invalidate\` only takes a variable declared with \`$state\` or \`$state.raw\` as its argument\nhttps://svelte.dev/e/state_invalidate_nonreactive_argument`);
+	e(node, 'state_invalidate_nonreactive_argument', `\`$state.invalidate\` only takes a variable or non-computed class field declared with \`$state\` or \`$state.raw\` as its argument\nhttps://svelte.dev/e/state_invalidate_nonreactive_argument`);
 }
 
 /**

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

@@ -116,15 +116,45 @@ export function CallExpression(node, context) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
 			} else {
 				let arg = node.arguments[0];
-				if (arg.type !== 'Identifier') {
+				if (arg.type !== 'Identifier' && arg.type !== 'MemberExpression') {
 					e.state_invalidate_nonreactive_argument(node);
 				}
-				let binding = context.state.scope.get(arg.name);
-				if (binding) {
-					if (binding.kind === 'raw_state' || binding.kind === 'state') {
-						binding.reassigned = true;
+				if (arg.type === 'MemberExpression') {
+					if (arg.object.type !== 'ThisExpression') {
+						e.state_invalidate_nonreactive_argument(node);
+					}
+					const class_body = context.path.findLast((parent) => parent.type === 'ClassBody');
+					if (arg.computed || !class_body) {
+						e.state_invalidate_invalid_this_property(node);
+					}
+					const possible_this_bindings = context.path.filter((parent, index) => {
+						return (
+							parent.type === 'FunctionDeclaration' ||
+							(parent.type === 'FunctionExpression' &&
+								context.path[index - 1]?.type !== 'MethodDefinition')
+						);
+					});
+					if (possible_this_bindings.length === 0) {
 						break;
 					}
+					const class_index = context.path.indexOf(class_body);
+					const last_possible_this_index = context.path.indexOf(
+						/** @type {AST.SvelteNode} */ (possible_this_bindings.at(-1))
+					);
+					if (class_index < last_possible_this_index) {
+						e.state_invalidate_invalid_this_property(node);
+					}
+					// we can't really do anything else yet, so we just wait for the transformation phase
+					// where we know which class fields are reactive (and what their private aliases are)
+					break;
+				} else {
+					let binding = context.state.scope.get(arg.name);
+					if (binding) {
+						if (binding.kind === 'raw_state' || binding.kind === 'state') {
+							binding.reassigned = true;
+							break;
+						}
+					}
 				}
 				e.state_invalidate_nonreactive_argument(node);
 			}

packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js

@@ -4,6 +4,7 @@ import { dev, is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { get_rune } from '../../../scope.js';
 import { transform_inspect_rune } from '../../utils.js';
+import * as e from '../../../../errors.js';
 
 /**
  * @param {CallExpression} node
@@ -24,7 +25,24 @@ export function CallExpression(node, context) {
 				is_ignored(node, 'state_snapshot_uncloneable') && b.true
 			);
 		case '$state.invalidate':
-			return b.call('$.invalidate', node.arguments[0]);
+			if (node.arguments[0].type === 'Identifier') {
+				return b.call('$.invalidate', node.arguments[0]);
+			} else if (node.arguments[0].type === 'MemberExpression') {
+				const { property } = node.arguments[0];
+				let field;
+				switch (property.type) {
+					case 'Identifier':
+						field = context.state.public_state.get(property.name);
+						break;
+					case 'PrivateIdentifier':
+						field = context.state.private_state.get(property.name);
+						break;
+				}
+				if (!field || (field.kind !== 'state' && field.kind !== 'raw_state')) {
+					e.state_invalidate_nonreactive_argument(node);
+				}
+				return b.call('$.invalidate', b.member(b.this, field.id));
+			}
 
 		case '$effect.root':
 			return b.call(

packages/svelte/types/index.d.ts

@@ -2761,7 +2761,7 @@ declare namespace $state {
 						: never;
 
 	/**
-	 * Forces an update on a `$state` or `$state.raw` variable.
+	 * Forces an update on a `$state` or `$state.raw` variable or class field.
 	 * This is primarily meant as an escape hatch to be able to use external or native classes
 	 * with Svelte's reactivity system.
 	 * If you used Svelte 3 or 4, this is the equivalent of `foo = foo`.