Design Patterns, Mechanism First

// the module pattern: a closure over private state. with ES modules, the module scope IS the closure.
// counter.js
let count = 0                                   // module-scope let: a context slot in the module's environment (part 11)
const listeners = new Set()                     // module-scope: lives for the process; the retention is deliberate
export function inc() { count++; for (const l of listeners) l(count) }
export function onChange(fn) { listeners.add(fn); return () => listeners.delete(fn) }   // return the unsubscribe: the off() is the API

// the revealing module / factory: a closure per instance, returning a fixed-shape object
export function makeCounter(initial = 0) {
  let count = initial                           // captured → context slot, one context per makeCounter call
  return { inc: () => ++count, get: () => count }   // literal: one map for every counter; two closures sharing one context
}
// vs a class: methods on the prototype (one function object), state as fields (same map). closures cost a context + N functions per instance.
// pick closures for a handful of instances or true privacy; a class for thousands of instances.

// state machine, two shapes
// 1. a switch: the whole logic is transitions; states are strings (internalised; TestEqualStrict is a pointer compare)
function next(state, event) {
  switch (state) {
    case 'idle':    return event === 'start' ? 'running' : state
    case 'running': return event === 'pause' ? 'paused' : event === 'stop' ? 'idle' : state
    case 'paused':  return event === 'resume' ? 'running' : event === 'stop' ? 'idle' : state
  }
}
// V8: a chain of compares for strings; a jump table for dense small integers. both fine. keep states as literals, not computed strings.

// 2. a table of state objects: each state has behaviour; every state object has the SAME shape and method set
const states = {
  idle:    { enter() {}, on: { start: 'running' }, render(ctx) { ctx.text('idle') } },
  running: { enter() { startTimer() }, on: { pause: 'paused', stop: 'idle' }, render(ctx) { ctx.text('running') } },
  paused:  { enter() { stopTimer() }, on: { resume: 'running', stop: 'idle' }, render(ctx) { ctx.text('paused') } },
}
// states[current].render(ctx): the receiver map is the same for all three (same literal shape) → monomorphic; the call target is
// polymorphic (3 functions) → still inlinable. the `on` tables differ in shape (different keys) → keep lookups there keyed, not named.
// the failure mode: states defined in different files with different key orders → three maps → polymorphic everywhere.

// proxy-based reactivity, the discipline
const deps = new WeakMap()                      // target → Map<key, Set<effect>>: WeakMap so targets can die
let activeEffect = null
function reactive(target) {
  return new Proxy(target, {
    get(t, k, r) { track(t, k); const v = Reflect.get(t, k, r); return typeof v === 'object' && v !== null ? reactive(v) : v },  // lazy, shallow
    set(t, k, v, r) { const ok = Reflect.set(t, k, v, r); trigger(t, k); return ok },
  })
}
// costs: every read through the proxy is a trap call (~50 to 100 ns) plus track (a WeakMap get, a Map get, a Set add)
// so: wrap state at the boundary; read it in effects/templates (few reads); never iterate a proxied array of 100k in a hot loop
// toRaw(proxy) before heavy computation; computed values cache results so the trap runs once per invalidation, not per read
// Vue's `shallowReactive`, MobX's `observable.shallow`, Solid's stores: all this same trade-off, with the same escape hatches

// async patterns and their job counts (part 10)
// sequential: N awaits = N hops, serial latency
for (const u of urls) results.push(await fetch(u))
// parallel: N promises started, one await on all: latency = max, not sum
const results = await Promise.all(urls.map(u => fetch(u)))
// bounded concurrency: a pool of K workers pulling from a shared iterator (generator = the queue; no library needed)
async function pool(items, k, fn) { const it = items[Symbol.iterator](); const out = []
  await Promise.all(Array.from({ length: k }, async () => { for (const x of it) out.push(await fn(x)) })); return out }
// the shared iterator is the trick: K async workers each pull the next item; iteration state is the generator's frame
// retry with backoff: a loop with await on a timer promise; the AbortSignal passed through so a cancel reaches the sleep
// debounce / throttle: a timer id in a closure (context slot) + clearTimeout; the pending call's arguments retained until it fires