@ultimat3/ui 29.3.2 → 30.0.0

package/src/content/highlight.ts

@@ -0,0 +1,129 @@
+// A small tokenizer: a language is an ordered list of sticky regex rules, and the text is cut into
+// classed runs whose JOINED text is the input byte for byte. Classes only — the colours are roles,
+// so a theme recolours. Unknown language: one plain run. `defineLanguage` is the mechanism.
+
+import { renderCauseValue } from '@ultimat3/core';
+import { UI_ERROR_CODES, UiError } from '../errors';
+
+/** The closed set of classes a run can carry; `CodeBlock.module.scss` styles each by role. */
+export const TOKEN_KINDS = [
+  'plain',
+  'keyword',
+  'string',
+  'number',
+  'comment',
+  'type',
+  'function',
+  'property',
+  'tag',
+  'attribute',
+  'operator',
+  'punctuation',
+  'inserted',
+  'deleted',
+  'meta',
+] as const;
+
+export type TokenKind = (typeof TOKEN_KINDS)[number];
+
+export interface Token {
+  readonly kind: TokenKind;
+  readonly text: string;
+}
+
+export interface TokenRule {
+  readonly kind: TokenKind;
+  readonly pattern: RegExp;
+}
+
+export interface Language {
+  readonly name: string;
+  /** Fence info strings that also name it: `typescript`, `js`, `sh`. */
+  readonly aliases: readonly string[];
+  readonly rules: readonly TokenRule[];
+}
+
+/** Each rule compiled once, sticky, so a match is tried AT a position and never searches ahead. */
+const COMPILED = new WeakMap<Language, readonly { kind: TokenKind; re: RegExp }[]>();
+
+function emptyMatchError(language: string, rule: TokenRule): UiError {
+  return new UiError({
+    code: UI_ERROR_CODES.invalidValue,
+    cause: `defineLanguage(${renderCauseValue(language)}): the ${rule.kind} rule ${renderCauseValue(String(rule.pattern))} can match the empty string, which would cut no text and loop`,
+    fix: "defineLanguage('mylang', [{ kind: 'keyword', pattern: /\\b(?:if|else)\\b/ }])   # every rule must consume at least one character",
+  });
+}
+
+/**
+ * Declares a language. A rule whose pattern can match empty is refused here, where it is written,
+ * rather than discovered as a stall on someone's text.
+ */
+export function defineLanguage(
+  name: string,
+  rules: readonly TokenRule[],
+  aliases: readonly string[] = [],
+): Language {
+  const compiled = rules.map((rule) => {
+    const re = new RegExp(rule.pattern.source, `${rule.pattern.flags.replace(/[gy]/g, '')}y`);
+    re.lastIndex = 0;
+    if (re.test('')) throw emptyMatchError(name, rule);
+    return { kind: rule.kind, re };
+  });
+  const language: Language = { name, aliases, rules };
+  COMPILED.set(language, compiled);
+  return language;
+}
+
+/** The language a fence's info string names, among those the caller passed. */
+export function findLanguage(
+  info: string | undefined,
+  languages: readonly Language[] | undefined,
+): Language | undefined {
+  if (info === undefined || languages === undefined) return undefined;
+  const name = info.trim().split(/\s/, 1)[0]?.toLowerCase() ?? '';
+  if (name === '') return undefined;
+  return languages.find((language) => language.name === name || language.aliases.includes(name));
+}
+
+const WORD = /[\p{L}\p{N}_$]+/uy;
+
+/** The runs of `text`. Adjacent runs of one kind are merged; the joined runs equal `text`. */
+export function highlight(text: string, language: Language | undefined): readonly Token[] {
+  const rules = language === undefined ? undefined : COMPILED.get(language);
+  if (rules === undefined || rules.length === 0)
+    return text === '' ? [] : [{ kind: 'plain', text }];
+  const out: Token[] = [];
+  const push = (kind: TokenKind, piece: string): void => {
+    const last = out[out.length - 1];
+    if (last !== undefined && last.kind === kind)
+      out[out.length - 1] = { kind, text: last.text + piece };
+    else out.push({ kind, text: piece });
+  };
+  let at = 0;
+  while (at < text.length) {
+    let matched = false;
+    for (const rule of rules) {
+      rule.re.lastIndex = at;
+      const found = rule.re.exec(text);
+      // Zero-width is refused at definition, but a lookahead can still match empty mid-text.
+      if (found === null || found[0].length === 0) continue;
+      push(rule.kind, found[0]);
+      at += found[0].length;
+      matched = true;
+      break;
+    }
+    if (matched) continue;
+    // A whole word at once, so an identifier is never split for a keyword rule to bite its tail.
+    WORD.lastIndex = at;
+    const word = WORD.exec(text);
+    const piece =
+      word === null
+        ? (text.codePointAt(at) ?? 0) > 0xffff
+          ? text.slice(at, at + 2)
+          : (text[at] ?? '')
+        : word[0];
+    push('plain', piece);
+    at += piece.length;
+  }
+  return out;
+}

package/src/content/languages/all.ts

@@ -0,0 +1,21 @@
+// Every built-in language, for a SERVER page where bytes cost nothing. An island passes only the
+// languages it shows: importing this module from one retains all seven.
+
+import type { Language } from '../highlight';
+import { diffLanguage } from './diff';
+import { htmlLanguage } from './html';
+import { jsonLanguage } from './json';
+import { shellLanguage } from './shell';
+import { sqlLanguage } from './sql';
+import { tsLanguage } from './ts';
+import { yamlLanguage } from './yaml';
+
+export const allLanguages: readonly Language[] = [
+  tsLanguage,
+  jsonLanguage,
+  shellLanguage,
+  sqlLanguage,
+  htmlLanguage,
+  yamlLanguage,
+  diffLanguage,
+];

package/src/content/languages/diff.ts

@@ -0,0 +1,14 @@
+// A unified diff as text: file headers, hunk headers, and whole added and removed lines.
+
+import { defineLanguage } from '../highlight';
+
+export const diffLanguage = /* @__PURE__ */ defineLanguage(
+  'diff',
+  [
+    { kind: 'meta', pattern: /^(?:diff |index |--- |\+\+\+ )[^\n]*/m },
+    { kind: 'keyword', pattern: /^@@[^\n]*/m },
+    { kind: 'inserted', pattern: /^\+[^\n]*/m },
+    { kind: 'deleted', pattern: /^-[^\n]*/m },
+  ],
+  ['patch', 'udiff'],
+);

package/src/content/languages/html.ts

@@ -0,0 +1,16 @@
+// HTML and XML markup: comments, tags, attribute names and values. Text between tags is plain.
+
+import { defineLanguage } from '../highlight';
+
+export const htmlLanguage = /* @__PURE__ */ defineLanguage(
+  'html',
+  [
+    { kind: 'comment', pattern: /<!--[\s\S]*?(?:-->|$)/ },
+    { kind: 'meta', pattern: /<!doctype[^>\n]*>?/i },
+    { kind: 'tag', pattern: /<\/?[a-z][\w:-]*|\/?>/i },
+    { kind: 'string', pattern: /"[^"\n]*"?|'[^'\n]*'?/ },
+    { kind: 'attribute', pattern: /\b[a-z_:][\w:.-]*(?==)/i },
+    { kind: 'operator', pattern: /=/ },
+  ],
+  ['xml', 'svg', 'xhtml'],
+);

package/src/content/languages/json.ts

@@ -0,0 +1,15 @@
+// JSON: a key is a string followed by a colon; everything else is a value or punctuation.
+
+import { defineLanguage } from '../highlight';
+
+export const jsonLanguage = /* @__PURE__ */ defineLanguage(
+  'json',
+  [
+    { kind: 'property', pattern: /"(?:[^"\\\n]|\\.)*"(?=\s*:)/ },
+    { kind: 'string', pattern: /"(?:[^"\\\n]|\\.)*"?/ },
+    { kind: 'number', pattern: /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i },
+    { kind: 'keyword', pattern: /\b(?:true|false|null)\b/ },
+    { kind: 'punctuation', pattern: /[{}[\],:]/ },
+  ],
+  ['jsonc', 'json5'],
+);

package/src/content/languages/shell.ts

@@ -0,0 +1,20 @@
+// POSIX shell: comments, quoted strings, variables, the usual keywords and a command's flags.
+
+import { defineLanguage } from '../highlight';
+
+export const shellLanguage = /* @__PURE__ */ defineLanguage(
+  'shell',
+  [
+    { kind: 'comment', pattern: /(?<![^\s;|&])#[^\n]*/ },
+    { kind: 'string', pattern: /"(?:[^"\\]|\\[\s\S])*"?|'[^']*'?/ },
+    { kind: 'property', pattern: /\$(?:\{[^}\n]*\}?|\w+|[@*#?$!0-9-])/ },
+    {
+      kind: 'keyword',
+      pattern:
+        /\b(?:if|then|else|elif|fi|for|while|until|do|done|case|esac|in|function|return|export|local|set|unset)\b/,
+    },
+    { kind: 'attribute', pattern: /(?<![\w-])--?[\w][\w-]*/ },
+    { kind: 'operator', pattern: /&&|\|\||[|&;<>]+/ },
+  ],
+  ['sh', 'bash', 'zsh', 'console', 'shellsession'],
+);

package/src/content/languages/sql.ts

@@ -0,0 +1,27 @@
+// SQL: comments, strings, quoted identifiers and the keywords Postgres reads most.
+
+import { defineLanguage } from '../highlight';
+
+export const sqlLanguage = /* @__PURE__ */ defineLanguage(
+  'sql',
+  [
+    { kind: 'comment', pattern: /--[^\n]*|\/\*[\s\S]*?(?:\*\/|$)/ },
+    { kind: 'string', pattern: /'(?:[^']|'')*'?/ },
+    { kind: 'property', pattern: /"(?:[^"]|"")*"?/ },
+    { kind: 'number', pattern: /\b\d+(?:\.\d+)?\b/ },
+    {
+      kind: 'keyword',
+      pattern:
+        /\b(?:select|from|where|and|or|not|insert|into|values|update|set|delete|create|alter|drop|table|index|view|on|join|left|right|inner|outer|cross|group|by|order|having|limit|offset|as|distinct|union|all|case|when|then|else|end|null|is|in|exists|between|like|ilike|primary|key|references|foreign|unique|default|constraint|returning|with|begin|commit|rollback|asc|desc|true|false|check|cascade)\b/i,
+    },
+    {
+      kind: 'type',
+      pattern:
+        /\b(?:int|integer|bigint|smallint|text|varchar|char|boolean|bool|uuid|jsonb?|timestamptz?|date|numeric|serial|bigserial|bytea)\b/i,
+    },
+    { kind: 'function', pattern: /\b[a-z_]\w*(?=\()/i },
+    { kind: 'operator', pattern: /[=<>!]=?|<>|::|\|\||[+\-*/%]/ },
+    { kind: 'punctuation', pattern: /[(),;.]/ },
+  ],
+  ['postgres', 'postgresql', 'psql', 'pgsql'],
+);

package/src/content/languages/ts.ts

@@ -0,0 +1,26 @@
+// TypeScript and JavaScript: comments, strings and templates (line-bounded but for templates and
+// block comments, which run to the end of an unterminated input rather than rescanning it).
+
+import { defineLanguage } from '../highlight';
+
+export const tsLanguage = /* @__PURE__ */ defineLanguage(
+  'ts',
+  [
+    { kind: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?(?:\*\/|$)/ },
+    {
+      kind: 'string',
+      pattern: /"(?:[^"\\\n]|\\.)*"?|'(?:[^'\\\n]|\\.)*'?|`(?:[^`\\]|\\[\s\S])*`?/,
+    },
+    { kind: 'number', pattern: /\b(?:0[xob][\da-f_]+|\d[\d_]*(?:\.\d[\d_]*)?(?:e[+-]?\d+)?)n?\b/i },
+    {
+      kind: 'keyword',
+      pattern:
+        /\b(?:as|async|await|break|case|catch|class|const|continue|default|delete|do|else|enum|export|extends|false|finally|for|from|function|if|implements|import|in|instanceof|interface|let|new|null|of|private|protected|public|readonly|return|satisfies|static|super|switch|this|throw|true|try|type|typeof|undefined|var|void|while|yield)\b/,
+    },
+    { kind: 'type', pattern: /\b[A-Z][\w$]*\b/ },
+    { kind: 'function', pattern: /\b[a-z_$][\w$]*(?=\()/ },
+    { kind: 'operator', pattern: /=>|[=!<>]=?=?|&&|\|\||\?\?|[+\-*/%&|^~?]=?/ },
+    { kind: 'punctuation', pattern: /[{}()[\];,.:]/ },
+  ],
+  ['typescript', 'tsx', 'js', 'javascript', 'jsx', 'mjs', 'cjs'],
+);

package/src/content/languages/yaml.ts

@@ -0,0 +1,18 @@
+// YAML: comments, keys before a colon, quoted scalars, anchors, document markers and list dashes.
+
+import { defineLanguage } from '../highlight';
+
+export const yamlLanguage = /* @__PURE__ */ defineLanguage(
+  'yaml',
+  [
+    { kind: 'comment', pattern: /(?<![^\s])#[^\n]*/ },
+    { kind: 'meta', pattern: /^(?:---|\.\.\.)(?=\s|$)/m },
+    { kind: 'property', pattern: /[\w.-][\w .-]*(?=:(?:\s|$))/ },
+    { kind: 'string', pattern: /"(?:[^"\\\n]|\\.)*"?|'(?:[^'\n]|'')*'?/ },
+    { kind: 'keyword', pattern: /\b(?:true|false|null|yes|no|on|off)\b/i },
+    { kind: 'number', pattern: /-?\b\d+(?:\.\d+)?\b/ },
+    { kind: 'attribute', pattern: /[&*][\w-]+|![\w!/-]*/ },
+    { kind: 'punctuation', pattern: /[:\-?[\]{},|>]/ },
+  ],
+  ['yml'],
+);

package/src/content/line-diff.ts

@@ -0,0 +1,191 @@
+// Myers' diff over lines, then word marks inside each changed pair. Bounded on hostile input: the
+// common ends are trimmed first, and past `maxEdits` the middle is reported as removed-then-added
+// rather than searched quadratically. The rows are what `DiffView` and a unified patch share.
+
+/** One row of a diff, numbered on the side(s) it exists on. `marks` are changed char ranges. */
+export type DiffRow =
+  | {
+      readonly kind: 'context' | 'add' | 'del';
+      readonly old?: number | undefined;
+      readonly new?: number | undefined;
+      readonly text: string;
+      readonly marks?: readonly (readonly [number, number])[] | undefined;
+    }
+  | { readonly kind: 'hunk' | 'file'; readonly text: string }
+  | { readonly kind: 'fold'; readonly count: number };
+
+export type DiffOp = 'equal' | 'add' | 'del';
+
+/** Past this many edits the search stops; the rest is a plain replace, in linear time. */
+export const DIFF_MAX_EDITS = 1_000;
+
+/** The edit script turning `a` into `b`, as one op per element, Myers O((N+M)·D) within the cap. */
+export function diffOps<T>(a: readonly T[], b: readonly T[], maxEdits = DIFF_MAX_EDITS): DiffOp[] {
+  let head = 0;
+  while (head < a.length && head < b.length && a[head] === b[head]) head += 1;
+  let tail = 0;
+  while (
+    tail < a.length - head &&
+    tail < b.length - head &&
+    a[a.length - 1 - tail] === b[b.length - 1 - tail]
+  )
+    tail += 1;
+  const x0 = a.slice(head, a.length - tail);
+  const y0 = b.slice(head, b.length - tail);
+  const middle = myers(x0, y0, maxEdits) ?? [
+    ...x0.map((): DiffOp => 'del'),
+    ...y0.map((): DiffOp => 'add'),
+  ];
+  return [
+    ...new Array<DiffOp>(head).fill('equal'),
+    ...middle,
+    ...new Array<DiffOp>(tail).fill('equal'),
+  ];
+}
+
+function myers<T>(a: readonly T[], b: readonly T[], maxEdits: number): DiffOp[] | null {
+  const n = a.length;
+  const m = b.length;
+  const max = Math.min(n + m, maxEdits);
+  const offset = max + 1;
+  let v = new Int32Array(2 * max + 3);
+  const trace: Int32Array[] = [];
+  for (let d = 0; d <= max; d += 1) {
+    trace.push(v.slice());
+    const next = v.slice();
+    for (let k = -d; k <= d; k += 2) {
+      const down = k === -d || (k !== d && (v[offset + k - 1] ?? 0) < (v[offset + k + 1] ?? 0));
+      let x = down ? (v[offset + k + 1] ?? 0) : (v[offset + k - 1] ?? 0) + 1;
+      let y = x - k;
+      while (x < n && y < m && a[x] === b[y]) {
+        x += 1;
+        y += 1;
+      }
+      next[offset + k] = x;
+      if (x >= n && y >= m) return backtrack(trace, next, n, m, offset);
+    }
+    v = next;
+  }
+  return null;
+}
+
+function backtrack(
+  trace: readonly Int32Array[],
+  last: Int32Array,
+  n: number,
+  m: number,
+  offset: number,
+): DiffOp[] {
+  const ops: DiffOp[] = [];
+  let x = n;
+  let y = m;
+  for (let d = trace.length - 1; d >= 0; d -= 1) {
+    const v = trace[d] ?? last;
+    const k = x - y;
+    const down = k === -d || (k !== d && (v[offset + k - 1] ?? 0) < (v[offset + k + 1] ?? 0));
+    const prevK = down ? k + 1 : k - 1;
+    const prevX = d === 0 ? 0 : (v[offset + prevK] ?? 0);
+    const prevY = prevX - prevK;
+    while (x > prevX && y > prevY) {
+      ops.push('equal');
+      x -= 1;
+      y -= 1;
+    }
+    if (d > 0) ops.push(down ? 'add' : 'del');
+    x = prevX;
+    y = prevY;
+  }
+  return ops.reverse();
+}
+
+const WORDS = /\s+|[\p{L}\p{N}_]+|[^\s\p{L}\p{N}_]/gu;
+/** A changed pair longer than this many words gets no marks: the line itself is the mark. */
+const MARK_MAX_WORDS = 400;
+
+/** Changed character ranges in a removed line and its added partner. */
+export function wordMarks(
+  before: string,
+  after: string,
+): readonly [readonly (readonly [number, number])[], readonly (readonly [number, number])[]] {
+  const a = before.match(WORDS) ?? [];
+  const b = after.match(WORDS) ?? [];
+  if (a.length > MARK_MAX_WORDS || b.length > MARK_MAX_WORDS) return [[], []];
+  const ops = diffOps(a, b, MARK_MAX_WORDS);
+  const left: [number, number][] = [];
+  const right: [number, number][] = [];
+  let i = 0;
+  let j = 0;
+  let at = 0;
+  let bt = 0;
+  const mark = (into: [number, number][], from: number, to: number): void => {
+    const prev = into[into.length - 1];
+    if (prev !== undefined && prev[1] === from) prev[1] = to;
+    else into.push([from, to]);
+  };
+  for (const op of ops) {
+    if (op !== 'add') {
+      const len = (a[i] ?? '').length;
+      if (op === 'del') mark(left, at, at + len);
+      at += len;
+      i += 1;
+    }
+    if (op !== 'del') {
+      const len = (b[j] ?? '').length;
+      if (op === 'add') mark(right, bt, bt + len);
+      bt += len;
+      j += 1;
+    }
+  }
+  return [left, right];
+}
+
+/** Numbered rows from two texts, word-marked where a removed run meets an added one. */
+export function lineDiff(before: string, after: string, maxEdits = DIFF_MAX_EDITS): DiffRow[] {
+  const a = before === '' ? [] : before.replace(/\r\n?/g, '\n').split('\n');
+  const b = after === '' ? [] : after.replace(/\r\n?/g, '\n').split('\n');
+  const rows: DiffRow[] = [];
+  let i = 0;
+  let j = 0;
+  for (const op of diffOps(a, b, maxEdits)) {
+    if (op === 'equal') {
+      rows.push({ kind: 'context', old: i + 1, new: j + 1, text: a[i] ?? '' });
+      i += 1;
+      j += 1;
+    } else if (op === 'del') {
+      rows.push({ kind: 'del', old: i + 1, text: a[i] ?? '' });
+      i += 1;
+    } else {
+      rows.push({ kind: 'add', new: j + 1, text: b[j] ?? '' });
+      j += 1;
+    }
+  }
+  return markPairs(rows);
+}
+
+/** Pairs each run of removed rows with the added run after it, index by index, and marks words. */
+export function markPairs(rows: readonly DiffRow[]): DiffRow[] {
+  const out = [...rows];
+  for (let r = 0; r < out.length; ) {
+    let dels = r;
+    while (out[dels]?.kind === 'del') dels += 1;
+    let adds = dels;
+    while (out[adds]?.kind === 'add') adds += 1;
+    const pairs = Math.min(dels - r, adds - dels);
+    for (let p = 0; p < pairs; p += 1) {
+      const del = out[r + p];
+      const add = out[dels + p];
+      if (del === undefined || add === undefined || !('text' in del) || !('text' in add)) continue;
+      const [left, right] = wordMarks(del.text, add.text);
+      out[r + p] = { ...del, marks: left } as DiffRow;
+      out[dels + p] = { ...add, marks: right } as DiffRow;
+    }
+    r = adds === r ? r + 1 : adds;
+  }
+  return out;
+}
+
+/** At most `maxLines` rows, then one fold saying how many were left out. */
+export function foldRows(rows: readonly DiffRow[], maxLines: number): readonly DiffRow[] {
+  if (rows.length <= maxLines) return rows;
+  return [...rows.slice(0, maxLines), { kind: 'fold', count: rows.length - maxLines }];
+}