lint + test

Author: adiguba

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

@@ -11,7 +11,10 @@ import { parse_directive_name } from './shared/utils.js';
 export function UseDirective(node, context) {
 	let action = /** @type {Expression} */ (context.visit(parse_directive_name(node.name)));
 	if (action.type === 'MemberExpression') {
-		action = b.maybe_call(b.member(action, 'bind', false, true), /** @type {Expression} */ (action.object));
+		action = b.maybe_call(
+			b.member(action, 'bind', false, true),
+			/** @type {Expression} */ (action.object)
+		);
 	}
 
 	const get_action = b.arrow([], action);

packages/svelte/tests/runtime-runes/samples/action-reactive/Child.svelte

@@ -0,0 +1,4 @@
+<script>
+    let { action, value } = $props();
+</script>
+<div use:action={value}></div>

packages/svelte/tests/runtime-runes/samples/action-reactive/_config.js

@@ -0,0 +1,49 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<div></div><button>set_action1</button><button>set_action2</button><button>set_null</button><button>increment</button>`,
+
+	async test({ assert, target }) {
+		const [div] = target.querySelectorAll('div');
+		const [set_action1, set_action2, set_null, increment] = target.querySelectorAll('button');
+
+		assert.equal(div.innerText, undefined);
+
+		flushSync(() => set_action1.click());
+		assert.equal(div.innerText, 'action1 value=0');
+
+		flushSync(() => increment.click());
+		assert.equal(div.innerText, 'action1 updated=1');
+
+		flushSync(() => set_null.click());
+		assert.equal(div.innerText, 'action1 destroyed');
+
+		flushSync(() => set_action2.click());
+		assert.equal(div.innerText, '1');
+
+		flushSync(() => increment.click());
+		assert.equal(div.innerText, '2');
+
+		flushSync(() => set_null.click());
+		assert.equal(div.innerText, '');
+
+		flushSync(() => increment.click());
+		assert.equal(div.innerText, '');
+
+		flushSync(() => set_action1.click());
+		assert.equal(div.innerText, 'action1 value=3');
+
+		flushSync(() => increment.click());
+		assert.equal(div.innerText, 'action1 updated=4');
+
+		flushSync(() => set_action1.click());
+		assert.equal(div.innerText, 'action1 updated=4');
+
+		flushSync(() => increment.click());
+		assert.equal(div.innerText, 'action1 updated=5');
+
+		flushSync(() => set_action2.click());
+		assert.equal(div.innerText, '5');
+	}
+});

packages/svelte/tests/runtime-runes/samples/action-reactive/main.svelte

@@ -0,0 +1,36 @@
+<script>
+	import Child from "./Child.svelte";
+
+    let action = $state();
+    let value = $state(0);
+
+    function action1(node, value) {
+        node.innerText="action1 value=" + value;
+        return {
+            update(new_value) {
+                node.innerText="action1 updated=" + new_value;
+            },
+            destroy() {
+                node.innerText="action1 destroyed";
+            }
+        }
+    }
+
+    function action2(node, value) {
+        node.innerText=value;
+        return {
+            update(new_value) {
+                node.innerText=new_value;
+            },
+            destroy() {
+                node.innerText="";
+            }
+        }
+    }
+</script>
+
+<Child {action} {value}/>
+<button onclick={()=>action=action1}>set_action1</button>
+<button onclick={()=>action=action2}>set_action2</button>
+<button onclick={()=>action=null}>set_null</button>
+<button onclick={()=>value++}>increment</button>