Reduce Shiki loading with the JavaScript regex engine

package.json

@@ -34,6 +34,7 @@
   },
   "packageManager": "pnpm@11.22.0",
   "dependencies": {
+    "@shikijs/themes": "^4.4.3",
     "shiki": "^4.4.3"
   }
 }

packages/comment-widget/src/comment-content.ts

@@ -31,7 +31,7 @@ export class CommentContent extends LitElement {
         const content = codeblock.textContent || '';
 
         try {
-          const { codeToHtml } = await import('shiki/bundle/full');
+          const { codeToHtml } = await import('./shiki-bundle');
 
           const html = await codeToHtml(content, {
             lang,

packages/comment-widget/src/shiki-bundle.ts

@@ -0,0 +1,40 @@
+import githubDark from '@shikijs/themes/github-dark';
+import {
+  type CodeToHastOptions,
+  type CreateHighlighterFactory,
+  createBundledHighlighter,
+  createSingletonShorthands,
+  guessEmbeddedLanguages,
+  type ShorthandsBundle,
+  type ThemeRegistration,
+} from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import { bundledLanguages } from 'shiki/langs';
+
+type BundledLanguage = keyof typeof bundledLanguages;
+type BundledTheme = 'github-dark';
+
+const bundledThemes: Record<BundledTheme, ThemeRegistration> = {
+  'github-dark': githubDark,
+};
+
+const createHighlighter: CreateHighlighterFactory<
+  BundledLanguage,
+  BundledTheme
+> = createBundledHighlighter({
+  langs: bundledLanguages,
+  themes: bundledThemes,
+  engine: () => createJavaScriptRegexEngine(),
+});
+
+const shorthands: ShorthandsBundle<BundledLanguage, BundledTheme> =
+  createSingletonShorthands(createHighlighter, { guessEmbeddedLanguages });
+
+function codeToHtml(
+  code: string,
+  options: CodeToHastOptions<BundledLanguage, BundledTheme>
+): Promise<string> {
+  return shorthands.codeToHtml(code, options);
+}
+
+export { bundledLanguages, bundledThemes, codeToHtml, createHighlighter };

packages/comment-widget/tests/shiki-bundle.test.ts

@@ -0,0 +1,37 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import {
+  bundledLanguages,
+  bundledThemes,
+  codeToHtml,
+  createHighlighter,
+} from '../src/shiki-bundle.ts';
+
+test('highlights code with the JavaScript regex engine', async () => {
+  const html = await codeToHtml('const answer = 42;', {
+    lang: 'javascript',
+    theme: 'github-dark',
+  });
+
+  assert.match(html, /<pre class="shiki github-dark"/);
+  assert.match(html, /<span style="color:/);
+});
+
+test('provides the API used by the Tiptap Shiki extension', async () => {
+  assert.ok('javascript' in bundledLanguages);
+  assert.ok('github-dark' in bundledThemes);
+
+  const highlighter = await createHighlighter({
+    langs: ['javascript'],
+    themes: ['github-dark'],
+  });
+
+  assert.match(
+    highlighter.codeToHtml('const answer = 42;', {
+      lang: 'javascript',
+      theme: 'github-dark',
+    }),
+    /<span style="color:/
+  );
+  highlighter.dispose();
+});

packages/comment-widget/vite.config.ts

@@ -1,8 +1,19 @@
+import { fileURLToPath, URL } from 'node:url';
 import UnoCSS from 'unocss/vite';
 import { defineConfig, type Plugin } from 'vite';
 import dts from 'vite-plugin-dts';
 
 export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        find: /^shiki$/,
+        replacement: fileURLToPath(
+          new URL('./src/shiki-bundle.ts', import.meta.url)
+        ),
+      },
+    ],
+  },
   plugins: [
     dts() as Plugin,
     UnoCSS({