Reduce bundle size of shiki (#2551)

.changeset/lovely-hounds-invent.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Optimize bundle size of the server output by reducing bundle size of shiki (skipping themes)

packages/gitbook/package.json

@@ -60,7 +60,7 @@
         "remark-rehype": "^11.1.0",
         "rison": "^0.1.1",
         "server-only": "^0.0.1",
-        "shiki": "^1.11.1",
+        "shiki": "^1.22.0",
         "tailwind-merge": "^2.2.0",
         "tailwind-shades": "^1.1.2",
         "unified": "^11.0.4",

packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts

@@ -1,13 +1,12 @@
 import { DocumentBlockCode, DocumentBlockCodeLine, DocumentInlineAnnotation } from '@gitbook/api';
 import {
-    loadWasm,
+    createdBundledHighlighter,
     ThemedToken,
-    getHighlighter,
     createCssVariablesTheme,
     HighlighterGeneric,
-    bundledLanguages,
-    bundledThemes,
-} from 'shiki';
+} from 'shiki/core';
+import { loadWasm, createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import { bundledLanguages } from 'shiki/langs';
 // @ts-ignore - onigWasm is a Wasm module
 import onigWasm from 'shiki/onig.wasm?module';
 
@@ -15,8 +14,6 @@ import { asyncMutexFunction, singleton } from '@/lib/async';
 import { getNodeText } from '@/lib/document';
 import { trace } from '@/lib/tracing';
 
-import { DocumentContext } from '../DocumentView';
-
 export type HighlightLine = {
     highlighted: boolean;
     tokens: HighlightToken[];
@@ -299,6 +296,12 @@ function cleanupLine(line: string): string {
     return line.replace(/\r/g, '');
 }
 
+const createHighlighter = createdBundledHighlighter<any, any>({
+    langs: bundledLanguages,
+    themes: {},
+    engine: () => createOnigurumaEngine(import('shiki/wasm')),
+});
+
 /**
  * Load the highlighter, only once, and reuse it.
  * It makes sure to handle concurrent calls.
@@ -312,7 +315,8 @@ const loadHighlighter = singleton(async () => {
             // Otherwise for Vercel/Cloudflare, we need to load it ourselves.
             await loadWasm((obj) => WebAssembly.instantiate(onigWasm, obj));
         }
-        const highlighter = await getHighlighter({
+
+        const highlighter = await createHighlighter({
             themes: [createCssVariablesTheme()],
             langs: [],
         });
@@ -322,7 +326,7 @@ const loadHighlighter = singleton(async () => {
 
 const loadLanguagesMutex = asyncMutexFunction();
 async function loadHighlighterLanguage(
-    highlighter: HighlighterGeneric<keyof typeof bundledLanguages, keyof typeof bundledThemes>,
+    highlighter: HighlighterGeneric<any, any>,
     lang: keyof typeof bundledLanguages,
 ) {
     await loadLanguagesMutex.runBlocking(async () => {