Radiant0.3.0

Controller Decorator Visualizer

How RadiantController turns authored HTML into a reactive surface: attributes in, events in, refs out, state in between.

Wire a host with data-controller. The controller then:

  • reads host attributes with @attr(...)
  • copies reactive fields onto authored nodes with @bindTo(...)
  • resolves authored refs with @query(...) when it needs a live handle
  • reacts to button input with @onEvent(...)
  • stores controller-local values with @state

Controller decorators

A single RadiantController reads host attributes, resolves DOM refs, handles delegated events, and copies reactive fields onto authored markup with @bindTo.

Initial hydrate

The host attribute seeded controller state and @bindTo painted the authored nodes.

Host attributes

@attr · @bindTo

data-signal
ready
aria-busy
false

Delegated events

@onEvent

initial hydrate

Query surface

@query

resolved refs

0

State and updates

@state · @bindTo

signal
ready
pulses
0

Hydrated from host attribute

The selector is a rui-radio-group. Its browser registration gives the radios a shared name and keeps one option selected; the controller uses each change to update the authored status nodes.

The Pattern

RadiantController sits on markup you already have — server templates, CMS output, hand-written HTML — and keeps attributes, events, refs, and reactive state synchronized.

The DOM stays the structure source of truth. The controller is the behavior layer.