In svelte action, $effect cannot listen to changes in options.

[Sincenir]

Feature Request

I want to use the new syntax to implement 'focusTrap action', but I can only implement basic init and destory, not the 'update' function in the original 'action'

Reproduction

e.g.
+page.svelte

<script lang="ts">
	import { focusTrap } from './action.svelte';
	let state = $state.raw(true);

	setInterval(() => {
		state = !state;
	}, 1000);
</script>

<div use:focusTrap={state}></div>

action.svelte.ts

export function focusTrap(node: HTMLElement, enabled = true) {
	function init() {
		console.log('init');
	}

	function destroy() {
		console.log('destroy');
	}

	$effect(() => {
		console.log('effect enable', enabled);

		if (enabled) init();
		return destroy;
	});
}

Or can only create a new staate internally, then update the state via update.
action.svelte.ts

export function focusTrap(node: HTMLElement, enabled = true) {
        let curEnable = $state(enable)

	function init() {
		console.log('init');
	}

	function destroy() {
		console.log('destroy');
	}

	$effect(() => {
		console.log('effect enable', enabled);

		if (curEnable) init();
		return destroy;
	});

        return {update(enable) {curEnable = enable}}
}

Logs

-

System Info

svelte v5

Severity

[Sincenir]

I can use $state instead of $state.raw (cannot be mutated), Update the field on directly.

But I hope raw is effective.

[brunnerh]

This is expected since actions are an old construct.

Either use update or wrap primitives in a $state object or a closure. This is true for everything involving runes and the passing of primitive state.

<script lang="ts">
	import { focusTrap } from './action.svelte';
	let state = $state.raw(true);

	setInterval(() => {
		state = !state;
	}, 1000);
</script>

<div use:focusTrap={() => state}></div>

export function focusTrap(node: HTMLElement, getEnabled = () => true) {
	function init() {
		console.log('init');
	}

	function destroy() {
		console.log('destroy');
	}

	$effect(() => {
		console.log('effect enable', getEnabled());

		if (getEnabled()) init();
		return destroy;
	});
}

[Sincenir]

This is expected since actions are an old construct.

Either use update or wrap primitives in a $state object or a closure. This is true for everything involving runes and the passing of primitive state.

<script lang="ts"> import { focusTrap } from './action.svelte'; let state = $state.raw(true); setInterval(() => { state = !state; }, 1000); </script>

state}>

export function focusTrap(node: HTMLElement, getEnabled = () => true) { function init() { console.log('init'); }

function destroy() {
console.log('destroy');
}

$effect(() => {
console.log('effect enable', getEnabled());

  if (getEnabled()) init();
  return destroy;

});
}

I used a relatively elegant way of writing, guaranteeing that the external parameters remain unchanged, and the internal use `() => data 'fetch. We can create a createEnhanceAction method, encapsulate the update internally, and discard the middle layer after svelte5 does new support.

function createEnhanceAction<T>(actionFn: (node: Element, getValue: () => T) => void) {
	return (node: Element, options: T) => {
		let internalOptions = $state<T>(options);

		actionFn(node, () => internalOptions);
		return {
			update(newOptions: T) {
				internalOptions = newOptions;
			},
		};
	};
}

function internalSvelteTime<T>(dom, getOp: () => T) {
    $effect(() => {
        console.log(getOp())
    })
}

const svelteTime = createEnhanceAction<any>(internalSvelteTime)

[dummdidumm]

As pointed out by Brunner, this is expected, and passing a closure via a getter or function is the way to solve this. attachments will eventually solve this more elegantly in a runes-first way.