react-shiki 0.1.2 → 0.2.1

package/README.md

@@ -1,28 +1,27 @@
-> [!WARNING]
-> This package is still a work in progress, it is not yet recommended for production use. Contributions are welcome! My goal is to eventually build this out as a near-drop-in replacement for `react-syntax-highlighter`
-
+> [!NOTE]
+> This package is still a work in progress, fully functional but not extensively tested.
 
 # 🎨 [react-shiki](https://react-shiki.vercel.app/)
 
 Syntax highlighting component and hook for react using [Shiki](https://shiki.matsu.io/)
 
-
-[See the demo page for a version of this README with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
+[See the demo page with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
 
 ## Features
+
 - 🖼️ Provides a `ShikiHighlighter` component for highlighting code as children, as well as a `useShikiHighlighter` hook for more flexibility
-- 🔐 No `dangerouslySetInnerHTML`, output from Shiki is parsed using `html-react-parser` 
+- 🔐 No `dangerouslySetInnerHTML`, output from Shiki is parsed using `html-react-parser`
 - 📦 Supports all Shiki languages and themes
+- 🚰 Supports performant highlighting of streamed code on the client, with optional throttling
 - 📚 Includes minimal default styles for code blocks
 - 🚀 Shiki dynamically imports only the languages and themes used on a page, optimizing for performance
 - 🖥️ `ShikiHighlighter` component displays a language label for each code block when `showLanguage` is set to `true` (default)
 - 🎨 Users can customize the styling of the generated code blocks by passing a `style` object or a `className`
 
-
 ## Installation
 
 ```bash
-[pnpm|bun|yarn|npm] [add|install] react-shiki
+[pnpm|bun|yarn|npm] install react-shiki
 ```
 
 ## Usage
@@ -30,6 +29,7 @@ Syntax highlighting component and hook for react using [Shiki](https://shiki.mat
 You can use the `ShikiHighlighter` component, or the `useShikiHighlighter` hook to highlight code.
 
 `useShikiHighlighter` is a hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code as React elements. It's useful for users who want full control over the rendering of highlighted code.
+
 ```tsx
 const highlightedCode = useShikiHighlighter(code, language, theme);
 ```
@@ -48,7 +48,6 @@ function CodeBlock() {
 }
 ```
 
-
 The component accepts several props in addition to language and theme:
 
 - `showLanguage: boolean` - Shows the language name in the top right corner of the code block.
@@ -67,7 +66,7 @@ function Houston() {
       addDefaultStyles={true}
       as="div"
       style={{
-        textAlign: 'left',
+        textAlign: "left",
       }}
     >
       {code.trim()}
@@ -76,11 +75,27 @@ function Houston() {
 }
 ```
 
+react-shiki exports `isInlineCode` to check if a code block is inline.
+
+```tsx
+const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
+
+return !isInline ? (
+  <ShikiHighlighter language={language} theme={"houston"} {...props}>
+    {String(children)}
+  </ShikiHighlighter>
+) : (
+  <code className={className} {...props}>
+    {children}
+  </code>
+);
+```
+
 It can also be used with `react-markdown`:
+
 ```tsx
-import type { ReactNode } from 'react';
-import type { BundledLanguage } from 'shiki';
-import ShikiHighlighter, { isInlineCode, type Element } from 'react-shiki';
+import type { ReactNode } from "react";
+import ShikiHighlighter, { type Element } from "react-shiki";
 
 interface CodeHighlightProps {
   className?: string | undefined;
@@ -95,30 +110,19 @@ export const CodeHighlight = ({
   ...props
 }: CodeHighlightProps): JSX.Element => {
   const match = className?.match(/language-(\w+)/);
-  // TODO: remove need for consumer use of BundledLanguage from shiki
-  const language = match ? (match[1] as BundledLanguage) : undefined;
+  const language = match ? match[1] : undefined;
 
-  const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
-
-  return !isInline ? (
-    <ShikiHighlighter
-      language={language as BundledLanguage}
-      theme={'houston'}
-      {...props}>
-      {String(children)}
-    </ShikiHighlighter>
-  ) : (
-    <code className={className} {...props}>
-      {children}
-    </code>
-  );
+  <ShikiHighlighter language={language} theme={"houston"} {...props}>
+    {String(children)}
+  </ShikiHighlighter>;
 };
 ```
 
 Pass CodeHighlight to `react-markdown` as a code component:
+
 ```tsx
-import ReactMarkdown from 'react-markdown';
-import { CodeHighlight } from './CodeHighlight';
+import ReactMarkdown from "react-markdown";
+import { CodeHighlight } from "./CodeHighlight";
 
 <ReactMarkdown
   components={{
@@ -126,11 +130,106 @@ import { CodeHighlight } from './CodeHighlight';
   }}
 >
   {markdown}
-</ReactMarkdown>
+</ReactMarkdown>;
 ```
 
-This works great for highlighting in realtime on the client, I use it for an LLM chatbot UI, it renders markdown and highlights code in memoized chat messages:
-```tsx
+### Custom themes
+
+```tsx:title=CodeHighlight.tsx
+import tokyoNight from '@styles/tokyo-night.mjs';
+
+<ShikiHighlighter language="tsx" theme={tokyoNight}>
+  {String(code)}
+</ShikiHighlighter>;
+```
+
+## Client-side highlighting
+
+This works great for highlighting in real-time on the client, I use it for an LLM chatbot UI, it renders markdown and highlights code in memoized chat messages. It also Supports an optional delay between highlights for throttling.
+
+Using `useShikiHighlighter` hook:
+
+```tsx title=CodeHighlight.tsx
+import type { ReactNode } from "react";
+import { isInlineCode, useShikiHighlighter, type Element } from "react-shiki";
+import tokyoNight from "@styles/tokyo-night.mjs";
+
+interface CodeHighlightProps {
+  className?: string | undefined;
+  children?: ReactNode | undefined;
+  node?: Element | undefined;
+}
+
+export const CodeHighlight = ({
+  className,
+  children,
+  node,
+  ...props
+}: CodeHighlightProps) => {
+  const code = String(children);
+  const language = className?.match(/language-(\w+)/)?.[1];
+
+  const isInline = node ? isInlineCode(node) : false;
+
+  const highlightedCode = useShikiHighlighter(language, code, tokyoNight, {
+    delay: 150,
+  });
+
+  return !isInline ? (
+    <div className="shiki not-prose relative [&_pre]:overflow-auto [&_pre]:rounded-lg [&_pre]:px-6 [&_pre]:py-5">
+      {language ? (
+        <span className="absolute right-3 top-2 text-xs tracking-tighter text-muted-foreground/85">
+          {language}
+        </span>
+      ) : null}
+      {highlightedCode}
+    </div>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};
+```
+
+Or using the `ShikiHighlighter` component:
+
+```tsx title=CodeHighlight.tsx
+import type { ReactNode } from "react";
+import ShikiHighlighter, { isInlineCode, type Element } from "react-shiki";
+
+interface CodeHighlightProps {
+  className?: string | undefined;
+  children?: ReactNode | undefined;
+  node?: Element | undefined;
+}
+
+export const CodeHighlight = ({
+  className,
+  children,
+  node,
+  ...props
+}: CodeHighlightProps): JSX.Element => {
+  const match = className?.match(/language-(\w+)/);
+  const language = match ? match[1] : undefined;
+
+  const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
+
+  return !isInline ? (
+    <ShikiHighlighter language={language} theme={"houston"} {...props}>
+      {String(children)}
+    </ShikiHighlighter>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};
+```
+
+Passed to `react-markdown` as a code component in memoized chat messages:
+
+```tsx title=ChatMessages.tsx
 const RenderedMessage = React.memo(({ message }: { message: Message }) => (
   <div className={cn(messageStyles[message.role])}>
     <ReactMarkdown components={{ code: CodeHighlight }}>
@@ -141,11 +240,11 @@ const RenderedMessage = React.memo(({ message }: { message: Message }) => (
 
 export const ChatMessages = ({ messages }: { messages: Message[] }) => {
   return (
-    <div className='space-y-4'>
+    <div className="space-y-4">
       {messages.map((message) => (
         <RenderedMessage key={message.id} message={message} />
       ))}
     </div>
   );
 };
-```
+```

package/dist/index.d.ts

@@ -1,23 +1,54 @@
 import React, { ReactNode } from 'react';
-import { BundledLanguage, BundledTheme } from 'shiki';
+import { BundledLanguage, ThemeRegistration, BundledTheme } from 'shiki';
 import { Element } from 'hast';
 export { Element } from 'hast';
 
-interface ShikiHighlighterProps {
+/**
+ * Languages for syntax highlighting.
+ * @see https://shiki.style/languages
+ */
+type Language = BundledLanguage | "plaintext" | (string & {}) | undefined;
+/**
+ * A textmate theme object or a Shiki BundledTheme
+ * @see https://shiki.style/themes
+ */
+type Theme = ThemeRegistration | BundledTheme;
+/**
+ * Configuration options for the syntax highlighter
+ */
+type HighlighterOptions = {
+    /**
+     * Minimum time (in milliseconds) between highlight operations.
+     * Defaults to undefined (no throttling)
+     */
+    delay?: number;
+};
+
+/**
+ * Props for the ShikiHighlighter component
+ */
+interface ShikiHighlighterProps extends HighlighterOptions {
     /**
      * The programming language for syntax highlighting
      * @see https://shiki.style/languages
      */
-    language: BundledLanguage;
+    language: Language;
     /**
      * The code to be highlighted
      */
     children: string;
     /**
-     * The color theme for syntax highlighting, only Shiki themes are supported at this time
+     * The color theme for syntax highlighting
+     * Supports Shiki and custom textmate themes
      * @see https://shiki.style/themes
      */
-    theme: BundledTheme;
+    theme: Theme;
+    /**
+     * The delay in milliseconds between streamed updates
+     * Use this when highlighting code being streamed on the client
+     * @default undefined (no delay)
+     */
+    delay?: number;
     /**
      * Controls the application of default styles to the generated code blocks
      *
@@ -46,29 +77,26 @@ interface ShikiHighlighterProps {
 }
 /**
  * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.
- *
- * It uses the Shiki library to render beautiful, theme-based syntax highlighting.
+ * It uses Shiki to render beautiful, theme-based syntax highlighting with optimized performance.
  *
  * @example
  * ```tsx
- * <ShikiHighlighter language="tsx" theme="vitesse-black">
- *   {code.trim()}
+ * <ShikiHighlighter
+ *   language="typescript"
+ *   theme="github-dark"
+ *   delay={100} // Optional throttling for streamed updates
+ * >
+ *   {code}
  * </ShikiHighlighter>
  * ```
  */
-declare const ShikiHighlighter: ({ language, theme, addDefaultStyles, style, className, showLanguage, children: code, as: Element, }: ShikiHighlighterProps) => React.ReactElement;
+declare const ShikiHighlighter: ({ language, theme, delay, addDefaultStyles, style, className, showLanguage, children: code, as: Element, }: ShikiHighlighterProps) => React.ReactElement;
 
-/**
- *
- * `useShikiHighlighter` is a custom hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code parsed as a ReactNode.
- *
- * @example
- * ```tsx
- * const highlightedCode = useShikiHighlighter(code, language, theme);
- * ```
- *
- */
-declare const useShikiHighlighter: (code: string, lang: BundledLanguage | undefined, theme: BundledTheme) => ReactNode | null;
+/************************************************************************
+ ** A React hook that provides syntax highlighting using Shiki. Uses a **
+ ** singleton highlighter instance and supports throttled updates.     **
+*************************************************************************/
+declare const useShikiHighlighter: (code: string, lang: Language, theme: Theme, options?: HighlighterOptions) => ReactNode | null;
 
 declare const isInlineCode: (node: Element) => boolean;
 

package/dist/index.js

@@ -1,3 +1,3 @@
-function a(e,{insertAt:o}={}){if(!e||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",o==="top"&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}a(`.relative{position:relative}.container pre{overflow:auto;border-radius:.5rem;padding:1.25rem 1.5rem}.languageLabel{position:absolute;right:.75rem;top:.5rem;font-family:monospace;font-size:.75rem;letter-spacing:-.05em;color:#6b7280d9}
-`);import g from"react";import p from"html-react-parser";import{useEffect as f,useState as y}from"react";import{codeToHtml as h}from"shiki";var c=e=>e.position?.start.line===e.position?.end.line,s={pre(e){e.properties.tabindex="-1"}};var d=(e,o,r)=>{let[t,i]=y(null);return f(()=>{(async()=>{try{let n=await h(e,{lang:o,theme:r,transformers:[s]});i(p(n))}catch{let l=await h(e,{lang:"plaintext",theme:r,transformers:[s]});i(p(l))}})()},[e,r,o]),t};import{clsx as x}from"clsx";var C=({language:e,theme:o,addDefaultStyles:r=!0,style:t,className:i,showLanguage:m=!0,children:n,as:l="pre"})=>{let u=d(n,e,o);return g.createElement(l,{className:x("relative",r&&"container",i),style:t},m&&e?g.createElement("span",{className:"languageLabel",style:t},e):null,u)};export{C as default,c as isInlineCode,d as useShikiHighlighter};
+function g(e,{insertAt:i}={}){if(!e||typeof document>"u")return;let t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",i==="top"&&t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}g(`.relative{position:relative}.container pre{overflow:auto;border-radius:.5rem;padding:1.25rem 1.5rem}.languageLabel{position:absolute;right:.75rem;top:.5rem;font-family:monospace;font-size:.75rem;letter-spacing:-.05em;color:#6b7280d9}
+`);import p from"react";import{clsx as I}from"clsx";import{useEffect as T,useRef as H,useState as b}from"react";import S from"html-react-parser";import{createHighlighter as w,ShikiError as u}from"shiki";var x=e=>e.position?.start.line===e.position?.end.line,d={pre(e){e.properties.tabindex="-1"}};var m=null,L=async e=>{m||(m=w({themes:[],langs:[]}));let i=await m;return await E(i,e),i},E=async(e,i)=>{try{await e.loadTheme(i)}catch(t){throw t instanceof u&&console.warn("Error loading theme:",t.message),t}},P=async(e,i)=>{let t=i??"plaintext";try{return await e.loadLanguage(t),t}catch(r){return r instanceof u&&r.message.includes("not included in this bundle")&&console.warn(`Language '${t}' not supported, falling back to plaintext`),"plaintext"}},k=(e,i,t)=>{let r=Date.now();clearTimeout(i.current.timeoutId);let o=Math.max(0,i.current.nextAllowedTime-r);i.current.timeoutId=setTimeout(()=>{e().catch(console.error),i.current.nextAllowedTime=r+t},o)},c=(e,i,t,r={})=>{let[o,h]=b(null),n=H({nextAllowedTime:0,timeoutId:void 0});return T(()=>{let a=!0,l=async()=>{let s=await L(t),f=await P(s,i),y=s.codeToHtml(e,{lang:f,theme:t,transformers:[d]});a&&h(S(y))};return r.delay?k(l,n,r.delay):l().catch(console.error),()=>{a=!1,clearTimeout(n.current.timeoutId)}},[e,i]),o};var R=({language:e,theme:i,delay:t,addDefaultStyles:r=!0,style:o,className:h,showLanguage:n=!0,children:a,as:l="pre"})=>{let s=c(a,e,i,{delay:t});return p.createElement(l,{className:I("relative",r&&"container",h),style:o},n&&e?p.createElement("span",{className:"languageLabel",style:o},e):null,s)};export{R as default,x as isInlineCode,c as useShikiHighlighter};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/ShikiHighlighter.tsx","../src/useShiki.ts","../src/utils.ts"],"sourcesContent":["\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".relative{position:relative}.container pre{overflow:auto;border-radius:.5rem;padding:1.25rem 1.5rem}.languageLabel{position:absolute;right:.75rem;top:.5rem;font-family:monospace;font-size:.75rem;letter-spacing:-.05em;color:#6b7280d9}\\n\")","import './styles.css';\n// biome-ignore lint/style/useImportType: Package needs React to be imported\nimport React from 'react';\nimport type { BundledLanguage, BundledTheme } from 'shiki';\nimport { useShikiHighlighter } from '@/useShiki';\nimport { clsx } from 'clsx';\n\nexport interface ShikiHighlighterProps {\n  /** \n   * The programming language for syntax highlighting\n   * @see https://shiki.style/languages\n   */\n  language: BundledLanguage;\n\n  /** \n   * The code to be highlighted \n   */\n  children: string;\n\n  /** \n   * The color theme for syntax highlighting, only Shiki themes are supported at this time\n   * @see https://shiki.style/themes\n   */\n  theme: BundledTheme;\n\n  /**\n   * Controls the application of default styles to the generated code blocks\n   *\n   * Default styles include padding, overflow handling, border radius, language label styling, and font settings\n   * @default true\n   */\n  addDefaultStyles?: boolean;\n\n  /** \n   * Add custom inline styles to the generated code block \n   */\n  style?: React.CSSProperties;\n\n  /** \n   * Add custom CSS class names to the generated code block \n   */\n  className?: string;\n\n  /** \n   * Whether to show the language label\n   * @default true\n   */\n  showLanguage?: boolean;\n\n  /** \n   * The HTML element that wraps the generated code block.\n   * @default 'pre'\n   */\n  as?: React.ElementType;\n}\n\n/**\n * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.\n *\n * It uses the Shiki library to render beautiful, theme-based syntax highlighting.\n *\n * @example\n * ```tsx\n * <ShikiHighlighter language=\"tsx\" theme=\"vitesse-black\">\n *   {code.trim()}\n * </ShikiHighlighter>\n * ```\n */\nexport const ShikiHighlighter = ({\n  language,\n  theme,\n  addDefaultStyles = true,\n  style,\n  className,\n  showLanguage = true,\n  children: code,\n  as: Element = 'pre',\n}: ShikiHighlighterProps): React.ReactElement => {\n  const highlightedCode = useShikiHighlighter(code, language, theme);\n\n  return (\n    <Element\n      className={clsx(\n        'relative',\n        addDefaultStyles && 'container',\n        className\n      )}\n      style={style}\n    >\n      {showLanguage && language ? (\n        <span className=\"languageLabel\" style={style}>\n          {language}\n        </span>\n      ) : null}\n      {highlightedCode}\n    </Element>\n  );\n};\n","import parse from 'html-react-parser';\nimport { type ReactNode, useEffect, useState } from 'react';\nimport { type BundledLanguage, type BundledTheme, codeToHtml } from 'shiki';\nimport { removeTabIndexFromPre } from '@/utils';\n\n/**\n * \n * `useShikiHighlighter` is a custom hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code parsed as a ReactNode.\n *\n * @example\n * ```tsx\n * const highlightedCode = useShikiHighlighter(code, language, theme);\n * ```\n * \n */\nexport const useShikiHighlighter = (\n  code: string,\n  lang: BundledLanguage | undefined,\n  theme: BundledTheme\n): ReactNode | null => {\n  const [highlightedCode, setHighlightedCode] = useState<ReactNode | null>(\n    null\n  );\n\n  useEffect(() => {\n    const highlightCode = async () => {\n      try {\n        const html = await codeToHtml(code, {\n          lang: lang as BundledLanguage,\n          theme,\n          transformers: [removeTabIndexFromPre],\n        });\n        setHighlightedCode(parse(html));\n      } catch (error) {\n        const fallbackHtml = await codeToHtml(code, {\n          lang: 'plaintext',\n          theme,\n          transformers: [removeTabIndexFromPre],\n        });\n        setHighlightedCode(parse(fallbackHtml));\n      }\n    };\n\n    highlightCode();\n  }, [code, theme, lang]);\n\n  return highlightedCode;\n};\n","import type { Element } from 'hast';\n\nexport const isInlineCode = (node: Element): boolean => {\n  return node.position?.start.line === node.position?.end.line;\n};\n\n\nexport const removeTabIndexFromPre = {\n  pre(node: Element) {\n    node.properties.tabindex = '-1';\n  },\n};\n\nexport type { Element };\n"],"mappings":"AACyB,SAARA,EAA6BC,EAAK,CAAE,SAAAC,CAAS,EAAI,CAAC,EAAG,CAC1D,GAAI,CAACD,GAAO,OAAO,SAAa,IAAa,OAE7C,IAAME,EAAO,SAAS,MAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC,EAC/DC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,KAAO,WAETF,IAAa,OACXC,EAAK,WACPA,EAAK,aAAaC,EAAOD,EAAK,UAAU,EAK1CA,EAAK,YAAYC,CAAK,EAGpBA,EAAM,WACRA,EAAM,WAAW,QAAUH,EAE3BG,EAAM,YAAY,SAAS,eAAeH,CAAG,CAAC,CAElD,CCvB8BI,EAAY;AAAA,CAA6O,ECEjS,OAAOC,MAAW,QCFlB,OAAOC,MAAW,oBAClB,OAAyB,aAAAC,EAAW,YAAAC,MAAgB,QACpD,OAAkD,cAAAC,MAAkB,QCA7D,IAAMC,EAAgBC,GACpBA,EAAK,UAAU,MAAM,OAASA,EAAK,UAAU,IAAI,KAI7CC,EAAwB,CACnC,IAAID,EAAe,CACjBA,EAAK,WAAW,SAAW,IAC7B,CACF,EDIO,IAAME,EAAsB,CACjCC,EACAC,EACAC,IACqB,CACrB,GAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAC5C,IACF,EAEA,OAAAC,EAAU,IAAM,EACQ,SAAY,CAChC,GAAI,CACF,IAAMC,EAAO,MAAMC,EAAWR,EAAM,CAClC,KAAMC,EACN,MAAAC,EACA,aAAc,CAACO,CAAqB,CACtC,CAAC,EACDL,EAAmBM,EAAMH,CAAI,CAAC,CAChC,MAAgB,CACd,IAAMI,EAAe,MAAMH,EAAWR,EAAM,CAC1C,KAAM,YACN,MAAAE,EACA,aAAc,CAACO,CAAqB,CACtC,CAAC,EACDL,EAAmBM,EAAMC,CAAY,CAAC,CACxC,CACF,GAEc,CAChB,EAAG,CAACX,EAAME,EAAOD,CAAI,CAAC,EAEfE,CACT,ED1CA,OAAS,QAAAS,MAAY,OA+Dd,IAAMC,EAAmB,CAAC,CAC/B,SAAAC,EACA,MAAAC,EACA,iBAAAC,EAAmB,GACnB,MAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,GACf,SAAUC,EACV,GAAIC,EAAU,KAChB,IAAiD,CAC/C,IAAMC,EAAkBC,EAAoBH,EAAMN,EAAUC,CAAK,EAEjE,OACES,EAAA,cAACH,EAAA,CACC,UAAWT,EACT,WACAI,GAAoB,YACpBE,CACF,EACA,MAAOD,GAENE,GAAgBL,EACfU,EAAA,cAAC,QAAK,UAAU,gBAAgB,MAAOP,GACpCH,CACH,EACE,KACHQ,CACH,CAEJ","names":["styleInject","css","insertAt","head","style","styleInject","React","parse","useEffect","useState","codeToHtml","isInlineCode","node","removeTabIndexFromPre","useShikiHighlighter","code","lang","theme","highlightedCode","setHighlightedCode","useState","useEffect","html","codeToHtml","removeTabIndexFromPre","parse","fallbackHtml","clsx","ShikiHighlighter","language","theme","addDefaultStyles","style","className","showLanguage","code","Element","highlightedCode","useShikiHighlighter","React"]}
+{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/ShikiHighlighter.tsx","../src/useShiki.ts","../src/utils.ts"],"sourcesContent":["\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".relative{position:relative}.container pre{overflow:auto;border-radius:.5rem;padding:1.25rem 1.5rem}.languageLabel{position:absolute;right:.75rem;top:.5rem;font-family:monospace;font-size:.75rem;letter-spacing:-.05em;color:#6b7280d9}\\n\")","import './styles.css';\nimport React from 'react';\nimport { clsx } from 'clsx';\nimport { useShikiHighlighter } from './useShiki';\nimport type { Language, Theme, HighlighterOptions } from './types';\n\n/**\n * Props for the ShikiHighlighter component\n */\nexport interface ShikiHighlighterProps extends HighlighterOptions {\n  /** \n   * The programming language for syntax highlighting\n   * @see https://shiki.style/languages\n   */\n  language: Language;\n\n  /** \n   * The code to be highlighted \n   */\n  children: string;\n\n  /** \n   * The color theme for syntax highlighting\n   * Supports Shiki and custom textmate themes\n   * @see https://shiki.style/themes\n   */\n  theme: Theme;\n\n  /** \n   * The delay in milliseconds between streamed updates\n   * Use this when highlighting code being streamed on the client\n   * @default undefined (no delay)\n   */\n  delay?: number;\n\n  /**\n   * Controls the application of default styles to the generated code blocks\n   *\n   * Default styles include padding, overflow handling, border radius, language label styling, and font settings\n   * @default true\n   */\n  addDefaultStyles?: boolean;\n\n  /** \n   * Add custom inline styles to the generated code block \n   */\n  style?: React.CSSProperties;\n\n  /** \n   * Add custom CSS class names to the generated code block \n   */\n  className?: string;\n\n  /** \n   * Whether to show the language label\n   * @default true\n   */\n  showLanguage?: boolean;\n\n  /** \n   * The HTML element that wraps the generated code block.\n   * @default 'pre'\n   */\n  as?: React.ElementType;\n}\n\n/**\n * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.\n * It uses Shiki to render beautiful, theme-based syntax highlighting with optimized performance.\n *\n * @example\n * ```tsx\n * <ShikiHighlighter \n *   language=\"typescript\" \n *   theme=\"github-dark\"\n *   delay={100} // Optional throttling for streamed updates\n * >\n *   {code}\n * </ShikiHighlighter>\n * ```\n */\nexport const ShikiHighlighter = ({\n  language,\n  theme,\n  delay,\n  addDefaultStyles = true,\n  style,\n  className,\n  showLanguage = true,\n  children: code,\n  as: Element = 'pre',\n}: ShikiHighlighterProps): React.ReactElement => {\n  const highlightedCode = useShikiHighlighter(code, language, theme, { delay });\n\n  return (\n    <Element\n      className={clsx(\n        'relative',\n        addDefaultStyles && 'container',\n        className\n      )}\n      style={style}\n    >\n      {showLanguage && language ? (\n        <span className=\"languageLabel\" style={style}>\n          {language}\n        </span>\n      ) : null}\n      {highlightedCode}\n    </Element>\n  );\n};\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport parse from 'html-react-parser';\n\nimport {\n  createHighlighter,\n  ShikiError,\n  type BundledLanguage,\n  type Highlighter\n} from 'shiki';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState\n} from './types';\n\nimport { removeTabIndexFromPre } from '@/utils';\n\n\n/************************************\n ** Singleton highlighter instance **\n ************************************/\nlet highlighterPromise: Promise<Highlighter> | null = null;\n\n\n/***********************************************************\n ** Creates or returns the singleton highlighter instance **\n ***********************************************************/\nconst makeHighlighter = async (theme: Theme): Promise<Highlighter> => {\n  if (!highlighterPromise) {\n    highlighterPromise = createHighlighter({\n      themes: [],\n      langs: []\n    });\n  }\n\n  const highlighter = await highlighterPromise;\n  await loadTheme(highlighter, theme);\n  return highlighter;\n};\n\n\n/************************************************************\n ** Loads a theme dynamically if it hasn't been loaded yet **\n ************************************************************/\nconst loadTheme = async (\n  highlighter: Highlighter,\n  theme: Theme\n): Promise<void> => {\n  try {\n    await highlighter.loadTheme(theme);\n  } catch (error) {\n    if (error instanceof ShikiError) {\n      console.warn('Error loading theme:', error.message);\n    }\n    throw error;\n  }\n};\n\n\n/******************************************************************************\n ** Loads a language dynamically, falling back to plaintext if not available **                                             **\n ******************************************************************************/\nconst loadLanguage = async (\n  highlighter: Highlighter,\n  lang: Language\n): Promise<string> => {\n  const resolvedLanguage = lang ?? 'plaintext';\n\n  try {\n    await highlighter.loadLanguage(resolvedLanguage as BundledLanguage);\n    return resolvedLanguage;\n  } catch (error) {\n    if (error instanceof ShikiError && error.message.includes('not included in this bundle')) {\n      console.warn(`Language '${resolvedLanguage}' not supported, falling back to plaintext`);\n    }\n    return 'plaintext';\n  }\n};\n\n\n/*******************************************************************************\n ** Throttles highlighting operations to prevent overwhelming the highlighter **                                               **\n *******************************************************************************/\nconst throttleHighlighting = (\n  performHighlight: () => Promise<void>,\n  timeoutControl: React.MutableRefObject<TimeoutState>,\n  throttleMs: number\n) => {\n  const now = Date.now();\n  clearTimeout(timeoutControl.current.timeoutId);\n\n  const delay = Math.max(0, timeoutControl.current.nextAllowedTime - now);\n  timeoutControl.current.timeoutId = setTimeout(() => {\n    performHighlight().catch(console.error);\n    timeoutControl.current.nextAllowedTime = now + throttleMs;\n  }, delay);\n};\n\n\n/************************************************************************\n ** A React hook that provides syntax highlighting using Shiki. Uses a **\n ** singleton highlighter instance and supports throttled updates.     **\n*************************************************************************/\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  theme: Theme,\n  options: HighlighterOptions = {}\n): ReactNode | null => {\n  const [highlightedCode, setHighlightedCode] = useState<ReactNode | null>(null);\n  const delayRef = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined\n  });\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const highlightCode = async () => {\n      const highlighter = await makeHighlighter(theme);\n      const language = await loadLanguage(highlighter, lang);\n\n      const html = highlighter.codeToHtml(code, {\n        lang: language,\n        theme,\n        transformers: [removeTabIndexFromPre],\n      });\n\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    if (options.delay) {\n      throttleHighlighting(highlightCode, delayRef, options.delay);\n    } else {\n      highlightCode().catch(console.error);\n    }\n\n    return () => {\n      isMounted = false;\n      clearTimeout(delayRef.current.timeoutId);\n    };\n  }, [code, lang]);\n\n  return highlightedCode;\n};\n","import type { Element } from 'hast';\n\nexport const isInlineCode = (node: Element): boolean => {\n  return node.position?.start.line === node.position?.end.line;\n};\n\n\nexport const removeTabIndexFromPre = {\n  pre(node: Element) {\n    node.properties.tabindex = '-1';\n  },\n};\n\nexport type { Element };\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","clsx","useEffect","useRef","useState","parse","createHighlighter","ShikiError","isInlineCode","node","removeTabIndexFromPre","highlighterPromise","makeHighlighter","theme","createHighlighter","highlighter","loadTheme","error","ShikiError","loadLanguage","lang","resolvedLanguage","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","useShikiHighlighter","code","options","highlightedCode","setHighlightedCode","useState","delayRef","useRef","useEffect","isMounted","highlightCode","language","html","removeTabIndexFromPre","parse","ShikiHighlighter","language","theme","delay","addDefaultStyles","style","className","showLanguage","code","Element","highlightedCode","useShikiHighlighter","React","clsx"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
+    "@types/node": "22.10.10",
     "@types/react": "^18.3.3",
     "tsup": "^8.2.4"
   },