feat: add Svelte 5 support to no-not-function-handler

Author: baseballyama

.changeset/brown-dots-change.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: add Svelte 5 support to `no-not-function-handler`

docs/rules/no-not-function-handler.md

@@ -29,16 +29,16 @@ If you use a non-function value for the event handler, it event handler will not
 </script>
 
 <!-- ✓ GOOD -->
-<button on:click={foo} />
+<button onclick={foo} />
 <button
-  on:click={() => {
+  onclick={() => {
     /*  */
   }}
 />
 
 <!-- ✗ BAD -->
-<button on:click={{ foo }} />
-<button on:click={bar} />
+<button onclick={{ foo }} />
+<button onclick={bar} />
 ```
 
 ## :wrench: Options

packages/eslint-plugin-svelte/src/rules/no-not-function-handler.ts

@@ -95,6 +95,18 @@ export default createRule('no-not-function-handler', {
 					return;
 				}
 				verify(node.expression);
+			},
+			SvelteAttribute(node) {
+				if (node.key.type === 'SvelteName' && node.key.name.startsWith('on')) {
+					const { value } = node;
+					if (Array.isArray(value)) {
+						for (const v of value) {
+							if (v.type === 'SvelteMustacheTag') {
+								verify(v.expression);
+							}
+						}
+					}
+				}
 			}
 		};
 	}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/array01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Unexpected array in event handler.
+  line: 5
+  column: 18
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/array01-input.svelte

@@ -0,0 +1,5 @@
+<script>
+	const a = 'hello!';
+</script>
+
+<button onclick={[a]} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/class01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Unexpected class in event handler.
+  line: 4
+  column: 18
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/class01-input.svelte

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<button onclick={class B {}} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/object01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Unexpected object in event handler.
+  line: 5
+  column: 18
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/object01-input.svelte

@@ -0,0 +1,5 @@
+<script>
+	function fn() {}
+</script>
+
+<button onclick={{ fn }} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^5.0.0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/string01-errors.yaml

@@ -0,0 +1,8 @@
+- message: Unexpected string value in event handler.
+  line: 6
+  column: 18
+  suggestions: null
+- message: Unexpected string value in event handler.
+  line: 7
+  column: 18
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/string01-input.svelte

@@ -0,0 +1,7 @@
+<script>
+	const a = 'hello!';
+	const b = `${a} world`;
+</script>
+
+<button onclick={a} />
+<button onclick={b} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/value01-errors.yaml

@@ -0,0 +1,12 @@
+- message: Unexpected number value in event handler.
+  line: 7
+  column: 18
+  suggestions: null
+- message: Unexpected bigint value in event handler.
+  line: 8
+  column: 18
+  suggestions: null
+- message: Unexpected regex value in event handler.
+  line: 9
+  column: 18
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/invalid/svelte5/value01-input.svelte

@@ -0,0 +1,9 @@
+<script>
+	const a = 42;
+	const b = 42n;
+	const c = /reg/;
+</script>
+
+<button onclick={a} />
+<button onclick={b} />
+<button onclick={c} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/valid/svelte5/function01-input.svelte

@@ -0,0 +1,7 @@
+<script>
+	let a = 'hello!';
+	function fn() {}
+</script>
+
+<button onclick={() => a} />
+<button onclick={fn} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/valid/svelte5/null01-input.svelte

@@ -0,0 +1,6 @@
+<script>
+	let a = null;
+</script>
+
+<button onclick={null} />
+<button onclick={a} />

packages/eslint-plugin-svelte/tests/fixtures/rules/no-not-function-handler/valid/svelte5/requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^5.0.0"
+}