stew/* Packages / 14.5

🚥 stew/state

The stew/state package is the heart of Stew's reactivity engine. It implements the Signals pattern with a high-performance Auto-Tracking system.

What is a Signal?

A Signal is a data cell that "tracks" who is using it. Unlike a standard variable, a Signal can automatically notify the parts of your interface that need to be updated when it changes.

New(val)

Creates a new typed Signal with its initial value.

.Get()

Reads the value and registers itself as a dependency if called within an Effect.

.Set(val)

Updates the value and triggers the re-execution of subscribers.

Effects (Auto-Tracking)

The state.Effect function allows you to create a logic block that reacts to state changes. You don't need to manually declare dependencies: Stew detects them during execution.

<goscript client>
    import "stew/state"
    import "stew/io"

    count := state.New(0)

    // This effect runs immediately, then every time 'count' changes.
    state.Effect(func() {
        Console.Log("Counter is at:", count.Get())
    })

    // Mutation
    increment := func() {
        count.Set(count.Get() + 1)
    }
</goscript>

HTML Integration

The Stew compiler makes it easy to use Signals in HTML. If you use .Get() in a binding, Stew automatically creates the Effect for you.

<!-- Automatically reactive thanks to the .Get() call -->
<h1>Counter: {{ count.Get() }}</h1>

<button on:click={{ count.Set(count.Get() + 1) }}>
    Increment
</button>

🚀 Surgical Optimization

Thanks to Signals, Stew never re-renders your entire page. Only the exact DOM nodes that depend on a modified Signal are updated, ensuring a smooth 60 FPS even on modest mobile devices.