Fix highlighter in build

Author: ackwell

package.json

@@ -22,6 +22,8 @@
 		"@astrojs/markdown-remark": "^6.0.2",
 		"@astrojs/preact": "^4.0.3",
 		"@astrojs/starlight": "^0.31.0",
+		"@shikijs/langs": "^1",
+		"@shikijs/themes": "^1",
 		"astro": "^5.1.5",
 		"clsx": "^2.1.1",
 		"hast-util-to-jsx-runtime": "^2.3.2",

pnpm-lock.yaml

@@ -0,0 +1,46 @@
+import shikiThemeCatppuccinLatte from '@shikijs/themes/catppuccin-latte'
+import shikiThemeCatppuccinMocha from '@shikijs/themes/catppuccin-mocha'
+import shikiLangJson from '@shikijs/langs/json'
+import { createHighlighterCore, type HighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
+import shikiHighlighter from 'shiki/wasm'
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import * as jsxRuntime from 'preact/jsx-runtime';
+
+export async function highlight(code: string) {
+  const highlighter = await buildHighlighter()
+  const out = await highlighter.codeToHast(code, {
+    lang: 'json',
+    defaultColor: false,
+    themes: {
+      light: 'catppuccin-latte',
+      dark: 'catppuccin-mocha'
+    },
+    colorReplacements: {
+      // Remove backgrounds
+      'catppuccin-latte': { '#eff1f5': 'transparent' },
+      'catppuccin-mocha': { '#1e1e2e': 'transparent' },
+    }
+  })
+  return toJsxRuntime(out, jsxRuntime)
+}
+
+let highlighter: HighlighterCore | undefined
+async function buildHighlighter() {
+  if (highlighter != null) {
+    return highlighter
+  }
+
+  highlighter = await createHighlighterCore({
+    themes: [
+      shikiThemeCatppuccinLatte,
+      shikiThemeCatppuccinMocha,
+    ],
+    langs: [
+      shikiLangJson,
+    ],
+    engine: createOnigurumaEngine(shikiHighlighter)
+  })
+
+  return highlighter
+}

src/components/play/highlight.ts

@@ -6,9 +6,8 @@ import {
 import { Editor } from "./editor";
 import styles from './playground.module.css'
 import { CopyIcon, SendHorizontalIcon } from "lucide-preact";
-import { codeToHast } from "shiki/bundle/web";
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import * as jsxRuntime from "preact/jsx-runtime";
+import type { JSX } from "preact/jsx-runtime";
+import { highlight } from "./highlight";
 
 export function SearchPlayground() {
   const [sheets, setSheets] = useState<string>('')
@@ -93,7 +92,7 @@ type ResponseProps = {
 }
 
 function Response({ response }: ResponseProps) {
-  const [nodes, setNodes] = useState<jsxRuntime.JSX.Element>()
+  const [nodes, setNodes] = useState<JSX.Element>()
 
   useLayoutEffect(() => {
     // Set up a timeout that renders the unhighlighted string. If highlighting
@@ -113,21 +112,3 @@ function Response({ response }: ResponseProps) {
 
   return <pre className={styles.response}><code>{nodes}</code></pre>
 }
-
-async function highlight(code: string) {
-  const out = await codeToHast(code, {
-    lang: 'json',
-    defaultColor: false,
-    themes: {
-      light: 'catppuccin-latte',
-      dark: 'catppuccin-mocha'
-    },
-    colorReplacements: {
-      // Remove backgrounds
-      'catppuccin-latte': { '#eff1f5': 'transparent' },
-      'catppuccin-mocha': { '#1e1e2e': 'transparent' },
-    }
-  })
-  // @ts-expect-error fuck off
-  return toJsxRuntime(out, jsxRuntime)
-}