@react-x11/components 0.9.0 → 0.11.0

package/src/internal/codelines.ts

@@ -0,0 +1,200 @@
+// Code drawn as a column of blocks of lines, under `<Code>` and
+// `<Markdown>`'s fences.
+//
+// One `<richtext>` for a whole block of code is laid out whole whenever any
+// of it changes, and a code block that streams — a model writing a fence a
+// token at a time, a log of source — changes at its end every time: 0.4 s
+// for a line appended to 5,000 in either component. As blocks, a change
+// lays out the blocks it touches. The runs are tokenized afresh on every
+// change, so a block is kept by what it holds rather than by identity: while
+// its runs are the same text in the same styles, its element is the one
+// already drawn.
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { Style } from 'react-x11/style';
+
+import { RICHTEXT_ELEMENT } from '../richtext/index.js';
+import type { RichTextProps, TextRun } from '../richtext/index.js';
+
+const h = React.createElement;
+
+/** Lines a block of code holds. */
+export const CODE_BLOCK_LINES = 256;
+
+/**
+ * Runs split into blocks of `lines` whole lines: the text cut at every
+ * `lines`th newline, that newline left out, so the blocks stacked are the
+ * text again. A newline that ends the whole text stays in its block, where
+ * it draws the empty last line it always drew.
+ */
+export function codeBlocks(
+  runs: readonly TextRun[],
+  lines = CODE_BLOCK_LINES,
+): TextRun[][] {
+  let last = runs.length - 1;
+  while (last >= 0 && runs[last]!.text === '') last--;
+  const blocks: TextRun[][] = [];
+  let block: TextRun[] = [];
+  let count = 0;
+  for (let r = 0; r < runs.length; r++) {
+    const run = runs[r]!;
+    let from = 0;
+    let search = 0;
+    for (;;) {
+      const nl = run.text.indexOf('\n', search);
+      if (nl < 0) break;
+      search = nl + 1;
+      if (++count < lines) continue;
+      // the text's own last newline is a line of its own, and stays
+      if (r === last && nl === run.text.length - 1) break;
+      if (nl > from) block.push(piece(run, from, nl));
+      blocks.push(block);
+      block = [];
+      count = 0;
+      from = nl + 1;
+    }
+    if (from < run.text.length) {
+      block.push(from === 0 ? run : piece(run, from, run.text.length));
+    }
+  }
+  blocks.push(block);
+  return blocks;
+}
+
+function piece(run: TextRun, from: number, to: number): TextRun {
+  return { ...run, text: run.text.slice(from, to) };
+}
+
+/** Whether two runs are the same text in the same style, field for field. */
+function sameRun(a: TextRun, b: TextRun): boolean {
+  if (a === b) return true;
+  const x = a as unknown as Record<string, unknown>;
+  const y = b as unknown as Record<string, unknown>;
+  for (const key in x) if (x[key] !== y[key]) return false;
+  for (const key in y) if (!(key in x) && y[key] !== undefined) return false;
+  return true;
+}
+
+function sameRuns(a: readonly TextRun[], b: readonly TextRun[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (!sameRun(a[i]!, b[i]!)) return false;
+  return true;
+}
+
+function sameStyle(a: Style, b: Style): boolean {
+  return sameRun(a as unknown as TextRun, b as unknown as TextRun);
+}
+
+export interface CodeLinesProps {
+  runs: readonly TextRun[];
+  /** Every block's style, compared by value: a style object built afresh
+   *  each render keeps the blocks. */
+  style: Style;
+  /** `false` lays each block out unwrapped, as `<richtext>` takes it. */
+  wrap?: boolean;
+}
+
+/** The blocks' elements from the last render, and what they were built of. */
+interface Kept {
+  style: Style;
+  wrap: boolean | undefined;
+  blocks: TextRun[][];
+  elements: ReactElement[];
+}
+
+/**
+ * The runs of a block of code, drawn as blocks of lines (`codeBlocks`),
+ * each a `<richtext>` kept while its runs are the same. A selection runs
+ * across the blocks and copies as one text, since core joins text elements
+ * stacked one above the other with a newline.
+ */
+export function CodeLines(props: CodeLinesProps): ReactElement {
+  const { style, wrap } = props;
+  const kept = React.useRef<Kept | null>(null);
+  const was =
+    kept.current &&
+    kept.current.wrap === wrap &&
+    sameStyle(kept.current.style, style)
+      ? kept.current
+      : null;
+  const blocks = codeBlocks(props.runs);
+  const elements = blocks.map((block, i) => {
+    const before = was?.blocks[i];
+    if (before && sameRuns(before, block)) {
+      blocks[i] = before;
+      return was.elements[i]!;
+    }
+    const blockProps: RichTextProps = { runs: block, style };
+    if (wrap === false) blockProps.wrap = false;
+    return h(RICHTEXT_ELEMENT, {
+      key: i,
+      ...blockProps,
+    } as Record<string, unknown>);
+  });
+  kept.current = { style, wrap, blocks, elements };
+  return h(React.Fragment, null, ...elements);
+}
+
+export interface CodeGutterProps {
+  /** Lines in the code beside it. */
+  lines: number;
+  /** How a number is set: the code's family and size, a dimmer colour. */
+  run: Omit<TextRun, 'text'>;
+  style: Style;
+}
+
+/**
+ * The line numbers beside `CodeLines`, blocked the same way so that the two
+ * stay in register a block at a time, and a number not rebuilt for a line
+ * appended far below it. Each number is followed by a newline, the last as
+ * well, as the gutter always was.
+ */
+export function CodeGutter(props: CodeGutterProps): ReactElement {
+  const { lines, run, style } = props;
+  const kept = React.useRef<{
+    run: Omit<TextRun, 'text'>;
+    style: Style;
+    byStart: Map<string, ReactElement>;
+  } | null>(null);
+  if (
+    !kept.current ||
+    !sameRun(kept.current.run as TextRun, run as TextRun) ||
+    !sameStyle(kept.current.style, style)
+  ) {
+    kept.current = { run, style, byStart: new Map() };
+  }
+  const byStart = kept.current.byStart;
+  const elements: ReactElement[] = [];
+  const used = new Set<string>();
+  for (let start = 0; start < lines || start === 0; start += CODE_BLOCK_LINES) {
+    const end = Math.min(start + CODE_BLOCK_LINES, lines);
+    const key = `${start}:${end}`;
+    used.add(key);
+    let element = byStart.get(key);
+    if (!element) {
+      const runs: TextRun[] = [];
+      for (let i = start; i < end; i++) {
+        runs.push({ ...run, text: `${i + 1}\n` } as TextRun);
+      }
+      // the newline that ends a block is the gap to the next one
+      if (end < lines && runs.length > 0) {
+        const tail = runs[runs.length - 1]!;
+        runs[runs.length - 1] = { ...tail, text: tail.text.slice(0, -1) };
+      }
+      element = h(RICHTEXT_ELEMENT, {
+        key: start,
+        // The numbering is chrome, not text: `selectable={false}` keeps it
+        // out of a drag and out of the copied text.
+        selectable: false,
+        runs,
+        wrap: false,
+        style,
+      } as Record<string, unknown>);
+      byStart.set(key, element);
+    }
+    elements.push(element);
+    if (lines === 0) break;
+  }
+  for (const key of byStart.keys()) if (!used.has(key)) byStart.delete(key);
+  return h(React.Fragment, null, ...elements);
+}

package/src/internal/collate.ts

@@ -0,0 +1,12 @@
+// Text compared the way `String#localeCompare` with no locale compares it,
+// with one collator for every comparison. ECMA-402 defines that call as a
+// new `Intl.Collator()`'s `compare`, and V8 made the collator on every call:
+// most of a 100,000-row table sort, and all of a completion list's with
+// nothing typed yet. Made on first use, so importing constructs nothing.
+
+let collator: Intl.Collator | null = null;
+
+/** `a.localeCompare(b)`, without a collator a call. */
+export function compareText(a: string, b: string): number {
+  return (collator ??= new Intl.Collator()).compare(a, b);
+}

package/src/internal/markdown/ast.ts

@@ -253,4 +253,15 @@ export interface ParseOptions {
    * evaluates nothing — an expression is kept as source.
    */
   expressions?: boolean;
+  /**
+   * What this document last parsed into, when the new source is an edit of
+   * that one: the parse then reads only the blocks around the change and
+   * takes the rest from `previous`, the same objects. The answer is the
+   * one a parse from scratch gives, whatever the edit; `previous` only
+   * decides how much of it has to be worked out again. Ignored when it came
+   * from different options or from somewhere other than `parse`, and with
+   * `isComponent`: a component's open tag looks for its close as far as the
+   * end of the document, so no block before an edit is settled.
+   */
+  previous?: Document;
 }

package/src/internal/markdown/parse.ts

@@ -181,31 +181,168 @@ function indentOf(line: string): number {
 
 export function parse(source: string, options: ParseOptions = {}): Document {
   const partial = options.partial !== false;
+  const isComponent = options.isComponent ?? NO_COMPONENTS;
+  const expressions = options.expressions === true;
   const normalized = source.replace(/\r\n?/g, '\n');
   const lines = normalized.split('\n').map(expandLeadingTabs);
+  const previous = options.previous;
+  const was = previous ? resumable.get(previous) : undefined;
+  // Not with components: an open tag looks for its close to the end of the
+  // document (`componentCloseLine`), so a close added anywhere below can
+  // change what it is, and the block before an edit is no longer settled.
+  if (
+    previous &&
+    was &&
+    was.partial === partial &&
+    was.expressions === expressions &&
+    isComponent === NO_COMPONENTS &&
+    was.isComponent === NO_COMPONENTS
+  ) {
+    return resume(previous, was, lines);
+  }
   const blocks: BlockNode[] = [];
   const ranges: Array<[number, number]> = [];
-  parseBlocks(
+  const blanks = new Uint8Array(lines.length);
+  parseBlocks(lines, partial, blocks, ranges, isComponent, expressions, {
+    from: 0,
+    blanks,
+  });
+  return remember(
+    { blocks, raws: ranges.map(([a, b]) => lines.slice(a, b).join('\n')) },
+    { lines, ranges, blanks, partial, isComponent, expressions },
+  );
+}
+
+// --- resuming --------------------------------------------------------------
+
+/**
+ * What a parse leaves for the next parse of the same document to start from
+ * (`ParseOptions.previous`).
+ *
+ * The block loop carries one thing from a block to the next, the paragraph
+ * it is gathering, and it looks only forwards: a block's extent is decided
+ * by the lines up to the first line of the block after it. So `blanks`
+ * marks the lines where the loop stood on a blank line at the top level with
+ * no paragraph open. Two parses standing on such a line, with the same lines
+ * from there to the end, produce the same blocks from there on. That is the
+ * point where an edit's re-parse can stop and take the rest from before.
+ */
+interface Resumable {
+  lines: string[];
+  /** each top-level block's [start, endExcl) line range */
+  ranges: Array<[number, number]>;
+  /** 1 on each line where the top-level loop stood blank with no paragraph */
+  blanks: Uint8Array;
+  partial: boolean;
+  isComponent: (name: string) => boolean;
+  expressions: boolean;
+}
+
+/** Kept beside the documents rather than in them, so a Document stays the
+ *  plain data every caller and test compares. */
+const resumable = new WeakMap<Document, Resumable>();
+
+function remember(doc: Document, state: Resumable): Document {
+  resumable.set(doc, state);
+  return doc;
+}
+
+/**
+ * Parse `lines` as an edit of `previous`: from one block before the first
+ * line that changed, until the loop stands where the previous parse stood
+ * in the lines the edit left alone — or to the end, when it never does (an
+ * unclosed fence swallows the rest of a document either way).
+ */
+function resume(previous: Document, was: Resumable, lines: string[]): Document {
+  const old = was.lines;
+  const oldN = old.length;
+  const n = lines.length;
+  const shortest = Math.min(oldN, n);
+  let first = 0;
+  while (first < shortest && old[first] === lines[first]) first += 1;
+  if (first === oldN && first === n) return previous;
+  // lines at the end the edit did not touch, never counting the prefix twice
+  let same = 0;
+  while (
+    same < shortest - first &&
+    old[oldN - 1 - same] === lines[n - 1 - same]
+  ) {
+    same += 1;
+  }
+  const shift = n - oldN;
+  const suffix = n - same;
+
+  // The first block that reaches the change, and the one before it: a
+  // block's extent is decided by the lines up to the next block's first —
+  // a list looks past blank lines to see whether it goes on — so the block
+  // before the first one touched cannot have depended on the change.
+  const { ranges } = was;
+  let lo = 0;
+  let hi = ranges.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (ranges[mid][1] <= first) lo = mid + 1;
+    else hi = mid;
+  }
+  const kept = Math.max(0, lo - 1);
+  const from = kept === 0 ? 0 : ranges[kept][0];
+
+  const blanks = new Uint8Array(n);
+  blanks.set(was.blanks.subarray(0, from));
+  const blocks: BlockNode[] = previous.blocks.slice(0, kept);
+  const raws = previous.raws.slice(0, kept);
+  const next: Array<[number, number]> = ranges.slice(0, kept);
+  const fresh: Array<[number, number]> = [];
+  const stop = parseBlocks(
     lines,
-    partial,
+    was.partial,
     blocks,
-    ranges,
-    options.isComponent ?? NO_COMPONENTS,
-    options.expressions === true,
+    fresh,
+    was.isComponent,
+    was.expressions,
+    {
+      from,
+      blanks,
+      resync: (i) => i >= suffix && was.blanks[i - shift] === 1,
+    },
   );
-  return {
-    blocks,
-    raws: ranges.map(([a, b]) => lines.slice(a, b).join('\n')),
-  };
+  for (const [a, b] of fresh) {
+    raws.push(lines.slice(a, b).join('\n'));
+    next.push([a, b]);
+  }
+  if (stop < n) {
+    // the previous parse from the same place over the same lines: its
+    // blocks, where they now are
+    const at = stop - shift;
+    blanks.set(was.blanks.subarray(at), stop);
+    let j = ranges.length;
+    while (j > 0 && ranges[j - 1][0] >= at) j -= 1;
+    for (; j < ranges.length; j += 1) {
+      blocks.push(previous.blocks[j]);
+      raws.push(previous.raws[j]);
+      next.push([ranges[j][0] + shift, ranges[j][1] + shift]);
+    }
+  }
+  return remember({ blocks, raws }, { ...was, lines, ranges: next, blanks });
 }
 
 // --- block layer -----------------------------------------------------------
 
+/** The top-level call's extra: where to start, where to record the blank
+ *  lines it stands on, and when to stop (`resume`). */
+interface TopLevel {
+  from: number;
+  blanks: Uint8Array;
+  resync?: (line: number) => boolean;
+}
+
 /**
  * Parse a run of lines into blocks. `tailOpen` says the end of `lines` is
  * the live end of a streaming document — the license for every "complete it
  * anyway" rule. `ranges`, when given, receives each block's [start, endExcl)
  * line range (only the top-level call wants them, for the streaming cache).
+ * Returns the line it stopped at: the end, or where `top.resync` said the
+ * rest would come out as it did before.
  */
 function parseBlocks(
   lines: string[],
@@ -214,8 +351,9 @@ function parseBlocks(
   ranges?: Array<[number, number]>,
   isComponent: (name: string) => boolean = NO_COMPONENTS,
   expressions = false,
-): void {
-  let i = 0;
+  top?: TopLevel,
+): number {
+  let i = top?.from ?? 0;
   const n = lines.length;
 
   let paraStart = -1;
@@ -245,6 +383,10 @@ function parseBlocks(
 
     if (RE_BLANK.test(line)) {
       flushPara(i);
+      if (top) {
+        if (top.resync?.(i)) return i;
+        top.blanks[i] = 1;
+      }
       i += 1;
       continue;
     }
@@ -571,6 +713,7 @@ function parseBlocks(
   }
 
   flushPara(n);
+  return n;
 }
 
 // --- lists -----------------------------------------------------------------

package/src/internal/prewarm.ts

@@ -0,0 +1,45 @@
+// A font family, warmed before the first layout sets text in it.
+import { useMemo } from 'react';
+import { useApp } from 'react-x11';
+
+/** The one method this needs of `app.fonts`, which ntk's FontManager has
+ *  from the release that added it, and other font managers may not. */
+interface PrewarmingFonts {
+  prewarm?: (family: string) => void;
+}
+
+/**
+ * Start matching `family`'s faces now, off the event loop, so that the first
+ * layout setting text in it takes the answer instead of stalling on the
+ * system's font matcher — ntk's `FontManager#prewarm`. fontconfig answers in
+ * 20–40 ms on a Linux desktop and in 80–150 on XQuartz, and nothing warms a
+ * family but sans-serif until a layout asks for it.
+ *
+ * Called while rendering, as React's own resource hints are: a component
+ * renders ahead of the frame that lays it out, and a long document's render
+ * is hundreds of milliseconds of head start that an effect would give away.
+ * Once per family; nothing where the app's fonts have nothing to look up
+ * (fonts in memory, a native text engine) or predate the method.
+ */
+export function useFontPrewarm(family: string | null | undefined): void {
+  const fonts = (useApp() as { fonts?: PrewarmingFonts } | null)?.fonts;
+  useMemo(() => {
+    if (family) fonts?.prewarm?.(family);
+  }, [fonts, family]);
+}
+
+/** The font family a style names, read the way core flattens one — the last
+ *  entry of an array that names it wins — or `fallback`. */
+export function styleFamily(style: unknown, fallback: string): string {
+  let family = fallback;
+  const visit = (entry: unknown): void => {
+    if (Array.isArray(entry)) {
+      for (const e of entry) visit(e);
+    } else if (entry && typeof entry === 'object') {
+      const named = (entry as { fontFamily?: unknown }).fontFamily;
+      if (typeof named === 'string') family = named;
+    }
+  };
+  visit(style);
+  return family;
+}