Clarity around using Runes in .svelte.(js|ts) files in docs

[Nickersoft]

Describe the problem

I remember reading awhile ago that when using Runes outside of .svelte files, in order to read their values correctly you should be using getters and setters, as simply exporting the rune from the file and reading it in your component won't work. Last I checked with the latest version of Svelte 5 this is still the case, but I can't find this mentioned anywhere in the docs.

Describe the proposed solution

This (rather important) gotcha should probably be getting called out in either the .svelte.(ts|js) section or the Runes section of the new docs site

Importance

would make my life easier

[webJose]

I believe this changed. $state fields in classes can be directly accessed without issues. The delicate one is $derived's, which must be obtained via a function (maybe a getter works, unsure right now).

[david-plugge]

Reading a state creates a dependency in the current effect at that exact moment. So you basicly have to make sure that is always the case when you need reactivity.

[MrWaip]

I would really like to see canonical examples of runes being used in factories and classes.

I play with runes and it raises questions

 // module.svelte.js
 
// How to correctly type arguments that are actually runes? 
 export function makeStore(dependency) {
         //  need box object
	let state = $state({ value: 10});

	let doubled = $derived.by(() => {
		return state.value * dependency.k
	})

         // is it valid? pitfalls?
	$effect(() => {
		if (state.value % 10 == 0) {
			state.value = 0;
		}
		console.log(doubled)
	})

	function add() {
		state.value++;
	}
	
	return {
		state,
                 // is it valid? looks verbose
		get doubled(){
			return doubled
		}, 
		add
	}
}
 

[MrWaip]

https://svelte.dev/playground/0b0bdcd706434de0b0f79d68bb8fad3e?version=5.0.2

Here are some more thoughts. The red mark indicates non-working options for working with runes.

It would be great to highlight in the documentation that destructuring doesn't work with either classes or factories unless you wrap the value in a rune

[MrWaip]

Another nuance, if you pay attention to example 2, then there is a function from the class passed to onclick. It should definitely lose its this, but because you call it through .apply, this is not noticeable.

<button onclick={counter2.inc}>inc</button>