@taliesinb/mash 0.0.0-stage → 0.1.0

package/src/printer/html.ts

@@ -0,0 +1,441 @@
+/**
+ * HTML-native pretty-printing: the same layout as `format`, emitted as
+ * syntax-highlighted spans, with best-effort truncation of over-long words so
+ * lines fit the width. Truncated output is for display only (it is not valid
+ * bash); hidden text stays in the DOM and a click can reveal it.
+ *
+ * Truncation is a small search, not an optimum: render, find lines over the
+ * width, shorten the most suitable atom on each (quoted strings and
+ * substitutions first, never command names or flags), re-render, repeat until
+ * nothing changes. Multi-line atoms (quoted strings, here-doc bodies) get
+ * their continuation lines clipped to the width and are collapsed to their
+ * first lines when they are longer than `maxLines`.
+ */
+
+import type * as A from '../parser/ast.ts'
+import { literalOf, parse } from '../parser/parser.ts'
+import { analyzeScript } from '../analysis/analyze.ts'
+import { concrete, hole, known } from '../analysis/value.ts'
+import { defaultBehaviors } from '../behaviors/index.ts'
+import type { BehaviorRegistry } from '../behaviors/registry.ts'
+import type { AtomDisplay, AtomInfo, Doc, RenderResult } from './doc.ts'
+import { render } from './doc.ts'
+import { Highlight, simpleCommandRoles } from './highlight.ts'
+import { buildDoc, type FormatOptions } from './print.ts'
+
+export interface HtmlOptions extends FormatOptions {
+  /** Shorten over-long atoms so lines fit `width` (default true). */
+  truncate?: boolean
+  /** Lines shown of a multi-line string or here-doc body before collapsing (default 8). */
+  maxLines?: number
+  /** Never shorten an atom's first line below this many columns (default 16). */
+  minKeep?: number
+  /** Re-layout rounds (default 12). */
+  maxIterations?: number
+  /**
+   * Prefer shortening over breaking (default true): a line that fits once its
+   * strings and paths are shortened is not wrapped; the full text stays in
+   * the DOM (and tooltip). False lays out like `format`, then shortens.
+   */
+  preferTruncation?: boolean
+  /**
+   * Resolve file and directory arguments statically (default true): the
+   * working directory at each command comes from the static analysis (it
+   * follows `cd`), starting from `cwd` (unknown when not given). Known paths
+   * get a tooltip (`as written → /absolute/path` when they differ beyond `~`)
+   * and a `data-href="file://…"` that {@link attachHtmlHandlers} opens.
+   */
+  paths?: boolean
+  /** Working directory the snippet starts in. */
+  cwd?: string
+  /** Home directory for `~` (default: $HOME). */
+  home?: string
+}
+
+/** A file or directory argument, as written and (when known statically) absolute. */
+interface PathInfo {
+  written: string
+  abs?: string
+}
+
+/** `/a/./b/../c` → `/a/c` (absolute paths). */
+function normalizePath(p: string): string {
+  const out: string[] = []
+  for (const part of p.split('/')) {
+    if (part === '' || part === '.') continue
+    if (part === '..') out.pop()
+    else out.push(part)
+  }
+  return '/' + out.join('/') + (p.endsWith('/') && out.length ? '/' : '')
+}
+
+let sharedBehaviors: BehaviorRegistry | null = null
+
+/**
+ * File and directory arguments (and redirection targets) by word id, with
+ * their absolute path when the static analysis knows the working directory.
+ */
+function staticPaths(script: A.Script, source: string, cwd: string | undefined, home: string | undefined): Map<number, PathInfo> {
+  const out = new Map<number, PathInfo>()
+  const cwdAt = new Map<number, string | undefined>()
+  try {
+    const report = analyzeScript(script, source, {
+      cwd: cwd ? known(cwd) : hole('path', 'cwd'),
+      env: home ? { HOME: home } : {},
+      policy: { mode: 'danger-full-access', workspaceRoot: cwd ?? '/', writableTemp: true, network: 'allow', unknownCommands: 'allow' },
+      behaviors: (sharedBehaviors ??= defaultBehaviors()),
+    })
+    for (const c of report.commands) cwdAt.set(c.nodeId, concrete(c.cwd))
+  } catch {
+    // display only: paths stay unresolved
+  }
+  const absOf = (w: string, dir: string | undefined): string | undefined => {
+    if (/[*?[\]{}$`\\]/.test(w)) return undefined // globs and anything unexpanded
+    if (w.startsWith('/')) return normalizePath(w)
+    if (w === '~' || w.startsWith('~/')) return home ? normalizePath(home + w.slice(1)) : undefined
+    if (w.startsWith('~')) return undefined // ~user
+    return dir ? normalizePath(`${dir}/${w}`) : undefined
+  }
+  const add = (id: number, w: string | null, dir: string | undefined): void => {
+    if (w === null || w === '') return
+    out.set(id, { written: w, abs: absOf(w, dir) })
+  }
+  const visit = (n: unknown): void => {
+    if (Array.isArray(n)) {
+      for (const x of n) visit(x)
+      return
+    }
+    if (n === null || typeof n !== 'object') return
+    const node = n as A.Node & Record<string, unknown>
+    if (node.type === 'SimpleCommand') {
+      const c = node as unknown as A.SimpleCommand
+      const dir = cwdAt.get(c.id)
+      let roles: ReturnType<typeof simpleCommandRoles> = []
+      try {
+        roles = simpleCommandRoles(c)
+      } catch {
+        // display only
+      }
+      c.words.forEach((w, i) => {
+        if (w.type === 'Word' && (roles[i] === 'file' || roles[i] === 'dir')) add(w.id, literalOf(w), dir)
+      })
+      for (const r of c.redirs) {
+        if (r.heredoc || /&\s*$/.test(source.slice(r.span.start, r.target.span.start))) continue
+        add(r.target.id, literalOf(r.target), dir)
+      }
+    }
+    for (const [k, v] of Object.entries(node)) if (k !== 'span' && v && typeof v === 'object') visit(v)
+  }
+  visit(script.body)
+  return out
+}
+
+/** The tooltip for a path: `as written → absolute` when they differ beyond `~`, else the path. */
+function pathTitle(p: PathInfo, home: string | undefined): string {
+  if (!p.abs) return p.written
+  const tilde = home && (p.written === '~' || p.written.startsWith('~/')) ? home + p.written.slice(1) : p.written
+  return tilde === p.abs || tilde === p.abs.replace(/\/$/, '') ? p.abs : `${p.written} → ${p.abs}`
+}
+
+const fileHref = (abs: string): string => 'file://' + encodeURI(abs).replace(/#/g, '%23').replace(/\?/g, '%3F')
+
+export interface HtmlResult {
+  /** `<pre class="mash">…</pre>` */
+  html: string
+  /** The displayed text (with `…` where truncated). */
+  text: string
+  /** Number of atoms shortened or collapsed. */
+  truncated: number
+  /** Lines still wider than `width` (unbreakable code, not truncatable). */
+  overflowing: number
+}
+
+const ELLIPSIS = '…'
+
+interface Atom extends AtomInfo {
+  start: number
+  end: number
+}
+
+/** Atoms referenced by a document, with their source ranges. */
+function collectAtoms(doc: Doc, out = new Map<number, Atom>()): Map<number, Atom> {
+  if (typeof doc === 'string') return out
+  if (Array.isArray(doc)) {
+    for (const d of doc) collectAtoms(d, out)
+    return out
+  }
+  switch (doc.t) {
+    case 'src':
+    case 'heredoc':
+      if (doc.atom) out.set(doc.atom.id, { ...doc.atom, start: doc.start, end: doc.end })
+      break
+    case 'group': case 'indent': case 'mark': collectAtoms(doc.doc, out); break
+    case 'fill': for (const p of doc.parts) collectAtoms(p, out); break
+    case 'ifBreak': collectAtoms(doc.broken, out); collectAtoms(doc.flat, out); break
+    case 'suffix': collectAtoms(doc.doc, out); break
+    default: break
+  }
+  return out
+}
+
+/**
+ * How an atom is shown under the current limits, or null when it is shown in
+ * full. `first` limits the width of its first line; continuation lines are
+ * clipped to `cols` (they start at column 0); more than `maxLines` lines collapse.
+ */
+/** The narrowest a path atom gets: `…/basename` (whole last component). */
+function tailFloor(source: string, a: Atom): number {
+  const slash = source.lastIndexOf('/', a.end - 2)
+  return slash > a.start ? Math.min(a.end - a.start, 1 + a.end - slash) : a.end - a.start
+}
+
+/** A path shortened from the left at a `/` where possible: `…/pages/395.html`. */
+function tailDisplay(source: string, a: Atom, limit: number): AtomDisplay | null {
+  const full = a.end - a.start
+  if (limit >= full) return null
+  let from = a.end - Math.max(1, limit - 1)
+  const slash = source.indexOf('/', from)
+  if (slash >= 0 && slash < a.end - 1) from = slash
+  if (from <= a.start) return null
+  const parts: AtomDisplay['parts'] = [
+    { kind: 'hide', start: a.start, end: from },
+    { kind: 'mark', text: ELLIPSIS },
+    { kind: 'show', start: from, end: a.end },
+  ]
+  return { text: ELLIPSIS + source.slice(from, a.end), parts }
+}
+
+function displayFor(source: string, a: Atom, first: number, cols: number, maxLines: number): AtomDisplay | null {
+  if (a.tail) return tailDisplay(source, a, first)
+  const lines: [number, number][] = []
+  let pos = a.start
+  while (pos <= a.end) {
+    const nlAt = source.indexOf('\n', pos)
+    const e = nlAt === -1 || nlAt >= a.end ? a.end : nlAt
+    lines.push([pos, e])
+    if (e >= a.end) break
+    pos = e + 1
+  }
+  // a here-doc body ends with a newline: drop the empty line after it
+  if (lines.length > 1 && lines[lines.length - 1][0] === lines[lines.length - 1][1] && a.end > a.start && source[a.end - 1] === '\n') lines.pop()
+  const lastChar = source[a.end - 1]
+  const closeLen = a.kind === 'word' && a.end - a.start > 2 && `'")}\``.includes(lastChar) ? 1 : 0
+  const parts: AtomDisplay['parts'] = []
+  let hidden = false
+  const clip = (ls: number, le: number, limit: number, close: number): void => {
+    if (le - ls <= limit) {
+      parts.push({ kind: 'show', start: ls, end: le })
+      return
+    }
+    const keep = Math.max(1, limit - 1 - close)
+    parts.push({ kind: 'show', start: ls, end: ls + keep })
+    parts.push({ kind: 'hide', start: ls + keep, end: le - close })
+    parts.push({ kind: 'mark', text: ELLIPSIS })
+    if (close) parts.push({ kind: 'show', start: le - close, end: le })
+    hidden = true
+  }
+  const newlineAfter = (i: number): void => {
+    const e = lines[i][1]
+    if (e < a.end && source[e] === '\n') parts.push({ kind: 'show', start: e, end: e + 1 })
+  }
+  const n = lines.length
+  const limitOf = (i: number): number => (i === 0 && a.kind !== 'hd' ? first : cols)
+  const closeOf = (i: number): number => (i === n - 1 ? closeLen : 0)
+  let shown: number[]
+  let collapseFrom = -1
+  let collapseTo = -1
+  if (n > maxLines) {
+    hidden = true
+    if (a.kind === 'hd') {
+      shown = [...Array(maxLines).keys()]
+      collapseFrom = maxLines
+      collapseTo = n
+    } else {
+      shown = [...Array(Math.max(1, maxLines - 1)).keys(), n - 1]
+      collapseFrom = Math.max(1, maxLines - 1)
+      collapseTo = n - 1
+    }
+  } else shown = [...Array(n).keys()]
+  for (const i of shown) {
+    if (i === collapseTo && collapseFrom >= 0) {
+      const hs = lines[collapseFrom][0]
+      parts.push({ kind: 'hide', start: hs, end: lines[i][0] })
+      parts.push({ kind: 'mark', text: `⋯ ${collapseTo - collapseFrom} more lines\n` })
+    }
+    clip(lines[i][0], lines[i][1], limitOf(i), closeOf(i))
+    if (i !== n - 1 || a.kind === 'hd') newlineAfter(i)
+  }
+  if (collapseFrom >= 0 && collapseTo === n) {
+    const hs = lines[collapseFrom][0]
+    parts.push({ kind: 'hide', start: hs, end: a.end })
+    parts.push({ kind: 'mark', text: `⋯ ${collapseTo - collapseFrom} more lines\n` })
+  }
+  if (!hidden) return null
+  const text = parts.map((p) => (p.kind === 'mark' ? p.text : p.kind === 'show' ? source.slice(p.start, p.end) : '')).join('')
+  return { text, parts }
+}
+
+const esc = (s: string): string => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]!)
+
+/** Pretty-print `source` as highlighted (and, by default, truncated) HTML. */
+export function formatHtml(source: string, options: HtmlOptions = {}): HtmlResult {
+  return printScriptHtml(parse(source), source, options)
+}
+
+export function printScriptHtml(script: A.Script, source: string, options: HtmlOptions = {}): HtmlResult {
+  const truncate = options.truncate ?? true
+  const maxLines = options.maxLines ?? 8
+  const minKeep = options.minKeep ?? 16
+  const maxIterations = options.maxIterations ?? 12
+  const { doc, opts } = buildDoc(script, source, options)
+  const width = opts.width
+  const atoms = collectAtoms(doc)
+  const limits = new Map<number, number>()
+  // how far each atom may shrink: paths to `…/basename`, other words to minKeep
+  const floor = new Map<number, number>()
+  for (const a of atoms.values()) {
+    if (a.kind !== 'word' || a.weight <= 0) continue
+    const firstLine = source.slice(a.start, a.end).split('\n')[0].length
+    if (source.slice(a.start, a.end).includes('\n')) continue
+    floor.set(a.id, a.tail ? tailFloor(source, a) : Math.min(firstLine, minKeep))
+  }
+  // prefer shortening atoms over breaking lines: layout measures atoms at their floor
+  const minWidth = truncate && (options.preferTruncation ?? true) ? floor : undefined
+  const hl = new Highlight(script, source)
+
+  let display = new Map<number, AtomDisplay>()
+  let r: RenderResult = render(doc, width, { source })
+  for (let iter = 0; truncate && iter < maxIterations; iter++) {
+    display = new Map()
+    for (const a of atoms.values()) {
+      const d = displayFor(source, a, limits.get(a.id) ?? Infinity, width, maxLines)
+      if (d) display.set(a.id, d)
+    }
+    r = render(doc, width, { source, display, minWidth })
+    const byLine = new Map<number, { id: number; width: number }[]>()
+    for (const [id, pos] of r.atoms) {
+      const list = byLine.get(pos.line) ?? []
+      list.push({ id, width: pos.width })
+      byLine.set(pos.line, list)
+    }
+    let changed = false
+    r.text.split('\n').forEach((line, i) => {
+      let over = line.length - width
+      if (over <= 0) return
+      // shorten the line's atoms, most suitable first (weight × width), each down to its floor, until the overflow is covered
+      const cands = (byLine.get(i) ?? [])
+        .map((c) => ({ ...c, a: atoms.get(c.id), lo: floor.get(c.id) ?? minKeep }))
+        .filter((c) => c.a && c.a.kind !== 'hd' && c.a.weight > 0 && c.width > c.lo)
+        .sort((x, y) => y.a!.weight * y.width - x.a!.weight * x.width)
+      for (const c of cands) {
+        if (over <= 0) break
+        const limit = Math.max(c.lo, c.width - over)
+        if (limit < (limits.get(c.id) ?? Infinity) && limit < c.width) {
+          limits.set(c.id, limit)
+          over -= c.width - limit
+          changed = true
+        }
+      }
+    })
+    if (!changed) break
+  }
+
+  const highlighted = (start: number, end: number, fallback?: string): string =>
+    hl.runs(start, end).map((run) => {
+      const cls = run.cls || fallback || ''
+      return cls ? `<span class="${cls}">${esc(run.text)}</span>` : esc(run.text)
+    }).join('')
+
+  const home = options.home ?? (globalThis as { process?: { env?: Record<string, string | undefined> } }).process?.env?.HOME
+  const paths = options.paths === false ? new Map<number, PathInfo>() : staticPaths(script, source, options.cwd, home)
+  const TITLE_MAX = 2000
+
+  let html = ''
+  for (const p of r.pieces) {
+    const d = p.atom !== undefined ? display.get(p.atom) : undefined
+    const path = p.atom !== undefined ? paths.get(p.atom) : undefined
+    if (d || path) {
+      // one wrapper per atom: path role (whole thing underlined), tooltip, link, truncation state
+      const a = atoms.get(p.atom!)
+      const classes: string[] = []
+      if (path) {
+        const last = p.src ? hl.runs(p.src[1] - 1, p.src[1])[0]?.cls : undefined
+        classes.push('pth', last === 'dir' ? 'dir' : 'file')
+      }
+      if (d) classes.push('tc')
+      const full = a ? source.slice(a.start, a.end) : p.text
+      const title = path ? pathTitle(path, home) : full.length > TITLE_MAX ? full.slice(0, TITLE_MAX) + ELLIPSIS : full
+      const href = path?.abs ? ` data-href="${esc(fileHref(path.abs))}"` : ''
+      html += `<span class="${classes.join(' ')}" title="${esc(title)}"${href}>`
+      if (d) {
+        for (const part of d.parts) {
+          if (part.kind === 'show') html += highlighted(part.start, part.end, p.cls)
+          else if (part.kind === 'hide') html += `<span class="hid">${highlighted(part.start, part.end, p.cls)}</span>`
+          else if (part.kind === 'mark') html += `<span class="el">${esc(part.text)}</span>`
+        }
+      } else if (p.src) html += highlighted(p.src[0], p.src[1], p.cls)
+      else html += esc(p.text)
+      html += '</span>'
+    } else if (p.src) html += highlighted(p.src[0], p.src[1], p.cls)
+    else html += p.cls ? `<span class="${p.cls}">${esc(p.text)}</span>` : esc(p.text)
+  }
+  const overflowing = r.text.split('\n').filter((l) => l.length > width).length
+  return { html: `<pre class="mash">${html}</pre>`, text: r.text, truncated: display.size, overflowing }
+}
+
+/** A DOM element, as far as the click handler needs one (no DOM types in this package). */
+interface ElementLike {
+  closest(selector: string): (ElementLike & { dataset: Record<string, string | undefined>; classList: { toggle(c: string): void } }) | null
+}
+
+/**
+ * Click behavior for HTML output under `root`: a statically known path opens
+ * in a new tab (`file://`; browsers allow that from file:// pages, not from
+ * http ones), any other shortened item expands or collapses.
+ */
+export function attachHtmlHandlers(root: { addEventListener(type: 'click', fn: (e: { target: unknown; preventDefault(): void }) => void): void }): void {
+  root.addEventListener('click', (e) => {
+    const t = e.target as ElementLike | null
+    const link = t?.closest?.('.mash [data-href]')
+    if (link) {
+      e.preventDefault()
+      ;(globalThis as { open?: (url: string, target: string, features: string) => unknown }).open?.(link.dataset.href!, '_blank', 'noopener')
+      return
+    }
+    t?.closest?.('.mash .tc')?.classList.toggle('open')
+  })
+}
+
+/** {@link attachHtmlHandlers} as a script for pages without a module loader: `<script>${HTML_SCRIPT}</script>`. */
+export const HTML_SCRIPT = `(${attachHtmlHandlers.toString()})(document)`
+
+/** Default styles (light and dark). Attach the click handlers with {@link attachHtmlHandlers} or {@link HTML_SCRIPT}. */
+export const HTML_CSS = `
+.mash { --kw:#a626a4; --op:#0184bc; --cmd:#4078f2; --flag:#986801; --str:#50a14f; --esc:#c18401; --var:#e45649;
+  --sub:#0184bc; --ar:#986801; --asg:#e45649; --rd:#0184bc; --hd:#50a14f; --cm:#a0a1a7; --fn:#4078f2; --el:#a0a1a7;
+  --dir:#00838f; --file:#3f51b5; --re:#d84315; --code:#7b5e57; --sc:#7e3fd8;
+  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; margin: 0; tab-size: 4; }
+@media (prefers-color-scheme: dark) {
+  .mash { --kw:#c678dd; --op:#56b6c2; --cmd:#61afef; --flag:#d19a66; --str:#98c379; --esc:#e5c07b; --var:#e06c75;
+    --sub:#56b6c2; --ar:#d19a66; --asg:#e06c75; --rd:#56b6c2; --hd:#98c379; --cm:#7f848e; --fn:#61afef; --el:#7f848e;
+    --dir:#4dd0e1; --file:#9fa8ff; --re:#ff8a65; --code:#c8b5ad; --sc:#c49bff; }
+}
+.mash .kw { color: var(--kw); } .mash .op { color: var(--op); } .mash .cmd { color: var(--cmd); font-weight: 600; }
+.mash .flag { color: var(--flag); } .mash .str { color: var(--str); } .mash .esc { color: var(--esc); }
+.mash .var { color: var(--var); } .mash .sub { color: var(--sub); font-weight: 600; } .mash .ar, .mash .num { color: var(--ar); }
+.mash .asg { color: var(--asg); } .mash .rd { color: var(--rd); } .mash .hd { color: var(--hd); }
+.mash .pth { text-decoration: underline dotted; text-underline-offset: 3px; }
+.mash .pth.dir { text-decoration-color: color-mix(in srgb, var(--dir) 55%, transparent); } .mash .pth.file { text-decoration-color: color-mix(in srgb, var(--file) 55%, transparent); }
+.mash [data-href] { cursor: pointer; } .mash [data-href]:hover { background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 3px; }
+.mash .pth .dir, .mash .pth .file { text-decoration: none; }
+/* paths: dotted underline (both kinds), told apart by color */
+.mash .dir, .mash .file { text-decoration: underline dotted; text-underline-offset: 3px; }
+.mash .dir { color: var(--dir); text-decoration-color: color-mix(in srgb, var(--dir) 45%, transparent); }
+.mash .file { color: var(--file); text-decoration-color: color-mix(in srgb, var(--file) 45%, transparent); }
+.mash .re { color: var(--re); } .mash .code { color: var(--code); } .mash .sc { color: var(--sc); font-weight: 600; }
+.mash .cm { color: var(--cm); font-style: italic; } .mash .fn { color: var(--fn); font-weight: 600; } .mash .ct { color: var(--el); }
+.mash .tc .hid { display: none; } .mash .tc.open .hid { display: inline; } .mash .tc.open > .el { display: none; }
+.mash.sum { display: inline-block; white-space: pre; max-width: 100%; overflow: hidden; vertical-align: bottom; }
+.mash.sum .el { cursor: help; } .mash .tr:hover { background: color-mix(in srgb, var(--el) 15%, transparent); border-radius: 3px; }
+.mash .el { color: var(--el); cursor: pointer; border-radius: 3px; } .mash .el:hover { background: color-mix(in srgb, var(--el) 20%, transparent); }
+`