fix: upgrade shiki (#1702)

fern-api · Oct 23, 2024 · bf85c48 · bf85c48
1 parent 917fa4c
commit bf85c48
Show file tree

Hide file tree

Showing 7 changed files with 723 additions and 134 deletions.
diff --git a/packages/ui/app/.depcheckrc.json b/packages/ui/app/.depcheckrc.json
@@ -15,7 +15,6 @@
     "tailwindcss",
     "cssnano",
     "unist-util-visit",
-    "@shikijs/transformers",
     "@chromatic-com/storybook",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",

diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -61,7 +61,6 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@segment/snippet": "^5.2.1",
-    "@shikijs/transformers": "^1.2.2",
     "@types/nprogress": "^0.2.3",
     "algoliasearch": "^5.8.1",
     "bezier-easing": "^2.1.0",
@@ -104,7 +103,7 @@
     "remark-math": "^6.0.0",
     "remark-smartypants": "^2.1.0",
     "selection-popover": "^0.3.0",
-    "shiki": "^1.6.0",
+    "shiki": "^1.22.0",
     "swr": "^2.2.5",
     "tinycolor2": "^1.6.0",
     "unified": "^11.0.4",

diff --git a/packages/ui/app/src/syntax-highlighting/__test__/fernShiki.test.ts b/packages/ui/app/src/syntax-highlighting/__test__/fernShiki.test.ts
diff --git a/packages/ui/app/src/syntax-highlighting/fernShiki.ts b/packages/ui/app/src/syntax-highlighting/fernShiki.ts
@@ -14,6 +14,18 @@ import { additionalLanguages } from "./syntaxes";
 
 let highlighter: Highlighter;
 
+const DEFAULT = Symbol("DEFAULT");
+
+const THEMES: Record<"light" | "dark", Record<string | typeof DEFAULT, BundledTheme>> = {
+    light: {
+        [DEFAULT]: "min-light",
+        diff: "github-light", // `min-light` does not work well for diff
+    },
+    dark: {
+        [DEFAULT]: "material-theme-darker",
+    },
+};
+
 // only call this once per language
 export const getHighlighterInstance: (language: string) => Promise<Highlighter> = memoize(
     async (language: string): Promise<Highlighter> => {
@@ -28,7 +40,11 @@ export const getHighlighterInstance: (language: string) => Promise<Highlighter>
             highlighter = await getSingletonHighlighter();
         }
 
-        await highlighter.loadTheme(LIGHT_THEME, DARK_THEME);
+        // load the themes used by the current language
+        await highlighter.loadTheme(
+            THEMES.light[lang] ?? THEMES.light[DEFAULT],
+            THEMES.dark[lang] ?? THEMES.dark[DEFAULT],
+        );
 
         if (!highlighter.getLoadedLanguages().includes(lang)) {
             try {
@@ -61,8 +77,8 @@ export function highlightTokens(highlighter: Highlighter, code: string, rawLang:
     const hast = highlighter.codeToHast(code, {
         lang,
         themes: {
-            light: LIGHT_THEME,
-            dark: DARK_THEME,
+            light: THEMES.light[lang] ?? THEMES.light[DEFAULT],
+            dark: THEMES.dark[lang] ?? THEMES.dark[DEFAULT],
         },
     }) as Root;
     return { code, lang, hast };
@@ -76,9 +92,6 @@ export function trimCode(code: string): string {
     return code.replace(/^\n+|\n+$/g, "");
 }
 
-export const LIGHT_THEME: BundledTheme = "min-light";
-export const DARK_THEME: BundledTheme = "material-theme-darker";
-
 export function parseLang(lang: string): string {
     lang = lang.trim();
 

diff --git a/packages/ui/components/.depcheckrc.json b/packages/ui/components/.depcheckrc.json
@@ -15,7 +15,6 @@
     "tailwindcss",
     "cssnano",
     "unist-util-visit",
-    "@shikijs/transformers",
     "@chromatic-com/storybook",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",

diff --git a/packages/ui/components/package.json b/packages/ui/components/package.json
@@ -48,7 +48,6 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@shikijs/transformers": "^1.2.2",
     "clsx": "^2.1.0",
     "copyfiles": "^2.4.1",
     "iconoir-react": "^7.7.0",