Start using @gerrit0/mini-shiki instead of Shiki

This removes ~20 unused dependencies from TypeDoc's dependency graph
with no user facing change as the API remains the same.

Author: Gerrit0

package-lock.json

@@ -25,10 +25,10 @@
     "node": ">= 18"
   },
   "dependencies": {
+    "@gerrit0/mini-shiki": "^1.23.2",
     "lunr": "^2.3.9",
     "markdown-it": "^14.1.0",
     "minimatch": "^9.0.5",
-    "shiki": "^1.23.1",
     "yaml": "^2.6.1"
   },
   "peerDependencies": {

package.json

@@ -46,7 +46,6 @@ import {
     Internationalization,
     type TranslatedString,
 } from "./internationalization/internationalization.js";
-import { loadShikiMetadata } from "./utils/highlighter.js";
 import { ValidatingFileRegistry, FileRegistry } from "./models/FileRegistry.js";
 import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
@@ -228,7 +227,6 @@ export class Application extends AbstractComponent<
         options: Partial<TypeDocOptions> = {},
         readers: readonly OptionsReader[] = DEFAULT_READERS,
     ): Promise<Application> {
-        await loadShikiMetadata();
         const app = new Application(DETECTOR);
         readers.forEach((r) => app.options.addReader(r));
         app.options.reset();
@@ -258,7 +256,6 @@ export class Application extends AbstractComponent<
         options: Partial<TypeDocOptions> = {},
         readers: readonly OptionsReader[] = DEFAULT_READERS,
     ): Promise<Application> {
-        await loadShikiMetadata();
         const app = new Application(DETECTOR);
         readers.forEach((r) => app.options.addReader(r));
         await app._bootstrap(options);

src/lib/application.ts

@@ -26,7 +26,7 @@ import { loadHighlighter } from "../utils/highlighter.js";
 import type {
     BundledLanguage,
     BundledTheme as ShikiTheme,
-} from "shiki" with { "resolution-mode": "import" };
+} from "@gerrit0/mini-shiki";
 import { type Comment, Reflection } from "../models/index.js";
 import type { JsxElement } from "../utils/jsx.elements.js";
 import type { DefaultThemeRenderContext } from "./themes/default/DefaultThemeRenderContext.js";

src/lib/output/renderer.ts

@@ -6,7 +6,7 @@ import { ContextAwareRendererComponent } from "../components.js";
 import { MarkdownEvent, RendererEvent, type PageEvent } from "../events.js";
 import { Option, renderElement, assertNever } from "../../utils/index.js";
 import { highlight, isLoadedLanguage, isSupportedLanguage } from "../../utils/highlighter.js";
-import type { BundledTheme } from "shiki" with { "resolution-mode": "import" };
+import type { BundledTheme } from "@gerrit0/mini-shiki";
 import { escapeHtml } from "../../utils/html.js";
 import type { DefaultThemeRenderContext, Renderer } from "../index.js";
 import { anchorIcon } from "./default/partials/anchor-icon.js";

src/lib/output/themes/MarkedPlugin.tsx

@@ -53,7 +53,7 @@ export function initSearch() {
     if (!searchEl) return;
 
     const state: SearchState = {
-        base: searchEl.dataset["base"] + "/",
+        base: document.documentElement.dataset.base! + "/",
     };
 
     const searchScript = document.getElementById(

src/lib/output/themes/default/assets/typedoc/components/Search.ts

@@ -1,61 +1,47 @@
-import { ok as assert, ok } from "assert";
-import type {
-    BundledLanguage,
-    BundledTheme,
-    Highlighter,
-    TokenStyles,
-} from "shiki" with { "resolution-mode": "import" };
+import * as shiki from "@gerrit0/mini-shiki";
+import type { ShikiInternal } from "@shikijs/types";
 import * as JSX from "./jsx.js";
 import { unique } from "./array.js";
+import assert from "assert";
 
 const aliases = new Map<string, string>();
-let supportedLanguagesWithoutAliases: string[] = [];
-let supportedLanguages: string[] = [];
-let supportedThemes: string[] = [];
-
-const plaintextLanguages = ["txt", "text"];
-
-export async function loadShikiMetadata() {
-    if (aliases.size) return;
-
-    const shiki = await import("shiki");
-    for (const lang of shiki.bundledLanguagesInfo) {
-        for (const alias of lang.aliases || []) {
-            aliases.set(alias, lang.id);
-        }
+for (const lang of shiki.bundledLanguagesInfo) {
+    for (const alias of lang.aliases || []) {
+        aliases.set(alias, lang.id);
     }
+}
 
-    supportedLanguages = unique([
-        ...plaintextLanguages,
-        ...aliases.keys(),
-        ...shiki.bundledLanguagesInfo.map((lang) => lang.id),
-    ]).sort();
+const plaintextLanguages = ["txt", "text"];
 
-    supportedLanguagesWithoutAliases = unique([
-        ...plaintextLanguages,
-        ...shiki.bundledLanguagesInfo.map((lang) => lang.id),
-    ]);
+const supportedLanguagesWithoutAliases = unique([
+    ...plaintextLanguages,
+    ...shiki.bundledLanguagesInfo.map((lang) => lang.id),
+]);
+const supportedLanguages: string[] = unique([
+    ...plaintextLanguages,
+    ...aliases.keys(),
+    ...shiki.bundledLanguagesInfo.map((lang) => lang.id),
+]).sort();
 
-    supportedThemes = Object.keys(shiki.bundledThemes);
-}
+const supportedThemes: string[] = Object.keys(shiki.bundledThemes);
 
 class DoubleHighlighter {
     private schemes = new Map<string, string>();
 
     constructor(
-        private highlighter: Highlighter,
-        private light: BundledTheme,
-        private dark: BundledTheme,
+        private highlighter: ShikiInternal,
+        private light: shiki.BundledTheme,
+        private dark: shiki.BundledTheme,
     ) {}
 
     supports(lang: string) {
         return this.highlighter.getLoadedLanguages().includes(lang);
     }
 
     highlight(code: string, lang: string) {
-        const tokens = this.highlighter.codeToTokensWithThemes(code, {
+        const tokens = shiki.codeToTokensWithThemes(this.highlighter, code, {
             themes: { light: this.light, dark: this.dark },
-            lang: lang as BundledLanguage,
+            lang: lang as shiki.BundledLanguage,
         });
 
         const docEls: JSX.Element[] = [];
@@ -121,7 +107,7 @@ class DoubleHighlighter {
         return style.join("\n");
     }
 
-    private getClass(variants: Record<string, TokenStyles>): string {
+    private getClass(variants: Record<string, shiki.TokenStyles>): string {
         const key = `${variants["light"].color} | ${variants["dark"].color}`;
         let scheme = this.schemes.get(key);
         if (scheme == null) {
@@ -132,13 +118,26 @@ class DoubleHighlighter {
     }
 }
 
+let shikiEngine: shiki.RegexEngine | undefined;
 let highlighter: DoubleHighlighter | undefined;
 
-export async function loadHighlighter(lightTheme: BundledTheme, darkTheme: BundledTheme, langs: BundledLanguage[]) {
+export async function loadHighlighter(
+    lightTheme: shiki.BundledTheme,
+    darkTheme: shiki.BundledTheme,
+    langs: shiki.BundledLanguage[],
+) {
     if (highlighter) return;
 
-    const shiki = await import("shiki");
-    const hl = await shiki.createHighlighter({ themes: [lightTheme, darkTheme], langs });
+    if (!shikiEngine) {
+        await shiki.loadBuiltinWasm();
+        shikiEngine = await shiki.createOnigurumaEngine();
+    }
+
+    const hl = await shiki.createShikiInternal({
+        engine: shikiEngine,
+        themes: [shiki.bundledThemes[lightTheme], shiki.bundledThemes[darkTheme]],
+        langs: langs.map((lang) => shiki.bundledLanguages[lang]),
+    });
     highlighter = new DoubleHighlighter(hl, lightTheme, darkTheme);
 }
 
@@ -147,17 +146,14 @@ export function isSupportedLanguage(lang: string) {
 }
 
 export function getSupportedLanguages(): string[] {
-    ok(supportedLanguages.length > 0, "loadShikiMetadata has not been called");
     return supportedLanguages;
 }
 
 export function getSupportedLanguagesWithoutAliases(): string[] {
-    ok(supportedLanguagesWithoutAliases.length > 0, "loadShikiMetadata has not been called");
-    return supportedLanguages;
+    return supportedLanguagesWithoutAliases;
 }
 
 export function getSupportedThemes(): string[] {
-    ok(supportedThemes.length > 0, "loadShikiMetadata has not been called");
     return supportedThemes;
 }
 

src/lib/utils/highlighter.tsx

@@ -1,4 +1,4 @@
-import type { BundledTheme as ShikiTheme } from "shiki" with { "resolution-mode": "import" };
+import type { BundledTheme as ShikiTheme } from "@gerrit0/mini-shiki";
 import type { LogLevel } from "../loggers.js";
 import type { SortStrategy } from "../sort.js";
 import { isAbsolute, join, resolve } from "path";

src/lib/utils/options/declaration.ts

@@ -1,4 +1,4 @@
-import type { BundledLanguage } from "shiki" with { "resolution-mode": "import" };
+import type { BundledLanguage } from "@gerrit0/mini-shiki";
 import * as TagDefaults from "./tsdoc-defaults.js";
 import type { EnumKeys } from "../enum.js";
 import type { ReflectionKind } from "../../models/index.js";

src/lib/utils/options/defaults.ts

@@ -13,7 +13,7 @@ import { ReflectionKind } from "../../../models/reflections/kind.js";
 import * as Validation from "../../validation.js";
 import { blockTags, inlineTags, modifierTags } from "../tsdoc-defaults.js";
 import { getEnumKeys } from "../../enum.js";
-import type { BundledTheme } from "shiki" with { "resolution-mode": "import" };
+import type { BundledTheme } from "@gerrit0/mini-shiki";
 import {
     getSupportedLanguagesWithoutAliases,
     getSupportedThemes,