@miliastry/quasar 1.0.6 → 1.2.0

package/src/Visitors/BlockPatcher.ts

@@ -41,7 +41,7 @@
 
 import { RedNode } from '../Syntax/RedNode'
 import { HTMLRenderer } from './HTMLRenderer'
-import { morphHTML } from './DOMMorpher'
+import { morphHTML, morphElement } from './DOMMorpher'
 import type { TextChangeRange } from '../Incremental/ChangeTracker'
 
 export interface PatchBlocksOptions {
@@ -67,6 +67,8 @@ export interface PatchBlocksOptions {
    * path on small documents.
    */
   minWindowedBlocks?: number
+  /** If true, forces a full rebuild of the container instead of incremental patching. */
+  forceRebuild?: boolean
 }
 
 export interface PatchBlocksStats {
@@ -143,6 +145,53 @@ interface PatchCache {
 
 const caches = new WeakMap<HTMLElement, PatchCache>()
 
+/**
+ * ¿Está encendido el volcado verboso? (`globalThis.__BP_DEBUG__ = true`)
+ *
+ * Imprime por consola el detalle de la reconciliación por ventana. Es caro:
+ * sirve para leer un caso a mano, NO para medir con él encendido.
+ */
+function BP_DEBUG(): boolean {
+  return (globalThis as { __BP_DEBUG__?: boolean }).__BP_DEBUG__ === true
+}
+
+/**
+ * Deja constancia de POR QUÉ `patchBlocksInto` tomó el camino que tomó, en
+ * `globalThis.__BP_LAST__` (`globalThis.__BP_TRACE__ = true` para encenderlo).
+ *
+ * Va aparte del volcado verboso a propósito: esta traza es UNA asignación por
+ * parcheo, así que se puede dejar encendida MIENTRAS SE MIDE sin falsear la
+ * medida, que es justo cuando hace falta.
+ *
+ * Existe porque "¿por qué esto no usó el camino incremental?" es cara de
+ * contestar desde fuera: el bundle está minificado, `patchBlocksInto` devuelve
+ * `mode` pero no el motivo, y quien lo llama (el preview) tira las
+ * estadísticas. Diagnosticar la caída a `fullRebuild` por tecla en el
+ * documento de 547 KB costó desminificar a mano una función dentro de una
+ * línea de 75.000 caracteres; con esto se lee `__BP_LAST__` y ya está.
+ *
+ * Coste apagada: una comparación de identidad por parcheo.
+ */
+function bpTrace(reason: Record<string, unknown>): void {
+  if ((globalThis as { __BP_TRACE__?: boolean }).__BP_TRACE__ === true) {
+    ;(globalThis as { __BP_LAST__?: unknown }).__BP_LAST__ = reason
+  }
+}
+
+/**
+ * Evict `container` from the patch cache so the next patch rebuilds afresh.
+ */
+export function clearPatchCache(container: HTMLElement): void {
+  // Contador de invalidaciones bajo la misma traza barata: "cuántas veces se
+  // tira la caché por pulsación" es la pregunta que destapó el fullRebuild por
+  // tecla, y no se puede contestar desde fuera del módulo.
+  if ((globalThis as { __BP_TRACE__?: boolean }).__BP_TRACE__ === true) {
+    const g = globalThis as { __BP_CLEARS__?: number }
+    g.__BP_CLEARS__ = (g.__BP_CLEARS__ ?? 0) + 1
+  }
+  caches.delete(container)
+}
+
 const defaultRenderer = new HTMLRenderer()
 
 function getCache(container: HTMLElement): PatchCache {
@@ -166,6 +215,21 @@ function blockKey(node: RedNode, index: number): string {
   return node.id ?? `__block_${index}`
 }
 
+/**
+ * Blocks whose HTML is NOT a function of the node alone.
+ *
+ * A newline leaf renders `<br>` or nothing depending on which tags surround
+ * it — `[/box]\n` loses the newline, `text\n` keeps it (see
+ * `HTMLRenderer.isNewlineSwallowed`). The block cache is keyed by node
+ * identity, so reordering blocks without touching them keeps every id and
+ * every cached fragment while changing what the newlines between them mean.
+ * Re-rendering them unconditionally costs a couple of sibling hops and keeps
+ * the patched DOM equal to a full render, which is the whole contract.
+ */
+function isContextSensitive(node: RedNode): boolean {
+  return node.kind === 'spacing' || node.kind === 'empty_line'
+}
+
 /** Build a DOM node from an HTML fragment (first child), decoding entities. */
 function nodeFromHtml(html: string): Node {
   const t = document.createElement('template')
@@ -230,7 +294,6 @@ function shouldMorphInPlace(
   return (
     run.kind === 'element' &&
     !!run.node.id &&
-    run.node.children.length > 0 &&
     canMorphInPlace(run.node) &&
     renderedTag(run.html) === element.tagName
   )
@@ -352,7 +415,7 @@ function reconcileKeyed(
   let patched = 0
   try {
     runs = buildRuns(blocks, keys, (node, key) => {
-      if (cache.lastNode.get(key) === node) {
+      if (cache.lastNode.get(key) === node && !isContextSensitive(node)) {
         return { html: cache.lastHtml.get(key) ?? '', kind: cache.lastClass.get(key) ?? 'none' }
       }
       const html = renderer.render(node)
@@ -420,13 +483,19 @@ function reconcileKeyed(
       }
 
       if (element.nodeType === 1 && shouldMorphInPlace(element as Element, run)) {
-        // Element with children and a matching tag: morph its inner content in
-        // place, preserving the element (and runtime state like an open
-        // `<details>`). Tag mismatch (kind change at a stable slot) or wrapper
-        // kinds (code/svg/imagemap) go the replace path below.
-        morphHTML(element as HTMLElement, renderer.renderChildren(run.node))
+        // Element with a matching tag: morph its attributes and children in
+        // place via morphElement, preserving the element identity and runtime state
+        // (such as an open <details>, its <summary> and title, or media playback).
+        // Tag mismatch (kind change at a stable slot) or wrapper kinds
+        // (code/svg/imagemap) go the replace path below.
+        const newEl = nodeFromHtml(run.html)
+        if (newEl && newEl.nodeType === 1 && (newEl as Element).tagName === (element as Element).tagName) {
+          morphElement(element as Element, newEl as Element)
+        } else {
+          container.replaceChild(newEl, element)
+        }
       } else {
-        // Text run, an element leaf (img/video/audio/`<br>`), a kind whose tag
+        // Text run, an element leaf (img/video/audio/<br>), a kind whose tag
         // changed, or a wrapper renderer kind: the node's own structure must
         // change — replace outright.
         container.replaceChild(nodeFromHtml(run.html), element)
@@ -590,7 +659,7 @@ function reconcileWindowed(
   let runs: PatchRun[]
   try {
     runs = buildRuns(blocks, keys, (node, key) => {
-      if (cache.lastNode.get(key) === node) {
+      if (cache.lastNode.get(key) === node && !isContextSensitive(node)) {
         return { html: cache.lastHtml.get(key) ?? '', kind: cache.lastClass.get(key) ?? 'none' }
       }
       const html = renderer.render(node)
@@ -607,10 +676,15 @@ function reconcileWindowed(
 
   const oldRuns = cache.lastRuns
 
-  const DBG = (globalThis as { __BP_DEBUG__?: boolean }).__BP_DEBUG__ === true
+  const DBG = BP_DEBUG()
   const dbg = (...a: unknown[]): void => {
     if (DBG) console.log('[BP]', ...a)
   }
+  // OJO: `dbg(...)` evalúa sus argumentos ANTES de entrar, así que las
+  // llamadas que construyen algo —`.map()`, plantillas, `slice`— van dentro
+  // de un `if (DBG)`. Este es el camino de cada pulsación: los cuatro
+  // volcados de abajo recorrían la ventana entera y construían una cadena por
+  // ejecución, con la depuración apagada, para tirarlo todo.
 
 
   // ── Old window (OLD coordinates). ──────────────────────────────────────
@@ -749,14 +823,22 @@ function reconcileWindowed(
   const oldWinRunsFinal = oldRuns.slice(oldWinFrom2, oldWinTo)
   const newWinRunsFinal = newWinRuns
 
-  dbg('change', { start: change.start, end: change.end, endOld: change.endOld })
-  dbg('oldWin', oldWinFrom2, oldWinTo, 'keys', oldWinRunsFinal.map((r) => `${r.key}:${r.node.kind}`).slice(0, 40))
-  dbg('newWin', fromNew, toNew, 'keys', newWinRunsFinal.map((r) => `${r.key}:${r.node.kind}`).slice(0, 40))
-  dbg('newWinKeySet', [...newWinRunsFinal.map((r) => r.key).slice(0, 40)])
+  if (DBG) {
+    dbg('change', { start: change.start, end: change.end, endOld: change.endOld })
+    dbg('oldWin', oldWinFrom2, oldWinTo, 'keys', oldWinRunsFinal.map((r) => `${r.key}:${r.node.kind}`).slice(0, 40))
+    dbg('newWin', fromNew, toNew, 'keys', newWinRunsFinal.map((r) => `${r.key}:${r.node.kind}`).slice(0, 40))
+    dbg('newWinKeySet', [...newWinRunsFinal.map((r) => r.key).slice(0, 40)])
+  }
 
   // DOM anchor at the window start, and the window's old nodes.
-  let anchorNode: Node | null = container.firstChild
-  for (let k = 0; k < oldWinFrom2; k++) anchorNode = anchorNode?.nextSibling ?? null
+  // Indexed, not walked. `childNodes` is a live NodeList with indexed access,
+  // so asking for the window's first node is one lookup; stepping to it one
+  // `nextSibling` at a time was O(blocks before the edit) and, on a document
+  // of 30.000 top-level blocks, the single largest term left in this
+  // function's bookkeeping — 11 ms per keystroke, more than the reconcile it
+  // was preparing for. The two are exactly equivalent: the k-th child is the
+  // k-th child.
+  const anchorNode: Node | null = container.childNodes[oldWinFrom2] ?? null
   const oldWinNodes: Node[] = []
   let node: Node | null = anchorNode
   for (let i = oldWinFrom2; i < oldWinTo; i++) {
@@ -800,7 +882,7 @@ function reconcileWindowed(
       const k = oldWinRunsFinal[i].key
       if (newKeySet.has(k) || newByNode.has(oldWinRunsFinal[i].node)) continue
       const el = oldWinNodes[i]
-      dbg('orphan?', k, oldWinRunsFinal[i].node.kind, 'el=', el ? (el.nodeType === 1 ? (el as Element).tagName : `text:'${String((el as Text).data ?? '').slice(0, 20)}'`) : 'null')
+      if (DBG) dbg('orphan?', k, oldWinRunsFinal[i].node.kind, 'el=', el ? (el.nodeType === 1 ? (el as Element).tagName : `text:'${String((el as Text).data ?? '').slice(0, 20)}'`) : 'null')
       if (el && !removed.has(el)) {
         removed.add(el)
         container.removeChild(el)
@@ -828,7 +910,7 @@ function reconcileWindowed(
       const prev = oldRunByKey.get(run.key) ?? oldRunByNode.get(run.node)
       const element = oldByKey.get(run.key) ?? oldByNode.get(run.node)
 
-      dbg('WALK', run.key, run.node.kind, 'element=', element ? (element.nodeType === 1 ? (element as Element).tagName : 'text') : 'NEW', 'cursor=', cursor ? (cursor.nodeType === 1 ? (cursor as Element).tagName : 'text') : 'null')
+      if (DBG) dbg('WALK', run.key, run.node.kind, 'element=', element ? (element.nodeType === 1 ? (element as Element).tagName : 'text') : 'NEW', 'cursor=', cursor ? (cursor.nodeType === 1 ? (cursor as Element).tagName : 'text') : 'null')
 
       if (!element) {
         container.insertBefore(nodeFromHtml(run.html), cursor)
@@ -847,7 +929,12 @@ function reconcileWindowed(
       }
 
       if (element.nodeType === 1 && shouldMorphInPlace(element as Element, run)) {
-        morphHTML(element as HTMLElement, renderer.renderChildren(run.node))
+        const newEl = nodeFromHtml(run.html)
+        if (newEl && newEl.nodeType === 1 && (newEl as Element).tagName === (element as Element).tagName) {
+          morphElement(element as Element, newEl as Element)
+        } else {
+          container.replaceChild(newEl, element)
+        }
       } else {
         container.replaceChild(nodeFromHtml(run.html), element)
       }
@@ -858,7 +945,7 @@ function reconcileWindowed(
     // the first suffix node. Leftovers of runs that rendered to a different
     // node count sit between the walk's end and the suffix — drop them.
     let tail = cursor
-    dbg('tail-safety: cursor=', cursor ? (cursor.nodeType === 1 ? (cursor as Element).tagName : `text:'${String((cursor as Text).data ?? '').slice(0, 15)}'`) : 'null', 'afterWindow=', afterWindow ? (afterWindow.nodeType === 1 ? (afterWindow as Element).tagName : `text:'${String((afterWindow as Text).data ?? '').slice(0, 15)}'`) : 'null')
+    if (DBG) dbg('tail-safety: cursor=', cursor ? (cursor.nodeType === 1 ? (cursor as Element).tagName : `text:'${String((cursor as Text).data ?? '').slice(0, 15)}'`) : 'null', 'afterWindow=', afterWindow ? (afterWindow.nodeType === 1 ? (afterWindow as Element).tagName : `text:'${String((afterWindow as Text).data ?? '').slice(0, 15)}'`) : 'null')
     let tailCount = 0
     while (tail !== afterWindow) {
       if (!tail) break
@@ -923,9 +1010,15 @@ export function patchBlocksInto(
     return { mode: 'full', total: 0, patched: 0 }
   }
 
+  if (options.forceRebuild) {
+    bpTrace({ why: 'forceRebuild' })
+    return fullRebuild(container, rootNode, renderer, cache)
+  }
+
   // DOM out of sync with the cache (a host replaced the innerHTML behind our
   // back, or a run rendered to a different node count than last time).
   if (container.childNodes.length !== cache.lastRuns.length) {
+    bpTrace({ why: 'desync', kids: container.childNodes.length, runs: cache.lastRuns.length })
     return fullRebuild(container, rootNode, renderer, cache)
   }
 
@@ -938,7 +1031,13 @@ export function patchBlocksInto(
     undefined
   if (change) {
     const windowed = reconcileWindowed(container, rootNode, change, renderer, cache, options)
-    if (windowed) return windowed
+    if (windowed) {
+      bpTrace({ why: 'windowed' })
+      return windowed
+    }
+    bpTrace({ why: 'windowed-declinado' })
+  } else {
+    bpTrace({ why: 'sin-changeRange' })
   }
 
   const blocks = rootNode.children
@@ -956,8 +1055,10 @@ export function patchBlocksInto(
     oldSet.add(k)
   }
   if (added >= cache.lastKeys.length) {
+    bpTrace({ why: 'added>=lastKeys', added, lastKeys: cache.lastKeys.length })
     return fullRebuild(container, rootNode, renderer, cache)
   }
 
+  bpTrace({ why: 'keyed' })
   return reconcileKeyed(container, rootNode, keys, renderer, cache, options)
 }

package/src/Visitors/DOMMorpher.ts

@@ -97,34 +97,7 @@ function morphNodes(parent: Node, newParent: Node): void {
         newNode.nodeType === 1 &&
         (oldNode as Element).tagName === (newNode as Element).tagName
       ) {
-        const oldEl = oldNode as Element
-        const newEl = newNode as Element
-
-        // Preserve interactive runtime states (such as <details open> for spoilerboxes and boxes)
-        if (oldEl.tagName === 'DETAILS' && oldEl.hasAttribute('open')) {
-          newEl.setAttribute('open', '')
-        }
-        if (oldEl.classList.contains('open')) {
-          newEl.classList.add('open')
-        }
-        if (oldEl.classList.contains('is-open')) {
-          newEl.classList.add('is-open')
-        }
-
-        // Sync attributes in-place
-        for (const attr of Array.from(newEl.attributes)) {
-          if (oldEl.getAttribute(attr.name) !== attr.value) {
-            oldEl.setAttribute(attr.name, attr.value)
-          }
-        }
-        for (const attr of Array.from(oldEl.attributes)) {
-          if (!newEl.hasAttribute(attr.name)) {
-            oldEl.removeAttribute(attr.name)
-          }
-        }
-
-        // Morph child nodes recursively
-        morphNodes(oldEl, newEl)
+        morphElement(oldNode as Element, newNode as Element)
       } else {
         // Different tag or nodeType: replace node
         oldNode.parentNode!.replaceChild(newNode.cloneNode(true), oldNode)
@@ -132,3 +105,46 @@ function morphNodes(parent: Node, newParent: Node): void {
     }
   }
 }
+
+/**
+ * Reconcile two HTML elements of the same tag in-place.
+ * Syncs attributes, preserves interactive states (<details open>, .open classes),
+ * and recursively morphs child nodes.
+ */
+export function morphElement(oldEl: Element, newEl: Element): void {
+  // Preserve interactive runtime states (such as <details open> for spoilerboxes and boxes)
+  if (oldEl.tagName === 'DETAILS' && oldEl.hasAttribute('open')) {
+    newEl.setAttribute('open', '')
+  }
+  if (oldEl.classList.contains('open')) {
+    newEl.classList.add('open')
+  }
+  if (oldEl.classList.contains('is-open')) {
+    newEl.classList.add('is-open')
+  }
+
+  // Sync attributes in-place.
+  //
+  // `attributes` se recorre por índice: `Array.from` asignaba un array
+  // por elemento y por sentido, dos por pareja morfada, y esto corre
+  // sobre la ventana cambiada en cada pulsación.
+  const newAttrs = newEl.attributes
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i]
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value)
+    }
+  }
+  // Hacia atrás: quitar un atributo compacta la colección viva, y
+  // recorrerla hacia delante mientras se borra se salta el siguiente.
+  const oldAttrs = oldEl.attributes
+  for (let i = oldAttrs.length - 1; i >= 0; i--) {
+    const name = oldAttrs[i].name
+    if (!newEl.hasAttribute(name)) {
+      oldEl.removeAttribute(name)
+    }
+  }
+
+  // Morph child nodes recursively
+  morphNodes(oldEl, newEl)
+}