Reactivity

Azox has three primitives: signal, effect and computed. Everything reactive is built from them, and the whole runtime is about fifty lines.

signal

A signal holds a value and remembers who read it. Call it to read; call .set() to write.

import { signal } from 'azox/reactivity';

const count = signal(0);

count();          // 0
count.set(5);     // write a value
count.set(n => n + 1);  // or derive from the current one
count();          // 6

Reading is a function call rather than a property. That is what lets a signal know it was read: there is no proxy and no getter interception involved.

peek

peek() reads without subscribing. Use it when you need the current value but do not want the surrounding effect to re-run on change.

effect(() => {
  console.log(count.peek());  // reads, but creates no dependency
});

count.set(1);  // the effect above does not re-run

effect

An effect runs immediately, and again whenever a signal it read has changed. Dependencies are collected while it runs, so nothing is declared by hand.

import { signal, effect } from 'azox/reactivity';

const first = signal('Ada');
const last = signal('Lovelace');

effect(() => {
  console.log(first(), last());
});
// logs immediately: Ada Lovelace

first.set('Grace');
// logs: Grace Lovelace

computed

A derived signal, recomputed when its sources change.

import { signal, computed } from 'azox/reactivity';

const price = signal(20);
const quantity = signal(3);

const total = computed(() => price() * quantity());

total();            // 60
quantity.set(4);
total();            // 80

onMount

A script runs while its nodes are still being created, so anything that needs a real element has to wait. onMount runs once they are in the document.

import { signal, onMount } from 'azox/reactivity';

const width = signal(0);
let box;

onMount(() => {
  const measure = () => width.set(box.clientWidth);
  measure();

  window.addEventListener('resize', measure);
  // Returned from onMount, so it is this setup's cleanup.
  return () => window.removeEventListener('resize', measure);
});

onCleanup

Registers work to undo when the surrounding scope goes away — a timer to clear, a listener to remove, a subscription to close.

import { signal, onCleanup } from 'azox/reactivity';

const ticks = signal(0);
const timer = setInterval(() => ticks.set(ticks() + 1), 1000);

onCleanup(() => clearInterval(timer));

A scope goes away when a row leaves a keyed list, or when an <if> takes the other branch. It also runs before an effect re-runs, so each run can undo the one before it.

How this reaches the DOM

This is where Azox differs from a Virtual DOM framework. A binding in your markup compiles into an effect that closes over one specific DOM node.

<script>
  import { signal } from 'azox/reactivity';
  const count = signal(0);
</script>

<p>Count: {count()}</p>

becomes, roughly:

const _el0 = document.createElement("p");
const _el1 = document.createTextNode('');

effect(() => { _el1.data = "Count: " + String(count()); });

_el0.appendChild(_el1);

When count changes, that one effect runs and assigns to _el1.data. No component re-runs, no tree is rebuilt, and nothing is compared. The cost of an update is the cost of the assignment.

What this means in practice

Next

• Template syntax — where bindings can appear
• Components — passing signals across boundaries