I often find myself wanting a property that can only be set on component mount

[webJose]

I wonder if this happens to other people.

For example, right now I'm writing a component that will list the asynchronous status of an action that is repeated over a number of HTTP servers at once. The component is meant to show the status of each request on screen, and then perform a follow-up action upon completion of all servers.

In code, the all-done part is super easy: Promise.all(). No problem.

But updating the UI as individual tasks complete would be done by promise-chaining a then() call that sets up code that updates an array of results that mirrors exactly in size and position the array of servers that was provided via the servers property.

And this is exactly where I would like to have a simple way to limit the servers property so it can only be set on component mount. In other words: Let it be illegal to change its value. Or: Let the component receive a non-reactive COPY of the servers array.

Yes, I can do this copy easily. No problem. The problem comes when you write the component.

As example, this line:

let results = $state<(ActionResult | undefined)[]>(new Array(servers.length).fill(undefined));

Here, Svelte tooling says I'm doing things wrong:

So yes, actually preventing reactivity is something I can do by just creating a non-reactive array from the reactive list of servers. The issue is things like the above.

If I could just do:

let { servers = $snapshot(), action }: Props = $props();

things would be easy. $snapshot() would tell Svelte that the servers property is to receive a copy of the value and that we want to sever any reactivity propagation via the property.

There's nothing like this today, right?

[webJose]

I just hit another use case: A timer component where a timer runs the count down to zero. The variable timeLeft:

// svelte-ignore state_referenced_locally
let timeLeft = $state(time);

Where time is the property that receives the initial amount of time allotted for the timer.