Whats the recommendation for binding $props to a local class variable with $state fields?

[midzelis]

Docs say its a bad idea to update state in $effect -- but lets say you have some shared state in a local object (based on a class with $state variables) - this is then passed to several subcomponents. Say you need to configure this shared state with values that come from props (or transitively through $derives) - how would you bind a prop to a property of a local variable?

Example:

// app.svelte

<script>
import {ModelClass} = 'model.svelte.js';
let { pageContext } = $props();
const url = $derived(pageContext.url);
const model = new ModelClass();
$effect( ()=> (model.url = url) );
</script>

// model.svelte.js

export class ModelClass {
    url = $state()
}

Using svelte Components, you can simply <Child url={url}> - but there doesn't seem to a way to 'pass'/bind properties from $props onto $state stored in a local variable's setters.

[benmccann]

You can use $derived.by: #14536 (comment)

[david-plugge]

Using some kind of boxing is a common pattern:

let { thing } = $props();

class ModelClass {
  #thing: { value: string };

  constructor(options) {
    this.#thing = options.thing;
  }
}

const model = new ModelClass({
  get thing() { return thing; },
  set thing(v) { thing = v; },
});

The downside is obvously that you need to make sure the outer state is reactive.

[benmccann]

This should be addressed now in Svelte 5.25.0: https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md#5250