feat(app): experiment with Pierre Highlights for code

bunfig.toml

@@ -2,7 +2,7 @@
 exact = true
 # Only install newly resolved package versions published at least 3 days ago.
 minimumReleaseAge = 259200
-minimumReleaseAgeExcludes = ["@ai-sdk/amazon-bedrock", "@ai-sdk/anthropic", "@brendonovich/vite-plugin-opencode", "@kitlangton/solid-motion", "@opencode/sdk", "@opencode-ai/pty", "@opencode-ai/pty-darwin-arm64", "@opencode-ai/pty-darwin-x64", "@opencode-ai/pty-linux-arm64-gnu", "@opencode-ai/pty-linux-arm64-musl", "@opencode-ai/pty-linux-x64-gnu", "@opencode-ai/pty-linux-x64-musl", "@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-arm64-musl", "@opentui/core-linux-x64", "@opentui/core-linux-x64-musl", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "@opentunnel/client", "@opentunnel/protocol", "opentui-spinner", "gitlab-ai-provider", "opencode-gitlab-auth", "@ff-labs/fff-node", "@ff-labs/fff-bun", "@ff-labs/fff-bin-darwin-arm64", "@ff-labs/fff-bin-darwin-x64", "@ff-labs/fff-bin-linux-arm64-gnu", "@ff-labs/fff-bin-linux-arm64-musl", "@ff-labs/fff-bin-linux-x64-gnu", "@ff-labs/fff-bin-linux-x64-musl", "@ff-labs/fff-bin-win32-arm64", "@ff-labs/fff-bin-win32-x64", "@pierre/diffs", "@pierre/theming", "app-builder-lib", "dmg-builder", "electron", "electron-builder", "electron-publish", "blume", "pele"]
+minimumReleaseAgeExcludes = ["@ai-sdk/amazon-bedrock", "@ai-sdk/anthropic", "@brendonovich/vite-plugin-opencode", "@kitlangton/solid-motion", "@opencode/sdk", "@opencode-ai/pty", "@opencode-ai/pty-darwin-arm64", "@opencode-ai/pty-darwin-x64", "@opencode-ai/pty-linux-arm64-gnu", "@opencode-ai/pty-linux-arm64-musl", "@opencode-ai/pty-linux-x64-gnu", "@opencode-ai/pty-linux-x64-musl", "@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-arm64-musl", "@opentui/core-linux-x64", "@opentui/core-linux-x64-musl", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "@opentunnel/client", "@opentunnel/protocol", "opentui-spinner", "gitlab-ai-provider", "opencode-gitlab-auth", "@ff-labs/fff-node", "@ff-labs/fff-bun", "@ff-labs/fff-bin-darwin-arm64", "@ff-labs/fff-bin-darwin-x64", "@ff-labs/fff-bin-linux-arm64-gnu", "@ff-labs/fff-bin-linux-arm64-musl", "@ff-labs/fff-bin-linux-x64-gnu", "@ff-labs/fff-bin-linux-x64-musl", "@ff-labs/fff-bin-win32-arm64", "@ff-labs/fff-bin-win32-x64", "@pierre/diffs", "@pierre/highlights", "@pierre/theming", "app-builder-lib", "dmg-builder", "electron", "electron-builder", "electron-publish", "blume", "pele"]
 
 [test]
 root = "./do-not-run-tests-from-root"

package.json

@@ -69,7 +69,8 @@
       "@tsconfig/node22": "22.0.2",
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
-      "@pierre/diffs": "1.5.1",
+      "@pierre/diffs": "1.6.1",
+      "@pierre/highlights": "0.2.0",
       "opentui-spinner": "0.0.7",
       "@solid-primitives/event-listener": "2.4.6",
       "@solid-primitives/media": "2.3.6",

packages/app/e2e/performance/highlighter/bundle.ts

@@ -0,0 +1,61 @@
+import { readdir, readFile } from "node:fs/promises"
+import path from "node:path"
+import { gzipSync } from "node:zlib"
+
+// Sizes of the built app's highlighting assets: `bun bundle.ts <dist>`. Shiki ships its oniguruma engine and one
+// chunk per grammar or theme, loaded on demand; Highlights ships one chunk with its WebAssembly inlined.
+const dist = process.argv[2] ?? "dist"
+
+const assets = path.join(dist, "_assets")
+
+const files = await readdir(assets, { recursive: true })
+
+const all = await Promise.all(
+  files
+    .filter((file) => /\.(js|mjs|wasm)$/.test(file))
+    .map(async (file) => {
+      const bytes = await readFile(path.join(assets, file))
+
+      return {
+        file,
+        bytes: bytes.length,
+        gzip: gzipSync(bytes).length,
+        // The start of Highlights' inlined WebAssembly module, as base64.
+        highlights: bytes.includes("AGFzbQEAAAABWw5gAX8Bf2AAAGACf38Bf2ABfw"),
+      }
+    }),
+)
+
+const total = (items: typeof all) => ({
+  files: items.length,
+  kb: Math.round(items.reduce((sum, item) => sum + item.bytes, 0) / 1024),
+  gzipKB: Math.round(items.reduce((sum, item) => sum + item.gzip, 0) / 1024),
+})
+
+const highlights = all.filter((item) => item.highlights)
+
+const onig = all.filter((item) => /^wasm-|onig/i.test(path.basename(item.file)) && !item.highlights)
+
+const workers = all.filter((item) => /worker/i.test(item.file))
+
+console.log(
+  JSON.stringify(
+    {
+      all: total(all),
+      highlights: {
+        ...total(highlights),
+        files: highlights.map((item) => `${item.file} ${Math.round(item.bytes / 1024)} KB`),
+      },
+      oniguruma: { ...total(onig), files: onig.map((item) => `${item.file} ${Math.round(item.bytes / 1024)} KB`) },
+      workers: workers.map(
+        (item) => `${item.file} ${Math.round(item.bytes / 1024)} KB (${Math.round(item.gzip / 1024)} KB gz)`,
+      ),
+      largest: all
+        .toSorted((a, b) => b.bytes - a.bytes)
+        .slice(0, 25)
+        .map((item) => `${item.file} ${Math.round(item.bytes / 1024)} KB (${Math.round(item.gzip / 1024)} KB gz)`),
+    },
+    null,
+    2,
+  ),
+)