@gluonjs/core / src/decorators / state

Function: state()

state<Value>(declaration?): GluonPropertyDecorator

Declares reactive component-owned state without an HTML attribute transport.

Type Parameters

Value

Value = unknown

Parameters

declaration?

StateDeclaration<Value> = {}

Returns

GluonPropertyDecorator

Example

Declare component-owned reactive state that never crosses the HTML attribute boundary:

import { GluonElement, html } from '@gluonjs/core';
import {
  customElement,
  property,
  state,
  type CustomElementDecorator,
  type GluonPropertyDecorator,
  type StateDeclaration,
} from '@gluonjs/core/decorators';

const register: CustomElementDecorator = customElement('decorated-counter');
const reflected: GluonPropertyDecorator = property({ type: Number, reflect: true, default: 0 });
const internal = { default: false } satisfies StateDeclaration<boolean>;

@register
class DecoratedCounter extends GluonElement {
  @reflected count!: number;
  @state(internal) private busy!: boolean;
  protected render() { return html`<button ?disabled=${this.busy}>${this.count}</button>`; }
}