@onUpdated

The @onUpdated decorator registers a callback method that executes automatically whenever a specific reactive property or field changes. It is the primary way to perform side effects in Radiant components.

Usage

import { RadiantElement, customElement, reactiveProp, onUpdated } from '@ecopages/radiant';

@customElement('user-greeting')
export class UserGreeting extends RadiantElement {
	@reactiveProp({ type: String }) declare name: string;
	
	@onUpdated('name')
	updateGreeting() {
		// Receives no arguments; access the new value via this.name
		this.textContent = `Hello, ${this.name}!`;
	}
}

Parameters

Parameter	Type	Required	Description
`propertyName`	`string`	Yes	Name of the property or field to watch.

Feature Highlight

Watching Multiple Properties

A single method can watch multiple properties by applying the decorator multiple times.

@onUpdated('firstName')
@onUpdated('lastName')
updateFullName() {
	this.fullNameElement.textContent = `${this.firstName} ${this.lastName}`;
}

Derived State

Calculate and update internal state derived from public properties.

@reactiveProp({ type: Array }) declare items: CartItem[];
@reactiveField private total = 0;

@onUpdated('items')
calculateTotals() {
	this.total = this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
}

DOM Synchronization

Keep the DOM or external state in sync with component properties.

@onUpdated('theme')
applyTheme() {
	document.documentElement.setAttribute('data-theme', this.theme);
	localStorage.setItem('theme', this.theme);
}

Learn More

@reactiveProp - Define public reactive properties.
@reactiveField - Define internal reactive fields.
@debounce - Debounce frequent updates.