diff --git a/.changeset/lovely-hounds-invent.md b/.changeset/lovely-hounds-invent.md new file mode 100644 index 000000000..f789f98c7 --- /dev/null +++ b/.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) diff --git a/bun.lockb b/bun.lockb index ef86153b2..2301ce2b4 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index 34b37cd90..51135be9f 100644 --- a/packages/gitbook/package.json +++ b/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", diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts b/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts index 7d39955e2..62d082b50 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts +++ b/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({ + 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, + highlighter: HighlighterGeneric, lang: keyof typeof bundledLanguages, ) { await loadLanguagesMutex.runBlocking(async () => {