react-shiki 0.3.0 → 0.4.0

package/README.md

@@ -1,11 +1,12 @@
 # 🎨 [react-shiki](https://npmjs.com/react-shiki)
 
 > [!NOTE]
-> This package is still a work in progress, fully functional but not
-> extensively tested.
+> This library is still in development, more features will 
+> continue to be implemented, and API may change. 
+> Contributions are welcome!
 
 Performant client side syntax highlighting component + hook
-for react using [Shiki](https://shiki.matsu.io/)
+for react built with [Shiki](https://shiki.matsu.io/)
 
 [See the demo page with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
 
@@ -18,6 +19,8 @@ for react using [Shiki](https://shiki.matsu.io/)
     - [`react-markdown`](#react-markdown)
     - [Check if code is inline](#check-if-code-is-inline)
     - [Custom themes](#custom-themes)
+    - [Custom languages](#custom-languages)
+      - [Preloading custom languages](#preloading-custom-languages)
     - [Custom transformers](#custom-transformers)
   - [Performance](#performance)
     - [Throttling real-time highlighting](#throttling-real-time-highlighting)
@@ -29,22 +32,21 @@ for react using [Shiki](https://shiki.matsu.io/)
 - 🖼️ 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`
-- 📦 Supports all Shiki languages and themes
-- 🖌️ Full support for custom TextMate themes in a JavaScript object format
+- 📦 Supports all built-in Shiki languages and themes
+- 🖌️ Full support for custom TextMate themes and languages
 - 🔧 Supports passing custom Shiki transformers to the highlighter
-- 🚰 Performant highlighting of streamed code on the client, with optional throttling
+- 🚰 Performant highlighting of streamed code, 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`
+- 🎨 Customizable styling of generated code blocks and language labels
 
 ## Installation
 
 ```bash
-[pnpm|bun|yarn|npm] install react-shiki
+pnpm install react-shiki
 ```
 
 ## Usage
@@ -95,6 +97,7 @@ The component accepts several props in addition to language and theme:
 - `style: object` - Inline style object to be passed to the component
 - `langStyle: object` - Inline style object to be passed to the language label
 - `langClassName: string` - Class names to be passed to the language label
+- `customLanguages: LanguageRegistration[]` - Custom languages to be preloaded for highlighting
 
 ```tsx
 function Houston() {
@@ -160,9 +163,9 @@ import { CodeHighlight } from "./CodeHighlight";
 
 ### Check if code is inline
 
-There are two ways to check if a code block is inline:
-`react-shiki` exports `isInlineCode`, good but marks multiline inline
-code tags as code blocks.
+There are two built-in ways to check if a code block is inline, both provide the same result:
+`react-shiki` exports `isInlineCode` which parses the `node` 
+prop to determine if the code is inline based on the presence of line breaks:
 
 ```tsx
 const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
@@ -178,8 +181,9 @@ return !isInline ? (
 );
 ```
 
-`react-shiki` also exports `rehypeInlineCodeProperty`, a more accurate way
-to determine if code is inline.
+`react-shiki` also exports `rehypeInlineCodeProperty`, a rehype plugin that adds
+an `inline` property to `react-markdown` to determine if code is inline based on 
+the presence of a `<pre>` tag as a parent of `<code>`.
 It's passed as a rehype plugin to `react-markdown`:
 
 ```tsx
@@ -196,7 +200,7 @@ import { rehypeInlineCodeProperty } from "react-shiki";
 </ReactMarkdown>;
 ```
 
-And can be accessed as a prop:
+Now `inline` can be accessed as a prop in the `CodeHighlight` component:
 
 ```tsx
 const CodeHighlight = ({
@@ -208,11 +212,12 @@ const CodeHighlight = ({
 }: CodeHighlightProps): JSX.Element => {
   const match = className?.match(/language-(\w+)/);
   const language = match ? match[1] : undefined;
+  const code = String(children).trim();
 
 
 return !inline ? (
   <ShikiHighlighter language={language} theme={"houston"} {...props}>
-    {String(children).trim()}
+    {code}
   </ShikiHighlighter>
 ) : (
   <code className={className} {...props}>
@@ -223,24 +228,67 @@ return !inline ? (
 
 ### Custom themes
 
+Pass custom TextMate themes as a JSON object:
+
 ```tsx
-import tokyoNight from '@styles/tokyo-night.mjs';
+import tokyoNight from '../styles/tokyo-night.json';
 
+// component
 <ShikiHighlighter language="tsx" theme={tokyoNight}>
-  {String(code)}
+  {String(code).trim()}
+</ShikiHighlighter>;
+
+// hook
+const highlightedCode = useShikiHighlighter(code, "tsx", tokyoNight);
+```
+
+### Custom languages
+
+Pass custom TextMate languages as a JSON object:
+
+```tsx
+import mcfunction from "../langs/mcfunction.tmLanguage.json"
+
+// component
+<ShikiHighlighter language={mcfunction} theme="github-dark" >
+  {String(code).trim()}
+</ShikiHighlighter>;
+
+// hook
+const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark");
+```
+#### Preloading custom languages
+
+For dynamic highlighting scenarios (like LLM chat apps) where language selection happens at runtime, preload custom languages to make them available when needed:
+
+```tsx
+import mcfunction from "../langs/mcfunction.tmLanguage.json"
+import bosque from "../langs/bosque.tmLanguage.json"
+
+// component
+<ShikiHighlighter language={mcfunction} theme="github-dark" customLanguages={[mcfunction, bosque]} >
+  {String(code).trim()}
 </ShikiHighlighter>;
+
+// hook
+const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark", { customLanguages: [mcfunction, bosque] });
 ```
 
 ### Custom transformers
 
 ```tsx
-import { customTransformer } from '@utils/customTransformers';
+import { customTransformer } from '../utils/shikiTransformers';
 
+// component
 <ShikiHighlighter
   language="tsx"
-  transformers={[customTransformer]}>
+  transformers={[customTransformer]}
+>
   {String(code).trim()}
 </ShikiHighlighter>;
+
+// hook
+const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", [customTransformer]);
 ```
 
 ## Performance

package/dist/index.d.ts

@@ -1,13 +1,49 @@
 import React, { ReactNode } from 'react';
-import { BundledLanguage, SpecialLanguage, ThemeRegistration, BundledTheme, ShikiTransformer } from 'shiki';
-import { Root, Element } from 'hast';
+import { LanguageRegistration as LanguageRegistration$1, ShikiTransformer, BundledLanguage, SpecialLanguage, ThemeRegistration, BundledTheme } from 'shiki';
+import { Element, Root } from 'hast';
 export { Element } from 'hast';
 
+/**
+ * Attribution:
+ *  This code was written by github:hippotastic in expressive-code/expressive-code
+ *  https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-shiki/src/languages.ts
+ */
+
+type IShikiRawRepository = LanguageRegistration$1['repository'];
+type IShikiRawRule = IShikiRawRepository[keyof IShikiRawRepository];
+type ILocation = IShikiRawRepository['$vscodeTextmateLocation'];
+interface ILocatable {
+    readonly $vscodeTextmateLocation?: ILocation;
+}
+interface IRawRepositoryMap {
+    [name: string]: IRawRule;
+}
+type IRawRepository = IRawRepositoryMap & ILocatable;
+interface IRawCapturesMap {
+    [captureId: string]: IRawRule;
+}
+type IRawCaptures = IRawCapturesMap & ILocatable;
+interface IRawRule extends Omit<IShikiRawRule, 'applyEndPatternLast' | 'captures' | 'patterns'> {
+    readonly applyEndPatternLast?: boolean | number;
+    readonly captures?: IRawCaptures;
+    readonly comment?: string;
+    readonly patterns?: IRawRule[];
+}
+/**
+ * A less strict version of Shiki's `LanguageRegistration` interface that aligns better with
+ * actual grammars found in the wild. This version attempts to reduce the amount
+ * of type errors that would occur when importing and adding external grammars,
+ * while still being supported by the language processing code.
+ */
+interface LanguageRegistration extends Omit<LanguageRegistration$1, 'repository'> {
+    repository?: IRawRepository;
+}
+
 /**
  * Languages for syntax highlighting.
  * @see https://shiki.style/languages
  */
-type Language = BundledLanguage | SpecialLanguage | (string & {}) | undefined;
+type Language = BundledLanguage | LanguageRegistration | SpecialLanguage | (string & {}) | undefined;
 /**
  * A textmate theme object or a Shiki BundledTheme
  * @see https://shiki.style/themes
@@ -26,6 +62,10 @@ type HighlighterOptions = {
      * Custom Shiki transformers to apply to the highlighted code.
      */
     transformers?: ShikiTransformer[];
+    /**
+     * Custom textmate grammar to be preloaded for highlighting.
+     */
+    customLanguages?: LanguageRegistration | LanguageRegistration[];
 };
 
 /**
@@ -90,6 +130,10 @@ interface ShikiHighlighterProps extends HighlighterOptions {
      * @default 'pre'
      */
     as?: React.ElementType;
+    /**
+     * Custom languages to be preloaded for highlighting.
+     */
+    customLanguages?: LanguageRegistration[];
 }
 /**
  * ShikiHighlighter is a React component that provides syntax highlighting for code snippets.
@@ -106,7 +150,7 @@ interface ShikiHighlighterProps extends HighlighterOptions {
  * </ShikiHighlighter>
  * ```
  */
-declare const ShikiHighlighter: ({ language, theme, delay, transformers, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, }: ShikiHighlighterProps) => React.ReactElement;
+declare const ShikiHighlighter: ({ language, theme, delay, transformers, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, }: ShikiHighlighterProps) => React.ReactElement;
 
 /**
  * A React hook that provides syntax highlighting using Shiki.
@@ -116,24 +160,27 @@ declare const ShikiHighlighter: ({ language, theme, delay, transformers, addDefa
  * const highlightedCode = useShikiHighlighter(code, language, theme, {
  *   transformers: [removeTabIndexFromPre],
  *   delay: 150
+ *   customLanguages: ['bosque', 'mcfunction']
  * });
  */
 declare const useShikiHighlighter: (code: string, lang: Language, theme: Theme, options?: HighlighterOptions) => ReactNode;
 
 /**
- * Rehype plugin to add an 'inline' property to <code> elements.
- * Sets an 'inline' property to true if the <code> is not within a <pre> tag.
+ * Rehype plugin to add an 'inline' property to <code> elements
+ * Sets 'inline' property to true if the <code> is not within a <pre> tag
  *
- * Pass this plugin to the `rehypePlugins` prop of ReactMarkdown.
- * You can then access `inline` as a prop from ReactMarkdown.
+ * Pass this plugin to the `rehypePlugins` prop of react-markdown
+ * You can then access `inline` as a prop in components passed to react-markdown
  *
  * @example
  * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />
  */
 declare function rehypeInlineCodeProperty(): (tree: Root) => undefined;
 /**
- * Function to determine if code is inline based on the presence of line breaks.
- * Reports `inline = true` for single line fenced code blocks.
+ * Function to determine if code is inline based on the presence of line breaks
+ *
+ * @example
+ * const isInline = node && isInlineCode(node: Element)
  */
 declare const isInlineCode: (node: Element) => boolean;
 

package/dist/index.js

@@ -1,4 +1,4 @@
-function h(e,{insertAt:i}={}){if(!e||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",i==="top"&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}h(`.relative{position:relative}.defaultStyles 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 x from"react";import{clsx as S}from"clsx";import{useEffect as E,useRef as I,useState as v}from"react";import R from"html-react-parser";import{createHighlighter as N,createSingletonShorthands as P}from"shiki";import{visit as L}from"unist-util-visit";import{bundledLanguages as b,isSpecialLang as H}from"shiki";function C(){return function(e){L(e,"element",function(i,r,t){i.tagName==="code"&&t.tagName!=="pre"&&(i.properties.inline=!0)})}}var k=e=>!(e.children||[]).filter(r=>r.type==="text").map(r=>r.value).join("").includes(`
-`),c={pre(e){return"properties"in e&&(e.properties.tabindex="-1"),e}},f=(e,i,r)=>{let t=Date.now();clearTimeout(i.current.timeoutId);let o=Math.max(0,i.current.nextAllowedTime-t);i.current.timeoutId=setTimeout(()=>{e().catch(console.error),i.current.nextAllowedTime=t+r},o)},y=e=>typeof e=="string"&&!(e in b)&&!H(e)?"plaintext":e;var w=P(N),u=(e,i,r,t={})=>{let[o,m]=v(null),p=y(i),n=I({nextAllowedTime:0,timeoutId:void 0});return E(()=>{let a=!0,g=[c,...t.transformers||[]],s=async()=>{let d=await w.codeToHtml(e,{lang:p,theme:r,transformers:g});a&&m(R(d))},{delay:l}=t;return l?f(s,n,l):s().catch(console.error),()=>{a=!1,clearTimeout(n.current.timeoutId)}},[e,i]),o};var B=({language:e,theme:i,delay:r,transformers:t,addDefaultStyles:o=!0,style:m,langStyle:p,className:n,langClassName:a,showLanguage:g=!0,children:s,as:l="pre"})=>{let T=u(s,e,i,{delay:r,transformers:t});return x.createElement(l,{"data-testid":"shiki-container",className:S("relative","not-prose",o&&"defaultStyles",n),style:m,id:"shiki-container"},g&&e?x.createElement("span",{className:S("languageLabel",a),style:p,id:"language-label"},e):null,T)};export{B as default,k as isInlineCode,C as rehypeInlineCodeProperty,u as useShikiHighlighter};
+function L(e,{insertAt:r}={}){if(!e||typeof document>"u")return;let i=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",r==="top"&&i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}L(`.relative{position:relative}.defaultStyles 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 R from"react";import{clsx as b}from"clsx";import{useEffect as O,useRef as j,useState as M}from"react";import z from"html-react-parser";import{createHighlighter as H,createSingletonShorthands as $}from"shiki";import{visit as w}from"unist-util-visit";import{bundledLanguages as E,isSpecialLang as N}from"shiki";function P(){return function(e){w(e,"element",function(r,i,t){r.tagName==="code"&&t.tagName!=="pre"&&(r.properties.inline=!0)})}}var A=e=>!(e.children||[]).filter(i=>i.type==="text").map(i=>i.value).join("").includes(`
+`),S={pre(e){return"properties"in e&&(e.properties.tabindex="-1"),e}},T=(e,r,i)=>{let t=Date.now();clearTimeout(r.current.timeoutId);let o=Math.max(0,r.current.nextAllowedTime-t);r.current.timeoutId=setTimeout(()=>{e().catch(console.error),r.current.nextAllowedTime=t+i},o)},u=(e,r=[])=>{if(e&&typeof e=="object")return{isCustom:!0,languageId:e.name,displayLanguageId:e.name,resolvedLanguage:e};if(typeof e=="string"){let i=e;if(e in E||N(e))return{isCustom:!1,languageId:e,displayLanguageId:i};let t=r.find(o=>o.fileTypes?.includes(e)||o.scopeName?.split(".")[1]===e||o.name?.toLowerCase()===e.toLowerCase());return t?{isCustom:!0,languageId:t.name,displayLanguageId:i,resolvedLanguage:t}:{isCustom:!1,languageId:"plaintext",displayLanguageId:i}}return{isCustom:!1,languageId:"plaintext",displayLanguageId:"plaintext"}};var B=$(H),I=new Map,x=(e,r,i,t={})=>{let[o,p]=M(null),d=typeof i=="string"?i:i.name,h=t.customLanguages?Array.isArray(t.customLanguages)?t.customLanguages:[t.customLanguages]:[],{isCustom:c,languageId:f,resolvedLanguage:g}=u(r,h),m=j({nextAllowedTime:0,timeoutId:void 0}),n=async(s,l)=>{let a=I.get(s);return a||(a=H({langs:[l],themes:[i]}),I.set(s,a)),a};return O(()=>{let s=!0,l=[S,...t.transformers||[]],a=async()=>{let y=await(c&&g?await n(`${g.name}--${d}`,g):B).codeToHtml(e,{lang:f,theme:i,transformers:l});s&&p(z(y))};return t.delay?T(a,m,t.delay):a().catch(console.error),()=>{s=!1,clearTimeout(m.current.timeoutId)}},[e,r]),o};var D=({language:e,theme:r,delay:i,transformers:t,addDefaultStyles:o=!0,style:p,langStyle:d,className:h,langClassName:c,showLanguage:f=!0,children:g,as:m="pre",customLanguages:n})=>{let s={delay:i,transformers:t,customLanguages:n},l=n?Array.isArray(n)?n:[n]:[],{isCustom:a,languageId:C,displayLanguageId:y,resolvedLanguage:v}=u(e,l),k=x(g,e,r,s);return R.createElement(m,{"data-testid":"shiki-container",className:b("relative","not-prose",o&&"defaultStyles",h),style:p,id:"shiki-container"},f&&e?R.createElement("span",{className:b("languageLabel",c),style:d,id:"language-label"},a?`${v?.scopeName.split(".")[1]}`:y||C):null,k)};export{D as default,A as isInlineCode,P as rehypeInlineCodeProperty,x 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}.defaultStyles 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';\nimport type { ShikiTransformer } from 'shiki';\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   * Pass custom Shiki transformers to the highlighter\n   */\n  transformers?: ShikiTransformer[];\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 inline styles to the language label \n   */\n  langStyle?: React.CSSProperties;\n\n  /** \n   * Add custom CSS class names to the generated code block \n   */\n  className?: string;\n\n  /** \n   * Add custom CSS class names to the language label \n   */\n  langClassName?: 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  transformers,\n  addDefaultStyles = true,\n  style,\n  langStyle,\n  className,\n  langClassName,\n  showLanguage = true,\n  children: code,\n  as: Element = 'pre',\n}: ShikiHighlighterProps): React.ReactElement => {\n  const options: HighlighterOptions = { delay, transformers };\n  const highlightedCode = useShikiHighlighter(code, language, theme, options);\n\n  return (\n    <Element\n      data-testid=\"shiki-container\"\n      className={clsx(\n        'relative',\n        'not-prose',\n        addDefaultStyles && 'defaultStyles',\n        className\n      )}\n      style={style}\n      id='shiki-container'\n    >\n      {showLanguage && language ? (\n        <span\n          className={clsx('languageLabel', langClassName)}\n          style={langStyle}\n          id='language-label'\n        >\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  createSingletonShorthands,\n} from 'shiki';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState\n} from './types';\n\nimport { \n  removeTabIndexFromPre,\n  throttleHighlighting,\n  resolvedLang\n} from './utils';\n\n\n/**\n * Create singleton shorthands which handle automatic loading\n * of the languages and themes, with support for custom themes.\n */\nconst highlighter = createSingletonShorthands(createHighlighter);\n\n\n/**\n * A React hook that provides syntax highlighting using Shiki.\n * Supports optional throttled highlights and custom themes.\n *\n * @example\n * const highlightedCode = useShikiHighlighter(code, language, theme, {\n *   transformers: [removeTabIndexFromPre],\n *   delay: 150\n * });\n */\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  theme: Theme,\n  options: HighlighterOptions = {}\n) => {\n  const [highlightedCode, setHighlightedCode] = useState<ReactNode | null>(null);\n  const language = resolvedLang(lang);\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined\n  });\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const transformers = [removeTabIndexFromPre, ...(options.transformers || [])];\n\n    const highlightCode = async () => {\n      const html = await highlighter.codeToHtml(code, {\n        lang: language,\n        theme,\n        transformers\n      });\n\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    const { delay } = options;\n\n    if (delay) {\n      throttleHighlighting(highlightCode, timeoutControl, delay);\n    } else {\n      highlightCode().catch(console.error);\n    }\n\n    return () => {\n      isMounted = false;\n      clearTimeout(timeoutControl.current.timeoutId);\n    };\n  }, [code, lang]);\n\n  return highlightedCode;\n};\n\n","import { visit } from 'unist-util-visit';\nimport { bundledLanguages, isSpecialLang, } from 'shiki';\nimport type { BundledLanguage, ShikiTransformer } from 'shiki';\nimport type { Element, Root } from 'hast';\nimport type { Language, TimeoutState } from './types';\n\n/**\n * Rehype plugin to add an 'inline' property to <code> elements.\n * Sets an 'inline' property to true if the <code> is not within a <pre> tag.\n *\n * Pass this plugin to the `rehypePlugins` prop of ReactMarkdown.\n * You can then access `inline` as a prop from ReactMarkdown.\n *\n * @example\n * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />\n */\nexport function rehypeInlineCodeProperty() {\n  return function (tree: Root): undefined {\n    visit(tree as any, 'element', function (node: Element, _index, parent: Element) {\n      if (node.tagName === 'code' && parent.tagName !== 'pre') {\n        node.properties.inline = true;\n      }\n    });\n  }\n}\n\n\n/**\n * Function to determine if code is inline based on the presence of line breaks.\n * Reports `inline = true` for single line fenced code blocks.\n */\nexport const isInlineCode = (node: Element): boolean => {\n  const textContent = (node.children || [])\n    .filter((child) => child.type === 'text')\n    .map((child) => child.value)\n    .join('');\n\n  return !textContent.includes('\\n');\n};\n\n\n/**\n * Shiki transformer to remove tabindex from <pre> elements.\n */\nexport const removeTabIndexFromPre: ShikiTransformer = {\n  pre(node) {\n    if ('properties' in node) {\n      node.properties.tabindex = '-1';\n    }\n    return node;\n  },\n};\n\n\n/**\n * Optionally throttles rapid sequential highlighting operations.\n * Exported for testing in __tests__/throttleHighlighting.test.ts\n *\n * @example\n * const timeoutControl = useRef<TimeoutState>({\n *   nextAllowedTime: 0,\n *   timeoutId: undefined\n * });\n *\n * throttleHighlighting(highlightCode, timeoutControl, 1000);\n  */\nexport const 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 * Resolve the requested language to a bundled language.\n * If the language is not special or not included in Shiki’s bundledLanguages,\n * fall back to \"plaintext\".\n *\n * @returns {BundledLanguage} The resolved language.\n */\nexport const resolvedLang = (lang: Language): BundledLanguage => {\n  if (typeof lang === 'string') {\n    if (!(lang in bundledLanguages) && !isSpecialLang(lang)) {\n      return 'plaintext' as BundledLanguage;\n    }\n    return lang as BundledLanguage;\n  }\n  return lang as Language as BundledLanguage;\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,CAAiP,ECCrS,OAAOC,MAAW,QAClB,OAAS,QAAAC,MAAY,OCFrB,OAAS,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgC,QAC5D,OAAOC,MAAW,oBAElB,OACE,qBAAAC,EACA,6BAAAC,MACK,QCNP,OAAS,SAAAC,MAAa,mBACtB,OAAS,oBAAAC,EAAkB,iBAAAC,MAAsB,QAe1C,SAASC,GAA2B,CACzC,OAAO,SAAUC,EAAuB,CACtCJ,EAAMI,EAAa,UAAW,SAAUC,EAAeC,EAAQC,EAAiB,CAC1EF,EAAK,UAAY,QAAUE,EAAO,UAAY,QAChDF,EAAK,WAAW,OAAS,GAE7B,CAAC,CACH,CACF,CAOO,IAAMG,EAAgBH,GAMpB,EALcA,EAAK,UAAY,CAAC,GACpC,OAAQI,GAAUA,EAAM,OAAS,MAAM,EACvC,IAAKA,GAAUA,EAAM,KAAK,EAC1B,KAAK,EAAE,EAEU,SAAS;AAAA,CAAI,EAOtBC,EAA0C,CACrD,IAAIL,EAAM,CACR,MAAI,eAAgBA,IAClBA,EAAK,WAAW,SAAW,MAEtBA,CACT,CACF,EAeaM,EAAuB,CAClCC,EACAC,EACAC,IACG,CACH,IAAMC,EAAM,KAAK,IAAI,EACrB,aAAaF,EAAe,QAAQ,SAAS,EAE7C,IAAMG,EAAQ,KAAK,IAAI,EAAGH,EAAe,QAAQ,gBAAkBE,CAAG,EACtEF,EAAe,QAAQ,UAAY,WAAW,IAAM,CAClDD,EAAiB,EAAE,MAAM,QAAQ,KAAK,EACtCC,EAAe,QAAQ,gBAAkBE,EAAMD,CACjD,EAAGE,CAAK,CACV,EASaC,EAAgBC,GACvB,OAAOA,GAAS,UACd,EAAEA,KAAQjB,IAAqB,CAACC,EAAcgB,CAAI,EAC7C,YAIJA,EDrET,IAAMC,EAAcC,EAA0BC,CAAiB,EAalDC,EAAsB,CACjCC,EACAC,EACAC,EACAC,EAA8B,CAAC,IAC5B,CACH,GAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAA2B,IAAI,EACvEC,EAAWC,EAAaP,CAAI,EAE5BQ,EAAiBC,EAAqB,CAC1C,gBAAiB,EACjB,UAAW,MACb,CAAC,EAED,OAAAC,EAAU,IAAM,CACd,IAAIC,EAAY,GAEVC,EAAe,CAACC,EAAuB,GAAIX,EAAQ,cAAgB,CAAC,CAAE,EAEtEY,EAAgB,SAAY,CAChC,IAAMC,EAAO,MAAMpB,EAAY,WAAWI,EAAM,CAC9C,KAAMO,EACN,MAAAL,EACA,aAAAW,CACF,CAAC,EAEGD,GACFP,EAAmBY,EAAMD,CAAI,CAAC,CAElC,EAEM,CAAE,MAAAE,CAAM,EAAIf,EAElB,OAAIe,EACFC,EAAqBJ,EAAeN,EAAgBS,CAAK,EAEzDH,EAAc,EAAE,MAAM,QAAQ,KAAK,EAG9B,IAAM,CACXH,EAAY,GACZ,aAAaH,EAAe,QAAQ,SAAS,CAC/C,CACF,EAAG,CAACT,EAAMC,CAAI,CAAC,EAERG,CACT,EDYO,IAAMgB,EAAmB,CAAC,CAC/B,SAAAC,EACA,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,iBAAAC,EAAmB,GACnB,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,SAAUC,EACV,GAAIC,EAAU,KAChB,IAAiD,CAE/C,IAAMC,EAAkBC,EAAoBH,EAAMV,EAAUC,EADxB,CAAE,MAAAC,EAAO,aAAAC,CAAa,CACgB,EAE1E,OACEW,EAAA,cAACH,EAAA,CACC,cAAY,kBACZ,UAAWI,EACT,WACA,YACAX,GAAoB,gBACpBG,CACF,EACA,MAAOF,EACP,GAAG,mBAEFI,GAAgBT,EACfc,EAAA,cAAC,QACC,UAAWC,EAAK,gBAAiBP,CAAa,EAC9C,MAAOF,EACP,GAAG,kBAEFN,CACH,EACE,KACHY,CACH,CAEJ","names":["styleInject","css","insertAt","head","style","styleInject","React","clsx","useEffect","useRef","useState","parse","createHighlighter","createSingletonShorthands","visit","bundledLanguages","isSpecialLang","rehypeInlineCodeProperty","tree","node","_index","parent","isInlineCode","child","removeTabIndexFromPre","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","resolvedLang","lang","highlighter","createSingletonShorthands","createHighlighter","useShikiHighlighter","code","lang","theme","options","highlightedCode","setHighlightedCode","useState","language","resolvedLang","timeoutControl","useRef","useEffect","isMounted","transformers","removeTabIndexFromPre","highlightCode","html","parse","delay","throttleHighlighting","ShikiHighlighter","language","theme","delay","transformers","addDefaultStyles","style","langStyle","className","langClassName","showLanguage","code","Element","highlightedCode","useShikiHighlighter","React","clsx"]}
+{"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}.defaultStyles 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';\nimport type { ShikiTransformer } from 'shiki';\nimport { resolveLanguage } from './utils';\nimport type { LanguageRegistration } from './customTypes';\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   * Pass custom Shiki transformers to the highlighter\n   */\n  transformers?: ShikiTransformer[];\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 inline styles to the language label\n   */\n  langStyle?: React.CSSProperties;\n\n  /**\n   * Add custom CSS class names to the generated code block\n   */\n  className?: string;\n\n  /**\n   * Add custom CSS class names to the language label\n   */\n  langClassName?: 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   * Custom languages to be preloaded for highlighting.\n   */\n  customLanguages?: LanguageRegistration[];\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  transformers,\n  addDefaultStyles = true,\n  style,\n  langStyle,\n  className,\n  langClassName,\n  showLanguage = true,\n  children: code,\n  as: Element = 'pre',\n  customLanguages,\n}: ShikiHighlighterProps): React.ReactElement => {\n  const options: HighlighterOptions = {\n    delay,\n    transformers,\n    customLanguages,\n  };\n\n  const normalizedCustomLanguages = customLanguages\n    ? Array.isArray(customLanguages)\n      ? customLanguages\n      : [customLanguages]\n    : [];\n\n  const { isCustom, languageId, displayLanguageId, resolvedLanguage } =\n    resolveLanguage(language, normalizedCustomLanguages);\n\n  const highlightedCode = useShikiHighlighter(\n    code,\n    language,\n    theme,\n    options\n  );\n\n  return (\n    <Element\n      data-testid=\"shiki-container\"\n      className={clsx(\n        'relative',\n        'not-prose',\n        addDefaultStyles && 'defaultStyles',\n        className\n      )}\n      style={style}\n      id=\"shiki-container\"\n    >\n      {showLanguage && language ? (\n        <span\n          className={clsx('languageLabel', langClassName)}\n          style={langStyle}\n          id=\"language-label\"\n        >\n          {isCustom\n            ? `${resolvedLanguage?.scopeName.split('.')[1]}`\n            : displayLanguageId || languageId}\n        </span>\n      ) : null}\n      {highlightedCode}\n    </Element>\n  );\n};\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\n\nimport parse from 'html-react-parser';\n\nimport {\n  createHighlighter,\n  createSingletonShorthands,\n  type Highlighter,\n} from 'shiki';\n\nimport type {\n  LanguageRegistration,\n  ShikiLanguageRegistration,\n} from './customTypes';\n\nimport type {\n  Language,\n  Theme,\n  HighlighterOptions,\n  TimeoutState,\n} from './types';\n\nimport {\n  removeTabIndexFromPre,\n  throttleHighlighting,\n  resolveLanguage,\n} from './utils';\n\n// Use Shiki managed singleton for bundled languages, create a fresh instance for custom languages\nconst highlighter = createSingletonShorthands(createHighlighter);\nconst customHighlighterCache = new Map<string, Promise<Highlighter>>();\n\n/**\n * A React hook that provides syntax highlighting using Shiki.\n * Supports optional throttled highlights and custom themes.\n *\n * @example\n * const highlightedCode = useShikiHighlighter(code, language, theme, {\n *   transformers: [removeTabIndexFromPre],\n *   delay: 150\n *   customLanguages: ['bosque', 'mcfunction']\n * });\n */\nexport const useShikiHighlighter = (\n  code: string,\n  lang: Language,\n  theme: Theme,\n  options: HighlighterOptions = {}\n) => {\n  const [highlightedCode, setHighlightedCode] =\n    useState<ReactNode | null>(null);\n\n  // Setup themeKey for highlighter caching, checks if theme is string (builtin) or object (custom)\n  const themeKey = typeof theme === 'string' ? theme : theme.name;\n\n  const normalizedCustomLanguages: LanguageRegistration[] =\n    options.customLanguages\n      ? Array.isArray(options.customLanguages)\n        ? options.customLanguages\n        : [options.customLanguages]\n      : [];\n\n  const { isCustom, languageId, resolvedLanguage } = resolveLanguage(\n    lang,\n    normalizedCustomLanguages\n  );\n\n  const timeoutControl = useRef<TimeoutState>({\n    nextAllowedTime: 0,\n    timeoutId: undefined,\n  });\n\n  const getCachedCustomHighlighter = async (\n    cacheKey: string,\n    customLang: LanguageRegistration | typeof lang\n  ) => {\n    let instance = customHighlighterCache.get(cacheKey);\n    if (!instance) {\n      instance = createHighlighter({\n        langs: [customLang as ShikiLanguageRegistration],\n        themes: [theme],\n      });\n      customHighlighterCache.set(cacheKey, instance);\n    }\n    return instance;\n  };\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const transformers = [\n      removeTabIndexFromPre,\n      ...(options.transformers || []),\n    ];\n\n    const highlightCode = async () => {\n      const codeHighlighter =\n        isCustom && resolvedLanguage\n          ? await getCachedCustomHighlighter(\n              `${resolvedLanguage.name}--${themeKey}`,\n              resolvedLanguage\n            )\n          : highlighter;\n\n      const html = await codeHighlighter.codeToHtml(code, {\n        lang: languageId,\n        theme,\n        transformers,\n      });\n\n      if (isMounted) {\n        setHighlightedCode(parse(html));\n      }\n    };\n\n    if (options.delay) {\n      throttleHighlighting(highlightCode, timeoutControl, options.delay);\n    } else {\n      highlightCode().catch(console.error);\n    }\n\n    return () => {\n      isMounted = false;\n      clearTimeout(timeoutControl.current.timeoutId);\n    };\n  }, [code, lang]);\n\n  return highlightedCode;\n};\n","import { visit } from 'unist-util-visit';\nimport { bundledLanguages, isSpecialLang } from 'shiki';\nimport type { ShikiTransformer } from 'shiki';\nimport type { Element, Root } from 'hast';\nimport type { Language, TimeoutState } from './types';\nimport type { LanguageRegistration } from './customTypes';\n\n/**\n * Type for the HAST node, use to type `node` from react-markdown\n */\nexport type { Element };\n\n/**\n * Rehype plugin to add an 'inline' property to <code> elements\n * Sets 'inline' property to true if the <code> is not within a <pre> tag\n *\n * Pass this plugin to the `rehypePlugins` prop of react-markdown\n * You can then access `inline` as a prop in components passed to react-markdown\n *\n * @example\n * <ReactMarkdown rehypePlugins={[rehypeInlineCodeProperty]} />\n */\nexport function rehypeInlineCodeProperty() {\n  return function (tree: Root): undefined {\n    visit(\n      tree as any,\n      'element',\n      function (node: Element, _index, parent: Element) {\n        if (node.tagName === 'code' && parent.tagName !== 'pre') {\n          node.properties.inline = true;\n        }\n      }\n    );\n  };\n}\n\n/**\n * Function to determine if code is inline based on the presence of line breaks\n *\n * @example\n * const isInline = node && isInlineCode(node: Element)\n */\nexport const isInlineCode = (node: Element): boolean => {\n  const textContent = (node.children || [])\n    .filter((child) => child.type === 'text')\n    .map((child) => child.value)\n    .join('');\n\n  return !textContent.includes('\\n');\n};\n\n/**\n * Shiki transformer to remove tabindex from <pre> elements\n *\n * Consider retaining tabindex for WCAG 3.1 compliance, scrollable code blocks should be focusable\n *   https://github.com/shikijs/shiki/issues/428\n *   https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/\n */\nexport const removeTabIndexFromPre: ShikiTransformer = {\n  pre(node) {\n    if ('properties' in node) {\n      node.properties.tabindex = '-1';\n    }\n    return node;\n  },\n};\n\n/**\n * Optionally throttles rapid sequential highlighting operations\n * Exported for testing in __tests__/throttleHighlighting.test.ts\n *\n * @example\n * const timeoutControl = useRef<TimeoutState>({\n *   nextAllowedTime: 0,\n *   timeoutId: undefined\n * });\n *\n * throttleHighlighting(highlightCode, timeoutControl, 1000);\n */\nexport const 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\ntype ResolvedLanguage = {\n  isCustom: boolean;\n  languageId: string;\n  displayLanguageId?: string;\n  resolvedLanguage?: LanguageRegistration;\n};\n\n/**\n * Determines whether a language is custom or built-in, normalizes\n * the language identifier and returns an object with metadata\n *\n * @param lang - The language identifier, either as a string name or language object\n * @param customLanguages - Optional array of custom language definitions\n * @returns Object containing:\n *   - isCustom: Whether the language requires custom highlighting\n *   - languageId: The normalized language identifier\n *   - displayLanguageId: The display name for language label\n *   - resolvedLanguage: The full language definition if custom\n */\nexport const resolveLanguage = (\n  lang: Language,\n  customLanguages: LanguageRegistration[] = []\n): ResolvedLanguage => {\n  // Language is custom but not preloaded\n  if (lang && typeof lang === 'object') {\n    return {\n      isCustom: true,\n      languageId: lang.name,\n      displayLanguageId: lang.name,\n      resolvedLanguage: lang,\n    };\n  }\n\n  // Language is a string\n  if (typeof lang === 'string') {\n    const displayLanguageId = lang;\n\n    // Check if its built-in\n    if (lang in bundledLanguages || isSpecialLang(lang)) {\n      return {\n        isCustom: false,\n        languageId: lang,\n        displayLanguageId,\n      };\n    }\n\n    // Check if it matches a preloaded custom language\n    const customMatch = customLanguages.find(\n      (cl) =>\n        cl.fileTypes?.includes(lang) ||\n        cl.scopeName?.split('.')[1] === lang ||\n        cl.name?.toLowerCase() === lang.toLowerCase()\n    );\n\n    if (customMatch) {\n      return {\n        isCustom: true,\n        languageId: customMatch.name,\n        displayLanguageId,\n        resolvedLanguage: customMatch,\n      };\n    }\n\n    // If unknown, highlight in plaintext but display unknown language\n    return {\n      isCustom: false,\n      languageId: 'plaintext',\n      displayLanguageId,\n    };\n  }\n\n  // Fallback\n  return {\n    isCustom: false,\n    languageId: 'plaintext',\n    displayLanguageId: 'plaintext',\n  };\n};\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","clsx","useEffect","useRef","useState","parse","createHighlighter","createSingletonShorthands","visit","bundledLanguages","isSpecialLang","rehypeInlineCodeProperty","tree","node","_index","parent","isInlineCode","child","removeTabIndexFromPre","throttleHighlighting","performHighlight","timeoutControl","throttleMs","now","delay","resolveLanguage","lang","customLanguages","displayLanguageId","customMatch","cl","highlighter","createSingletonShorthands","createHighlighter","customHighlighterCache","useShikiHighlighter","code","lang","theme","options","highlightedCode","setHighlightedCode","useState","themeKey","normalizedCustomLanguages","isCustom","languageId","resolvedLanguage","resolveLanguage","timeoutControl","useRef","getCachedCustomHighlighter","cacheKey","customLang","instance","useEffect","isMounted","transformers","removeTabIndexFromPre","highlightCode","html","parse","throttleHighlighting","ShikiHighlighter","language","theme","delay","transformers","addDefaultStyles","style","langStyle","className","langClassName","showLanguage","code","Element","customLanguages","options","normalizedCustomLanguages","isCustom","languageId","displayLanguageId","resolvedLanguage","resolveLanguage","highlightedCode","useShikiHighlighter","React","clsx"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -43,19 +43,19 @@
     "@types/jest": "^29.5.14",
     "clsx": "^2.1.1",
     "html-react-parser": "^5.1.12",
-    "shiki": "^1.12.1",
+    "shiki": "^3.0.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.3.1",
     "@types/hast": "^3.0.4",
-    "@types/node": "22.10.10",
-    "@types/react": "^18.3.3",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@types/node": "22.13.4",
+    "@types/react": "^18.3.18",
+    "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^22.1.0",
-    "tsup": "^8.2.4",
-    "vitest": "^0.34.0"
+    "tsup": "^8.3.6",
+    "vitest": "^0.34.6"
   },
   "scripts": {
     "dev": "tsup --watch",