testHighlightJsx

tcmts.cli.pages.testHighlightJsx · #qdcglsss · term

JSX is highlighted as JSX: text between tags isn't code (an apostrophe in it starts no string), tags and attributes have colours of their own, and a component that's a definition is a link.

import { highlight } from "#codebase/tcmts/cli/pages";
import assert from "node:assert/strict";

export const testHighlightJsx = () => {
  const text = `const Hi = () => <p className="x" aria-label="hi">don't <Name /></p>;`;
  const at = text.indexOf("<Name") + 1;
  const html = highlight(text, [{ start: at, end: at + 4, hash: "h1" }], new Set(), true);
  assert.match(html, /<span class="g">p<\/span> <span class="a">className<\/span>=<span class="s">&quot;x&quot;<\/span> <span class="a">aria-label<\/span>/);
  assert.match(html, /&gt;don't &lt;<a class="ref t" data-hash="h1">Name<\/a> \/&gt;&lt;\/<span class="g">p<\/span>&gt;;$/);
  // without JSX, the scanner reads the text as code
  assert.doesNotMatch(highlight(text, [], new Set()), /don't &lt;/);
}

uses