jq79 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jq79",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. Single-file build, zero dependencies.",
   "keywords": [
     "reactive",
@@ -65,6 +65,7 @@
     "site": "node scripts/build-site.mjs",
     "site.dev": "node scripts/site-dev.mjs",
     "benchmark": "node scripts/run-benchmark.mjs",
+    "benchmark:ab": "node scripts/run-ab.mjs",
     "benchmark:comparison": "node scripts/run-comparison.mjs",
     "prepublishOnly": "npm test && npm run build"
   },

package/src/jq79.ts

@@ -267,8 +267,49 @@ const evalHandler = (expr: string, scope: Record<string, any>, extras: Record<st
 
 // [\s\S] rather than `.` so an expression can span lines, like the ones in
 // directive attributes (which reach evalExpr wrapped in parens either way)
-const interpolate = (template: string, scope: Record<string, any>): string =>
-  template.replace(/{{\s*([\s\S]+?)\s*}}/g, (_, expr) => evalExpr(expr, scope) ?? "")
+const INTERPOLATION_RE = /{{\s*([\s\S]+?)\s*}}/g
+
+// A text template split once into its literal and expression parts. The split
+// used to happen on every run of every instance - `String.replace` over the
+// whole text, a fresh match object and a callback per expression - and a
+// :each over 1,000 rows runs it 1,000 times per text node to reach the same
+// answer about the same string. Keyed by the template text, like compileExpr's
+// cache and bounded the same way: by how many distinct texts the source holds
+//
+// An expression part is boxed so a literal `"x"` and an expression `x` stay
+// distinguishable without a second array
+type TextPart = string | { expr: string }
+
+const textParts = new Map<string, TextPart[]>()
+
+const splitText = (template: string): TextPart[] => {
+  const cached = textParts.get(template)
+  if (cached) return cached
+  const parts: TextPart[] = []
+  let at = 0
+  INTERPOLATION_RE.lastIndex = 0
+  for (let match = INTERPOLATION_RE.exec(template); match; match = INTERPOLATION_RE.exec(template)) {
+    if (match.index > at) parts.push(template.slice(at, match.index))
+    parts.push({ expr: match[1] })
+    at = match.index + match[0].length
+  }
+  if (at < template.length) parts.push(template.slice(at))
+  textParts.set(template, parts)
+  return parts
+}
+
+// what an interpolated text node renders to, from the parts. `?? ""` on each
+// expression, and String() over the join, is what template.replace did: a
+// nullish value contributes nothing and everything else is coerced
+const renderText = (parts: TextPart[], scope: Record<string, any>): string => {
+  if (parts.length === 1) {
+    const only = parts[0]
+    return typeof only === "string" ? only : String(evalExpr(only.expr, scope) ?? "")
+  }
+  let out = ""
+  for (const part of parts) out += typeof part === "string" ? part : String(evalExpr(part.expr, scope) ?? "")
+  return out
+}
 
 
 const CONTROL_ATTRS = new Set([":attrs", ":class", ":value", ":checked", ":selected", ":if", ":elseif", ":else", ":each", ":key", ":with", ":text", ":html", ":html.allowed", ":props"])
@@ -378,16 +419,16 @@ const removeRange = ({ first, last }: NodeRange) => {
 // single span: unlinking 10,000 rows one at a time is 40% of that operation,
 // profiled - see TODOS/2026-08-23.batch-range-removal.md. Runs are built by the
 // caller, which is the only place that knows what else is going
-const removeRuns = (runs: NodeRange[][]) => {
+const removeRuns = (runs: NodeRange[]) => {
   runs.forEach(run => {
-    if (run.length === 1) return removeRange(run[0])
-    const parent = run[0].first.parentNode
+    if (run.first === run.last) return removeRange(run)
+    const parent = run.first.parentNode
     if (!parent) return
     // both ends sit between nodes, so nothing is partially selected and whole
     // nodes are what gets unlinked
     const range = document.createRange()
-    range.setStartBefore(run[0].first)
-    range.setEndAfter(run[run.length - 1].last)
+    range.setStartBefore(run.first)
+    range.setEndAfter(run.last)
     range.deleteContents()
   })
 }
@@ -396,16 +437,19 @@ const removeRuns = (runs: NodeRange[][]) => {
 // `ordered` (which is in DOM order). Adjacency is confirmed rather than assumed:
 // a gap - an entry removed earlier in the same pass - starts a new run, so a
 // live entry can never end up inside one
-const contiguousRuns = <T extends { range: NodeRange }>(ordered: T[], isDead: (entry: T) => boolean): NodeRange[][] => {
-  const runs: NodeRange[][] = []
-  let run: NodeRange[] | null = null
+const contiguousRuns = <T extends { range: NodeRange }>(ordered: T[], isDead: (entry: T) => boolean): NodeRange[] => {
+  const runs: NodeRange[] = []
+  let run: NodeRange | null = null
   ordered.forEach(entry => {
     if (!isDead(entry)) {
       run = null
       return
     }
-    if (run && run[run.length - 1].last.nextSibling === entry.range.first) run.push(entry.range)
-    else runs.push((run = [entry.range]))
+    // a run is a span, not the list of ranges inside it: only its two ends are
+    // ever read, and a list dropping 10,000 rows was building an array of
+    // 10,000 entries to hand over two of them
+    if (run && run.last.nextSibling === entry.range.first) run.last = entry.range.last
+    else runs.push((run = { first: entry.range.first, last: entry.range.last }))
   })
   return runs
 }
@@ -1218,7 +1262,14 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
     })
   }
 
-  Object.entries(node.attrs).forEach(([key, value]) => {
+  // walked with `for...in` rather than Object.entries().forEach: a 1,000-row
+  // :each renders every element of its template a thousand times, and the
+  // entries form allocates one array of pairs plus one two-element array per
+  // attribute *per instance*. Nothing here reads the pairs as pairs, so the
+  // allocation buys nothing and the garbage it makes is measurable - see
+  // TODOS/2026-08-23.where-the-create-time-goes.md
+  for (const key in node.attrs) {
+    const value = node.attrs[key]
     if (key.startsWith("@")) bindEvent(el, key, value, scope)
     else if (key === ":model" || key.startsWith(":model.")) {
       // :model binds component tags only (see TODOS/2026-07-15.model-directive.md;
@@ -1249,7 +1300,7 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
         fx.effect(() => applyAttr(el, name, evalExpr(expr, scope)))
       }
     } else el.setAttribute(key, value)
-  })
+  }
 
   const bindExpr = node.attrs[":attrs"]
   if (bindExpr !== undefined) {
@@ -1271,17 +1322,23 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
   // static list survives every re-run, even when the expression names one of
   // its classes and then drops it (class="btn" :class="{ btn: cond }" keeps
   // btn on false)
+  //
+  // The toggle list stays null until a `:class.` attribute is actually found,
+  // for the reason the attribute walk above is a `for...in`: entries + filter +
+  // map allocated three arrays for every element rendered, and the
+  // overwhelming majority of elements carry no `:class.` at all
   const classExpr = node.attrs[":class"]
-  const classToggles = Object.entries(node.attrs)
-    .filter(([key]) => key.startsWith(":class."))
-    .map(([key, expr]): [string, string] => [key.slice(":class.".length), expr])
-  if (classExpr !== undefined || classToggles.length) {
+  let classToggles: [string, string][] | null = null
+  for (const key in node.attrs) {
+    if (key.startsWith(":class.")) (classToggles ??= []).push([key.slice(":class.".length), node.attrs[key]])
+  }
+  if (classExpr !== undefined || classToggles) {
     const staticClasses = new Set(classNames(node.attrs.class ?? ""))
     let bound: string[] = []
 
     fx.effect(() => {
       const next = classExpr !== undefined ? classNames(evalExpr(classExpr, scope)) : []
-      classToggles.forEach(([name, expr]) => {
+      classToggles?.forEach(([name, expr]) => {
         if (evalExpr(expr, scope)) next.push(...classNames(name))
       })
       bound.forEach(name => {
@@ -1404,7 +1461,10 @@ const defineScopeVar = (scope: Record<string, any>, key: string, value: any) =>
 // `pos` is where the entry sat in the previous pass, refreshed as the buckets
 // are built - the positioning pass needs the old order to work out which rows
 // are already where they belong (see longestIncreasingRun)
-type EachEntry = { key: any; item: any; scope: Record<string, any>; range: NodeRange; fx: EffectScope; pos: number }
+// `dead` is set by the pass that disposes the entry, and read by the run walk
+// right after: a Set membership test per row was the alternative, and a list
+// dropping 10,000 rows does 10,000 of them
+type EachEntry = { key: any; item: any; scope: Record<string, any>; range: NodeRange; fx: EffectScope; pos: number; dead?: boolean }
 
 // the indices of one longest strictly increasing subsequence of `positions`,
 // as a flag per index. Fed the old position of every entry in the new order
@@ -1661,8 +1721,11 @@ const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectSc
       const dead = new Set<EachEntry>()
       previous.forEach(bucket => bucket.forEach(entry => dead.add(entry)))
       if (dead.size) {
-        dead.forEach(entry => entry.fx.dispose())
-        removeRuns(contiguousRuns(entries, entry => dead.has(entry)))
+        dead.forEach(entry => {
+          entry.dead = true
+          entry.fx.dispose()
+        })
+        removeRuns(contiguousRuns(entries, entry => entry.dead === true))
       }
 
       let prevNode: Node = anchor
@@ -1716,7 +1779,17 @@ const renderNodes = <T extends ParentNode>(
       const textNode = document.createTextNode(node)
       // static text is most of a template (all of its indentation, for a start):
       // only text with a {{ expression }} in it needs an effect to stay in sync
-      if (node.includes("{{")) fx.effect(() => { textNode.textContent = interpolate(node, scope) })
+      // the write is guarded: an effect woken by a sibling's change (one entry
+      // of a :each refreshed on a move, a grouped notification) recomputes the
+      // same string it already wrote, and assigning it back is a DOM mutation
+      // the browser has to take seriously
+      if (node.includes("{{")) {
+        const parts = splitText(node)
+        fx.effect(() => {
+          const text = renderText(parts, scope)
+          if (textNode.textContent !== text) textNode.textContent = text
+        })
+      }
       fragment.appendChild(textNode)
       i++
       continue
@@ -3050,7 +3123,7 @@ export class Component79 {
           }
           declareProps(store, parseFactoryProps(script.content))
           const body = deferred ? defer(factoryCode) : factoryCode
-          return runFactoryScript(body, store, fx.effect, instanceHelpers, $import, at)
+          return runFactoryScript(body, store, run => fx.effect(run), instanceHelpers, $import, at)
         }
         const { vars, code } = transformSetupScript(script.content)
         declareProps(store, setupSignature(script))
@@ -3058,7 +3131,7 @@ export class Component79 {
         // to them (and reads of them) through the reactive proxy
         vars.forEach(name => { if (!(name in store)) (store as any)[name] = undefined })
         const body = deferred ? defer(code) : code
-        return runSetupScript(body, store, fx.effect, instanceHelpers, $import, at)
+        return runSetupScript(body, store, run => fx.effect(run), instanceHelpers, $import, at)
       })()
       // a script that threw has nothing left to contribute, so its rejection
       // releases the gate exactly as completion does - the error is already

package/src/reactive.ts

@@ -86,6 +86,11 @@ const KEYS_SEGMENT = " keys"
 
 const keysPath = (path: string): string => (path ? `${path}.${KEYS_SEGMENT}` : KEYS_SEGMENT)
 
+// an array's length, as a dep suffix: see indexable, which asks whether an
+// effect holds the length of the container a slot sits in
+const LENGTH_SUFFIX = ".length"
+
+
 const createTrieNode = (parent: TrieNode | null, segment: string): TrieNode =>
   ({ children: null, own: null, deep: null, parent, segment })
 
@@ -299,25 +304,71 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
     return matched
   }
 
+  // whether path[start..end) is an array index - all digits, so `data.6` is a
+  // slot and `data.tags` is not. Read off the path in place: this runs per
+  // ancestor of every dep an effect holds
+  const isSlotSegment = (path: string, start: number, end: number): boolean => {
+    if (start === end) return false
+    for (let at = start; at < end; at++) {
+      const code = path.charCodeAt(at)
+      if (code < 48 || code > 57) return false
+    }
+    return true
+  }
+
   // Reaching `data[5].label` reads three paths and tracks all three, but for an
-  // ordinary effect the two ancestors carry no information the leaf doesn't: a
-  // write to "data" or "data.5" reaches "data.5.label" through the subtree
-  // sweep anyway. Dropping them is a third of the index to build, hold and tear
-  // down on a list of any size.
+  // ordinary effect an ancestor carries no information the leaf doesn't: a
+  // write to "data" reaches "data.5.label" through the subtree sweep anyway.
+  // Dropping them is a third of the index to build, hold and tear down on a
+  // list of any size.
+  //
+  // An **array slot** is the exception, and it is the reason this isn't simply
+  // "every ancestor". A splice wakes the slots it shifted and deliberately
+  // does not sweep below them - what sits under a slot belongs to the row that
+  // was wrapped there, and that row did not change (see splicedAt). So the
+  // effect that read `data[6].label` has to keep `data.6` as a dep of its own,
+  // or removing a row ahead of it leaves the binding showing the old row's
+  // label. A row binding inside a `:each` never read the slot and so keeps
+  // nothing extra - it holds one dep and doesn't reach this code at all
+  //
+  // ...unless the effect also holds the container's **length**, and then the
+  // slots are redundant again: a splice always changes the length and
+  // `notifyReplaced` announces it exactly, so whoever tracked the length hears
+  // every shift there is without a slot dep of their own. That is not a
+  // detail - the `:each` list effect reads the length *and* every slot, so
+  // without this clause it indexes a second dep per row, and `clearLarge`
+  // measured +4.5% (4 of 4 rounds, ±2.7% noise) tearing them all down again
   //
   // Not for a `deep` effect, where it is exactly backwards - a forwarding
   // effect wakes off its *ancestor* entries, so its shallowest dep is the one
   // doing the work and the leaves are the redundant ones
   const indexable = (effect: Effect, deps: Set<string>): Set<string> => {
     if (effect.deep || deps.size < 2) return deps
-    // every ancestor of every dep is redundant, so mark them by walking each
-    // dep's own dots rather than comparing deps against each other: a `:each`
-    // over 10,000 rows tracks 10,000 deps, and the pairwise version of this
-    // was 100,000,000 string comparisons
+    // an ancestor that isn't a slot is redundant, and they are marked by
+    // walking each dep's own dots rather than comparing deps against each
+    // other: a `:each` over 10,000 rows tracks 10,000 deps, and the pairwise
+    // version of this was 100,000,000 string comparisons
+    // which containers this effect tracks the length of, resolved in one pass
+    // so the walk below can ask without building a `${container}.length` per
+    // slot it meets - a list effect meets one per row
+    const lengthTracked = new Set<string>()
+    deps.forEach(dep => { if (dep.endsWith(LENGTH_SUFFIX)) lengthTracked.add(dep.slice(0, -LENGTH_SUFFIX.length)) })
+
     const redundant = new Set<string>()
     deps.forEach(dep => {
+      let from = 0
+      // the ancestor one level up, carried rather than re-sliced: it is the
+      // container of the segment being looked at, and it was already built
+      let parent = ""
       for (let dot = dep.indexOf("."); dot !== -1; dot = dep.indexOf(".", dot + 1)) {
-        redundant.add(dep.slice(0, dot))
+        const ancestor = dep.slice(0, dot)
+        // `from > 0` because a slot needs a container to be a slot of: a
+        // top-level numeric key is a key of the store's root object, and no
+        // splice can shift it
+        const slot = from > 0 && isSlotSegment(dep, from, dot)
+        if (!slot || lengthTracked.has(parent)) redundant.add(ancestor)
+        parent = ancestor
+        from = dot + 1
       }
     })
     if (!redundant.size) return deps
@@ -466,26 +517,60 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
   // replacement that ends up sweeping anyway
   const GIVE_UP: null = null
 
-  const whatChanged = (previous: any, next: any): string[] | null => {
+  // `exact` marks the keys as slots whose occupant *moved* rather than values
+  // that changed: nothing under them is different, so the subtree each one
+  // would otherwise sweep must be left alone (see splicedAt)
+  type Difference = { keys: string[]; exact: boolean }
+
+  const NOT_SPLICED = -1
+
+  // one element inserted into or removed from an array: from the cut onwards
+  // every element is the very same element, one slot over. `data.filter(...)`
+  // - the most ordinary edit anyone makes to a list - reads as "over half the
+  // container differs" to the walk below, which gives up and has the whole
+  // subtree swept; this recognises the shift for what it is. O(n), no
+  // allocation, and O(1) to reject on any pair whose lengths differ by
+  // anything but one. See TODOS/2026-08-23.notify-a-splice.md
+  const splicedAt = (previous: any[], next: any[]): number => {
+    const grew = next.length > previous.length
+    const shorter = grew ? previous : next
+    const longer = grew ? next : previous
+    let start = 0
+    while (start < shorter.length && Object.is($toRaw(shorter[start]), $toRaw(longer[start]))) start++
+    for (let index = start; index < shorter.length; index++) {
+      if (!Object.is($toRaw(shorter[index]), $toRaw(longer[index + 1]))) return NOT_SPLICED
+    }
+    return start
+  }
+
+  const whatChanged = (previous: any, next: any): Difference | null => {
     if (Array.isArray(next)) {
       const before = previous.length
       const after = next.length
       // nothing on one side means nothing to reuse on the other
       if (!before || !after) return GIVE_UP
       const span = Math.max(before, after)
+      if (Math.abs(before - after) === 1) {
+        const start = splicedAt(previous, next)
+        if (start !== NOT_SPLICED) {
+          const slots: string[] = []
+          for (let index = start; index < span; index++) slots.push(String(index))
+          return { keys: slots, exact: true }
+        }
+      }
       const changed: string[] = []
       for (let index = 0; index < span; index++) {
         if (Object.is($toRaw(previous[index]), $toRaw(next[index]))) continue
         changed.push(String(index))
         if (changed.length * 2 >= span) return GIVE_UP
       }
-      return changed
+      return { keys: changed, exact: false }
     }
     const keys = new Set([...Object.keys(previous), ...Object.keys(next)])
     if (!keys.size) return GIVE_UP
     const changed: string[] = []
     keys.forEach(key => { if (!Object.is($toRaw(previous[key]), $toRaw(next[key]))) changed.push(key) })
-    return changed.length * 2 >= keys.size ? GIVE_UP : changed
+    return changed.length * 2 >= keys.size ? GIVE_UP : { keys: changed, exact: false }
   }
 
   // A container replaced by another container: notify the elements that
@@ -496,7 +581,9 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
   // TODOS/2026-08-23.notify-the-difference.md
   //
   // One level deep on purpose: an element that differs is a changed value, and
-  // notifying it sweeps its own subtree, which is what a changed value deserves
+  // notifying it sweeps its own subtree, which is what a changed value deserves.
+  // A spliced element is the exception - it did not change, it moved - and its
+  // slots are woken without that sweep (see splicedAt)
   const notifyReplaced = (dotKey: string, previous: any, next: any, notified: any) => {
     // one write, one wake: every path below contributes to a single set that
     // runs once at the end. Notifying them one at a time re-ran an effect that
@@ -508,14 +595,14 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
       node?.deep?.forEach(effect => matched.add(effect))
     }
 
-    const changed = whatChanged(previous, next)
+    const difference = whatChanged(previous, next)
     // when most of the container differs there is nothing to spare: `data = []`
     // and a wholesale replacement change every key, and reaching each one
     // through its own trie walk costs more than the single sweep it replaces.
     // whatChanged says so by giving up. The decision has to come before
     // anything is announced, or the plain notify would fire the container's
     // listeners a second time
-    if (!changed) return notify(dotKey, notified)
+    if (!difference) return notify(dotKey, notified)
 
     exactListeners.get(dotKey)?.forEach(listener => listener(notified, dotKey))
     // $onAny hears the container and nothing else, exactly as it did when this
@@ -527,12 +614,22 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
     // hears that - but nothing is swept on its account
     collectExact(dotKey)
 
-    changed.forEach(key => {
-      const after = $toRaw(next[key])
+    difference.keys.forEach(key => {
       const child = `${dotKey}.${key}`
-      const value = isWrappable(after) ? wrap(after, child) : after
-      exactListeners.get(child)?.forEach(listener => listener(value, child))
-      effectsFor(child).forEach(effect => matched.add(effect))
+      // the value is built only for a listener that asked for it: a splice
+      // announces every slot it shifted, and wrapping a thousand rows to hand
+      // them to nobody is exactly the kind of work this path exists to avoid
+      const listeners = exactListeners.get(child)
+      if (listeners) {
+        const after = $toRaw(next[key])
+        const value = isWrappable(after) ? wrap(after, child) : after
+        listeners.forEach(listener => listener(value, child))
+      }
+      // a shifted slot has a new occupant and nothing under it changed - the
+      // rows themselves are untouched - so whoever read the slot is the whole
+      // audience, and the bindings below it are not woken
+      if (difference.exact) collectExact(child)
+      else effectsFor(child).forEach(effect => matched.add(effect))
     })
     if (keyCount(previous) !== keyCount(next)) collectExact(keysPath(dotKey))
     // an array's length is a real dep (a `:each` reads it on its way through
@@ -835,23 +932,57 @@ export type EffectScope = {
 // `deep` marks every effect this scope creates as forwarding a value wholesale
 // rather than reading into it - the prop-sync scope, and nothing else so far.
 // See the `deep` flag on $effect
-export const createEffectScope = (scope: Record<string, any>, deep = false): EffectScope => {
-  const disposers: Unsubscribe[] = []
-  const runs: (() => void)[] = []
-  // whatever the scope was handed (slot content is the only thing that sets
-  // it today): the stores this scope's effects belong to besides their own.
-  // Left undefined when there are none, which is $effect's fast path
-  const alsoWakenBy: Record<string, any>[] | undefined = (scope as any)[ALSO_WAKEN_BY]
-  return {
-    effect: run => {
-      disposers.push(scope.$effect(run, { deep, alsoWakenBy }))
-      runs.push(run)
-    },
-    onDispose: fn => { disposers.push(fn) },
-    refresh: () => { runs.forEach(run => run()) },
-    dispose: () => {
-      disposers.splice(0).forEach(dispose => dispose())
-      runs.length = 0
-    },
+//
+// A class rather than an object of closures, and its arrays built on demand,
+// because a :each makes one of these *per row*: the closure form allocated the
+// two arrays and four closures for every one of them, and a 10,000-row table
+// is 70,000 objects that exist to hold, on the common path, three disposers.
+// The prototype's methods are shared, and a row that registers nothing (a
+// static template) now allocates one object and no arrays at all.
+// See TODOS/2026-08-23.where-the-create-time-goes.md
+//
+// Prototype methods need their receiver: a caller that hands one on as a bare
+// function (`runSetupScript(..., fx.effect, ...)` did) must wrap it instead
+// (`run => fx.effect(run)`). Both such call sites are in renderComponent
+class Scope implements EffectScope {
+  // built on first use: `runs` in particular is only ever read by refresh(),
+  // which only a :each whose template names a position ever calls
+  private disposers: Unsubscribe[] | null = null
+  private runs: (() => void)[] | null = null
+  // one options object for the whole scope instead of one per effect - $effect
+  // destructures it on entry and keeps nothing. Left undefined on the common
+  // path, which is $effect's own fast path
+  private options: EffectOptions | undefined
+
+  constructor(private scope: Record<string, any>, deep: boolean) {
+    // whatever the scope was handed (slot content is the only thing that sets
+    // it today): the stores this scope's effects belong to besides their own
+    const alsoWakenBy: Record<string, any>[] | undefined = (scope as any)[ALSO_WAKEN_BY]
+    this.options = deep || alsoWakenBy ? { deep, alsoWakenBy } : undefined
+  }
+
+  effect(run: () => void) {
+    ;(this.disposers ??= []).push(this.scope.$effect(run, this.options))
+    ;(this.runs ??= []).push(run)
+  }
+
+  onDispose(fn: Unsubscribe) {
+    ;(this.disposers ??= []).push(fn)
+  }
+
+  refresh() {
+    this.runs?.forEach(run => run())
+  }
+
+  dispose() {
+    // detached before draining, not copied out of the way with splice(0): a
+    // disposer that registers another one is as lost either way, and the copy
+    // was an array per row on the teardown path
+    const disposers = this.disposers
+    this.disposers = null
+    this.runs = null
+    if (disposers) for (let i = 0; i < disposers.length; i++) disposers[i]()
   }
 }
+
+export const createEffectScope = (scope: Record<string, any>, deep = false): EffectScope => new Scope(scope, deep)