Runes: How do you proxy/transform component props? 2 way binding proxy.

[rgon]

Hello folks!

Sometimes, we need a component to accept one kind of data structure but keep another, synchronized one internally, maintaining a two-way binding between both.

How can we proxy the prop, so that it can be bound externally, but be bidirectionally transformed to a different type inside.

We could do this with the following pattern successfully: Perfectly functional, non-runes REPL here

$: internalValue = input(value)
$: value = output(internalValue)

However, if we substitute it with the $effect equivalent that can run more than once a tick(), we get an infinite loop.

$effect(() => value = output(internalValue))
// If we activate the following, we'll get an infinite loop
//  Error: effect_update_depth_exceeded Maximum update depth exceeded
$effect(() => internalValue = input(value))

Runes repl (not working) REPL HERE

I cannot seem to find any way to solve this problem. Are we in need of a new rune?

{
value = $bindable.transformed(inputTransformFn, outputTransformFn, default)
} = $props()

Hooking into the $state or $derived getters and setters and add a transformation/proxy Fns would make this seemingly common use case much easier. Any slightly modular form / simple CRUD app project has surely found this.

---

Failed attempts:

• Using $derived and $effect: (at least as of [email protected]) we Cannot assign to derived statesvelte(constant_assignment). REPL.

• Using a custom get value() set value() object. No fine grained reactivity source. If the $bindable() value is set to this custom object, it does not get updated. Simply doesn't work.

• Using the non(yet)existant $effect.tick would fix this Svelte 5: Introduce $effect.tick #9986. However, wouldn't this be an antipattern?

[brunnerh]

You don't need effects for this. The proxy can just be a plain object that directly interacts with the prop.
Example:

<script>
	let { value = $bindable() } = $props();

	const internalValue = {
		get year() { return value.getFullYear(); },
		set year(v) { modify(d => d.setFullYear(v)); },
		// Note that month is 0-based
		get month() { return value.getMonth() + 1; },
		set month(v) { modify(d => d.setMonth(v - 1)); },
		get date() { return value.getDate(); },
		set date(v) { modify(d => d.setDate(v)); },
	};

	function modify(callback) {
		const newDate = new Date(value);
		callback(newDate);
		value = newDate;
	}
</script>

REPL

Internally fine-grained signals

The property accessors would trigger signals on any change to the date. This should not really matter in most cases, but if you want to avoid this, you can introduce $derived values for the properties:

<script>
	let { value = $bindable() } = $props();

	const year = $derived(value.getFullYear());
	const month = $derived(value.getMonth() + 1);
	const date = $derived(value.getDate());

	const internalValue = {
		get year() { return year; },
		set year(v) { modify(d => d.setFullYear(v)); },
		get month() { return month; },
		set month(v) { modify(d => d.setMonth(v - 1)); },
		get date() { return date; },
		set date(v) { modify(d => d.setDate(v)); },
	};

	function modify(callback) {
		const newDate = new Date(value);
		callback(newDate);
		value = newDate;
	}

	$effect(() => {
		// no longer fires on changes to year / date.
		console.log('Month changed', internalValue.month);
	});
</script>

REPL

[rgon]

Thank you very much for the quick reply and detailed answer. It surely works in this case. I have, however, made an overly simplistic reproduction by reducing it to date type parsing. I'm having trouble with a component that keeps more internal state than it exports.

Suppose a file upload component to keep track of a project's attached documents, which tracks File Blobs and features a button to upload them all to a server. This file component would need to export the uploaded URL/keys, or the name if not uploaded.

This component should also be loaded with the same data, in case we need to reopen this project and edit its attachments.

internalDataType {
  addedAt: number,
  fileBytes: bytes,
  uploadKey: string,
  isUploaded: bool
}
externalDataType {
  addedAt: number,
  uploadKey: string,
  isUploaded: bool
}

The obvious first step is keeping an internal $state() and then transforming the values on any change. However, we quickly get into infinite loops.

Here's an updated reproduction example. As you can see, exporting state is simple, but I cannot manage to do the transforming of bound/input back without getting into trouble: REPL

[rgon]

I have read the $effect page in the Svelte 5 docs, where it references the approach you took:

If you need to use bindings, for whatever reason (for example when you want some kind of "writable $derived"), consider using getters and setters to synchronise state (demo):

It follows with:

If you absolutely have to update $state within an effect and run into an infinite loop because you read and write to the same $state, use untrack.

It appears that this is not exclusive to props, but rather is the challenge of synchronizing the state of two variables. I'll try to figure this out my way, but some kind of $derived.bidirectional(outputfn, inputfn) would be golden in this case.

Generalizing this method would fix #3937

[rgon]

I seem to have managed to achieve this with a simpler example, by pointing the get()/set() function to the bindable prop. Still working on it: REPL.

EDIT: here's a generalized version! REPL.

EDIT2: no need for get() and set() if we're checking for lastOutputValue: REPL

EDIT3: This approach doesn't work if exporting an object. It's not enough to check if the newly received value is the last set value, because:

[svelte] state_proxy_equality_mismatch
Reactive $state(...) proxies and the values they proxy have different identities. Because of this, comparisons with != will produce unexpected results

REPL (WARNING: may crash the interpreter)

EDIT4: Found a workaround. If we set a flag ($state(ignoreLastOutput)), we can avoid checking for equality, assuming every internal output will trigger back one (and only one!) bind: input back in. Also, while encapsulating the method in untrack() to avoid loops. This is an absolute bodge of a solution, and any update might break it. Surely there must be a better way? REPL

[david-plugge]

Have you thought about using events rather than signals in this case? A callback onuploadsuccess does fit better into this scenario than a state imo.

[rgon]

@david-plugge I have, but the beautiful thing about 2-way-bindable props is maintaining a common interface with respect to other components in a form, it's not really about notifying the form itself when the upload continues.
In this case, the component would only need to edit the 'S3Object' file to: preview the already uploaded file (given the result key), add new files, or edit existing ones (that's why the 'Staging' internalValue exists, to keep the non-uploaded objects).

In my case, it's loaded by a dynamic 'Form' component which builds in whichever renderer it needs given a schema{} (itself from a GraphQL definition, but that's another story). So every form renderer should output the value that needs to be saved: in a 'text' input, it's the text value, and in this case, a reference to an S3 object.

On submit, each form field's control.upload() command is called and awaited with Promise.all(), and I suppose this would be the closest to 'onuploadsuccess', but the form is what calls every subcomponent's upload method @ submit time.

Here's a reduced example REPL I made for #13368

I'm having a bit of a hard week to come up with more ways to refactor a design like this, but this seems like the solution with the clearest data flow (keeping in mind everything's pretty much autogenerated). It's a bit of a shame that activating runes mode in one of the child components broke the entire chain!

[x0k]

You can do something like this REPL
Based on #12720 (comment)