SolidJS•10mo ago

How to decorators typescript signal

To template this out

_foo: Signal<number>

get foo() {
  return _foo[0]()
}

set foo(_: number) {
  _foo[1](_)
}

constructor() {
this._foo = createSignal(0)
}

_foo: Signal<number>

get foo() {
  return _foo[0]()
}

set foo(_: number) {
  _foo[1](_)
}

constructor() {
this._foo = createSignal(0)
}

17 Replies

bigmistqke•10mo ago

you might like https://github.com/lume/classy-solid?tab=readme-ov-file#signal

GitHub

GitHub - lume/classy-solid: Solid.js reactivity patterns for classe...

Solid.js reactivity patterns for classes, and class components. See https://github.com/lume/element for a Custom Element system built with classy-solid. - lume/classy-solid

gsoutzOP•10mo ago

I want builtin zero config typescript solution. I think decorators work in typescript right.

peerreynders•10mo ago

Keep in mind that Vite uses esbuild in dev mode which only has limited support for decorators. https://esbuild.github.io/content-types/#typescript:~:text=Experimental%20decorators,not%20support%20emitDecoratorMetadata

esbuild - Content Types

bigmistqke•10mo ago

from classy-solid documentation:

Using classy-solid with Vite may result in the following error because decorators are not yet released natively into JavaScript engines (but they will be soon!). For now, a Babel configuration must be provided to compile the syntax for decorators.

so as peer mentioned, you will need some config.

gsoutzOP•10mo ago

no i would rather write the template, ugly syntax anyway.

bigmistqke•10mo ago

and if you need inspiration for implementation: https://github.com/lume/classy-solid/blob/main/src/decorators/signal.ts#L71 this is how classy-solid does it

GitHub

classy-solid/src/decorators/signal.ts at main · lume/classy-solid

Solid.js reactivity patterns for classes, and class components. See https://github.com/lume/element for a Custom Element system built with classy-solid. - lume/classy-solid

bigmistqke•10mo ago

idk what that means

peerreynders•10mo ago

Also keep in mind that your approach eschews read/write segregation (rws) https://www.solidjs.com/guides/getting-started#3-readwrite-segregation The way I see it, rws treats mutation as a superpower that should only be granted to parts that absolutely need it. When rws is followed as a guideline it goes a long way towards preventing cycles within the reactivity graph.

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

gsoutzOP•10mo ago

it works great on my computer so it must be fine. no need to segragate

bigmistqke•10mo ago

with your current implementation

createEffect(() => {
  state.value = state.value + 1
})

createEffect(() => {
  state.value = state.value + 1
})

will cause infinite loop

peerreynders•10mo ago

Much like with multi-threading, with reactivity shared mutable data tends to become a lot more temperamental. https://www.youtube.com/watch?v=2yXtZ8x7TXw&t=432s

NDC Conferences

YouTube

Thinking Outside the Synchronisation Quadrant - Kevlin Henney

Ask programmers what comes to mind when you say concurrency and most are likely to say threads. Ask what comes to mind when you say threads and most are likely to say locks or synchronisation. These assumptions are so deeply held that they define and constrain how programmers are taught and think about concurrency: thread safety is almost synony...

gsoutzOP•10mo ago

ye i don't do that obviously.

peerreynders•10mo ago

Unidirectional flow has always been at the core of Solid's design. https://youtu.be/nYkdrAPrdcw?t=624

Meta Developers

YouTube

Hacker Way: Rethinking Web App Development at Facebook

Delivering reliable, high-performance web experiences at Facebook's scale has required us to challenge some long-held assumptions about software development. Join us to learn how we abandoned the traditional MVC paradigm in favor of a more functional application architecture.

gsoutzOP•10mo ago

why are you laughing i am a very seasoned engineer.

bigmistqke•10mo ago

I thought it was a funny response. How to deal with footguns? Easy. Don't shoot them.-type beat

gsoutzOP•10mo ago

you are talking about footguns, but what is the meaning of get set set(get) createeffect this causes infinite loop, what is the meaning of this?

peerreynders•10mo ago

createEffect's purpose is to rerun the effect function whenever at least one of the reactive values referenced within it (the effect's dependencies) change, presumably to execute a side effect with the current values from those dependencies. When you update the value you are listening to inside the effect function to you set off a feedback loop of infinite (synchronous) update/change cycles. This is only a simple case that can be caught easily by code review but overly careless sharing of Setter<T> functions can lead to the formation of cycles in the reactive graph that will shut down the application when an infinite loop is initiated under the right set of conditions. So read/write segregation is a practice to help ensure that the reactive graph has only unidirectional flow (no cycles).

Gaming

Programming

How to decorators typescript signal