make use:action reactive

Author: adiguba

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

@@ -9,26 +9,19 @@ 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) {