Shiki bundle size fix (#176)

llm-ui no longer depends on shiki/langs or shiki/themes

.changeset/seven-deers-shout.md

@@ -0,0 +1,5 @@
+---
+"@llm-ui/code": minor
+---
+
+llm-ui no longer depends on shiki/langs or shiki/themes

apps/www/src/components/shikiConfig.ts

@@ -1,15 +1,16 @@
 import type { ShikiProps } from "@llm-ui/code";
 import { allLangs, allLangsAlias, loadHighlighter } from "@llm-ui/code";
 import { getHighlighterCore } from "shiki/core";
+import { bundledLanguagesInfo } from "shiki/langs";
 import githubDark from "shiki/themes/github-dark.mjs";
 import githubLight from "shiki/themes/github-light.mjs";
 import getWasm from "shiki/wasm";
 
 export const shikiConfig: ShikiProps = {
   highlighter: loadHighlighter(
     getHighlighterCore({
-      langs: allLangs,
-      langAlias: allLangsAlias,
+      langs: allLangs(bundledLanguagesInfo),
+      langAlias: allLangsAlias(bundledLanguagesInfo),
       themes: [githubLight, githubDark],
       loadWasm: getWasm,
     }),

apps/www/src/content/docs/blocks/code.mdx

@@ -158,7 +158,7 @@ Change the import:
 
 ```tsx
 // Before:
-import { allThemes } from "@llm-ui/code";
+import { bundledThemes } from "shiki/themes";
 
 // After:
 import githubDark from "shiki/themes/github-dark.mjs";
@@ -173,8 +173,8 @@ Pass the theme to the shiki highlighter:
 ```tsx
 const highlighter = loadHighlighter(
   getHighlighterCore({
-    langs: allLangs,
-    langAlias: allLangsAlias,
+    langs: allLangs(bundledLanguages),
+    langAlias: allLangsAlias(bundledLanguages),
     themes: [githubDark], // <- fixed!
     loadWasm: getWasm,
   }),

apps/www/src/snippets/quickStart.ts

@@ -17,20 +17,22 @@ import {
   useCodeBlockToHtml,
   allLangs,
   allLangsAlias,
-  // WARNING: Importing allThemes increases your bundle size
-  // see: https://llm-ui.com/docs/blocks/code#bundle-size
-  allThemes
 } from "@llm-ui/code";
+// WARNING: Importing bundledThemes increases your bundle size
+// see: https://llm-ui.com/docs/blocks/code#bundle-size
+import { bundledThemes } from "shiki/themes";
 import { type LLMOutputComponent } from "@llm-ui/react";
 import parseHtml from "html-react-parser";
 import { getHighlighterCore } from "shiki/core";
+import { bundledLanguagesInfo } from "shiki/langs";
+
 import getWasm from "shiki/wasm";`;
 
 export const codeblockComponent = `const highlighter = loadHighlighter(
   getHighlighterCore({
-    langs: allLangs,
-    langAlias: allLangsAlias,
-    themes: allThemes,
+    langs: allLangs(bundledLanguagesInfo),
+    langAlias: allLangsAlias(bundledLanguagesInfo),
+    themes: Object.values(bundledThemes),
     loadWasm: getWasm,
   }),
 );
@@ -153,16 +155,17 @@ import {
   useCodeBlockToHtml,
   allLangs,
   allLangsAlias,
-  // WARNING: Importing allThemes will increase your bundle size
-  // See: https://llm-ui.com/docs/blocks/code#bundle-size
-  allThemes,
 } from "@llm-ui/code";
 import { markdownLookBack } from "@llm-ui/markdown";
 import { useLLMOutput, type LLMOutputComponent, useStreamExample } from "@llm-ui/react";
 import parseHtml from "html-react-parser";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { getHighlighterCore } from "shiki/core";
+// WARNING: Importing bundledLanguagesInfo will increase your bundle size
+// See: https://llm-ui.com/docs/blocks/code#bundle-size
+import { bundledThemes } from "shiki/themes";
+import { bundledLanguagesInfo } from "shiki/langs";
 import getWasm from "shiki/wasm";
 `;
 const step1Comment = "// -------Step 1: Create a markdown component-------";

examples/nextjs/src/app/examples/code-block/example.tsx

@@ -3,9 +3,6 @@ import type { CodeToHtmlOptions } from "@llm-ui/code";
 import {
   allLangs,
   allLangsAlias,
-  // WARNING: Importing allThemes will increase your bundle size
-  // see: https://llm-ui.com/docs/blocks/code#bundle-size
-  allThemes,
   codeBlockLookBack,
   findCompleteCodeBlock,
   findPartialCodeBlock,
@@ -22,6 +19,10 @@ import parseHtml from "html-react-parser";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { getHighlighterCore } from "shiki/core";
+import { bundledLanguagesInfo } from "shiki/langs";
+// WARNING: Importing bundledThemes will increase your bundle size
+// see: https://llm-ui.com/docs/blocks/code#bundle-size
+import { bundledThemes } from "shiki/themes";
 import getWasm from "shiki/wasm";
 
 // -------Step 1: Create a markdown component-------
@@ -40,9 +41,9 @@ const MarkdownComponent: LLMOutputComponent = ({ blockMatch }) => {
 
 const highlighter = loadHighlighter(
   getHighlighterCore({
-    langs: allLangs,
-    langAlias: allLangsAlias,
-    themes: allThemes,
+    langs: allLangs(bundledLanguagesInfo),
+    langAlias: allLangsAlias(bundledLanguagesInfo),
+    themes: Object.values(bundledThemes),
     loadWasm: getWasm,
   }),
 );

examples/nextjs/src/app/examples/openai/example.tsx

@@ -4,9 +4,6 @@ import type { CodeToHtmlOptions } from "@llm-ui/code";
 import {
   allLangs,
   allLangsAlias,
-  // WARNING: Importing allThemes will increase your bundle size
-  // see: https://llm-ui.com/docs/blocks/code#bundle-size
-  allThemes,
   codeBlockLookBack,
   findCompleteCodeBlock,
   findPartialCodeBlock,
@@ -20,6 +17,10 @@ import { useCallback, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { getHighlighterCore } from "shiki/core";
+import { bundledLanguagesInfo } from "shiki/langs";
+// WARNING: Importing bundledThemes will increase your bundle size
+// see: https://llm-ui.com/docs/blocks/code#bundle-size
+import { bundledThemes } from "shiki/themes";
 import getWasm from "shiki/wasm";
 
 // -------Step 1: Create a markdown component-------
@@ -38,9 +39,9 @@ const MarkdownComponent: LLMOutputComponent = ({ blockMatch }) => {
 
 const highlighter = loadHighlighter(
   getHighlighterCore({
-    langs: allLangs,
-    langAlias: allLangsAlias,
-    themes: allThemes,
+    langs: allLangs(bundledLanguagesInfo),
+    langAlias: allLangsAlias(bundledLanguagesInfo),
+    themes: Object.values(bundledThemes),
     loadWasm: getWasm,
   }),
 );

packages/code/src/index.ts

@@ -25,5 +25,3 @@ export { loadHighlighter } from "./hooks/useLoadHighlighter";
 export type { CodeToHtmlOptions, LLMUIHighlighter, ShikiProps } from "./types";
 
 export { allLangs, allLangsAlias } from "./shikiBundles/allLangs";
-
-export { allThemes } from "./shikiBundles/allThemes";

packages/code/src/shikiBundles/allLangs.ts

@@ -1,20 +1,21 @@
-import { LanguageRegistration } from "shiki/core";
-import { bundledLanguagesInfo } from "shiki/langs";
+import { BundledLanguageInfo, LanguageRegistration } from "shiki/core";
 
-export const allLangs: Promise<{
+export const allLangs = (
+  bundledLanguagesInfo: BundledLanguageInfo[],
+): Promise<{
   default: LanguageRegistration[];
-}>[] = bundledLanguagesInfo.map((lang) => lang.import());
+}>[] => bundledLanguagesInfo.map((lang) => lang.import());
 
 type LangAlias = Record<string, string>;
 
-export const allLangsAlias: LangAlias = bundledLanguagesInfo.reduce(
-  (acc, lang) => {
+export const allLangsAlias = (
+  bundledLanguagesInfo: BundledLanguageInfo[],
+): LangAlias =>
+  bundledLanguagesInfo.reduce((acc, lang) => {
     if (lang.aliases) {
       for (const alias of lang.aliases) {
         acc[alias] = lang.id;
       }
     }
     return acc;
-  },
-  {} as LangAlias,
-);
+  }, {} as LangAlias);