@miliastry/quasar 1.0.0

package/src/Tests/CompilerPathProfiling.test.ts

@@ -0,0 +1,186 @@
+/**
+ * Compiler-path profiling harness (opt-in).
+ *
+ * Measures the exact compiler pipeline the app runs per keystroke:
+ *   Lexer → Parser → GreenNodePool → red build (reuse) → SemanticAnalyzer
+ *   → HTMLRenderer.render → DOMMorpher.morphHTML (the visual node).
+ *
+ * The app additionally wraps this in `BBCodePipeline` (MiliastryNovaFeatures),
+ * which defers the parse to `requestIdleCallback` above SYNC_THRESHOLD=5000 —
+ * the quasar engine itself is synchronous, and this harness times the engine.
+ *
+ * Opt-in so `npm test` stays silent:
+ *   QUASAR_PROFILE=1 npx vitest run src/Tests/CompilerPathProfiling.test.ts
+ */
+import { describe, it, expect } from 'vitest'
+import { writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { BBCodeDocumentModel } from '../BBCode/BBCodeDocumentModel'
+import { HTMLRenderer } from '../Visitors/HTMLRenderer'
+import { morphHTML } from '../Visitors/DOMMorpher'
+import { REFERENCE_DOCUMENT } from './referenceDocument'
+
+const PROFILE = process.env.QUASAR_PROFILE === '1'
+/** Report sink: vitest swallows console.log when stdout is not a TTY. */
+const reportLines: string[] = []
+function report(line = ''): void {
+  reportLines.push(line)
+  console.log(line)
+}
+
+// ─── Timing helpers ─────────────────────────────────────────
+
+function summarize(samples: number[]): { mean: number; min: number; p50: number; p95: number } {
+  const s = [...samples].sort((a, b) => a - b)
+  const n = s.length
+  return {
+    mean: s.reduce((a, b) => a + b, 0) / n,
+    min: s[0],
+    p50: s[Math.floor(n * 0.5)],
+    p95: s[Math.min(n - 1, Math.floor(n * 0.95))],
+  }
+}
+
+function timeIt(fn: () => void): number {
+  const t0 = performance.now()
+  fn()
+  return (performance.now() - t0) * 1000 // µs
+}
+
+/** warmup (JIT) then measure; returns µs samples. */
+function bench(measure: number, warmup: number, fn: () => void): number[] {
+  for (let i = 0; i < warmup; i++) fn()
+  const out: number[] = []
+  for (let i = 0; i < measure; i++) out.push(timeIt(fn))
+  return out
+}
+
+function row(name: string, samples: number[]): void {
+  const s = summarize(samples)
+  report(
+    `  ${name.padEnd(20)} mean ${s.mean.toFixed(1).padStart(8)} µs | min ${s.min.toFixed(1).padStart(8)} | p50 ${s.p50.toFixed(1).padStart(8)} | p95 ${s.p95.toFixed(1).padStart(8)}`,
+  )
+}
+
+// ─── Scenarios ──────────────────────────────────────────────
+
+describe.skipIf(!PROFILE)('compiler path profiling (QUASAR_PROFILE=1)', () => {
+  it(
+    'rebuild / keystroke / render / morph across document sizes',
+    () => {
+    const docs: Array<[string, string]> = [
+      ['small ~1.2KB', REFERENCE_DOCUMENT],
+      ['mid   ~4.8KB', REFERENCE_DOCUMENT.repeat(4)],
+      ['large ~19KB', REFERENCE_DOCUMENT.repeat(16)],
+    ]
+
+    report(
+      '\nNOTE: app pipeline defers parse to requestIdleCallback above 5KB ' +
+        '(BBCodePipeline SYNC_THRESHOLD); engine itself is sync.',
+    )
+
+    for (const [docName, source] of docs) {
+      report(`\n=== ${docName} (${(source.length / 1024).toFixed(1)} KB) ===`)
+
+      // ── 1. Full load / rebuild (constructor = lex+parse+pool+buildRed+analyze) ──
+      const loads = bench(40, 10, () => { new BBCodeDocumentModel({ source }) })
+      row('load (rebuild)', loads)
+
+      const probe = new BBCodeDocumentModel({ source })
+      let greenCount = 0
+      probe.greenRoot!.walk(() => { greenCount++ })
+      const probeHtml = new HTMLRenderer().render(probe.redRoot!)
+      report(
+        `  green nodes: ${greenCount} · html: ${probeHtml.length} chars · ` +
+        `analyze: ${((probe.lastAnalyze?.duration ?? 0) * 1000).toFixed(1)} µs / ${probe.lastAnalyze?.nodesAnalyzed ?? 0} nodes`,
+      )
+
+      // ── 2. Keystroke (incremental, reuseRed) — insert 'X' at middle ──
+      const model = new BBCodeDocumentModel({ source })
+      const mid = Math.floor(source.length / 2)
+      const sInsert = source.slice(0, mid) + 'X' + source.slice(mid)
+      const sRevert = source
+
+      model.applyTextUpdate(sInsert); model.ensureAnalyzed()
+      model.applyTextUpdate(sRevert); model.ensureAnalyzed()
+
+      const totalSamples: number[] = []
+      const reparseSamples: number[] = []
+      const parseSamples: number[] = []
+      const buildRedSamples: number[] = []
+      const miscReparseSamples: number[] = []
+      const analyzeSamples: number[] = []
+      for (let i = 0; i < 120; i++) {
+        const t = timeIt(() => { model.applyTextUpdate(sInsert); model.ensureAnalyzed() })
+        totalSamples.push(t)
+        analyzeSamples.push((model.lastAnalyze?.duration ?? 0) * 1000)
+        reparseSamples.push(t - (model.lastAnalyze?.duration ?? 0) * 1000)
+        const timings = model.lastReparseTimings
+        if (timings) {
+          parseSamples.push(timings.parse * 1000)
+          buildRedSamples.push(timings.buildRed * 1000)
+          miscReparseSamples.push(
+            (timings.findAffected + timings.safeBoundary + timings.mutate + timings.other) * 1000,
+          )
+        }
+        timeIt(() => { model.applyTextUpdate(sRevert); model.ensureAnalyzed() })
+      }
+      row('keystroke total', totalSamples)
+      row('  diff+reparse', reparseSamples)
+      row('  parse', parseSamples)
+      row('  buildRed', buildRedSamples)
+      row('  find+mutate', miscReparseSamples)
+      row('  analyze', analyzeSamples)
+
+      // ── 3. Render to HTML ──
+      const renderer = new HTMLRenderer()
+      const htmlSamples = bench(80, 20, () => { renderer.render(model.redRoot!) })
+      row('renderToHTML', htmlSamples)
+
+      // Two HTML states that differ by exactly the inserted character, for morph.
+      model.applyTextUpdate(sInsert); model.ensureAnalyzed()
+      const htmlA = renderer.render(model.redRoot!)
+      model.applyTextUpdate(sRevert); model.ensureAnalyzed()
+      const htmlB = renderer.render(model.redRoot!)
+      expect(htmlA.length).toBeGreaterThan(0)
+
+      // ── 4. Morph to DOM (the visual node) ──
+      const coldSamples = bench(30, 10, () => {
+        morphHTML(document.createElement('div'), htmlA)
+      })
+      row('morph cold (innerHTML)', coldSamples)
+
+      // Baseline: what a naive full innerHTML swap costs. If morph ≈ this,
+      // the cost is DOM parsing of the full document, not the diff walk.
+      const rawSamples = bench(30, 10, () => {
+        const d = document.createElement('div')
+        d.innerHTML = htmlA
+      })
+      row('baseline innerHTML=', rawSamples)
+
+      const live = document.createElement('div')
+      morphHTML(live, htmlA)
+      const warmSamples: number[] = []
+      for (let i = 0; i < 120; i++) {
+        warmSamples.push(timeIt(() => morphHTML(live, i % 2 ? htmlA : htmlB)))
+      }
+      row('morph warm (diff)', warmSamples)
+
+      // Per-keystroke compiler budget (sync part): keystroke total + render + morph warm.
+      const total = summarize(totalSamples)
+      const render = summarize(htmlSamples)
+      const morph = summarize(warmSamples)
+      const syncMs = (total.mean + render.mean + morph.mean) / 1000
+      report(
+        `  → sync compiler cost/keystroke ≈ ${syncMs.toFixed(2)} ms ` +
+          `(${(1000 / Math.max(syncMs, 0.001)).toFixed(0)} keystrokes/s)`,
+      )
+    }
+
+    const outPath = join(__dirname, '..', '..', 'bench-report.txt')
+    writeFileSync(outPath, reportLines.join('\n') + '\n')
+    report(`\nReport written to ${outPath}`)
+  },
+    120_000,
+  )
+})

package/src/Tests/DOMMorpher.test.ts

@@ -0,0 +1,142 @@
+import { describe, it, expect } from 'vitest'
+import { morphHTML } from '../Visitors/DOMMorpher'
+
+/**
+ * The morpher had no tests at all, which is uncomfortable for something that
+ * mutates the DOM the user is looking at.
+ *
+ * The central property is simple: after morphing, the container must be
+ * structurally identical to what `innerHTML = newHTML` would have produced.
+ * Anything else means the preview silently disagrees with the renderer. That is
+ * asserted below over hand-picked edit shapes plus a seeded random corpus.
+ */
+
+function container(html: string): HTMLElement {
+  const el = document.createElement('div')
+  el.innerHTML = html
+  return el
+}
+
+function expected(html: string): HTMLElement {
+  const el = document.createElement('div')
+  el.innerHTML = html
+  return el
+}
+
+/** Morph `from` into `to` and assert the result matches a fresh render. */
+function expectMorphMatches(from: string, to: string): HTMLElement {
+  const el = container(from)
+  morphHTML(el, to)
+  expect(el.innerHTML).toBe(expected(to).innerHTML)
+  return el
+}
+
+function mulberry32(seed: number) {
+  return function () {
+    seed |= 0; seed = (seed + 0x6D2B79F5) | 0
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+describe('DOMMorpher', () => {
+  it('produces the same DOM as a fresh render, for every edit shape', () => {
+    const base = '<p>uno</p><p>dos</p><p>tres</p>'
+
+    expectMorphMatches(base, base)                                        // sin cambios
+    expectMorphMatches(base, '<p>UNO</p><p>dos</p><p>tres</p>')           // cambio al principio
+    expectMorphMatches(base, '<p>uno</p><p>dos</p><p>TRES</p>')           // cambio al final
+    expectMorphMatches(base, '<p>uno</p><p>DOS</p><p>tres</p>')           // cambio en medio
+    expectMorphMatches(base, '<p>cero</p><p>uno</p><p>dos</p><p>tres</p>')// inserción al principio
+    expectMorphMatches(base, '<p>uno</p><p>dos</p><p>tres</p><p>cuatro</p>') // al final
+    expectMorphMatches(base, '<p>uno</p><p>nuevo</p><p>dos</p><p>tres</p>')  // en medio
+    expectMorphMatches(base, '<p>dos</p><p>tres</p>')                     // borrado al principio
+    expectMorphMatches(base, '<p>uno</p><p>dos</p>')                      // borrado al final
+    expectMorphMatches(base, '<p>uno</p><p>tres</p>')                     // borrado en medio
+    expectMorphMatches(base, '')                                          // vaciado
+    expectMorphMatches(base, '<div>otra cosa</div>')                      // etiqueta distinta
+    expectMorphMatches(base, '<p>uno</p>texto suelto<p>tres</p>')         // elemento → texto
+    expectMorphMatches('<b>a</b>', '<b><i>a</i></b>')                     // anidamiento nuevo
+  })
+
+  it('inserts before the preserved suffix, not at the end', () => {
+    // Regression: trimming a common suffix means a plain `appendChild` would
+    // put the new node in the wrong place.
+    expectMorphMatches('<p>a</p><p>z</p>', '<p>a</p><p>m</p><p>z</p>')
+    expectMorphMatches('<p>z</p>', '<p>a</p><p>z</p>')
+  })
+
+  it('keeps the identical prefix as the very same DOM nodes', () => {
+    // This is the point of the morpher: untouched nodes must not be replaced,
+    // or the runtime state they hold is lost.
+    const el = container('<p id="a">uno</p><p id="b">dos</p>')
+    const first = el.children[0]
+    morphHTML(el, '<p id="a">uno</p><p id="b">DOS</p>')
+    expect(el.children[0]).toBe(first)
+  })
+
+  it('does not rewrite every sibling when a node is inserted at the front', () => {
+    // This is the A8 defect, pinned. Pairing children by index means inserting
+    // one node shifts every following sibling, so each compares against the
+    // wrong counterpart and gets its content rewritten in place.
+    //
+    // Measured against the previous implementation: of 200 paragraphs, it left
+    // 0 intact. Suffix trimming brings that to 200 — the insert is the only
+    // DOM operation performed.
+    const from = Array.from({ length: 200 }, (_, i) => `<p>l${i}</p>`).join('')
+    const el = container(from)
+    const original = Array.from(el.children).map(n => ({ node: n, text: n.textContent }))
+
+    morphHTML(el, '<p>nueva</p>' + from)
+
+    const intact = original.filter(o => o.node.textContent === o.text).length
+    expect(intact).toBe(200)
+    expect(el.innerHTML).toBe(expected('<p>nueva</p>' + from).innerHTML)
+  })
+
+  it('preserves an open <details> across a morph', () => {
+    const el = container('<details><summary>s</summary><p>uno</p></details>')
+    const details = el.querySelector('details')!
+    details.setAttribute('open', '')
+
+    morphHTML(el, '<details><summary>s</summary><p>DOS</p></details>')
+
+    expect(el.querySelector('details')).toBe(details)
+    expect(el.querySelector('details')!.hasAttribute('open')).toBe(true)
+    expect(el.querySelector('p')!.textContent).toBe('DOS')
+  })
+
+  it('syncs attributes, adding and removing', () => {
+    const el = container('<p class="viejo" data-x="1">t</p>')
+    morphHTML(el, '<p class="nuevo">t</p>')
+    const p = el.children[0]
+    expect(p.getAttribute('class')).toBe('nuevo')
+    expect(p.hasAttribute('data-x')).toBe(false)
+  })
+
+  it('matches a fresh render across a seeded random corpus', () => {
+    const rnd = mulberry32(1234)
+    const piezas = [
+      '<p>a</p>', '<p>b</p>', '<b>x</b>', '<i>y</i>', 'texto ',
+      '<div class="n">n</div>', '<span data-node-id="n1">s</span>',
+      '<details><summary>s</summary><p>d</p></details>', '<br>',
+    ]
+    const build = () => {
+      let h = ''
+      const n = Math.floor(rnd() * 10)
+      for (let i = 0; i < n; i++) h += piezas[Math.floor(rnd() * piezas.length)]
+      return h
+    }
+
+    for (let i = 0; i < 2000; i++) {
+      const from = build()
+      const to = build()
+      const el = container(from)
+      morphHTML(el, to)
+      // `morphHTML` short-circuits to innerHTML when the container starts empty,
+      // which is trivially correct; the interesting case is the incremental one.
+      expect(el.innerHTML).toBe(expected(to).innerHTML)
+    }
+  })
+})

package/src/Tests/DomPatchPerf.test.ts

@@ -0,0 +1,60 @@
+import { describe, it } from 'vitest'
+import { BBCodeDocumentModel } from '../BBCode/BBCodeDocumentModel'
+import { HTMLRenderer } from '../Visitors/HTMLRenderer'
+import { patchBlocksInto } from '../Visitors/BlockPatcher'
+
+function makeLines(n: number): string {
+  const parts: string[] = []
+  for (let i = 0; i < n; i++) parts.push(`line ${i}`)
+  return parts.join('\n')
+}
+
+describe('dom patch worst case (perf diagnostic)', () => {
+  it('repro: 40k lines, insert a-burst in middle and at start', () => {
+    const source = makeLines(5000)
+    const model = new BBCodeDocumentModel({ source })
+    const renderer = new HTMLRenderer()
+    let renderCalls = 0
+    const origRender = renderer.render.bind(renderer)
+    ;(renderer as unknown as { render: (n: unknown) => string }).render = (n: unknown) => {
+      renderCalls++
+      return origRender(n as never)
+    }
+    const el = document.createElement('div')
+
+    const t0 = performance.now()
+    const s1 = patchBlocksInto(el, model.redRoot!, { renderer })
+    const tInit = performance.now() - t0
+    console.log('[perf] init: ', JSON.stringify(s1), 'renderCalls:', renderCalls, 't:', tInit.toFixed(1), 'ms', 'rootChildren:', model.redRoot!.children.length)
+
+    // ── Edit A: insert 'a' * 2000 en la MITAD (dentro de una línea) ──
+    renderCalls = 0
+    const mid = Math.floor(model.source.length / 2)
+    const edited = model.source.slice(0, mid) + 'a'.repeat(2000) + model.source.slice(mid)
+    const t1 = performance.now()
+    model.applyTextUpdate(edited)
+    const tParse = performance.now() - t1
+    const t2 = performance.now()
+    const s2 = patchBlocksInto(el, model.redRoot!, { renderer })
+    const tPatch = performance.now() - t2
+    console.log('[perf] mid-insert:', JSON.stringify(s2), 'renderCalls:', renderCalls, 'parse:', tParse.toFixed(1), 'ms', 'patch:', tPatch.toFixed(1), 'ms')
+
+    // ── Edit B: insert 'a' * 2000 al INICIO ──
+    renderCalls = 0
+    const edited2 = 'a'.repeat(2000) + edited
+    const t3 = performance.now()
+    model.applyTextUpdate(edited2)
+    const tParse2 = performance.now() - t3
+    const t4 = performance.now()
+    const s3 = patchBlocksInto(el, model.redRoot!, { renderer })
+    const tPatch2 = performance.now() - t4
+    console.log('[perf] start-insert:', JSON.stringify(s3), 'renderCalls:', renderCalls, 'parse:', tParse2.toFixed(1), 'ms', 'patch:', tPatch2.toFixed(1), 'ms')
+
+    // ── Edit C: teclear 1 carácter en el medio ──
+    renderCalls = 0
+    const edited3 = edited2.slice(0, mid + 1000) + 'x' + edited2.slice(mid + 1000)
+    model.applyTextUpdate(edited3)
+    const s4 = patchBlocksInto(el, model.redRoot!, { renderer })
+    console.log('[perf] single-key:', JSON.stringify(s4), 'renderCalls:', renderCalls)
+  }, 120000)
+})