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

You can give signals a name for easy access across your application:

// Create a named signal and keep it in sessionStorage
const count = signal(0, 'count');

// Retrieve it elsewhere (even in another file)
const sameCount = signal.get('count');

// Get or create with default value
// If ' ' exists, returns it. If not, creates it with 100.
const score = signal.get('count', 0);

Stored Signals

You can store named signals in Storage objects (e.g. sessionStorage or localStorage) for persistence. It will be saved any time there is a change.

const count = signal(0, {name:'count', storage:sessionStorage});

// Retrieve it elsewhere (even in another file)
const sameCount = signal.get('count');

// Get or create with default value
// If ' ' exists, returns it. If not, creates it with 100.
const score = signal.get('count', {storage:sessionStorage, defaultValue:0});

Note: Manually updating the value in storage will not trigger updates.

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