Best Way to Handle $state and $derived in .svelte.ts files

[nevil2]

I am rewriting my TopoEditor from VueJs to Svelte (as all my other projects are now in Svelte).

It has some 100 state variables split between ref/reactive ($state) and computed ($derived). To make code manageable, it uses a number of Typescript files for handling the logic and avoiding passing large number of variables as props between the components.

The way I am solving it is Svelte has much more boiler-plate than in VueJS.

In VueJs, with store.ts as:

import { ref, computed } from 'Vue'
export number1 = ref(5)
export number2 = computed(() => number1 * 2)

the component can use and set the values as follows:

import { number1, number2} from store.ts
number1.value = 4 + number2.value

To do the same in Svelte, store.svelte.ts is:

const createStore = () => {
  let number1 = $state(5)
  let number2 = $derived(number1 * 2)
  return {
    get number1() { return number1 },
    set number1(n: number) { number1 = n },
    get number2(): { return number2 }
  }
}
export const store = createStore()

and in the component

import { store } from 'store.svelte'
store.number1 = 4 + store.number2

store.svelte.ts has roughly 3 times more lines than store.ts (VueJS). With 100 variables, that's a lot.
Am I solving this correctly?

[brunnerh]

For writable state you can do something similar to ref by wrapping the value in an object:

export const number1 = $state({ value: 5 });

For computed state, you may not even $derived if you don't mind the value not being cached, a regular function will also be reactive:

export const number2 = () => number1.value * 2;

If you want something similar to computed where the value is on a property you can also just create your own.

export function computed(fn) {
  const value = $derived.by(fn);
  return { get value() { return value; } };
}

(Note on naming: There are precedents in built-in Svelte modules for the value property being called current instead of value. See e.g. the Spring class.)

[nevil2]

Thanks very much. Seems simple. Can't use:

export const number1 = $state(5) // on import, number1 will not be reactive 
export const number2 = $derived(number1 * 2) // exporting $derived is not allowed

Can use:

export const number1 = $state({ current: 5 })
export const number2 = () => number1.current * 2

which requires in component:

import { number1, number2 } from 'store.svelte'
$inspect( number1.current, number2() )

I noted that I can't replace VueJS watch with $effect in a store.

[nevil2]

To match VueJS I need:

function computed(fn) {
  const value = $derived.by(fn)
  return { get value() { return value } }
}
export const number1 = $state({ value: 5 })  // behaves like VueJS ref
export const number2 = computed(() => number1.value * 2)  // behaves like VueJS computed

Wish I knew this when I started the conversion. Could have saved some effort.