feat: autofixer action -> attachment

Author: paoloricciuti

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

@@ -375,37 +375,38 @@ 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(`
+	describe('suggest_attachments', () => {
+		describe('bind:this', () => {
+			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.',
-			);
-		});
+				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(`
+			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.',
-			);
-		});
+				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(`
+			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();	
@@ -415,26 +416,135 @@ describe('add_autofixers_issues', () => {
 				<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.',
-			);
-		});
+				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(
-				`
+			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,
-			);
+					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.',
-			);
+				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.',
+				);
+			});
+		});
+
+		describe('use:', () => {
+			it('should add suggestions when using use: on an element and the action is declared as a function', () => {
+				const content = run_autofixers_on_code(
+					`<script>
+						function my_action(node) {
+							// do something with the node
+						}
+					</script>
+
+					<a use:my_action />`,
+				);
+
+				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+				expect(content.suggestions).toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
+
+			it('should add suggestions when using use: on an element and the action is declared as a variable', () => {
+				const content = run_autofixers_on_code(
+					`<script>
+						const my_action = (node) => {
+							// do something with the node
+						}
+					</script>
+
+					<a use:my_action />`,
+				);
+
+				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+				expect(content.suggestions).toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
+
+			it('should add suggestions when using use: on an element and the action is declared as an object', () => {
+				const content = run_autofixers_on_code(
+					`<script>
+						const my_action = {
+							action: (node) => {
+								// do something with the node
+							}
+						};
+					</script>
+
+					<a use:my_action.action />`,
+				);
+
+				expect(content.suggestions.length).toBeGreaterThanOrEqual(1);
+				expect(content.suggestions).toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
+
+			it('should not add suggestions when using use: on an element and the desired svelte version is 4', () => {
+				const content = run_autofixers_on_code(
+					`<script>
+						function my_action(node) {
+							// do something with the node
+						}
+					</script>
+
+					<a use:my_action />`,
+					4,
+				);
+
+				expect(content.suggestions).not.toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
+
+			it('should not add suggestions when using use: on an element and the action comes from an import', () => {
+				const content = run_autofixers_on_code(
+					`<script>
+						import { my_action } from './actions.js';
+					</script>
+
+					<a use:my_action />`,
+				);
+
+				expect(content.suggestions).not.toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
+
+			it('should not add suggestions when using use: on an element and the action comes from the props', () => {
+				const content = run_autofixers_on_code(
+					`<script>
+						const { my_action } = $props();
+					</script>
+
+					<a use:my_action />`,
+				);
+
+				expect(content.suggestions).not.toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
+
+			it('should not add suggestions when using use: on an element and the action comes from a global variable', () => {
+				const content = run_autofixers_on_code(`<a use:my_action />`);
+
+				expect(content.suggestions).not.toContain(
+					'Consider using an `attachment` instead of an `action` for "my_action".',
+				);
+			});
 		});
 	});
 });

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

@@ -16,4 +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';
+export * from './suggest-attachments.js';

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

@@ -0,0 +1,47 @@
+import type { Identifier } from 'estree';
+import type { Autofixer } from '.';
+import { left_most_id } from '../ast/utils.js';
+
+export const suggest_attachments: 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.`,
+				);
+			}
+		} else if (node.kind === 'Action' && state.desired_svelte_version === 5) {
+			let id: Identifier | null = null;
+			if (node.key.name.type === 'Identifier') {
+				id = node.key.name;
+			} else if (node.key.name.type === 'MemberExpression') {
+				id = left_most_id(node.key.name);
+			}
+			if (id) {
+				const reference = state.parsed.find_reference_by_id(id);
+				const definition = reference?.resolved?.defs[0];
+				console.log(definition);
+				if (
+					definition &&
+					(definition.type === 'Variable' ||
+						!(definition.type === 'ImportBinding' || definition.type === 'Parameter')) &&
+					!(
+						definition.type === 'Variable' &&
+						definition.node.init?.type === 'CallExpression' &&
+						state.parsed.is_rune(definition.node.init, ['$props'])
+					)
+				) {
+					state.output.suggestions.push(
+						`Consider using an \`attachment\` instead of an \`action\` for "${id.name}".`,
+					);
+				}
+			}
+		}
+		next();
+	},
+};