@gjermundgaraba-designs/simple-rat 0.7.0 → 0.8.0

package/highlight/highlight.ts

@@ -1,128 +1,98 @@
-// Syntax colours for code blocks, by Shiki, for a build to run: the theme maps TextMate
-// scopes to the --t-* tokens in tokens.css (Catppuccin: Latte in light, darkened for AA;
-// Mocha in dark), so the colours switch with the page. It sits outside src/, which never
-// imports it: a page is given the lines `highlight` made (vite.ts makes them of a file).
-import { createHighlighterCoreSync, type ThemeRegistration } from "shiki/core";
-import { createJavaScriptRawEngine } from "shiki/engine/javascript";
-import css from "@shikijs/langs-precompiled/css";
-import diff from "@shikijs/langs-precompiled/diff";
-import html from "@shikijs/langs-precompiled/html";
-import json from "@shikijs/langs-precompiled/json";
-import shellscript from "@shikijs/langs-precompiled/shellscript";
-import tsx from "@shikijs/langs-precompiled/tsx";
+import { codeToTokens } from "@pierre/highlights";
+import type { Theme, ThemeSyntaxSettings } from "@pierre/highlights";
 
 import type { Language, Lines } from "../src/code/code.ts";
 
-const t = (token: string) => `var(--t-${token})`;
+type Syntax = Record<string, string | ThemeSyntaxSettings>;
 
-const codeTheme: ThemeRegistration = {
-  name: "simple-rat",
-  type: "light",
-  colors: { "editor.foreground": "var(--code-ink)", "editor.background": "var(--code-fill)" },
-  tokenColors: [
-    {
-      scope: ["comment", "punctuation.definition.comment", "meta.diff.header"],
-      settings: { foreground: t("com"), fontStyle: "italic" },
-    },
-    {
-      scope: [
-        "string",
-        "punctuation.definition.string",
-        "string.unquoted.argument",
-        "markup.inserted",
-      ],
-      settings: { foreground: t("str") },
-    },
-    {
-      scope: [
-        "constant.numeric",
-        "constant.language",
-        "constant.character",
-        "constant.other.color",
-        "keyword.other.unit",
-        "support.constant.property-value",
-        "variable.language.this",
-      ],
-      settings: { foreground: t("num") },
-    },
-    {
-      scope: [
-        "keyword",
-        "storage.type",
-        "storage.modifier",
-        "keyword.control.at-rule",
-        "support.function.misc.css",
-        "support.function.transform.css",
-        "meta.diff.range",
-      ],
-      settings: { foreground: t("kw") },
-    },
-    {
-      scope: [
-        "keyword.operator",
-        "punctuation.definition.tag",
-        "storage.type.function.arrow",
-        "punctuation.separator.pipe",
-      ],
-      settings: { foreground: t("op") },
-    },
-    {
-      scope: [
-        "entity.name.type",
-        "support.type.primitive",
-        "support.class",
-        "entity.other.inherited-class",
-        "entity.other.attribute-name",
-        "entity.name.tag.css",
-        "support.type.builtin",
-      ],
-      settings: { foreground: t("ty") },
-    },
-    {
-      scope: [
-        "entity.name.function",
-        "support.function",
-        "entity.name.tag",
-        "support.class.component",
-        "support.type.property-name",
-        "variable.css",
-      ],
-      settings: { foreground: t("fn") },
-    },
-    {
-      scope: ["entity.name.command", "support.function.builtin.shell"],
-      settings: { foreground: t("fn"), fontStyle: "italic" },
-    },
-    {
-      scope: [
-        "variable.other.property",
-        "variable.other.object.property",
-        "meta.object-literal.key",
-        "variable.argument.css",
-      ],
-      settings: { foreground: t("prop") },
-    },
-    { scope: "markup.deleted", settings: { foreground: t("del") } },
-  ],
+const ITALIC_FONT_STYLE_BIT = 1;
+
+const SYNTAX = {
+  comment: { color: "com", font_style: "italic" },
+  string: "str",
+  "diff.plus": "str",
+  number: "num",
+  boolean: "num",
+  constant: "num",
+  "variable.special": "num",
+  keyword: "kw",
+  "keyword.operator": "op",
+  operator: "op",
+  "punctuation.bracket.html": "op",
+  "punctuation.bracket.jsx": "op",
+  type: "ty",
+  attribute: "ty",
+  selector: "ty",
+  function: "fn",
+  tag: "fn",
+  "property.json_key": "fn",
+  property: "prop",
+  "diff.minus": "del",
+} satisfies Syntax;
+
+const OVERRIDES: Partial<Record<Language, Syntax>> = {
+  css: { property: "fn", variable: "prop", function: "kw", tag: "ty" },
+  sh: { function: { color: "fn", font_style: "italic" } },
+  diff: { attribute: "kw" },
 };
 
-// Built once, when a build first imports this file. The grammars come precompiled, so
-// nothing translates their patterns. TypeScript is read with the TSX grammar.
-const highlighter = createHighlighterCoreSync({
-  themes: [codeTheme],
-  langs: [css, diff, html, json, shellscript, tsx],
-  langAlias: { ts: "tsx" },
-  engine: createJavaScriptRawEngine(),
+const themeOf = (syntax: Syntax): Theme => ({
+  name: "simple-rat",
+  appearance: "light",
+  style: { syntax },
+  cssVariables: { prefix: "--t-" },
 });
 
+const BASE = themeOf(SYNTAX);
+
+const THEMES: Record<Language, Theme> = {
+  ts: BASE,
+  tsx: BASE,
+  json: BASE,
+  html: BASE,
+  css: themeOf({ ...SYNTAX, ...OVERRIDES.css }),
+  sh: themeOf({ ...SYNTAX, ...OVERRIDES.sh }),
+  diff: themeOf({ ...SYNTAX, ...OVERRIDES.diff }),
+};
+
+interface Run {
+  content: string;
+  color: string | undefined;
+  isItalic: boolean;
+}
+
 /** A block's runs, line by line, for `CodeBlock`'s `lines`. A run in the plain code ink,
     upright, has no colour. */
-export const highlight = (code: string, lang: Language): Lines =>
-  highlighter.codeToTokens(code, { lang, theme: "simple-rat" }).tokens.map((line) =>
-    line.map((token) => {
-      // Italic is bit 1 of Shiki's font style.
-      const isItalic = ((token.fontStyle ?? 0) & 1) === 1;
-      const isPlain = token.color === "var(--code-ink)" && !isItalic;
-      return { content: token.content, color: isPlain ? undefined : token.color, isItalic };
-    }),
-  );
+export const highlight = (code: string, lang: Language): Lines => {
+  const { tokens, fg } = codeToTokens(code, { lang, theme: THEMES[lang] });
+
+  return tokens.map((line) => {
+    const runs: Run[] = [];
+
+    for (const token of line) {
+      const isBlank = token.content.trim() === "";
+
+      const isItalic =
+        !isBlank &&
+        ((token.fontStyle ?? 0) & ITALIC_FONT_STYLE_BIT) ===
+          ITALIC_FONT_STYLE_BIT;
+
+      const color =
+        isBlank || (token.color === fg && !isItalic) ? undefined : token.color;
+
+      const last = runs.at(-1);
+
+      if (
+        last !== undefined &&
+        last.color === color &&
+        last.isItalic === isItalic
+      ) {
+        last.content += token.content;
+      } else {
+        runs.push({ content: token.content, color, isItalic });
+      }
+    }
+
+    return runs;
+  });
+};

package/highlight/vite.ts

@@ -1,14 +1,17 @@
 import { readFile } from "node:fs/promises";
 
-import { LANGUAGES, type Language } from "../src/code/code.ts";
+import type { foldkitViewIdentity } from "@foldkit/vite-plugin";
+
+import { LANGUAGES } from "../src/code/code.ts";
+import type { Language } from "../src/code/code.ts";
 import { highlight } from "./highlight.ts";
 
-type Plugin = ReturnType<typeof import("@foldkit/vite-plugin").foldkitViewIdentity>;
+type Plugin = ReturnType<typeof foldkitViewIdentity>;
 
-// A file's path, then `lines=<lang>` anywhere in its query.
-const LINES_IMPORT = /^([^?]+)\?(?:.*&)?lines=([^&]*)/;
+const LINES_IMPORT = /^(?<file>[^?]+)\?(?:.*&)?lines=(?<lang>[^&]*)/u;
 
-const isLanguage = (lang: string): lang is Language => LANGUAGES.some((known) => known === lang);
+const isLanguage = (lang: string): lang is Language =>
+  LANGUAGES.some((known) => known === lang);
 
 /**
  * Colours code while the site is built, so no page loads the highlighter. An import with the
@@ -27,16 +30,23 @@ const isLanguage = (lang: string): lang is Language => LANGUAGES.some((known) =>
  */
 export const codeLines = (): Plugin => ({
   name: "simple-rat:code-lines",
-  // Before Vite's own loaders, which would take a .txt for an asset.
   enforce: "pre",
   async load(id) {
-    const [, file, lang] = LINES_IMPORT.exec(id) ?? [];
-    if (file === undefined || lang === undefined) return null;
+    const { file, lang } = LINES_IMPORT.exec(id)?.groups ?? {};
+
+    if (file === undefined || lang === undefined) {
+      return null;
+    }
+
     if (!isLanguage(lang)) {
-      return this.error(`simple-rat: ?lines=${lang} is none of ${LANGUAGES.join(", ")}`);
+      return this.error(
+        `simple-rat: ?lines=${lang} is none of ${LANGUAGES.join(", ")}`
+      );
     }
+
     this.addWatchFile(file);
-    const code = await readFile(file, "utf8");
+    const code = await readFile(file, "utf-8");
+
     return `export default ${JSON.stringify({ code, lines: highlight(code, lang) })};`;
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/simple-rat",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,28 +43,27 @@
     "access": "public"
   },
   "dependencies": {
-    "@shikijs/langs-precompiled": "^4.4.3",
-    "shiki": "^4.4.3"
+    "@pierre/highlights": "^0.2.0"
   },
   "devDependencies": {
-    "@effect/platform-browser": "4.0.2",
-    "@foldkit/ui": "0.168.0",
-    "@foldkit/vite-plugin": "0.27.1",
+    "@effect/platform-browser": "4.0.6",
+    "@foldkit/ui": "0.169.0",
+    "@foldkit/vite-plugin": "0.28.0",
     "@my-designs/specimen": "0.0.0",
-    "@types/node": "^26.6.2",
-    "effect": "4.0.2",
-    "foldkit": "0.168.0",
-    "happy-dom": "^20.14.5",
-    "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
-    "vite-plus": "1.0.0"
+    "@types/node": "26.6.5",
+    "effect": "4.0.6",
+    "foldkit": "0.169.0",
+    "happy-dom": "21.0.4",
+    "typescript": "7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
+    "vite-plus": "1.4.0"
   },
   "peerDependencies": {
     "@effect/platform-browser": "^4.0.0",
-    "@foldkit/ui": "^0.168.0",
-    "@foldkit/vite-plugin": "^0.27.0",
+    "@foldkit/ui": "^0.169.0",
+    "@foldkit/vite-plugin": "^0.28.0",
     "effect": "^4.0.0",
-    "foldkit": "^0.168.0"
+    "foldkit": "^0.169.0"
   },
   "peerDependenciesMeta": {
     "@foldkit/vite-plugin": {

package/src/code/code.ts

@@ -1,22 +1,29 @@
-// The `?lines=<lang>` imports are declared for every program that reaches this file, which
-// is every one that imports the package: an ambient declaration has no import to travel by.
 // oxlint-disable-next-line typescript/triple-slash-reference
-/// <reference path="./lines.d.ts" />
-
-// A code block's colours as data, with no highlighter: what `CodeBlock` renders and what a
-// build makes with `highlight` (highlight/highlight.ts), so a page carries the colours and
-// not Shiki.
+/// <reference path="./lines.d.ts" preserve="true" />
 
 /** The languages a block can be coloured in. */
-export const LANGUAGES = ["ts", "tsx", "sh", "json", "css", "html", "diff"] as const;
+export const LANGUAGES = [
+  "ts",
+  "tsx",
+  "sh",
+  "json",
+  "css",
+  "html",
+  "diff",
+] as const;
+
 export type Language = (typeof LANGUAGES)[number];
 
-/** One coloured run of a line: its text, the `--t-*` colour Shiki gave it, and whether it
+/** One coloured run of a line: its text, the `--t-*` colour the highlighter gave it, and whether it
     is italic. */
-type Run = Readonly<{ content: string; color: string | undefined; isItalic: boolean }>;
+export type Run = Readonly<{
+  content: string;
+  color: string | undefined;
+  isItalic: boolean;
+}>;
 
 /** A block's runs, line by line. A run in the plain code ink, upright, has no colour. */
-export type Lines = ReadonlyArray<ReadonlyArray<Run>>;
+export type Lines = ReadonlyArray<readonly Run[]>;
 
 /** A file's text and its coloured lines: what an import with `?lines=<lang>` gives (see
     lines.d.ts). */

package/src/code/index.ts

@@ -1,2 +1,3 @@
 export { LANGUAGES } from "./code.ts";
+
 export type { Highlighted, Language, Lines } from "./code.ts";

package/src/code/lines.d.ts

@@ -1,8 +1,3 @@
-// A file imported with `?lines=<lang>`, one of `LANGUAGES`: its text, and its lines coloured
-// at build by `codeLines()` (highlight/vite.ts, the package's `./highlight/vite`). code.ts
-// refers to this file, so every program that imports the package has these declarations. A
-// module pattern takes one wildcard, so there is a declaration for each language.
-
 declare module "*?lines=ts" {
   const highlighted: import("./code.ts").Highlighted;
   export default highlighted;

package/src/{codeBlock/codeBlock.ts → code-block/code-block.ts}

@@ -3,7 +3,7 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import * as Mount from "foldkit/mount";
 
 import type { Language, Lines } from "../code/code.ts";
-import type { ViewInputs as CopyInputs } from "../copyTab/copyTab.ts";
+import type { ViewInputs as CopyInputs } from "../copy-tab/copy-tab.ts";
 import * as Scrolls from "../scrolls/scrolls.ts";
 
 /** Configuration for rendering a code block with `view`. */
@@ -26,29 +26,42 @@ export type ViewConfig<ParentMessage> = Readonly<{
   toParentMessage: (message: Scrolls.Message) => ParentMessage;
 }>;
 
-/** The block's name for assistive technology: its file, or its first line. */
 export const nameOf = (code: string, file?: string): string => {
   const firstLine = code.trim().split("\n")[0] ?? "";
-  return file ?? (firstLine.length > 40 ? `${firstLine.slice(0, 40)}…` : firstLine);
+
+  return (
+    file ?? (firstLine.length > 40 ? `${firstLine.slice(0, 40)}…` : firstLine)
+  );
 };
 
 /** What a block's `CopyTab` is given: the block's name and its code, without a trailing
     newline. */
-export const copyInputs = (code: string, file?: string): Omit<CopyInputs, "toBlockView"> => ({
+export const copyInputs = (
+  code: string,
+  file?: string
+): Omit<CopyInputs, "toBlockView"> => ({
   name: nameOf(code, file),
   text: code.trimEnd(),
 });
 
-const linesView = <Message>(lines: Lines, h: HtmlBuilder<Message>): ReadonlyArray<Html | string> =>
+const linesView = <Message>(
+  lines: Lines,
+  h: HtmlBuilder<Message>
+): ReadonlyArray<Html | string> =>
   lines.flatMap((line, index) => [
     ...(index > 0 ? ["\n"] : []),
     ...line.map((run) =>
       run.color === undefined
         ? run.content
         : h.span(
-            [h.Style({ color: run.color, ...(run.isItalic ? { fontStyle: "italic" } : {}) })],
-            [run.content],
-          ),
+            [
+              h.Style({
+                color: run.color,
+                ...(run.isItalic ? { fontStyle: "italic" } : {}),
+              }),
+            ],
+            [run.content]
+          )
     ),
   ]);
 
@@ -56,10 +69,11 @@ const linesView = <Message>(lines: Lines, h: HtmlBuilder<Message>): ReadonlyArra
     copy tab. Only a block that overflows takes focus, through `Scrolls.WatchOverflow`. */
 export const view = <ParentMessage>(
   config: ViewConfig<ParentMessage>,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Html => {
   const { code, lang, lines, file, copy, toParentMessage } = config;
   const name = nameOf(code, file);
+
   const toBlockView = (): Html =>
     h.pre(
       [
@@ -67,17 +81,21 @@ export const view = <ParentMessage>(
         h.OnMount(
           Mount.mapMessage(
             Scrolls.WatchOverflow({ maybeName: Option.some(name) }),
-            toParentMessage,
-          ),
+            toParentMessage
+          )
         ),
       ],
       [
         h.code(
           lang === undefined ? [] : [h.Class(`language-${lang}`)],
-          lines === undefined ? [code] : linesView(lines, h),
+          lines === undefined ? [code] : linesView(lines, h)
         ),
-      ],
+      ]
     );
+
   const body = copy === undefined ? toBlockView() : copy(toBlockView);
-  return file === undefined ? body : h.figure([h.Class("file")], [h.figcaption([], [file]), body]);
+
+  return file === undefined
+    ? body
+    : h.figure([h.Class("file")], [h.figcaption([], [file]), body]);
 };

package/src/code-block/index.ts

@@ -0,0 +1,3 @@
+export { copyInputs, view } from "./code-block.ts";
+
+export type { ViewConfig } from "./code-block.ts";

package/src/copy/copy.ts

@@ -6,10 +6,6 @@ import { defineTaggedUnion } from "foldkit/schema";
 import { modifyFields } from "foldkit/struct";
 import type * as Update from "foldkit/update";
 
-// A copy to the clipboard, without its view: the system's own control renders it.
-
-// MODEL
-
 /** Where a copy is: nothing yet, writing to the clipboard, just copied, or just refused. */
 export const CopyState = defineTaggedUnion({
   Idle: {},
@@ -17,6 +13,7 @@ export const CopyState = defineTaggedUnion({
   Copied: {},
   Failed: {},
 });
+
 export type CopyState = typeof CopyState.Type;
 
 /** Schema for a copy control: what it says it just did. */
@@ -24,9 +21,8 @@ export const Model = Schema.Struct({
   id: Schema.String,
   state: CopyState,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a copy control can produce. */
 export const Message = defineMessageUnion({
@@ -35,9 +31,8 @@ export const Message = defineMessageUnion({
   FailedCopyText: {},
   CompletedWaitBeforeSettling: {},
 });
-export type Message = typeof Message.Type;
 
-// INIT
+export type Message = typeof Message.Type;
 
 /** Configuration for creating a copy control with `init`: its id, unique in the document. */
 export type InitConfig = Readonly<{ id: string }>;
@@ -48,14 +43,9 @@ export const init = (config: InitConfig): Model => ({
   state: CopyState.Idle(),
 });
 
-// ACCESSORS
-
 /** The control's id, unique in the document. */
 export const id = (model: Model): string => model.id;
 
-// COMMAND
-
-/** How long the control answers for: that it copied, or that the copy failed. */
 const WORD_BEAT = Duration.millis(1600);
 
 /** Writes the text to the clipboard through Effect's `Clipboard` port. Provide
@@ -67,18 +57,19 @@ export const CopyText = Command.define("CopyText", {
     Effect.gen(function* () {
       const clipboard = yield* Clipboard.Clipboard;
       yield* clipboard.writeString(text);
+
       return Message.SucceededCopyText();
-    }).pipe(Effect.catch(() => Effect.succeed(Message.FailedCopyText()))),
+    }).pipe(Effect.orElseSucceed(() => Message.FailedCopyText())),
 });
 
 /** Waits out the beat the answer shows for. */
 export const WaitBeforeSettling = Command.define("WaitBeforeSettling", {
   messages: [Message.CompletedWaitBeforeSettling],
-  execute: Effect.sleep(WORD_BEAT).pipe(Effect.as(Message.CompletedWaitBeforeSettling())),
+  execute: Effect.sleep(WORD_BEAT).pipe(
+    Effect.as(Message.CompletedWaitBeforeSettling())
+  ),
 });
 
-// UPDATE
-
 type UpdateReturn = Update.Return<Model, Message, Clipboard.Clipboard>;
 
 const holdAnswer = (model: Model, state: CopyState): UpdateReturn => ({

package/src/{copyTab/copyTab.ts → copy-tab/copy-tab.ts}

@@ -2,11 +2,21 @@ import { Button as UiButton } from "@foldkit/ui";
 import type { Html } from "foldkit/html";
 import { defineView } from "foldkit/submodel";
 
-import { CopyState, Message, type Model } from "../copy/copy.ts";
+import { CopyState, Message } from "../copy/copy.ts";
+import type { Model } from "../copy/copy.ts";
 
-export * from "../copy/copy.ts";
+export {
+  CopyState,
+  CopyText,
+  Message,
+  Model,
+  WaitBeforeSettling,
+  id,
+  init,
+  update,
+} from "../copy/copy.ts";
 
-// VIEW
+export type { InitConfig } from "../copy/copy.ts";
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
@@ -51,11 +61,17 @@ export const view = defineView<Model, Message, ViewInputs>(
             isDisabled: !CopyState.guards.Idle(model.state),
             onClick: Message.ClickedCopy({ text }),
             toView: ({ button }) =>
-              h.button([...button, h.AriaLabel(`Copy ${name}`)], [word(model.state)]),
+              h.button(
+                [...button, h.AriaLabel(`Copy ${name}`)],
+                [word(model.state)]
+              ),
           },
-          h,
+          h
         ),
-        h.span([h.Class("visually-hidden"), h.Role("status")], [said(model.state)]),
-      ],
-    ),
+        h.span(
+          [h.Class("visually-hidden"), h.Role("status")],
+          [said(model.state)]
+        ),
+      ]
+    )
 );

package/src/copy-tab/index.ts

@@ -0,0 +1,12 @@
+export {
+  CopyText,
+  Message,
+  Model,
+  WaitBeforeSettling,
+  id,
+  init,
+  update,
+  view,
+} from "./copy-tab.ts";
+
+export type { InitConfig, ViewInputs } from "./copy-tab.ts";

package/src/diagram/diagram.ts

@@ -21,9 +21,10 @@ export type ViewConfig<ParentMessage> = Readonly<{
     (through `Scrolls.WatchOverflow`) and scroll. */
 export const view = <ParentMessage>(
   config: ViewConfig<ParentMessage>,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Html => {
   const { drawing, label, caption = [label], toParentMessage } = config;
+
   return h.figure(
     [],
     [
@@ -32,12 +33,15 @@ export const view = <ParentMessage>(
           h.Role("img"),
           h.AriaLabel(label),
           h.OnMount(
-            Mount.mapMessage(Scrolls.WatchOverflow({ maybeName: Option.none() }), toParentMessage),
+            Mount.mapMessage(
+              Scrolls.WatchOverflow({ maybeName: Option.none() }),
+              toParentMessage
+            )
           ),
         ],
-        [h.code([], [drawing])],
+        [h.code([], [drawing])]
       ),
       h.figcaption([], caption),
-    ],
+    ]
   );
 };

package/src/diagram/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./diagram.ts";
+
 export type { ViewConfig } from "./diagram.ts";

package/src/footer/footer.ts

@@ -7,5 +7,7 @@ export type ViewConfig = Readonly<{
 }>;
 
 /** A rule and one line. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
-  h.footer([], [h.hr([]), h.p([], config.body)]);
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => h.footer([], [h.hr([]), h.p([], config.body)]);