@trendr/core 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendr/core",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
   "author": "Jonathan Pyers",

package/src/ansi.js

@@ -97,8 +97,21 @@ function rgbToHex(r, g, b) {
   return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
 }
 
-export function parseSgr(params, state) {
-  if (!state) state = { fg: null, bg: null, attrs: 0 }
+// a params string reduces to a state-independent delta: fg/bg values when
+// touched (undefined = untouched), plus and/or masks over attrs. styled text
+// repeats the same handful of sequences thousands of times per frame, so
+// each is parsed once and its delta replayed from cache
+const sgrDeltaCache = new Map()
+const SGR_CACHE_MAX = 4000
+
+const setBit = (delta, bit) => { delta.or |= bit }
+const clearBits = (delta, bits) => { delta.and &= ~bits; delta.or &= ~bits }
+
+function sgrDelta(params) {
+  const cached = sgrDeltaCache.get(params)
+  if (cached) return cached
+
+  const delta = { fg: undefined, bg: undefined, and: ~0, or: 0 }
   const codes = params.split(';').map(Number)
   let i = 0
 
@@ -106,46 +119,58 @@ export function parseSgr(params, state) {
     const c = codes[i]
 
     if (c === 0) {
-      state.fg = null
-      state.bg = null
-      state.attrs = 0
-    } else if (c === 1) state.attrs |= BOLD
-    else if (c === 2) state.attrs |= DIM
-    else if (c === 3) state.attrs |= ITALIC
-    else if (c === 4) state.attrs |= UNDERLINE
-    else if (c === 7) state.attrs |= INVERSE
-    else if (c === 9) state.attrs |= STRIKETHROUGH
-    else if (c === 22) state.attrs &= ~(BOLD | DIM)
-    else if (c === 23) state.attrs &= ~ITALIC
-    else if (c === 24) state.attrs &= ~UNDERLINE
-    else if (c === 27) state.attrs &= ~INVERSE
-    else if (c === 29) state.attrs &= ~STRIKETHROUGH
-    else if (c === 39) state.fg = null
-    else if (c === 49) state.bg = null
+      delta.fg = null
+      delta.bg = null
+      delta.and = 0
+      delta.or = 0
+    } else if (c === 1) setBit(delta, BOLD)
+    else if (c === 2) setBit(delta, DIM)
+    else if (c === 3) setBit(delta, ITALIC)
+    else if (c === 4) setBit(delta, UNDERLINE)
+    else if (c === 7) setBit(delta, INVERSE)
+    else if (c === 9) setBit(delta, STRIKETHROUGH)
+    else if (c === 22) clearBits(delta, BOLD | DIM)
+    else if (c === 23) clearBits(delta, ITALIC)
+    else if (c === 24) clearBits(delta, UNDERLINE)
+    else if (c === 27) clearBits(delta, INVERSE)
+    else if (c === 29) clearBits(delta, STRIKETHROUGH)
+    else if (c === 39) delta.fg = null
+    else if (c === 49) delta.bg = null
     else if (c === 38 && codes[i + 1] === 5) {
-      state.fg = indexToColor(codes[i + 2])
+      delta.fg = indexToColor(codes[i + 2])
       i += 2
     } else if (c === 48 && codes[i + 1] === 5) {
-      state.bg = indexToColor(codes[i + 2])
+      delta.bg = indexToColor(codes[i + 2])
       i += 2
     } else if (c === 38 && codes[i + 1] === 2) {
-      state.fg = rgbToHex(codes[i + 2], codes[i + 3], codes[i + 4])
+      delta.fg = rgbToHex(codes[i + 2], codes[i + 3], codes[i + 4])
       i += 4
     } else if (c === 48 && codes[i + 1] === 2) {
-      state.bg = rgbToHex(codes[i + 2], codes[i + 3], codes[i + 4])
+      delta.bg = rgbToHex(codes[i + 2], codes[i + 3], codes[i + 4])
       i += 4
     } else {
       const fgIdx = basicFgToIndex(c)
-      if (fgIdx != null) state.fg = indexToColor(fgIdx)
+      if (fgIdx != null) delta.fg = indexToColor(fgIdx)
       else {
         const bgIdx = basicBgToIndex(c)
-        if (bgIdx != null) state.bg = indexToColor(bgIdx)
+        if (bgIdx != null) delta.bg = indexToColor(bgIdx)
       }
     }
 
     i++
   }
 
+  if (sgrDeltaCache.size >= SGR_CACHE_MAX) sgrDeltaCache.clear()
+  sgrDeltaCache.set(params, delta)
+  return delta
+}
+
+export function parseSgr(params, state) {
+  if (!state) state = { fg: null, bg: null, attrs: 0 }
+  const delta = sgrDelta(params)
+  if (delta.fg !== undefined) state.fg = delta.fg
+  if (delta.bg !== undefined) state.bg = delta.bg
+  state.attrs = (state.attrs & delta.and) | delta.or
   return state
 }
 

package/src/buffer.js

@@ -129,6 +129,21 @@ export function dimBuffer(buf) {
   }
 }
 
+export function dimRect(buf, x, y, w, h) {
+  const x1 = Math.max(x, 0)
+  const y1 = Math.max(y, 0)
+  const x2 = Math.min(x + w, buf.width)
+  const y2 = Math.min(y + h, buf.height)
+  for (let row = y1; row < y2; row++) {
+    const base = row * buf.width
+    for (let col = x1; col < x2; col++) {
+      const cell = buf.cells[base + col]
+      if (cell.attrs & 2) continue
+      buf.cells[base + col] = { ch: cell.ch, fg: cell.fg, bg: cell.bg, attrs: cell.attrs | 2 }
+    }
+  }
+}
+
 export function copyBuffer(src, dst) {
   const len = Math.min(src.cells.length, dst.cells.length)
   for (let i = 0; i < len; i++) dst.cells[i] = src.cells[i]

package/src/diff-view.js

@@ -38,6 +38,32 @@ function intraSegments(ansiLine, plainLen, ranges) {
   return segs
 }
 
+// components re-execute every frame but diff inputs are immutable strings;
+// recomputing a word diff per card per frame dominates long transcripts.
+// whole mode (before/after strings) is memoized; patch/hunks callers pass
+// fresh objects per render, so they fall through to a direct compute
+const diffMemo = new Map()
+const DIFF_MEMO_MAX = 300
+const hiLineCache = new Map()
+const HI_CACHE_MAX = 2000
+
+function memoComputeDiff({ before, after, patch, hunks, wordDiff, context }) {
+  if (patch != null || hunks != null || before == null || after == null) {
+    return computeDiff({ before, after, patch, hunks, wordDiff, context })
+  }
+  let byAfter = diffMemo.get(before)
+  if (!byAfter) {
+    if (diffMemo.size >= DIFF_MEMO_MAX) diffMemo.clear()
+    diffMemo.set(before, (byAfter = new Map()))
+  }
+  const key = `${wordDiff}|${context}|${after.length}\x00${after.slice(0, 64)}`
+  const inner = byAfter.get(key)
+  if (inner && inner.after === after) return inner.result
+  const result = computeDiff({ before, after, wordDiff, context })
+  byAfter.set(key, { after, result })
+  return result
+}
+
 export function Diff({
   before,
   after,
@@ -62,14 +88,16 @@ export function Diff({
   const offset = offsetProp ?? offsetInternal()
   const setOffset = onScroll ?? setOffsetInternal
 
-  const { rows, stats } = computeDiff({ before, after, patch, hunks, wordDiff, context })
+  const { rows, stats } = memoComputeDiff({ before, after, patch, hunks, wordDiff, context })
 
   const wholeMode = hunks == null && patch == null
-  const hiCache = new Map()
   const hiLines = (text) => {
-    if (hiCache.has(text)) return hiCache.get(text)
+    const key = `${language}\x00${text}`
+    const cached = hiLineCache.get(key)
+    if (cached) return cached
     const lines = (highlight ? highlight(text, language) : text).split('\n')
-    hiCache.set(text, lines)
+    if (hiLineCache.size >= HI_CACHE_MAX) hiLineCache.clear()
+    hiLineCache.set(key, lines)
     return lines
   }
   const beforeHi = wholeMode && highlight ? hiLines(before ?? '') : null

package/src/renderer.js

@@ -1,4 +1,4 @@
-import { createBuffer, clearBuffer, fillRect, writeText, dimBuffer, blitRect } from './buffer.js'
+import { createBuffer, clearBuffer, fillRect, writeText, dimBuffer, dimRect, blitRect } from './buffer.js'
 import { diff } from './diff.js'
 import { bufferToLines } from './serialize.js'
 import { computeLayout, resolveBorderEdges, intrinsicHeight } from './layout.js'
@@ -409,6 +409,10 @@ function paintTree(node, buf, clip, offset, prevBuf) {
       paintTree(child, buf, childClip, childOffset, childPrevBuf)
     }
   }
+
+  // style.dim on a box dims its whole painted region after children render:
+  // the scoped sibling of the overlay backdrop's full-buffer dim
+  if (style.dim) dimRect(buf, clipped.x, clipped.y, clipped.width, clipped.height)
 }
 
 function extractText(node, parentCtx) {

package/src/wrap.js

@@ -34,7 +34,14 @@ const TAB_STOP = 8
 
 const tabWidth = (col) => TAB_STOP - (col % TAB_STOP)
 
+// text nodes are measured every layout pass but their strings are immutable;
+// transcripts re-measure thousands of identical strings per frame
+const measureCache = new Map()
+const MEASURE_CACHE_MAX = 20000
+
 export function measureText(text) {
+  const hit = measureCache.get(text)
+  if (hit !== undefined) return hit
   const clean = stripAnsi(text)
   let width = 0
   for (let i = 0; i < clean.length; i++) {
@@ -42,6 +49,8 @@ export function measureText(text) {
     if (code > 0xffff) i++
     width += code === 9 ? tabWidth(width) : charWidth(code)
   }
+  if (measureCache.size >= MEASURE_CACHE_MAX) measureCache.clear()
+  measureCache.set(text, width)
   return width
 }