Static support for `$state` in `.svelte.ts`

[Bilge]

Describe the problem

I have a class that is entirely static (only static properties and methods). I cannot declare a $state property, either with a field initializer or in a static initialization block. In both cases, Svelte complains that:

_Error: CompileError: state_invalid_placement: $state(...) can only be used as a variable declaration initializer or a class field

Of course, this is a class field, it's just that it's a static field, which seems to be unsupported for some reason.

Describe the proposed solution

Support static class fields.

Importance

would make my life easier

[brunnerh]

Duplicate of:

• Svelte 5: Static class fields are transformed incorrectly #9547
• It is not possible to declare states in static fields of a class #11961
• Cannot use $state in static member variable #13357

Maybe this should be reconsidered? It seems quite inconsistent to not have this.

[Bilge]

Certainly, "My inclination" seems fairly hand-wavery. The implication of this is that merely upgrading from v4 -> v5 requires any (external) static class interfacing with any Svelte component must be changed to be an instance class, which is wrong if the class is intended to be single-instance only.

[7nik]

What is the point of defining it as a class, then? Why not just define is as an object with methods? Then you can wrap it into $state().

Also, a single instance can be created in IIFE-like way.

const instance = new (class MyClass {
  foo = $state(42);
  bar() {
    return this.foo;
  }
})();

[Bilge]

I like classes. Objects cannot have private properties. I also don't like a component framework forcing me to structure my (external) application in a particular way.

[leonidaz]

I couldn't tell from the previous tickets why defining signals as static members were disallowed.

But for private class members Svelte no longer generates getters and setters (only for public members). So, I wonder if at least private static members can now be allowed?

[ThePaSch]

Also, a single instance can be created in IIFE-like way.

const instance = new (class MyClass {
  foo = $state(42);
  bar() {
    return this.foo;
  }
})();

This is usually a very bad idea, unless you're okay with a 95% drop in performance; and therefore not a viable alternative.

[7nik]

This is usually a very bad idea, unless you're okay with a 95% drop in performance; and therefore not a viable alternative.

Of course, it is slower because it also creates a new prototype chain for each instance. But it doesn't matter in the case of singleton.

[dummdidumm]

Leaving this open to collect use cases since this indeed seems to come up from time to time

[daviareias]

Could you at least remove it from the documentation if is not going to be supported? Took me some time to realize this only works in .js files

[Conduitry]

Where in the documentation is it said that you can use $state() in static class fields?

[daviareias]

Where in the documentation is it said that you can use $state() in static class fields?

My bad, I read that incorrectly:

// You can also use $state in class fields (whether public or private):

class Todo {
	done = $state(false);
	text = $state();

	constructor(text) {
		this.text = text;
	}

	reset() {
		this.text = '';
		this.done = false;
	}
}

For some reason doing this in typescript doesn't work for me. It only works in JS.

[brunnerh]

Your settings might be wrong.

[daviareias]

Your settings might be wrong.

I found out what it was. I'm trying to migrate a monorepo to svelte from react, and using react + svelte plugin at the same time will make $state not work in Class declaration fields.