feat: add autofixer to tell the LLM to check if some function called in effect is assigning state

apps/mcp-remote/package.json

@@ -64,6 +64,7 @@
 	"dependencies": {
 		"@sveltejs/mcp-schema": "workspace:^",
 		"@sveltejs/mcp-server": "workspace:^",
-		"@tmcp/transport-http": "^0.6.2"
+		"@tmcp/transport-http": "^0.6.3",
+		"tmcp": "^1.14.0"
 	}
 }

packages/mcp-server/src/mcp/autofixers/add-autofixers-issues.test.ts

@@ -10,198 +10,322 @@ function run_autofixers_on_code(code: string, desired_svelte_version = 5) {
 	return content;
 }
 
+function with_possible_inits(title: string, fn: (args: { init: string }) => void) {
+	describe.each([
+		{ init: '$state' },
+		{ init: '$state.raw' },
+		{ init: '$derived' },
+		{ init: '$derived.by' },
+	])(title, fn);
+}
+
 describe('add_autofixers_issues', () => {
 	describe('assign_in_effect', () => {
-		it(`should add suggestions when assigning to a stateful variable inside an effect`, () => {
+		with_possible_inits('($init)', ({ init }) => {
+			it(`should add suggestions when assigning to a stateful variable inside an effect`, () => {
+				const content = run_autofixers_on_code(`
+				<script>
+					const count = ${init}(0);
+					$effect(() => {
+						count = 43;
+					});
+				</script>`);
+
+				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+				expect(content.suggestions).toContain(
+					'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+			});
+
+			it(`should add a suggestion for each variable assigned within an effect`, () => {
+				const content = run_autofixers_on_code(`
+				<script>
+					const count = $state(0);
+					const count2 = $state(0);
+					$effect(() => {
+						count = 43;
+						count2 = 44;
+					});
+				</script>`);
+
+				expect(content.suggestions.length).toBeGreaterThanOrEqual(2);
+				expect(content.suggestions).toContain(
+					'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+				expect(content.suggestions).toContain(
+					'The stateful variable "count2" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+			});
+			it(`should not add a suggestion for variables that are not assigned within an effect`, () => {
+				const content = run_autofixers_on_code(`
+				<script>
+					const count = ${init}(0);
+				</script>
+				
+				<button onclick={() => count = 43}>Increment</button>
+				`);
+
+				expect(content.suggestions).not.toContain(
+					'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+			});
+
+			it("should not add a suggestions for variables that are assigned within an effect but aren't stateful", () => {
+				const content = run_autofixers_on_code(`
+				<script>
+					const count = 0;
+					
+					$effect(() => {
+						count = 43;
+					});
+				</script>`);
+
+				expect(content.suggestions).not.toContain(
+					'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+			});
+
+			it(`should add a suggestion for variables that are assigned within an effect with an update`, () => {
+				const content = run_autofixers_on_code(`
+				<script>
+					let count = ${init}(0);
+					
+					$effect(() => {
+						count++;
+					});
+				</script>
+				`);
+
+				expect(content.suggestions).toContain(
+					'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+			});
+
+			it(`should add a suggestion for variables that are mutated within an effect`, () => {
+				const content = run_autofixers_on_code(`
+				<script>
+					let count = ${init}({ value: 0 });
+					
+					$effect(() => {
+						count.value = 42;
+					});
+				</script>
+				`);
+
+				expect(content.suggestions).toContain(
+					'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				);
+			});
+		});
+
+		it('should add a suggestion when calling a function inside an effect', () => {
 			const content = run_autofixers_on_code(`
 			<script>
-				const count = $state(0);
+				import { fetch_data } from './data.js';
 				$effect(() => {
-					count = 43;
+					fetch_data();
 				});
 			</script>`);
 
 			expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
 			expect(content.suggestions).toContain(
-				'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				`You are calling the function \`fetch_data\` inside an $effect. Please check if the function is reassigning a stateful variable because that's considered malpractice and check if it could use  \`$derived\` instead. Ignore this suggestion if you are sure this function is not assigning any stateful variable or if you can't check if it does.`,
 			);
 		});
 
-		it(`should add a suggestion for each variable assigned within an effect`, () => {
+		it('should add a suggestion when calling a function inside an effect (with non identifier callee)', () => {
 			const content = run_autofixers_on_code(`
 			<script>
-				const count = $state(0);
-				const count2 = $state(0);
+				import { fetch_data } from './data.js';
 				$effect(() => {
-					count = 43;
-					count2 = 44;
+					fetch_data.fetch();
 				});
 			</script>`);
 
-			expect(content.suggestions.length).toBeGreaterThanOrEqual(2);
+			expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
 			expect(content.suggestions).toContain(
-				'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
-			);
-			expect(content.suggestions).toContain(
-				'The stateful variable "count2" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
-			);
-		});
-		it(`should not add a suggestion for variables that are not assigned within an effect`, () => {
-			const content = run_autofixers_on_code(`
-			<script>
-				const count = $state(0);
-			</script>
-			
-			<button onclick={() => count = 43}>Increment</button>
-			`);
-
-			expect(content.suggestions).not.toContain(
-				'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
-			);
-		});
-
-		it("should not add a suggestions for variables that are assigned within an effect but aren't stateful", () => {
-			const content = run_autofixers_on_code(`
-			<script>
-				const count = 0;
-				
-				$effect(() => {
-					count = 43;
-				});
-			</script>`);
-
-			expect(content.suggestions).not.toContain(
-				'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
-			);
-		});
-
-		it(`should add a suggestion for variables that are assigned within an effect with an update`, () => {
-			const content = run_autofixers_on_code(`
-			<script>
-				let count = $state(0);
-				
-				$effect(() => {
-					count++;
-				});
-			</script>
-			`);
-
-			expect(content.suggestions).toContain(
-				'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
-			);
-		});
-
-		it(`should add a suggestion for variables that are mutated within an effect`, () => {
-			const content = run_autofixers_on_code(`
-			<script>
-				let count = $state({ value: 0 });
-				
-				$effect(() => {
-					count.value = 42;
-				});
-			</script>
-			`);
-
-			expect(content.suggestions).toContain(
-				'The stateful variable "count" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.',
+				`You are calling a function inside an $effect. Please check if the function is reassigning a stateful variable because that's considered malpractice and check if it could use  \`$derived\` instead. Ignore this suggestion if you are sure this function is not assigning any stateful variable or if you can't check if it does.`,
 			);
 		});
 	});
 
-	describe.each([{ method: 'set' }, { method: 'update' }])(
-		'set_or_update_state ($method)',
-		({ method }) => {
-			it(`should add suggestions when using .${method}() on a stateful variable with a literal init`, () => {
-				const content = run_autofixers_on_code(`
+	with_possible_inits('($init)', ({ init }) => {
+		describe.each([{ method: 'set' }, { method: 'update' }])(
+			'wrong_property_access_state ($method)',
+			({ method }) => {
+				it(`should add suggestions when using .${method}() on a stateful variable with a literal init`, () => {
+					const content = run_autofixers_on_code(`
 			<script>
-				const count = $state(0);
+				const count = ${init}(0);
 				function update_count() {
 					count.${method}(43);
 				}
 			</script>`);
 
-				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
-				expect(content.suggestions).toContain(
-					`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them.`,
-				);
-			});
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them.`,
+					);
+				});
 
-			it(`should add suggestions when using .${method}() on a stateful variable with an array init`, () => {
-				const content = run_autofixers_on_code(`
+				it(`should add suggestions when using .${method}() on a stateful variable with an array init`, () => {
+					const content = run_autofixers_on_code(`
 			<script>
-				const count = $state([0]);
+				const count = ${init}([0]);
 				function update_count() {
 					count.${method}([1]);
 				}
 			</script>`);
 
-				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
-				expect(content.suggestions).toContain(
-					`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them.`,
-				);
-			});
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them.`,
+					);
+				});
 
-			it(`should add suggestions when using .${method}() on a stateful variable with conditional if it's not sure if the method could actually be present on the variable ($state({}))`, () => {
-				const content = run_autofixers_on_code(`
+				it(`should add suggestions when using .${method}() on a stateful variable with conditional if it's not sure if the method could actually be present on the variable (${init}({}))`, () => {
+					const content = run_autofixers_on_code(`
 			<script>
-				const count = $state({ value: 0 });
+				const count = ${init}({ value: 0 });
 				function update_count() {
 					count.${method}({ value: 43 });
 				}
 			</script>`);
 
-				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
-				expect(content.suggestions).toContain(
-					`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
-				);
-			});
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
+					);
+				});
 
-			it(`should add suggestions when using .${method}() on a stateful variable with conditional if it's not sure if the method could actually be present on the variable ($state(new Class()))`, () => {
-				const content = run_autofixers_on_code(`
+				it(`should add suggestions when using .${method}() on a stateful variable with conditional if it's not sure if the method could actually be present on the variable (${init}(new Class()))`, () => {
+					const content = run_autofixers_on_code(`
 			<script>
-				const count = $state(new Class());
+				const count = ${init}(new Class());
 				function update_count() {
 					count.${method}(new Class());
 				}
 			</script>`);
 
-				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
-				expect(content.suggestions).toContain(
-					`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
-				);
-			});
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
+					);
+				});
 
-			it(`should add suggestions when using .${method}() on a stateful variable with conditional if it's not sure if the method could actually be present on the variable ($state(variable_name))`, () => {
-				const content = run_autofixers_on_code(`
+				it(`should add suggestions when using .${method}() on a stateful variable with conditional if it's not sure if the method could actually be present on the variable (${init}(variable_name))`, () => {
+					const content = run_autofixers_on_code(`
 			<script>
 				const { init } = $props();
-				const count = $state(init);
+				const count = ${init}(init);
 				function update_count() {
 					count.${method}(43);
 				}
 			</script>`);
 
-				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
-				expect(content.suggestions).toContain(
-					`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
-				);
-			});
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
+					);
+				});
 
-			it(`should not add suggestions when using .${method} on a stateful variable if it's not a method call`, () => {
-				const content = run_autofixers_on_code(`
+				it(`should not add suggestions when using .${method} on a stateful variable if it's not a method call`, () => {
+					const content = run_autofixers_on_code(`
 			<script>
-				const count = $state({});
+				const count = ${init}({});
 				function update_count() {
 					console.log(count.${method});
 				}
 			</script>`);
 
-				expect(content.suggestions).not.toContain(
-					`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
-				);
-			});
-		},
-	);
+					expect(content.suggestions).not.toContain(
+						`You are trying to update the stateful variable "count" using "${method}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them. However I can't verify if "count" is a state variable of an object or a class with a "${method}" method on it. Please verify that before updating the code to use a normal assignment`,
+					);
+				});
+			},
+		);
+
+		describe.each([{ property: '$' }])(
+			'wrong_property_access_state property ($property)',
+			async ({ property }) => {
+				it(`should add suggestions when reading .${property} on a stateful variable with a literal init`, () => {
+					const content = run_autofixers_on_code(`
+			<script>
+				const count = ${init}(0);
+				function read_count() {
+					count.${property};
+				}
+			</script>`);
+
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to read the stateful variable "count" using "${property}". stateful variables should be read just by accessing them like normal variable, do not use properties to read them.`,
+					);
+				});
+
+				it(`should add suggestions when reading .${property} on a stateful variable with an array init`, () => {
+					const content = run_autofixers_on_code(`
+			<script>
+				const count = ${init}([1]);
+				function read_count() {
+					count.${property};
+				}
+			</script>`);
+
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to read the stateful variable "count" using "${property}". stateful variables should be read just by accessing them like normal variable, do not use properties to read them.`,
+					);
+				});
+
+				it(`should add suggestions when reading .${property} on a stateful variable with conditional if it's not sure if the property could actually be present on the variable (${init}({}))`, () => {
+					const content = run_autofixers_on_code(`
+			<script>
+				const count = ${init}({ value: 0 });
+				function read_count() {
+					count.${property};
+				}
+			</script>`);
+
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to read the stateful variable "count" using "${property}". stateful variables should be read just by accessing them like normal variable, do not use properties to read them. However I can't verify if "count" is a state variable of an object or a class with a "${property}" property on it. Please verify that before updating the code to use a normal access`,
+					);
+				});
+
+				it(`should add suggestions when reading .${property} on a stateful variable with conditional if it's not sure if the property could actually be present on the variable (${init}(new Class()))`, () => {
+					const content = run_autofixers_on_code(`
+			<script>
+				const count = ${init}(new Class());
+				function read_count() {
+					count.${property};
+				}
+			</script>`);
+
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to read the stateful variable "count" using "${property}". stateful variables should be read just by accessing them like normal variable, do not use properties to read them. However I can't verify if "count" is a state variable of an object or a class with a "${property}" property on it. Please verify that before updating the code to use a normal access`,
+					);
+				});
+
+				it(`should add suggestions when reading .${property} on a stateful variable with conditional if it's not sure if the property could actually be present on the variable (${init}(variable_name))`, () => {
+					const content = run_autofixers_on_code(`
+			<script>
+				const { init } = $props();
+				const count = ${init}(init);
+				function read_count() {
+					count.${property};
+				}
+			</script>`);
+
+					expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+					expect(content.suggestions).toContain(
+						`You are trying to read the stateful variable "count" using "${property}". stateful variables should be read just by accessing them like normal variable, do not use properties to read them. However I can't verify if "count" is a state variable of an object or a class with a "${property}" property on it. Please verify that before updating the code to use a normal access`,
+					);
+				});
+			},
+		);
+	});
 
 	describe('imported_runes', () => {
 		describe.each([{ source: 'svelte' }, { source: 'svelte/runes' }])(

packages/mcp-server/src/mcp/autofixers/visitors/assign-in-effect.ts

@@ -1,10 +1,20 @@
-import type { AssignmentExpression, Identifier, Node, UpdateExpression } from 'estree';
-import type { Autofixer, AutofixerState } from '.';
+import type {
+	AssignmentExpression,
+	CallExpression,
+	Identifier,
+	Node,
+	UpdateExpression,
+} from 'estree';
+import type { Autofixer, AutofixerState } from './index.js';
 import { left_most_id } from '../ast/utils.js';
-import type { SvelteNode } from 'svelte-eslint-parser/lib/ast';
+import type { AST } from 'svelte-eslint-parser';
 import type { Context } from 'zimmerframe';
 
-function run_if_in_effect(path: (Node | SvelteNode)[], state: AutofixerState, to_run: () => void) {
+function run_if_in_effect(
+	path: (Node | AST.SvelteNode)[],
+	state: AutofixerState,
+	to_run: () => void,
+) {
 	const in_effect = path.findLast(
 		(node) =>
 			node.type === 'CallExpression' &&
@@ -23,9 +33,9 @@ function run_if_in_effect(path: (Node | SvelteNode)[], state: AutofixerState, to
 	}
 }
 
-function visitor(
+function assign_or_update_visitor(
 	node: UpdateExpression | AssignmentExpression,
-	{ state, path }: Context<Node | SvelteNode, AutofixerState>,
+	{ state, path, next }: Context<Node | AST.SvelteNode, AutofixerState>,
 ) {
 	run_if_in_effect(path, state, () => {
 		function check_if_stateful_id(id: Identifier) {
@@ -35,7 +45,7 @@ function visitor(
 				const init = definition.node.init;
 				if (
 					init?.type === 'CallExpression' &&
-					state.parsed.is_rune(init, ['$state', '$state.raw'])
+					state.parsed.is_rune(init, ['$state', '$state.raw', '$derived', '$derived.by'])
 				) {
 					state.output.suggestions.push(
 						`The stateful variable "${id.name}" is assigned inside an $effect which is generally consider a malpractice. Consider using $derived if possible.`,
@@ -54,9 +64,25 @@ function visitor(
 			}
 		}
 	});
+	next();
+}
+
+function call_expression_visitor(
+	node: CallExpression,
+	{ state, path, next }: Context<Node | AST.SvelteNode, AutofixerState>,
+) {
+	run_if_in_effect(path, state, () => {
+		const function_name =
+			node.callee.type === 'Identifier' ? `the function \`${node.callee.name}\`` : 'a function';
+		state.output.suggestions.push(
+			`You are calling ${function_name} inside an $effect. Please check if the function is reassigning a stateful variable because that's considered malpractice and check if it could use  \`$derived\` instead. Ignore this suggestion if you are sure this function is not assigning any stateful variable or if you can't check if it does.`,
+		);
+	});
+	next();
 }
 
 export const assign_in_effect: Autofixer = {
-	UpdateExpression: visitor,
-	AssignmentExpression: visitor,
+	UpdateExpression: assign_or_update_visitor,
+	AssignmentExpression: assign_or_update_visitor,
+	CallExpression: call_expression_visitor,
 };

packages/mcp-server/src/mcp/autofixers/visitors/derived-with-function.ts

@@ -1,5 +1,5 @@
 import type { Identifier, PrivateIdentifier } from 'estree';
-import type { Autofixer } from '.';
+import type { Autofixer } from './index.js';
 
 export const derived_with_function: Autofixer = {
 	CallExpression(node, { state, path }) {
@@ -7,15 +7,15 @@ export const derived_with_function: Autofixer = {
 			node.callee.type === 'Identifier' &&
 			node.callee.name === '$derived' &&
 			state.parsed.is_rune(node, ['$derived']) &&
-			(node.arguments[0].type === 'ArrowFunctionExpression' ||
-				node.arguments[0].type === 'FunctionExpression')
+			(node.arguments[0]?.type === 'ArrowFunctionExpression' ||
+				node.arguments[0]?.type === 'FunctionExpression')
 		) {
 			const parent = path[path.length - 1];
 			let variable_id: Identifier | PrivateIdentifier | undefined;
-			if (parent.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
+			if (parent?.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
 				// const something = $derived(...)
 				variable_id = parent.id;
-			} else if (parent.type === 'PropertyDefinition') {
+			} else if (parent?.type === 'PropertyDefinition') {
 				// class X { something = $derived(...) }
 				variable_id =
 					parent.key.type === 'Identifier'
@@ -23,7 +23,7 @@ export const derived_with_function: Autofixer = {
 						: parent.key.type === 'PrivateIdentifier'
 							? parent.key
 							: undefined;
-			} else if (parent.type === 'AssignmentExpression') {
+			} else if (parent?.type === 'AssignmentExpression') {
 				// this.something = $derived(...)
 				variable_id =
 					parent.left.type === 'MemberExpression'

packages/mcp-server/src/mcp/autofixers/visitors/imported-runes.ts

@@ -1,5 +1,5 @@
 import { base_runes } from '../../../constants.js';
-import type { Autofixer } from '.';
+import type { Autofixer } from './index.js';
 
 const dollarless_runes = base_runes.map((r) => r.replace('$', ''));
 

packages/mcp-server/src/mcp/autofixers/visitors/index.ts

@@ -12,7 +12,7 @@ export type AutofixerState = {
 export type Autofixer = Visitors<Node | AST.SvelteNode, AutofixerState>;
 
 export * from './assign-in-effect.js';
-export * from './set-or-update-state.js';
+export * from './wrong-property-access-state.js';
 export * from './imported-runes.js';
 export * from './derived-with-function.js';
 export * from './use-runes-instead-of-store.js';

packages/mcp-server/src/mcp/autofixers/visitors/set-or-update-state.ts

@@ -1,37 +0,0 @@
-import type { Autofixer } from '.';
-import { left_most_id } from '../ast/utils.js';
-
-const UPDATE_PROPERTIES = ['set', 'update'];
-
-export const set_or_update_state: Autofixer = {
-	MemberExpression(node, { state, next, path }) {
-		const parent = path[path.length - 1];
-		if (
-			parent.type === 'CallExpression' &&
-			parent.callee === node &&
-			node.property.type === 'Identifier' &&
-			UPDATE_PROPERTIES.includes(node.property.name)
-		) {
-			const id = left_most_id(node);
-			if (id) {
-				const reference = state.parsed.find_reference_by_id(id);
-				const definition = reference?.resolved?.defs[0];
-				if (definition && definition.type === 'Variable') {
-					const init = definition.node.init;
-					if (
-						init?.type === 'CallExpression' &&
-						state.parsed.is_rune(init, ['$state', '$state.raw'])
-					) {
-						let suggestion = `You are trying to update the stateful variable "${id.name}" using "${node.property.name}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them.`;
-						const argument = init.arguments[0];
-						if (!argument || (argument.type !== 'Literal' && argument.type !== 'ArrayExpression')) {
-							suggestion += ` However I can't verify if "${id.name}" is a state variable of an object or a class with a "${node.property.name}" method on it. Please verify that before updating the code to use a normal assignment`;
-						}
-						state.output.suggestions.push(suggestion);
-					}
-				}
-			}
-		}
-		next();
-	},
-};

packages/mcp-server/src/mcp/autofixers/visitors/use-runes-instead-of-store.ts

@@ -1,4 +1,4 @@
-import type { Autofixer } from '.';
+import type { Autofixer } from './index.js';
 
 export const use_runes_instead_of_store: Autofixer = {
 	ImportDeclaration(node, { state, next }) {

packages/mcp-server/src/mcp/autofixers/visitors/wrong-property-access-state.ts

@@ -0,0 +1,41 @@
+import type { Autofixer } from './index.js';
+import { left_most_id } from '../ast/utils.js';
+
+const UPDATE_PROPERTIES = new Set(['set', 'update', '$']);
+const METHODS = new Set(['set', 'update']);
+
+export const wrong_property_access_state: Autofixer = {
+	MemberExpression(node, { state, next, path }) {
+		const parent = path[path.length - 1];
+		let is_property = false;
+		if (
+			node.property.type === 'Identifier' &&
+			((is_property = !METHODS.has(node.property.name)) ||
+				(parent?.type === 'CallExpression' && parent.callee === node)) &&
+			UPDATE_PROPERTIES.has(node.property.name)
+		) {
+			const id = left_most_id(node);
+			if (id) {
+				const reference = state.parsed.find_reference_by_id(id);
+				const definition = reference?.resolved?.defs[0];
+				if (definition && definition.type === 'Variable') {
+					const init = definition.node.init;
+					if (
+						init?.type === 'CallExpression' &&
+						state.parsed.is_rune(init, ['$state', '$state.raw', '$derived', '$derived.by'])
+					) {
+						let suggestion = is_property
+							? `You are trying to read the stateful variable "${id.name}" using "${node.property.name}". stateful variables should be read just by accessing them like normal variable, do not use properties to read them.`
+							: `You are trying to update the stateful variable "${id.name}" using "${node.property.name}". stateful variables should be updated with a normal assignment/mutation, do not use methods to update them.`;
+						const argument = init.arguments[0];
+						if (!argument || (argument.type !== 'Literal' && argument.type !== 'ArrayExpression')) {
+							suggestion += ` However I can't verify if "${id.name}" is a state variable of an object or a class with a "${node.property.name}" ${is_property ? 'property' : 'method'} on it. Please verify that before updating the code to use a normal ${is_property ? 'access' : 'assignment'}`;
+						}
+						state.output.suggestions.push(suggestion);
+					}
+				}
+			}
+		}
+		next();
+	},
+};

packages/mcp-server/src/mcp/handlers/resources/list-sections.ts

@@ -4,6 +4,7 @@ export function list_sections(server: SvelteMcp) {
 	server.resource(
 		{
 			name: 'list-sections',
+			enabled: () => false,
 			description:
 				'The list of all the available Svelte 5 and SvelteKit documentation sections in a structured format.',
 			uri: 'svelte://list-sections',

packages/mcp-server/src/mcp/handlers/tools/get-documentation.ts

@@ -5,6 +5,7 @@ export function get_documentation(server: SvelteMcp) {
 	server.tool(
 		{
 			name: 'get-documentation',
+			enabled: () => false,
 			description:
 				'Retrieves full documentation content for Svelte 5 or SvelteKit sections. Supports flexible search by title (e.g., "$state", "routing") or file path (e.g., "docs/svelte/state.md"). Can accept a single section name or an array of sections. Before running this, make sure to analyze the users query, as well as the output from list_sections (which should be called first). Then ask for ALL relevant sections the user might require. For example, if the user asks to build anything interactive, you will need to fetch all relevant runes, and so on.',
 			schema: v.object({

packages/mcp-server/src/mcp/handlers/tools/list-sections.ts

@@ -4,6 +4,7 @@ export function list_sections(server: SvelteMcp) {
 	server.tool(
 		{
 			name: 'list-sections',
+			enabled: () => false,
 			description:
 				'Lists all available Svelte 5 and SvelteKit documentation sections in a structured format. Returns sections as a list of "* title: [section_title], path: [file_path]" - you can use either the title or path when querying a specific section via the get_documentation tool. Always run list_sections first for any query related to Svelte development to discover available content.',
 		},

packages/mcp-server/src/mcp/handlers/tools/playground-link.ts

@@ -13,7 +13,7 @@ async function compress_and_encode_text(input: string) {
 		} else {
 			for (let i = 0; i < value.length; i++) {
 				// decoding as utf-8 will make btoa reject the string
-				buffer += String.fromCharCode(value[i]);
+				buffer += String.fromCharCode(value[i]!);
 			}
 		}
 	}

packages/mcp-server/src/mcp/handlers/tools/svelte-autofixer.ts

@@ -61,6 +61,11 @@ export function svelte_autofixer(server: SvelteMcp) {
 				content.issues.push(
 					`${error.message} at line ${error.start?.line}, column ${error.start?.column}`,
 				);
+				if (error.message.includes('js_parse_error')) {
+					content.suggestions.push(
+						"The code can't be compiled because a Javascript parse error. In case you are using runes like this `$state variable_name = 3;` or `$derived variable_name = 3 * count` that's not how runes are used. You need to use them as function calls without importing them: `const variable_name = $state(3)` and `const variable_name = $derived(3 * count)`.",
+					);
+				}
 			}
 
 			if (content.issues.length > 0 || content.suggestions.length > 0) {

packages/mcp-stdio/README.md

@@ -0,0 +1,16 @@
+# @sveltejs/mcp
+
+The CLI version of the Svelte MCP.
+
+You can run it directly with
+
+```bash
+npx @sveltejs/mcp
+```
+
+or install it and then run it
+
+```bash
+pnpm i @sveltejs/mcp
+pnpm svelte-mcp
+```

packages/mcp-stdio/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@sveltejs/mcp",
+	"version": "0.0.1",
+	"type": "module",
+	"license": "MIT",
+	"homepage": "https://github.com/sveltejs/mcp#readme",
+	"bugs": {
+		"url": "https://github.com/sveltejs/mcp/issues"
+	},
+	"bin": {
+		"svelte-mcp": "./dist/index.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/sveltejs/mcp.git",
+		"path": "packages/mcp-stdio"
+	},
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsdown",
+		"dev": "tsdown --watch",
+		"test": "vitest",
+		"check": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"@sveltejs/mcp-server": "workspace:^",
+		"@tmcp/transport-stdio": "^0.3.1",
+		"@types/node": "^22.15.17",
+		"publint": "^0.3.13",
+		"tsdown": "^0.11.9",
+		"typescript": "^5.8.3",
+		"vitest": "^3.1.3"
+	},
+	"dependencies": {
+		"eslint": "^9.36.0"
+	}
+}

packages/mcp-stdio/src/index.ts

@@ -0,0 +1,7 @@
+#! /usr/bin/env node
+import { server } from '@sveltejs/mcp-server';
+import { StdioTransport } from '@tmcp/transport-stdio';
+
+const transport = new StdioTransport(server);
+
+transport.listen();

packages/mcp-stdio/tsconfig.json

@@ -0,0 +1,5 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
+}

packages/mcp-stdio/tsdown.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsdown';
+
+export default defineConfig([
+	{
+		entry: ['./src/index.ts'],
+		platform: 'node',
+		define: {
+			// some eslint-plugin-svelte code expects __filename to exists but in an ESM environment it does not.
+			__filename: 'import.meta.filename',
+		},
+		// we need eslint at runtime but the bundler doesn't bundle `require`'s which `eslint-plugin-svelte` uses to require
+		// `eslint/use-at-your-own-risk`. If we didn't have `eslint` as an actual dependency and didn't externalize it
+		// the require would fail once executed in a project without eslint installed.
+		external: ['eslint'],
+		publint: true,
+		dts: false,
+		treeshake: true,
+		clean: true,
+		target: 'esnext',
+	},
+]);

packages/mcp-stdio/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({});