Observable State

Implement createSignal with get, set, and subscribe — the foundation of push-based reactivity.

How labs work

Follow the steps in the task panel.
Edit the highlighted file — usually engine.js.
Watch the preview update as you type.
Run tests when you think you are done.
Open hints if you get stuck — they reveal one at a time.

~/playground — 01-observable-state · edit engine.js

Live

editing engine.js⌘↵ run tests

export function createSignal(initial) {
  // TODO: closure state
  let value = initial
  const subscribers = new Set()

  return {
    get() {
      // TODO: return current value
    },
    set(next) {
      // TODO: update value and notify subscribers synchronously
    },
    subscribe(fn) {
      // TODO: add fn and return unsubscribe
    },
  }
}

Preview goal: Clicking +1 in the preview updates the count.

Checkpoints

›Subscribers fire when set is called
›All Sandpack tests pass