feat: add bind:this -> attachment autofixer

Author: paoloricciuti

src/lib/mcp/autofixers/add-autofixers-issues.test.ts

@@ -374,4 +374,67 @@ describe('add_autofixers_issues', () => {
 			);
 		});
 	});
+
+	describe('bind_this_attachment', () => {
+		it('should add suggestions when using bind:this on an element', () => {
+			const content = run_autofixers_on_code(`
+			<script>
+				let a = $state();	
+			</script>
+
+			<a bind:this={a} />`);
+
+			expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+			expect(content.suggestions).toContain(
+				'The usage of `bind:this` can often be replaced with an easier to read `action` or even better an `attachment`. Consider using the latter if possible.',
+			);
+		});
+
+		it('should not add suggestions when using bind:this on a component', () => {
+			const content = run_autofixers_on_code(`
+			<script>
+				import Child from './Child.svelte';
+				let a = $state();	
+			</script>
+
+			<Child bind:this={a} />`);
+
+			expect(content.suggestions).not.toContain(
+				'The usage of `bind:this` can often be replaced with an easier to read `action` or even better an `attachment`. Consider using the latter if possible.',
+			);
+		});
+
+		it('should not add suggestions when using bind:this on a component nested in an element', () => {
+			const content = run_autofixers_on_code(`
+			<script>
+				import Child from './Child.svelte';
+				let a = $state();	
+			</script>
+
+			<div>
+				<Child bind:this={a} />
+			</div>`);
+
+			expect(content.suggestions).not.toContain(
+				'The usage of `bind:this` can often be replaced with an easier to read `action` or even better an `attachment`. Consider using the latter if possible.',
+			);
+		});
+
+		it('should add suggestions but not suggest attachments when using bind:this on an element and the desired svelte version is 4', () => {
+			const content = run_autofixers_on_code(
+				`
+			<script>
+				let a;	
+			</script>
+
+			<a bind:this={a} />`,
+				4,
+			);
+
+			expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+			expect(content.suggestions).toContain(
+				'The usage of `bind:this` can often be replaced with an easier to read `action`. Consider using the latter if possible.',
+			);
+		});
+	});
 });

src/lib/mcp/autofixers/visitors/bind-this-attachment.ts

@@ -0,0 +1,18 @@
+import type { Autofixer } from '.';
+export const bind_this_attachment: Autofixer = {
+	SvelteDirective(node, { state, next, path }) {
+		if (node.kind === 'Binding' && node.key.name.name === 'this') {
+			const parent_element = path.findLast((p) => p.type === 'SvelteElement');
+			if (parent_element?.kind === 'html' && parent_element.startTag.attributes.includes(node)) {
+				let better_an_attachment = ` or even better an \`attachment\``;
+				if (state.desired_svelte_version === 4) {
+					better_an_attachment = ``;
+				}
+				state.output.suggestions.push(
+					`The usage of \`bind:this\` can often be replaced with an easier to read \`action\`${better_an_attachment}. Consider using the latter if possible.`,
+				);
+			}
+		}
+		next();
+	},
+};

src/lib/mcp/autofixers/visitors/index.ts

@@ -16,3 +16,4 @@ export * from './set-or-update-state.js';
 export * from './imported-runes.js';
 export * from './derived-with-function.js';
 export * from './use-runes-instead-of-store.js';
+export * from './bind-this-attachment.js';