@trendr/core 0.1.0

package/src/renderer.js

@@ -0,0 +1,478 @@
+import { createBuffer, clearBuffer, fillRect, writeText, dimBuffer } from './buffer.js'
+import { diff } from './diff.js'
+import { computeLayout } from './layout.js'
+import { Fragment } from './element.js'
+import { createScheduler } from './scheduler.js'
+import { createInputHandler } from './input.js'
+import { setSchedulerHook, setHookRegistrar, createScope, disposeScope, onCleanup } from './signal.js'
+import { wordWrap, measureText, sliceVisible } from './wrap.js'
+import * as ansi from './ansi.js'
+
+let activeContext = null
+let overlays = []
+
+export function getContext() {
+  return activeContext
+}
+
+const DEFAULT_THEME = { accent: 'cyan' }
+
+export function getTheme() {
+  return activeContext?.theme ?? DEFAULT_THEME
+}
+
+export function getInstanceLayout() {
+  if (!currentHookOwner) return { x: 0, y: 0, width: 0, height: 0 }
+  return currentHookOwner.layout ?? { x: 0, y: 0, width: 0, height: 0 }
+}
+
+export function registerOverlay(element, { backdrop, fullscreen } = {}) {
+  if (!currentHookOwner) return
+  overlays.push({ element, owner: currentHookOwner, backdrop, fullscreen })
+}
+
+const BORDER_CHARS = {
+  single: { tl: '\u250c', tr: '\u2510', bl: '\u2514', br: '\u2518', h: '\u2500', v: '\u2502' },
+  double: { tl: '\u2554', tr: '\u2557', bl: '\u255a', br: '\u255d', h: '\u2550', v: '\u2551' },
+  round: { tl: '\u256d', tr: '\u256e', bl: '\u2570', br: '\u256f', h: '\u2500', v: '\u2502' },
+  bold: { tl: '\u250f', tr: '\u2513', bl: '\u2517', br: '\u251b', h: '\u2501', v: '\u2503' },
+}
+
+function resolveAttrs(style) {
+  let attrs = 0
+  if (style.bold) attrs |= ansi.BOLD
+  if (style.dim) attrs |= ansi.DIM
+  if (style.italic) attrs |= ansi.ITALIC
+  if (style.underline) attrs |= ansi.UNDERLINE
+  if (style.inverse) attrs |= ansi.INVERSE
+  if (style.strikethrough) attrs |= ansi.STRIKETHROUGH
+  return attrs
+}
+
+function paintBorder(buf, rect, borderStyle, fg) {
+  const chars = typeof borderStyle === 'string'
+    ? (BORDER_CHARS[borderStyle] ?? BORDER_CHARS.single)
+    : BORDER_CHARS.single
+
+  const { x, y, width, height } = rect
+  if (width < 2 || height < 2) return
+
+  const cell = (ch) => ({ ch, fg: fg ?? null, bg: null, attrs: 0 })
+
+  buf.cells[y * buf.width + x] = cell(chars.tl)
+  buf.cells[y * buf.width + x + width - 1] = cell(chars.tr)
+  buf.cells[(y + height - 1) * buf.width + x] = cell(chars.bl)
+  buf.cells[(y + height - 1) * buf.width + x + width - 1] = cell(chars.br)
+
+  for (let col = x + 1; col < x + width - 1; col++) {
+    buf.cells[y * buf.width + col] = cell(chars.h)
+    buf.cells[(y + height - 1) * buf.width + col] = cell(chars.h)
+  }
+
+  for (let row = y + 1; row < y + height - 1; row++) {
+    buf.cells[row * buf.width + x] = cell(chars.v)
+    buf.cells[row * buf.width + x + width - 1] = cell(chars.v)
+  }
+}
+
+function findContentRect(node) {
+  if (!node?._layout) return null
+  const style = node.props?.style ?? {}
+  if (style.border) return node._layout
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) {
+      const found = findContentRect(child)
+      if (found) return found
+    }
+  }
+  if (node._resolved) return findContentRect(node._resolved)
+  return null
+}
+
+function clearOverlayRect(overlayTree, buf) {
+  const rect = findContentRect(overlayTree)
+  if (!rect) return
+  fillRect(buf, rect.x, rect.y, rect.width, rect.height, ' ', null, null, 0)
+}
+
+function clipRect(a, b) {
+  const x = Math.max(a.x, b.x)
+  const y = Math.max(a.y, b.y)
+  const r = Math.min(a.x + a.width, b.x + b.width)
+  const bot = Math.min(a.y + a.height, b.y + b.height)
+  return { x, y, width: Math.max(0, r - x), height: Math.max(0, bot - y) }
+}
+
+function paintTree(node, buf, clip) {
+  if (!node) return
+
+  if (node._resolved) {
+    paintTree(node._resolved, buf, clip)
+    return
+  }
+
+  if (node.type === Fragment) {
+    if (node._resolvedChildren) {
+      for (const child of node._resolvedChildren) paintTree(child, buf, clip)
+    }
+    return
+  }
+
+  const layout = node._layout
+  if (!layout || layout.width <= 0 || layout.height <= 0) return
+
+  const clipped = clip ? clipRect(layout, clip) : layout
+  if (clipped.width <= 0 || clipped.height <= 0) return
+
+  const style = node.props?.style ?? {}
+  const attrs = resolveAttrs(style)
+
+  if (node.type === 'text') {
+    const text = extractText(node)
+    if (!text) return
+
+    const truncate = style.overflow === 'truncate'
+    const wrap = style.overflow !== 'nowrap' && !truncate
+
+    if (wrap) {
+      const lines = wordWrap(text, layout.width)
+      for (let i = 0; i < lines.length && i < layout.height; i++) {
+        const rowY = layout.y + i
+        if (rowY < clipped.y || rowY >= clipped.y + clipped.height) continue
+        writeText(buf, clipped.x, rowY, lines[i].slice(clipped.x - layout.x), style.color, style.bg, attrs, clipped.width)
+      }
+    } else {
+      let line = text.replace(/\n/g, ' ')
+      if (truncate && measureText(line) > layout.width && layout.width > 3) {
+        line = sliceVisible(line, layout.width - 1) + '\u2026'
+      }
+      if (layout.y >= clipped.y && layout.y < clipped.y + clipped.height) {
+        writeText(buf, clipped.x, layout.y, line.slice(clipped.x - layout.x), style.color, style.bg, attrs, clipped.width)
+      }
+    }
+    return
+  }
+
+  if (style.bg) {
+    fillRect(buf, clipped.x, clipped.y, clipped.width, clipped.height, ' ', null, style.bg, 0)
+  }
+
+  if (style.border) {
+    paintBorder(buf, layout, style.border, style.borderColor)
+  }
+
+  const childClip = clip ? clipRect(layout, clip) : layout
+
+  if (node._resolvedChildren) {
+    for (const child of node._resolvedChildren) {
+      paintTree(child, buf, childClip)
+    }
+  }
+}
+
+function extractText(node) {
+  if (node == null || node === true || node === false) return ''
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  const children = node.props?.children
+  if (children == null || children === true || children === false) return ''
+  if (typeof children === 'string') return children
+  if (typeof children === 'number') return String(children)
+  if (Array.isArray(children)) return children.map(c => extractText(c)).join('')
+  return ''
+}
+
+function flattenChildren(children) {
+  if (children == null || children === true || children === false) return []
+  if (!Array.isArray(children)) return [children]
+  const result = []
+  for (const child of children) {
+    if (child == null || child === true || child === false) continue
+    if (Array.isArray(child)) result.push(...flattenChildren(child))
+    else result.push(child)
+  }
+  return result
+}
+
+// component instances track the split between setup (runs once)
+// and render (runs every frame)
+//
+// on first call, the component body executes fully - hooks register,
+// signals are created, and the returned JSX is captured.
+// the component function is wrapped so that on subsequent calls,
+// only the JSX-producing part re-executes (by re-calling the component),
+// but hooks detect they're already registered and skip.
+
+// simpler model: each component is called once during mount.
+// it returns a render function (a closure that produces JSX).
+// on each frame, we call the render functions to get fresh trees.
+//
+// convention: components return either JSX directly (for static content)
+// or we wrap them so the return value is always a function.
+
+// actually simplest: components are just functions that return JSX.
+// we call them once at mount time within a scope (hooks register).
+// we store a reference to the component + props + scope.
+// on each frame, we re-call the component function to get fresh JSX.
+// BUT hooks must not re-register. hooks track their own registration
+// using the scope.
+
+// ok, final approach. the component model:
+//
+// 1. each component function is called once. this is the "setup" call.
+//    during setup, hooks (useInput, useInterval) register side effects
+//    in the current scope. the component also returns JSX.
+//
+// 2. we extract the "render" part by having the component return a
+//    function. if it returns JSX directly, we treat the whole component
+//    as the render function and call it on each frame - but hooks must
+//    be idempotent.
+//
+// since requiring users to return functions is a bad API, let's make
+// hooks idempotent. each hook checks a per-scope registry to see
+// if it's already been called with the same identity.
+
+let hookIndex = 0
+let currentHookOwner = null
+
+export function startHookTracking(owner) {
+  currentHookOwner = owner
+  hookIndex = 0
+  setHookRegistrar(registerHook)
+}
+
+export function endHookTracking() {
+  currentHookOwner = null
+  hookIndex = 0
+  setHookRegistrar(null)
+}
+
+export function registerHook(setupFn) {
+  if (!currentHookOwner) {
+    return setupFn()
+  }
+
+  const owner = currentHookOwner
+  if (!owner.hooks) owner.hooks = []
+  const idx = hookIndex++
+
+  if (idx >= owner.hooks.length) {
+    const result = setupFn()
+    owner.hooks.push(result)
+    return result
+  }
+
+  return owner.hooks[idx]
+}
+
+// resolve tree with component instance caching.
+// instances are keyed by component function + occurrence index,
+// so multiple instances of the same component each get their own state.
+
+function resolveForFrame(element, parent, instances, counters, visited) {
+  if (element == null || typeof element === 'boolean') return null
+
+  if (typeof element === 'string' || typeof element === 'number') {
+    return {
+      type: 'text',
+      props: { children: String(element) },
+      key: null,
+      _parent: parent,
+      _layout: null,
+      _resolved: null,
+      _resolvedChildren: null,
+    }
+  }
+
+  const node = {
+    type: element.type,
+    props: element.props ?? {},
+    key: element.key,
+    _parent: parent,
+    _layout: null,
+    _resolved: null,
+    _resolvedChildren: null,
+  }
+
+  if (typeof element.type === 'function') {
+    const fn = element.type
+    const count = counters.get(fn) ?? 0
+    counters.set(fn, count + 1)
+
+    const instanceKey = element.key != null ? `${fn.name}:key:${element.key}` : `${fn.name}:${count}`
+    if (visited) visited.add(instanceKey)
+    let instance = instances.get(instanceKey)
+
+    if (!instance) {
+      let result
+      instance = { scope: null, fn, hooks: [], node: null, layout: null }
+      instances.set(instanceKey, instance)
+      instance.scope = createScope(() => {
+        startHookTracking(instance)
+        result = fn(element.props ?? {})
+        endHookTracking()
+      })
+      node._resolved = resolveForFrame(result, node, instances, counters, visited)
+    } else {
+      startHookTracking(instance)
+      const result = fn(element.props ?? {})
+      endHookTracking()
+      node._resolved = resolveForFrame(result, node, instances, counters, visited)
+    }
+
+    instance.node = node
+    return node
+  }
+
+  if (element.type === Fragment) {
+    const children = flattenChildren(element.props?.children)
+    node._resolvedChildren = children.map(c => resolveForFrame(c, node, instances, counters, visited)).filter(Boolean)
+    return node
+  }
+
+  const children = flattenChildren(element.props?.children)
+  if (children.length > 0) {
+    node._resolvedChildren = children.map(c => resolveForFrame(c, node, instances, counters, visited)).filter(Boolean)
+  }
+
+  return node
+}
+
+export function mount(rootComponent, { stream, stdin, title, theme } = {}) {
+  const out = stream ?? process.stdout
+  const inp = stdin ?? process.stdin
+
+  let width = out.columns ?? 80
+  let height = out.rows ?? 24
+
+  let prev = createBuffer(width, height)
+  let curr = createBuffer(width, height)
+
+  const input = createInputHandler(inp)
+  const ctx = { stream: out, input, stdin: inp, theme: { ...DEFAULT_THEME, ...theme } }
+  activeContext = ctx
+
+  // component instance cache persists across frames
+  // maps instanceKey -> { scope, fn, hooks }
+  const instances = new Map()
+
+  function frame() {
+    const prevCtx = activeContext
+    activeContext = ctx
+    overlays = []
+
+    clearBuffer(curr)
+
+    // counters reset each frame so occurrence indices are stable
+    const counters = new Map()
+    const visited = new Set()
+    const element = { type: rootComponent, props: {}, key: null }
+    const tree = resolveForFrame(element, null, instances, counters, visited)
+
+    computeLayout(tree, { x: 0, y: 0, width, height })
+
+    for (const inst of instances.values()) {
+      if (inst.node?._availableRect) inst.layout = inst.node._availableRect
+      else if (inst.node?._layout) inst.layout = inst.node._layout
+    }
+
+    paintTree(tree, curr)
+
+    for (const { element: overlayEl, owner, backdrop, fullscreen } of overlays) {
+      if (backdrop) dimBuffer(curr)
+
+      const overlayTree = resolveForFrame(overlayEl, null, instances, counters, visited)
+      if (overlayTree) {
+        if (backdrop || fullscreen) {
+          computeLayout(overlayTree, { x: 0, y: 0, width, height })
+        } else {
+          const anchor = owner.node?._layout ?? owner.layout ?? { x: 0, y: 0, width: 0, height: 0 }
+          computeLayout(overlayTree, {
+            x: anchor.x,
+            y: anchor.y + 1,
+            width: width - anchor.x,
+            height: height - anchor.y - 1,
+          })
+        }
+        clearOverlayRect(overlayTree, curr)
+        paintTree(overlayTree, curr)
+      }
+    }
+
+    for (const [key, inst] of instances) {
+      if (!visited.has(key)) {
+        disposeScope(inst.scope)
+        instances.delete(key)
+      }
+    }
+
+    activeContext = prevCtx
+
+    const output = diff(prev, curr)
+    if (output) out.write(ansi.hideCursor + output)
+
+    const tmp = prev
+    prev = curr
+    curr = tmp
+  }
+
+  const scheduler = createScheduler({
+    fps: 60,
+    onFrame: frame,
+  })
+
+  setSchedulerHook(scheduler.requestFrame)
+
+  out.write(ansi.altScreen + ansi.hideCursor + ansi.clearScreen + (title ? ansi.setTitle(title) : ''))
+  if (inp.isTTY && inp.setRawMode) inp.setRawMode(true)
+
+  frame()
+  scheduler.requestFrame()
+
+  const onResize = () => {
+    width = out.columns ?? 80
+    height = out.rows ?? 24
+    prev = createBuffer(width, height)
+    curr = createBuffer(width, height)
+    out.write(ansi.clearScreen)
+    scheduler.forceFrame()
+  }
+  out.on('resize', onResize)
+
+  input.onKey((event) => {
+    if (event.key === 'c' && event.ctrl) {
+      unmount()
+      process.exit(0)
+    }
+  })
+
+  let unmounted = false
+
+  function unmount() {
+    if (unmounted) return
+    unmounted = true
+
+    scheduler.destroy()
+    input.detach()
+    out.off('resize', onResize)
+    process.off('exit', onExit)
+
+    for (const inst of instances.values()) {
+      disposeScope(inst.scope)
+    }
+    instances.clear()
+
+    out.write(ansi.sgrReset + ansi.showCursor + ansi.exitAltScreen)
+    if (inp.isTTY && inp.setRawMode) inp.setRawMode(false)
+    activeContext = null
+    setSchedulerHook(null)
+  }
+
+  function onExit() {
+    unmount()
+  }
+
+  process.on('exit', onExit)
+
+  return { unmount }
+}

package/src/scheduler.js

@@ -0,0 +1,55 @@
+export function createScheduler({ fps = 60, onFrame } = {}) {
+  const interval = Math.floor(1000 / fps)
+  let lastFrame = 0
+  let queued = false
+  let running = false
+  let timer = null
+
+  function tick() {
+    queued = false
+    timer = null
+
+    const now = Date.now()
+    const elapsed = now - lastFrame
+
+    if (elapsed < interval) {
+      timer = setTimeout(tick, interval - elapsed)
+      queued = true
+      return
+    }
+
+    running = true
+    lastFrame = now
+    onFrame()
+    running = false
+  }
+
+  function requestFrame() {
+    if (queued || running) return
+    queued = true
+    setImmediate(tick)
+  }
+
+  function forceFrame() {
+    if (running) return
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+    queued = false
+    running = true
+    lastFrame = Date.now()
+    onFrame()
+    running = false
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+    queued = false
+  }
+
+  return { requestFrame, forceFrame, destroy }
+}

package/src/scrollable-text.js

@@ -0,0 +1,75 @@
+import { jsx } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useLayout, useTheme } from './hooks.js'
+import { wordWrap } from './wrap.js'
+
+const TRACK = '\u2502'
+const THUMB = '\u2588'
+
+export function ScrollableText({ content = '', focused = true, scrollOffset: offsetProp, onScroll, width: widthProp, scrollbar = false, wrap = true }) {
+  const { accent = 'cyan' } = useTheme()
+  const [offsetInternal, setOffsetInternal] = createSignal(0)
+  const layout = useLayout()
+
+  const offset = offsetProp ?? offsetInternal()
+  const setOffset = onScroll ?? setOffsetInternal
+
+  const rawW = widthProp ?? layout.width
+  const h = layout.height
+  const w = scrollbar ? Math.max(0, rawW - 2) : rawW
+
+  const lines = (wrap && w > 0) ? wordWrap(content, w) : content.split('\n')
+  const maxOffset = Math.max(0, lines.length - (h || 1))
+
+  const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
+
+  useInput(({ key, ctrl }) => {
+    if (!focused) return
+    if (lines.length === 0) return
+
+    const pageH = h || 10
+    const half = Math.max(1, Math.floor(pageH / 2))
+
+    if (key === 'up' || key === 'k') setOffset(clamp(offset - 1))
+    else if (key === 'down' || key === 'j') setOffset(clamp(offset + 1))
+    else if (key === 'pageup' || (ctrl && key === 'b')) setOffset(clamp(offset - pageH))
+    else if (key === 'pagedown' || (ctrl && key === 'f')) setOffset(clamp(offset + pageH))
+    else if (ctrl && key === 'u') setOffset(clamp(offset - half))
+    else if (ctrl && key === 'd') setOffset(clamp(offset + half))
+    else if (key === 'home' || key === 'g') setOffset(0)
+    else if (key === 'end' || key === 'G') setOffset(maxOffset)
+  })
+
+  const visible = lines.slice(offset, h > 0 ? offset + h : undefined)
+
+  const textStyle = wrap ? undefined : { overflow: 'truncate' }
+
+  if (!scrollbar || h <= 0 || lines.length <= h) {
+    const children = visible.map((line, i) =>
+      jsx('text', { key: i, style: textStyle, children: line || ' ' })
+    )
+    return jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children })
+  }
+
+  const thumbH = Math.max(1, Math.round((h / lines.length) * h))
+  const thumbStart = maxOffset > 0
+    ? Math.round((offset / maxOffset) * (h - thumbH))
+    : 0
+
+  const children = visible.map((line, i) => {
+    const isThumb = i >= thumbStart && i < thumbStart + thumbH
+    const barChar = isThumb ? THUMB : TRACK
+    const barColor = isThumb ? (focused ? accent : 'gray') : 'gray'
+
+    return jsx('box', {
+      key: i,
+      style: { flexDirection: 'row', height: 1 },
+      children: [
+        jsx('text', { style: { flexGrow: 1, ...textStyle }, children: line || ' ' }),
+        jsx('text', { style: { color: barColor, dim: !isThumb }, children: ' ' + barChar }),
+      ],
+    })
+  })
+
+  return jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children })
+}