feat: Reactive actions

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

@@ -9,26 +9,22 @@ import { parse_directive_name } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function UseDirective(node, context) {
-	const params = [b.id('$$node')];
-
-	if (node.expression) {
-		params.push(b.id('$$action_arg'));
+	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)
+		);
 	}
 
-	/** @type {Expression[]} */
-	const args = [
-		context.state.node,
-		b.arrow(
-			params,
-			b.call(/** @type {Expression} */ (context.visit(parse_directive_name(node.name))), ...params)
-		)
-	];
-
-	if (node.expression) {
-		args.push(b.thunk(/** @type {Expression} */ (context.visit(node.expression))));
-	}
+	const get_action = b.arrow([], action);
+	const get_value = node.expression
+		? b.thunk(/** @type {Expression} */ (context.visit(node.expression)))
+		: undefined;
 
 	// actions need to run after attribute updates in order with bindings/events
-	context.state.after_update.push(b.stmt(b.call('$.action', ...args)));
+	context.state.after_update.push(
+		b.stmt(b.call('$.action', context.state.node, get_action, get_value))
+	);
 	context.next();
 }

packages/svelte/src/internal/client/dom/elements/actions.js

@@ -6,12 +6,16 @@ import { deep_read_state, untrack } from '../../runtime.js';
 /**
  * @template P
  * @param {Element} dom
- * @param {(dom: Element, value?: P) => ActionPayload<P>} action
+ * @param {() => (((dom: Element, value?: P) => ActionPayload<P>) | null | undefined)} get_action
  * @param {() => P} [get_value]
  * @returns {void}
  */
-export function action(dom, action, get_value) {
+export function action(dom, get_action, get_value) {
 	effect(() => {
+		const action = get_action();
+		if (action == null) {
+			return;
+		}
 		var payload = untrack(() => action(dom, get_value?.()) || {});
 
 		if (get_value && payload?.update) {

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>