Signals

Signals are the heart of Lightview's reactivity. They hold values that can change over time, and automatically notify anything that depends on them.

Creating Signals

const { signal } = Lightview;

// Create a signal with an initial value
const count = signal(0);
const name = signal('World');
const items = signal([]);
const user = signal({ name: 'Alice', age: 25 });

Reading Values

// Two ways to read
console.log(count.value);  // Property access: 0
console.log(count());      // Function call: 0

// Both work identically - pick your style

Writing Values

// Two ways to write
count.value = 5;           // Property assignment
count(10);                 // Function call with argument

// Both trigger reactive updates

Reactive UI

The magic happens when you use signals in your UI. Wrap expressions in functions to make them reactive:

const { signal, tags } = Lightview;
const { div, p, button } = tags;

const count = signal(0);

// Static - won't update
p(`Count: ${count.value}`)  // ❌ "Count: 0" forever

// Reactive - updates automatically
p(() => `Count: ${count.value}`)  // ✅ Updates when count changes!

const count = signal(0);

div(
    p(() => `Count: ${count.value}`),
    button({ onclick: () => count.value++ }, '+1')
)

Named Signals (lightview-x)

With the hypermedia extension, you can name signals for use in templates:

// Register a named signal
const count = signal(0, 'count');

// Retrieve it elsewhere
const sameCount = signal.get('count');

// Get or create with default
const score = signal.get('score', 100);  // Creates if doesn't exist

Tips & Patterns

Derived State

For values computed from signals, use computed() instead:

const count = signal(0);
const doubled = computed(() => count.value * 2);  // Auto-updates

Objects & Arrays

For deep reactivity on objects/arrays, consider state():

// Signal: only triggers on reassignment
const items = signal([1, 2, 3]);
items.value.push(4);        // ❌ Won't trigger update
items.value = [...items.value, 4];  // ✅ Triggers update

// State: deep reactivity
const items = state([1, 2, 3]);
items.push(4);              // ✅ Triggers update automatically