Decorators

Extend component properties to enable change detection and/or other features

State

function State(target: Component, key: string)

Overrides a property's getter and setter to get/set values using the component event store.

The component is subscribed to changes and will re-render whenever they change.

Use when you would like a property's state change to cause a re-render or you want state to be managed via an event store (ex. for undo, redo, or transaction ledger features).

exportclassCounterextendsComponent{
@Stateprivate counter: number = 0;

  Template = async () => <>
    <p>Counter Value: <b>{this.counter}</b></p>
    <button onclick={() => this.counter++}>Increment</button>
    <button onclick={() => this.counter--}>Decrement</button>
  </>;
}

AppStore

function AppStore(target: Component, key: string)

Functions just as the State decorator, with the only difference that the event store being used is the app's event store vice the component's.

Use when sharing state across the session, between components for example.

Session

function Session(target: Component, key: string)

Overrides a property's getter and setter to get/set values using session storage.

Use when you would like to persist data across a session, but not once the session is ended. Changes to properties decorated with "Session" do not trigger re-renders.

exportclassPreferencesextendsComponent{
@Sessionprivate theme: string = 'dark';

  Template = async () => <>
    <p>Theme: <b>{this.theme}</b></p>
  </>;
}

Local

function Local(target: Component, key: string)

Functions just as the Session decorator, except it uses Local storage instead of Session storage.

Use when when you would like to persist data to a device between sessions or until explicity removed.

Reference

function Reference(target: Component, key: string)

Overrides the getter of a property, returning the element bound to it via the "ref" attribute.

Use this decorator when you need to access or manipulate elements, and you'd like to avoid maintaining ids for use in dom queries.

classReferenceExampleComponentextendsComponent{
@Referencepublic InputRef!: HTMLInputElement;

public Template: (route?: Route) =>Promise<Jsx> = async () => <>
    <input ref={this.InputRef} type="text"></input>
  </>;
}

// input value can be accessed with -> this.InputRef.value