State Class and Getters

The state class in Structive holds reactive data, computed values, and event logic. It acts as the core logic behind a component’s structure.

🧱 Basic State Structure

Each component exports a default anonymous class as its state. This keeps the framework’s consumption consistent:

export default class {
  count = 0;
  message = "Hello";
}

You can define computed values using get "path"() syntax:

get "list.*.double"() {
  return this["list.*.value"] * 2;
}

Accessing state through wildcard paths inside getters must be done via $resolve() or $getAll() to track dependencies properly.

get "regions.*.population"() {
  return this.$getAll("regions.*.prefectures.*.population")
    .reduce((a, b) => a + b, 0);
}

✅ This enables automatic re-evaluation when population values change.

Each state class can define component options via a static $config field:

static $config = {
  enableShadowRoot: false
};

This controls runtime features like shadow DOM.

The following lifecycle methods can be defined in the state class:

async $connectedCallback() {
  // Called when component is attached
}

async $disconnectedCallback() {
  // Called when component is detached
}

These behave like the native connectedCallback() / disconnectedCallback() on the Web Component class but live in the state layer.

Handlers defined in the state class are callable via data-bind:

<input data-bind="oninput:handleInput">

handleInput(event) {
  this.message = event.target.value;
}

They may also be defined as async functions.

The state class defines both static and dynamic data
Getters compute values reactively from structure
Lifecycle hooks and event handlers live alongside state
Structive separates component structure from behavior, while maintaining structural alignment