jq79 0.5.14 → 0.6.1

package/dist/reactive.d.ts

@@ -4,10 +4,14 @@ type ListenerOptions = {
     immediate?: boolean;
 };
 type Unsubscribe = () => void;
+export type EffectOptions = {
+    deep?: boolean;
+    alsoWakenBy?: Record<string, any>[];
+};
 export type ReactiveDeepData<T> = T & {
     $on: (dotKey: string, listener: ChangeListener, options?: ListenerOptions) => Unsubscribe;
     $onAny: (listener: AnyChangeListener, options?: ListenerOptions) => Unsubscribe;
-    $effect: (run: () => void, alsoWakenBy?: Record<string, any>[]) => Unsubscribe;
+    $effect: (run: () => void, options?: EffectOptions) => Unsubscribe;
     $dispose: () => void;
 };
 export declare const $toRaw: <T>(value: T) => T;
@@ -20,5 +24,5 @@ export type EffectScope = {
     refresh: () => void;
     dispose: () => void;
 };
-export declare const createEffectScope: (scope: Record<string, any>) => EffectScope;
+export declare const createEffectScope: (scope: Record<string, any>, deep?: boolean) => EffectScope;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jq79",
-  "version": "0.5.14",
+  "version": "0.6.1",
   "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. Single-file build, zero dependencies.",
   "keywords": [
     "reactive",

package/src/jq79.ts

@@ -373,6 +373,43 @@ const removeRange = ({ first, last }: NodeRange) => {
   }
 }
 
+// removes several ranges that sit next to each other, in one DOM call each run
+// rather than one per node. A list dropping all its rows hands them over as a
+// 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[][]) => {
+  runs.forEach(run => {
+    if (run.length === 1) return removeRange(run[0])
+    const parent = run[0].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.deleteContents()
+  })
+}
+
+// groups the entries `isDead` selects into runs of DOM neighbours, walking
+// `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
+  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]))
+  })
+  return runs
+}
+
 // moves [first..last] inclusive so the range starts right after `prev`
 const moveRangeAfter = ({ first, last }: NodeRange, prev: Node) => {
   const ref = prev.nextSibling
@@ -388,9 +425,69 @@ const moveRangeAfter = ({ first, last }: NodeRange, prev: Node) => {
 // case-insensitive with dashes stripped (<nested-component> works too). Only
 // PascalCase scope keys participate, so ordinary variables named like real
 // elements (title, code, ...) never hijack them
+const scanComponentKey = (scope: Record<string, any>, tag: string): string | null => {
+  const normalized = tag.replace(/-/g, "").toLowerCase()
+  for (let obj: any = scope; obj && obj !== Object.prototype; obj = Object.getPrototypeOf(obj)) {
+    for (const key of Object.keys(obj)) {
+      if (/^[A-Z]/.test(key) && key.replace(/-/g, "").toLowerCase() === normalized) return key
+    }
+  }
+  return null
+}
+
+// The scan above is run for every element rendered, and it walks the whole
+// scope chain calling Object.keys at each level - which profiling puts at 13.7%
+// of the create path, four times the next attributable frame, almost all of it
+// answering "no" for tags like <td>. Within one render pass the answer can't
+// change: it is a *key*, not the value behind it, so every row of a :each
+// resolves a tag identically, and a store write mid-pass restarts the pass
+// rather than continuing it (the reentrancy guard in reactive.ts).
+//
+// So it is memoized for exactly one pass and no longer. It has to be no longer:
+// a template renders before its setup script settles, so `const Row = await
+// $import(...)` arrives as a new store key *after* elements are on the page -
+// and a cached "no component called Row" that outlived the pass would never be
+// revisited. See TODOS/2026-08-23.component-key-scan.md
+// The memo answers for one *base* scope - the one the pass was opened with -
+// and nothing below it. A lookup walks from wherever it starts up to that base,
+// checking own keys as it goes (an :each item scope has two or three, a :with
+// a handful), and only then consults the memo. So a name introduced under the
+// base still shadows correctly, and a scope that never reaches the base at all
+// - a nested component renders against its own store - has simply been fully
+// scanned by the time the walk ends, which is the answer anyway
+let tagMemo: Map<string, string | null> | null = null
+let memoBase: object | null = null
+
+// opened and closed by hand rather than by a wrapper taking a callback: a
+// component that renders itself through :each stacks one renderEach per level,
+// and a callback would add a frame to each of them. The cyclic-component test
+// cuts off at 200 levels, and on a CI runner that extra frame per level was the
+// difference between cutting off and a RangeError - the same reason $effect
+// keeps its own shape (see reactive.ts)
+type RenderPass = { memo: Map<string, string | null> | null; base: object | null }
+
+const openRenderPass = (base: Record<string, any>): RenderPass => {
+  const outer: RenderPass = { memo: tagMemo, base: memoBase }
+  tagMemo = new Map()
+  memoBase = base
+  return outer
+}
+
+const closeRenderPass = (outer: RenderPass) => {
+  tagMemo = outer.memo
+  memoBase = outer.base
+}
+
 const findComponentKey = (scope: Record<string, any>, tag: string): string | null => {
+  if (!tagMemo) return scanComponentKey(scope, tag)
   const normalized = tag.replace(/-/g, "").toLowerCase()
   for (let obj: any = scope; obj && obj !== Object.prototype; obj = Object.getPrototypeOf(obj)) {
+    if (obj === memoBase) {
+      if (tagMemo.has(tag)) return tagMemo.get(tag)!
+      const key = scanComponentKey(obj, tag)
+      tagMemo.set(tag, key)
+      return key
+    }
     for (const key of Object.keys(obj)) {
       if (/^[A-Z]/.test(key) && key.replace(/-/g, "").toLowerCase() === normalized) return key
     }
@@ -902,7 +999,11 @@ const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<st
     }
     endAnchor.parentNode!.insertBefore(holder, endAnchor)
 
-    const syncFx = createEffectScope(scope)
+    // deep: a prop sync forwards whatever the expression evaluates to, whole,
+    // into the child's store - it reads `user`, never `user.name`, so it can't
+    // track what it passes on. A parent's deep mutation reaches the child
+    // through this effect or not at all (see $effect's `deep`)
+    const syncFx = createEffectScope(scope, true)
     // without a spread the prop set is fixed and known: one effect per prop, so
     // a change to one prop re-syncs only that prop. A spread's key set is
     // dynamic and its precedence is positional, so it can't be resolved a key at
@@ -1217,9 +1318,9 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
     // for them. They render (bindings and all) and go there - appended as
     // childNodes they would be in the DOM but in no document fragment, seen by
     // nothing and rendered by nobody
-    el.content.appendChild(renderNodes(node.children, scope, fx, shadow))
+    renderNodes(node.children, scope, fx, shadow, el.content)
   } else {
-    el.appendChild(renderNodes(node.children, scope, fx, shadow))
+    renderNodes(node.children, scope, fx, shadow, el)
   }
 
   // :value / :checked / :selected write the DOM *property*, not the
@@ -1288,12 +1389,59 @@ const renderConditional = (branches: ConditionalBranch[], scope: Record<string,
 // reactive proxy's `set` trap: it would wrap `value` as if it were a genuine
 // store mutation and fire a bogus notify() under a name (e.g. "item") shared
 // by every unrelated item in every :each on the page. defineProperty always
-// writes to `scope` itself, never delegating, so this can't happen
+// writes to `scope` itself, never delegating, so this can't happen.
+//
+// Only while the key is *missing*, though: once this has run, the property is
+// own and writable, and a plain assignment finds it there and writes it in
+// place. That is what renderEach's reuse paths do, and why they may - a
+// defineProperty costs several times an assignment, and a list that never
+// reorders would otherwise pay one per row per pass to rewrite the value it
+// already held
 const defineScopeVar = (scope: Record<string, any>, key: string, value: any) => {
   Object.defineProperty(scope, key, { value, writable: true, enumerable: true, configurable: true })
 }
 
-type EachEntry = { key: any; item: any; scope: Record<string, any>; range: NodeRange; fx: EffectScope }
+// `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 }
+
+// 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
+// (-1 for one rendered this pass), it names the rows that are ALREADY in the
+// right order relative to each other: move everything else and the pass issues
+// the fewest insertions it can. The walk this serves used to demand only that
+// each entry follow the one before it, which is minimal for an append and
+// quadratic for a reorder - one row out of place cascaded into a move for
+// every row after it, so swapping rows 1 and 998 of a 1,000-row table issued
+// 997 insertBefore calls where two would do.
+// Patience sorting, O(n log n): `tails[l]` is the index of the smallest value
+// that can end an increasing run of length l+1, and `before` remembers what
+// each index was appended to, which is what makes the run reconstructible
+const longestIncreasingRun = (positions: number[]): Uint8Array => {
+  const inRun = new Uint8Array(positions.length)
+  const tails: number[] = []
+  const before = new Int32Array(positions.length).fill(-1)
+
+  for (let index = 0; index < positions.length; index++) {
+    const position = positions[index]
+    if (position < 0) continue // rendered this pass: it has no old position to be in order with
+    let low = 0
+    let high = tails.length
+    while (low < high) {
+      const mid = (low + high) >> 1
+      if (positions[tails[mid]] < position) low = mid + 1
+      else high = mid
+    }
+    if (low > 0) before[index] = tails[low - 1]
+    tails[low] = index
+  }
+
+  for (let index = tails.length ? tails[tails.length - 1] : -1; index !== -1; index = before[index]) {
+    inRun[index] = 1
+  }
+  return inRun
+}
 
 // what :each iterates besides arrays: dictionaries, as their entries. Class
 // instances, Maps and the rest stay out - the store doesn't wrap them
@@ -1314,15 +1462,76 @@ const isPlainObject = (value: any): value is Record<string, any> => {
 // property key, which is already the stable identity. Each item gets its own
 // scope via Object.create(scope), so the bindings and `$index` shadow
 // same-named outer names without copying the parent scope's keys
+// does anything in this subtree name one of `names` as an identifier? Attribute
+// values and text alike, since either can hold an expression - a prop handing a
+// position to a nested component (`<Row :n="$index">`) is an attribute on a node
+// inside the item, which is why the walk has to cover children's attrs too.
+//
+// Over-approximating is the safe direction and the intended one: a name that
+// appears in a string literal costs a refresh that wasn't needed, which is
+// exactly what happens today for every list. Missing one would leave a binding
+// stale, and the walk cannot - a template expression is source text
+const mentionsAny = (node: TemplateNode | string, names: string[]): boolean => {
+  if (typeof node === "string") return names.some(name => identifierIn(node, name))
+  return Object.values(node.attrs).some(value => names.some(name => identifierIn(value, name))) ||
+    node.children.some(child => mentionsAny(child, names))
+}
+
+// `name` as a whole word: `$index` must not match inside `$indexes`, and `i`
+// must not match inside `items`. `$` counts as a word character here, which is
+// why the boundaries are checked by hand rather than with \b - \b treats `$`
+// as a boundary and would find the `i` of `$index` when looking for `i`
+const IDENTIFIER_CHAR = /[A-Za-z0-9_$]/
+
+// `a.b` and nothing else: two plain identifiers, one dot. A deeper path could
+// walk a null halfway down, which is a diagnostic evalExpr owns
+const KEY_MEMBER = /^[A-Za-z_$][\w$]*\.[A-Za-z_$][\w$]*$/
+
+const identifierIn = (text: string, name: string): boolean => {
+  for (let at = text.indexOf(name); at !== -1; at = text.indexOf(name, at + 1)) {
+    const before = at === 0 ? "" : text[at - 1]
+    const after = text[at + name.length] ?? ""
+    if (!IDENTIFIER_CHAR.test(before) && !IDENTIFIER_CHAR.test(after)) return true
+  }
+  return false
+}
+
 const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
   const match = node.attrs[":each"].match(EACH_PATTERN)
   if (!match) return document.createComment(`invalid :each expression "${node.attrs[":each"]}"`)
 
   const [, itemName, atName, listExpr] = match
   const keyExpr = node.attrs[":key"]
+
+  // `:key="row.id"`, or the loop variable itself, is what a key almost always
+  // is - and reading one needs neither a scope to resolve names against nor a
+  // compiled expression, because the item is already in hand. A pass evaluates
+  // one key per row, so a 1,000-row list paid 1,000 `with`-scoped calls through
+  // the store proxy to discover that nothing had changed: most of the 37% of a
+  // pass that goes on evaluating expressions
+  // (TODOS/2026-08-23.where-the-list-operations-go.md). Anything else - a call,
+  // an index, a deeper path, a name from the outer scope - still goes through
+  // evalExpr, and so does a non-object item, which keeps every diagnostic a
+  // property read of a null row would have raised
+  const keyIsItem = keyExpr === itemName
+  const keyProp = keyExpr !== undefined && !keyIsItem && KEY_MEMBER.test(keyExpr) && keyExpr.startsWith(`${itemName}.`)
+    ? keyExpr.slice(itemName.length + 1)
+    : undefined
   const { [":each"]: _each, [":key"]: _key, ...itemAttrs } = node.attrs
   const itemNode: TemplateNode = { ...node, attrs: itemAttrs }
 
+  // An entry that changed position needs its position-only bindings re-run -
+  // `$index` and the `, at` name are plain scope vars, untracked by design, so
+  // nothing can wake them (see EffectScope.refresh). But refresh re-runs *every*
+  // effect on the entry, and in a list whose template names no position at all
+  // - the common one - all of that recomputes strings that cannot have changed:
+  // it was 9ms of removeRow's 25ms. Decided once, from the template, rather
+  // than per row per render. The item name is deliberately not in this list:
+  // nearly every binding reads it, and it is not what goes stale.
+  // See TODOS/2026-08-23.positional-refresh.md
+  const positionalNames = ["$index", ...(atName ? [atName] : [])]
+  const readsPosition = mentionsAny(itemNode, positionalNames)
+
   const anchor = document.createComment("each")
   const wrapper = document.createDocumentFragment()
   wrapper.appendChild(anchor)
@@ -1336,79 +1545,146 @@ const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectSc
   let entries: EachEntry[] = []
   let warnedDuplicates = false
 
+  // one memo for the whole diff: every row resolves its tags to the same scope
+  // keys, so the scan that used to run per element per row now runs once per
+  // distinct tag (see findComponentKey)
   fx.effect(() => {
-    const list = evalExpr(listExpr, scope)
-    // both sources normalize to [at, item] pairs: the index for an array, the
-    // property key for a plain object (insertion order). Object entries are
-    // read off the store proxy, so each value is tracked under its own key -
-    // adds, deletes and changes all wake this effect
-    const pairs: [any, any][] = Array.isArray(list)
-      ? list.map((item, index): [any, any] => [index, item])
-      : isPlainObject(list) ? Object.entries(list) : []
-    // buckets rather than a key->entry map: duplicate keys (a user error, but
-    // one that must degrade instead of corrupt) consume entries in order of
-    // appearance, so no entry is ever matched twice - matching one twice is
-    // how a reused row got disposed and a removed one resurrected
-    const previous = new Map<any, EachEntry[]>()
-    entries.forEach(entry => {
-      const bucket = previous.get(entry.key)
-      if (bucket) bucket.push(entry)
-      else previous.set(entry.key, [entry])
-    })
+    const pass = openRenderPass(scope)
+    try {
+      const list = evalExpr(listExpr, scope)
+      // read the source in place rather than normalizing it to [at, item] pairs
+      // first: a list of 1,000 rows built 1,000 two-element arrays per pass,
+      // every one of them garbage by the end of it. `keys` carries a plain
+      // object's property list (insertion order, which is also its identity)
+      // and is null for an array, where the index is the key. Either way the
+      // items are read off the store proxy one at a time, so each stays tracked
+      // under its own key - adds, deletes and changes all wake this effect
+      const array = Array.isArray(list)
+      const keys: string[] | null = array ? null : isPlainObject(list) ? Object.keys(list) : []
+      const length = array ? list.length : keys!.length
+      // buckets rather than a key->entry map: duplicate keys (a user error, but
+      // one that must degrade instead of corrupt) consume entries in order of
+      // appearance, so no entry is ever matched twice - matching one twice is
+      // how a reused row got disposed and a removed one resurrected
+      const previous = new Map<any, EachEntry[]>()
+      entries.forEach((entry, index) => {
+        entry.pos = index
+        const bucket = previous.get(entry.key)
+        if (bucket) bucket.push(entry)
+        else previous.set(entry.key, [entry])
+      })
 
-    const seen = new Set<any>()
-    const moved: EachEntry[] = []
-    const nextEntries = pairs.map(([at, item], index): EachEntry => {
-      const itemScope = Object.create(scope)
-      defineScopeVar(itemScope, itemName, item)
-      if (atName) defineScopeVar(itemScope, atName, at)
-      defineScopeVar(itemScope, "$index", index)
-      const key = keyExpr !== undefined ? evalExpr(keyExpr, itemScope) : at
-      if (seen.has(key) && !warnedDuplicates) {
-        warnedDuplicates = true
-        console.warn(`jq79: duplicate :key in :each "${node.attrs[":each"]}"; duplicates pair up by position`)
-      }
-      seen.add(key)
-      const existing = previous.get(key)?.shift()
-
-      if (existing && Object.is(existing.item, item)) {
-        if (existing.scope.$index !== index) moved.push(existing)
-        defineScopeVar(existing.scope, "$index", index)
-        if (atName) defineScopeVar(existing.scope, atName, at)
-        return existing
-      }
+      const seen = new Set<any>()
+      const moved: EachEntry[] = []
+      const nextEntries: EachEntry[] = []
+      // each entry's position in the previous pass, in the new order, for the
+      // positioning walk below - -1 for one rendered here, which has none
+      const positions: number[] = []
+      // one scratch scope for the whole pass, not one per item. A :key
+      // expression reads the item by name (`row.id`), so it needs a scope to
+      // read it from - but which entry that key names, and so whether anything
+      // has to be rendered at all, is only known once it has been evaluated.
+      // Building the entry's real scope up front meant every reused row - the
+      // common case, and nearly all of removeRow, selectRow and swapRows - paid
+      // for an object and three defineProperty calls that were then dropped on
+      // the floor. Nothing outlives the evaluation, which is synchronous, so one
+      // scratch serves the whole list; a row that really is rendered gets a
+      // scope of its own, below
+      let scratch: Record<string, any> | undefined
+
+      for (let index = 0; index < length; index++) {
+        const at = array ? index : keys![index]
+        const item = array ? list[index] : list[at]
+
+        let key: any = at
+        if (keyIsItem) key = item
+        else if (keyProp !== undefined && item !== null && typeof item === "object") key = item[keyProp]
+        else if (keyExpr !== undefined) {
+          if (scratch === undefined) {
+            scratch = Object.create(scope) as Record<string, any>
+            defineScopeVar(scratch, itemName, item)
+            if (atName) defineScopeVar(scratch, atName, at)
+            defineScopeVar(scratch, "$index", index)
+          } else {
+            // own and writable already, so a plain assignment writes to
+            // `scratch` itself - the delegation defineScopeVar exists to
+            // prevent can only happen while the key is missing from it
+            scratch[itemName] = item
+            if (atName) scratch[atName] = at
+            scratch.$index = index
+          }
+          key = evalExpr(keyExpr, scratch)
+        }
 
-      if (existing) {
-        existing.fx.dispose()
-        removeRange(existing.range)
-      }
+        if (seen.has(key) && !warnedDuplicates) {
+          warnedDuplicates = true
+          console.warn(`jq79: duplicate :key in :each "${node.attrs[":each"]}"; duplicates pair up by position`)
+        }
+        seen.add(key)
+        const existing = previous.get(key)?.shift()
+
+        if (existing && Object.is(existing.item, item)) {
+          // same reason as `scratch`: these are own writable properties of the
+          // entry's scope from the moment it was rendered, and writing only
+          // what moved keeps a list that never reorders from paying anything
+          const entryScope = existing.scope
+          if (entryScope.$index !== index) {
+            if (readsPosition) moved.push(existing)
+            entryScope.$index = index
+          }
+          if (atName && entryScope[atName] !== at) entryScope[atName] = at
+          nextEntries.push(existing)
+          positions.push(existing.pos)
+          continue
+        }
 
-      const itemFx = createEffectScope(scope)
-      // bounds captured before the positioning pass inserts the entry: a
-      // component entry is a fragment, which empties on insertion (see boundsOf)
-      const range = boundsOf(renderNode(itemNode, itemScope, itemFx, shadow))
-      return { key, item, scope: itemScope, fx: itemFx, range }
-    })
+        if (existing) {
+          existing.fx.dispose()
+          removeRange(existing.range)
+        }
 
-    // whatever no new item consumed is gone
-    previous.forEach(bucket => bucket.forEach(entry => {
-      entry.fx.dispose()
-      removeRange(entry.range)
-    }))
+        const itemScope = Object.create(scope)
+        defineScopeVar(itemScope, itemName, item)
+        if (atName) defineScopeVar(itemScope, atName, at)
+        defineScopeVar(itemScope, "$index", index)
+        const itemFx = createEffectScope(scope)
+        // bounds captured before the positioning pass inserts the entry: a
+        // component entry is a fragment, which empties on insertion (see boundsOf)
+        const range = boundsOf(renderNode(itemNode, itemScope, itemFx, shadow))
+        nextEntries.push({ key, item, scope: itemScope, fx: itemFx, range, pos: index })
+        positions.push(-1)
+      }
 
-    let prevNode: Node = anchor
-    nextEntries.forEach(entry => {
-      if (prevNode.nextSibling !== entry.range.first) moveRangeAfter(entry.range, prevNode)
-      prevNode = entry.range.last
-    })
+      // whatever no new item consumed is gone. Effects are torn down one by one
+      // as always; the DOM goes in runs of neighbours, which is what makes
+      // clearing a long list one mutation instead of one per row
+      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)))
+      }
+
+      let prevNode: Node = anchor
+      // rows already in order relative to each other stay where they are; the
+      // rest are placed after the row that precedes them in the new order,
+      // which is where the pass has just left `prevNode`
+      const inPlace = longestIncreasingRun(positions)
+      nextEntries.forEach((entry, index) => {
+        if (!inPlace[index] && prevNode.nextSibling !== entry.range.first) moveRangeAfter(entry.range, prevNode)
+        prevNode = entry.range.last
+      })
 
-    // reused entries that changed position: their tracked bindings re-run off
-    // the list notification anyway, but a binding that reads only `$index` or
-    // the named key tracked nothing - refresh them so the move reaches those
-    // too. Untracked, so these runs don't feed this list effect's own deps
-    moved.forEach(entry => untracked(() => entry.fx.refresh()))
+      // reused entries that changed position: their tracked bindings re-run off
+      // the list notification anyway, but a binding that reads only `$index` or
+      // the named key tracked nothing - refresh them so the move reaches those
+      // too. Untracked, so these runs don't feed this list effect's own deps
+      moved.forEach(entry => untracked(() => entry.fx.refresh()))
 
-    entries = nextEntries
+      entries = nextEntries
+    } finally {
+      closeRenderPass(pass)
+    }
   })
 
   return wrapper
@@ -1416,8 +1692,21 @@ const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectSc
 
 // renders a list of sibling template nodes (text + elements), grouping
 // consecutive :if/:elseif/:else nodes into a single conditional block
-const renderNodes = (nodes: (TemplateNode | string)[], scope: Record<string, any>, fx: EffectScope, shadow = false): DocumentFragment => {
-  const fragment = document.createDocumentFragment()
+// `into` renders straight into an element that is not in the document yet -
+// what renderElement does for an element's own children. Every element used to
+// get a DocumentFragment of its own, filled and then emptied into it: for a
+// 10,000-row table that is 70,000 fragments and a second pass over every node,
+// and the intermediate is invisible either way because the element is still
+// detached. Callers that need a standalone chunk (a component's content, an
+// :if branch) omit it and get the fragment
+const renderNodes = <T extends ParentNode>(
+  nodes: (TemplateNode | string)[],
+  scope: Record<string, any>,
+  fx: EffectScope,
+  shadow = false,
+  into?: T
+): T | DocumentFragment => {
+  const fragment = into ?? document.createDocumentFragment()
   let i = 0
 
   while (i < nodes.length) {