Stores without classes

[vjpr]

I would love to be able to do:

function createStore() {
  const value = $state()
  const state = {value}
  const actions = { foo() { value = value + 2 } }
  return {...state, ...actions}
}

Compiler generates:

/* foo.svelte.js generated by Svelte v5.39.2 */
import * as $ from 'svelte/internal/client';

export function createStore() {
	let value = $.state(void 0);
	const state = { value: $.get(value) };

	const actions = {
		foo() {
			$.set(value, $.get(value) + 2);
		}
	};

	return { ...state, ...actions };
}

Problem is the compiler wraps value in $.get causing it to immediately evaluate.

const state = { value: $.get(value) };

---

As a workaround I wrote a helper to create the getters and setters:

export function accessors(obj, only?) {
  const newObj = {}
  let keys = Object.keys(obj)

  if (only) keys = only

  for (const key of keys) {
    const descriptor = {
      enumerable: true,
      get() {
        const signal = obj[key]
        const res = $.get(signal)
        return res
      },
      set(val) {
        obj[key] = val
      },
    }
    Object.defineProperty(newObj, key, descriptor)
  }
  return newObj
}

This would be the ideal usage:

  const state = accessors({
    scrollTop,
    visibleCount,
    windowStart,
    windowEnd,
  })

But it compiles to the following which breaks reactivity.

const state = accessors({
  scrollTop: $.get(scrollTop),
  visibleCount: $.get(visibleCount),
  windowStart: $.get(windowStart),
  windowEnd: $.get(windowEnd)
});

The only way I can use this functions is if I write:

  const state = accessors({
    scrollTop: () => scrollTop,
    visibleCount: () => visibleCount,
    windowStart: () => windowStart,
    windowEnd: () => windowEnd,
  })

1. Would my accessors function work if it didn't compile to $.get()
2. Is there a workaround for this so I can have my concise syntax of choice?

---

https://svelte.dev/playground/d66731cca4b74a429051118875284c37?version=5.39.2

[brunnerh]

You are fighting syntax, so I don't think this is particularly productive.
Maybe something can be done with proxies, but it is probably not worth the effort.

If I really care about strict encapsulation somewhere, I just write out the getters, but more realistically I would just wrap the entire thing with $state and be done with it (maybe mark some properties as read-only on the type level).

function createStore() {
  const store = $state({
    value: undefined,
    foo() { store.value += 2 },
  });
  return store;
}

[Thiagolino8]

As long as you don't read the state outside of a closure it will work, there are infinite ways to do it

function createStore() {
 	const store = $state({
		value: undefined,
		foo() { store.value += 2 },
		get bar() { return store.value * 2 }
	});

	return store
}

[brunnerh]

What @Thiagolino8 showed is what I would suggest doing in most cases. There is an exception when it comes to expensive computations which would benefit from the caching $derived provides.

Unfortunately you cannot easily introduce $derived into a state object and will have to extract all $state and $derived from the object and use getters to close over the extracted variables instead. (Again, there probably is something that can be done via meta programming but I am not sure it is worth the effort.)

[vjpr]

via meta programming

I think it is impossible. There is no way to access the unwrapped signal after compilation. It is always wrapped in $.get().

[brunnerh]

If you have a getter like get bar() { return store.value * 2 }, it already closes over the state access, so it probably can be wrapped. The syntax for that might not be pretty, though, since you need to somehow mark that the property should be transformed into a $derived-backed version of itself (unless you transform all get-properties which adds more overhead).

There also are higher level methods of meta programming, e.g. Vite plugins that transform your code before Svelte gets to touch it, but those really are the big guns and they allow you to create your own semantics which I would not recommend doing outside of solo projects.

[brunnerh]

Here be example abomination showing the $derived caching:

<script lang="ts">
  type ReplaceDollarProps<T> = {
    [K in keyof T as K extends `$${infer R}` ? R : K]: T[K]
  } & {};

  function makeStore<T>(obj: T): ReplaceDollarProps<T> {
    const descriptors = Object.getOwnPropertyDescriptors(obj);

    const asState = $state(obj);

    for (const [key, descriptor] of Object.entries(descriptors)) {
      if (key.startsWith('$') && descriptor.get) {
        const derivedKey = key.slice(1);
        const derived = $derived.by(descriptor.get.bind(asState));
        
        Object.defineProperty(obj, derivedKey, {
          get() { return derived; },
          enumerable: true,
          configurable: true
        });

        delete (obj as any)[key];
      }
    }

    return asState as any;
  }

  function createStore(value: number) {
    return makeStore({
      value,
      foo() { this.value += 2 },
      get $bar() {
        console.log('computing bar');
        return this.value * 2;
      }
    });
  }

  const myStore = createStore(1);
</script>

<input bind:value={myStore.value} type="number" />

<button onclick={() => myStore.foo()}>foo()</button>

<p>Value: {myStore.value}</p>

<!-- Console should only log one computation per change -->
<p>Bar 1: {myStore.bar}</p>
<p>Bar 2: {myStore.bar}</p>
<p>Bar 3: {myStore.bar}</p>

Playground

[vjpr]

I also noticed that if I add const foo = $(scrollTop) it stop any compilation working for the entire file.