@gluonjs/core / src/decorators / property

Function: property()

property<Value>(definition?): GluonPropertyDecorator

Declares a public reactive Gluon property on a class field or auto-accessor. This is the decorator equivalent of an entry in static properties.

Type Parameters

Value

Value = unknown

Parameters

definition?

PropertyDefinition<Value> = {}

Returns

GluonPropertyDecorator

Example

Declare a public reactive element field with conversion, reflection, default, and validation options:

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>`; }
}