Scope and State

Etcher provides a local component scope to certain parts¹ of your component.

Scope

In places where scope is available¹, you can use the $ variable to access the current scope.

In Script Tags and Event Listeners, you must use the .get() and .set() methods to access and change state variables. In Interpolation, do not try to call .get(). Just reference the variable.

<script>
    const { count } = $;

    console.log(count.get());
</script>

<p>Count: {{$.count}}</p>

<button @click={
    () => {
        $.count.set($.count.get() + 1);
    }
}>
    Increment
</button>

State

@state blocks share syntax with Control Flow statements, but are used to define state variables.

{@state count = 0}

State variables are reactive, and will trigger a re-render when they are changed.

<p>Count: {{$.count}}</p>

States are actually objects and have a few methods available to them.

type ScopedState = {
    get(): any,
    set(value: any): void,
    subscribe(callback: (value: any) => void): void,
}