react-shiki 0.9.3 → 0.10.0

package/dist/index.mjs

@@ -0,0 +1,53 @@
+import { a as isLoadableLanguage, i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-C5lsWZSq.mjs";
+import { bundledLanguages, getSingletonHighlighter } from "shiki";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
+//#region src/bundles/full.ts
+/**
+* Creates a highlighter using the full Shiki bundle with all languages and themes.
+* This is the largest bundle but provides maximum compatibility.
+*/
+async function createFullHighlighter(langsToLoad, themesToLoad, engine) {
+	return await getSingletonHighlighter({
+		langs: langsToLoad.filter((lang) => isLoadableLanguage(lang, bundledLanguages)),
+		themes: themesToLoad,
+		engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
+	});
+}
+//#endregion
+//#region src/index.ts
+/**
+* Highlight code with shiki (full bundle)
+*
+* @param code - Code to highlight
+* @param lang - Language (bundled or custom)
+* @param theme - Theme (bundled, multi-theme, or custom)
+* @param options - react-shiki options + shiki options
+* @returns Highlighted code as React elements or HTML string
+*
+* @example
+* ```tsx
+* const highlighted = useShikiHighlighter(
+*   'const x = 1;',
+*   'typescript',
+*   {
+*     light: 'github-light',
+*     dark: 'github-dark'
+*   }
+* );
+* ```
+*
+* Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`
+*/
+const useShikiHighlighter = (code, lang, themeInput, options = {}) => {
+	return useHighlight(code, lang, themeInput, options, createFullHighlighter);
+};
+/**
+* ShikiHighlighter component using the full bundle.
+* Includes all languages and themes for maximum compatibility.
+*/
+const ShikiHighlighter = createShikiHighlighterComponent(useShikiHighlighter);
+//#endregion
+export { ShikiHighlighter, ShikiHighlighter as default, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/bundles/full.ts","../src/index.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\n\n/**\n * Creates a highlighter using the full Shiki bundle with all languages and themes.\n * This is the largest bundle but provides maximum compatibility.\n */\nexport async function createFullHighlighter(\n  langsToLoad: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useHighlight } from './lib/hook';\nimport { createFullHighlighter } from './bundles/full';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki';\n\n/**\n * Highlight code with shiki (full bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Full bundle (~6.4MB minified, 1.2MB gzipped). For smaller bundles: `react-shiki/web` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useHighlight(\n    code,\n    lang,\n    themeInput,\n    options,\n    createFullHighlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using the full bundle.\n * Includes all languages and themes for maximum compatibility.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;;AAeA,eAAsB,sBACpB,aACA,cACA,QACsB;AAKtB,QAAO,MAAM,wBAAwB;EACnC,OALY,YAAY,QAAQ,SAChC,mBAAmB,MAAM,iBAAiB,CAIrC;EACL,QAAQ;EACR,QAAQ,UAAU,sBAAsB,OAAO,cAAc;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwBJ,MAAa,uBACX,MACA,MACA,YACA,UAAU,EAAE,KACT;AACH,QAAO,aACL,MACA,MACA,YACA,SACA,sBACD;;;;;;AAOH,MAAa,mBAAmB,gCAC9B,oBACD"}

package/dist/style.css

@@ -0,0 +1,55 @@
+@layer base {
+  .rs-root {
+    position: relative;
+  }
+
+  .rs-default-styles pre {
+    border-radius: .5rem;
+    padding: 1.25rem 1.5rem;
+    overflow: auto;
+  }
+
+  .rs-language-label {
+    letter-spacing: -.05em;
+    color: #6b7280d9;
+    font-family: monospace;
+    font-size: .75rem;
+    position: absolute;
+    top: .5rem;
+    right: .75rem;
+  }
+}
+@layer base {
+  .line-numbers:before, .rs-line-number:before {
+    counter-increment: line-number;
+    content: counter(line-number);
+    box-sizing: content-box;
+    min-width: var(--rs-line-numbers-width, 2ch);
+    padding-left: var(--rs-line-numbers-padding-left, 2ch);
+    padding-right: var(--rs-line-numbers-padding-right, 2ch);
+    color: var(--rs-line-numbers-foreground, #6b728099);
+    font-size: var(--rs-line-numbers-font-size, inherit);
+    font-weight: var(--rs-line-numbers-font-weight, inherit);
+    line-height: var(--rs-line-numbers-line-height, inherit);
+    font-family: var(--rs-line-numbers-font-family, inherit);
+    opacity: var(--rs-line-numbers-opacity, 1);
+    user-select: none;
+    pointer-events: none;
+    justify-content: flex-end;
+    align-items: flex-start;
+    display: inline-flex;
+  }
+
+  .has-line-numbers, .rs-has-line-numbers {
+    counter-reset: line-number calc(var(--line-start, 1) - 1);
+    --rs-line-numbers-foreground: var(--line-numbers-foreground, #6b728080);
+    --rs-line-numbers-width: var(--line-numbers-width, 2ch);
+    --rs-line-numbers-padding-left: var(--line-numbers-padding-left, 0ch);
+    --rs-line-numbers-padding-right: var(--line-numbers-padding-right, 2ch);
+    --rs-line-numbers-font-size: var(--line-numbers-font-size, inherit);
+    --rs-line-numbers-font-weight: var(--line-numbers-font-weight, inherit);
+    --rs-line-numbers-line-height: var(--line-numbers-line-height, inherit);
+    --rs-line-numbers-font-family: var(--line-numbers-font-family, inherit);
+    --rs-line-numbers-opacity: var(--line-numbers-opacity, 1);
+  }
+}

package/dist/web.d.mts

@@ -0,0 +1,38 @@
+import { a as HighlighterOptions, c as Themes, i as Element, l as UseShikiHighlighter, n as isInlineCode, o as Language, r as rehypeInlineCodeProperty, s as Theme, t as ShikiHighlighterProps } from "./component-CjpuWrgO.mjs";
+import * as _$react from "react";
+import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { LanguageRegistration } from "shiki/bundle/web";
+
+//#region src/web.d.ts
+/**
+ * Highlight code with shiki (web bundle)
+ *
+ * @param code - Code to highlight
+ * @param lang - Language (bundled or custom)
+ * @param theme - Theme (bundled, multi-theme, or custom)
+ * @param options - react-shiki options + shiki options
+ * @returns Highlighted code as React elements or HTML string
+ *
+ * @example
+ * ```tsx
+ * const highlighted = useShikiHighlighter(
+ *   'const x = 1;',
+ *   'typescript',
+ *   {
+ *     light: 'github-light',
+ *     dark: 'github-dark'
+ *   }
+ * );
+ * ```
+ *
+ * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`
+ */
+declare const useShikiHighlighter: UseShikiHighlighter;
+/**
+ * ShikiHighlighter component using the web bundle.
+ * Includes web-focused languages for balanced size and functionality.
+ */
+declare const ShikiHighlighter: _$react.ForwardRefExoticComponent<ShikiHighlighterProps & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+export { type Element, type HighlighterOptions, type Language, type LanguageRegistration, ShikiHighlighter, ShikiHighlighter as default, type ShikiHighlighterProps, type Theme, type Themes, type UseShikiHighlighter, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+//# sourceMappingURL=web.d.mts.map

package/dist/web.mjs

@@ -0,0 +1,54 @@
+import { a as isLoadableLanguage, i as useHighlight, n as isInlineCode, r as rehypeInlineCodeProperty, t as createShikiHighlighterComponent } from "./component-C5lsWZSq.mjs";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import { createJavaScriptRawEngine, createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages, getSingletonHighlighter } from "shiki/bundle/web";
+//#region src/bundles/web.ts
+/**
+* Creates a highlighter using the web Shiki bundle with web-focused languages.
+* Smaller than the full bundle while covering most web development needs.
+* Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.
+*/
+async function createWebHighlighter(langsToLoad, themesToLoad, engine) {
+	return await getSingletonHighlighter({
+		langs: langsToLoad.filter((lang) => isLoadableLanguage(lang, bundledLanguages)),
+		themes: themesToLoad,
+		engine: engine ?? createOnigurumaEngine(import("shiki/wasm"))
+	});
+}
+//#endregion
+//#region src/web.ts
+/**
+* Highlight code with shiki (web bundle)
+*
+* @param code - Code to highlight
+* @param lang - Language (bundled or custom)
+* @param theme - Theme (bundled, multi-theme, or custom)
+* @param options - react-shiki options + shiki options
+* @returns Highlighted code as React elements or HTML string
+*
+* @example
+* ```tsx
+* const highlighted = useShikiHighlighter(
+*   'const x = 1;',
+*   'typescript',
+*   {
+*     light: 'github-light',
+*     dark: 'github-dark'
+*   }
+* );
+* ```
+*
+* Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`
+*/
+const useShikiHighlighter = (code, lang, themeInput, options = {}) => {
+	return useHighlight(code, lang, themeInput, options, createWebHighlighter);
+};
+/**
+* ShikiHighlighter component using the web bundle.
+* Includes web-focused languages for balanced size and functionality.
+*/
+const ShikiHighlighter = createShikiHighlighterComponent(useShikiHighlighter);
+//#endregion
+export { ShikiHighlighter, ShikiHighlighter as default, createJavaScriptRawEngine, createJavaScriptRegexEngine, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };
+
+//# sourceMappingURL=web.mjs.map

package/dist/web.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.mjs","names":[],"sources":["../src/bundles/web.ts","../src/web.ts"],"sourcesContent":["import {\n  getSingletonHighlighter,\n  bundledLanguages,\n  type Highlighter,\n  type Awaitable,\n  type RegexEngine,\n} from 'shiki/bundle/web';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { Language, Theme } from '../lib/types';\nimport { isLoadableLanguage } from '../lib/language';\n\n/**\n * Creates a highlighter using the web Shiki bundle with web-focused languages.\n * Smaller than the full bundle while covering most web development needs.\n * Includes: HTML, CSS, JS, TS, JSON, Markdown, Vue, JSX, Svelte, etc.\n */\nexport async function createWebHighlighter(\n  langsToLoad: Language[],\n  themesToLoad: Theme[],\n  engine?: Awaitable<RegexEngine>\n): Promise<Highlighter> {\n  const langs = langsToLoad.filter((lang) =>\n    isLoadableLanguage(lang, bundledLanguages)\n  );\n\n  return await getSingletonHighlighter({\n    langs,\n    themes: themesToLoad,\n    engine: engine ?? createOnigurumaEngine(import('shiki/wasm')),\n  });\n}\n","import { useHighlight } from './lib/hook';\nimport { createWebHighlighter } from './bundles/web';\nimport type { UseShikiHighlighter } from './lib/types';\n\nexport { isInlineCode, rehypeInlineCodeProperty } from './lib/plugins';\n\nimport {\n  createShikiHighlighterComponent,\n  type ShikiHighlighterProps,\n} from './lib/component';\n\nexport type { ShikiHighlighterProps };\n\nexport type {\n  UseShikiHighlighter,\n  Language,\n  Theme,\n  Themes,\n  Element,\n  HighlighterOptions,\n} from './lib/types';\n\nexport {\n  createJavaScriptRegexEngine,\n  createJavaScriptRawEngine,\n} from 'shiki/engine/javascript';\n\nexport type { LanguageRegistration } from 'shiki/bundle/web';\n\n/**\n * Highlight code with shiki (web bundle)\n *\n * @param code - Code to highlight\n * @param lang - Language (bundled or custom)\n * @param theme - Theme (bundled, multi-theme, or custom)\n * @param options - react-shiki options + shiki options\n * @returns Highlighted code as React elements or HTML string\n *\n * @example\n * ```tsx\n * const highlighted = useShikiHighlighter(\n *   'const x = 1;',\n *   'typescript',\n *   {\n *     light: 'github-light',\n *     dark: 'github-dark'\n *   }\n * );\n * ```\n *\n * Web bundle (~3.8MB minified, 695KB gzipped). For other bundles: `react-shiki` or `react-shiki/core`\n */\nexport const useShikiHighlighter: UseShikiHighlighter = (\n  code,\n  lang,\n  themeInput,\n  options = {}\n) => {\n  return useHighlight(\n    code,\n    lang,\n    themeInput,\n    options,\n    createWebHighlighter\n  );\n};\n\n/**\n * ShikiHighlighter component using the web bundle.\n * Includes web-focused languages for balanced size and functionality.\n */\nexport const ShikiHighlighter = createShikiHighlighterComponent(\n  useShikiHighlighter\n);\nexport default ShikiHighlighter;\n"],"mappings":";;;;;;;;;;AAgBA,eAAsB,qBACpB,aACA,cACA,QACsB;AAKtB,QAAO,MAAM,wBAAwB;EACnC,OALY,YAAY,QAAQ,SAChC,mBAAmB,MAAM,iBAAiB,CAIrC;EACL,QAAQ;EACR,QAAQ,UAAU,sBAAsB,OAAO,cAAc;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;ACuBJ,MAAa,uBACX,MACA,MACA,YACA,UAAU,EAAE,KACT;AACH,QAAO,aACL,MACA,MACA,YACA,SACA,qBACD;;;;;;AAOH,MAAa,mBAAmB,gCAC9B,oBACD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-shiki",
   "description": "Syntax highlighter component for react using shiki",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "license": "MIT",
   "author": {
     "name": "Bassim Shahidy",
@@ -11,7 +11,7 @@
   "repository": {
     "type": "git",
     "directory": "package",
-    "url": "https://github.com/AVGVSTVS96/react-shiki"
+    "url": "git+https://github.com/AVGVSTVS96/react-shiki.git"
   },
   "homepage": "https://react-shiki.vercel.app/",
   "keywords": [
@@ -24,8 +24,8 @@
     "react-syntax-highlighter"
   ],
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist",
     "src/styles/features.css",
@@ -41,16 +41,16 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./web": {
-      "types": "./dist/web.d.ts",
-      "default": "./dist/web.js"
+      "types": "./dist/web.d.mts",
+      "default": "./dist/web.mjs"
     },
     "./core": {
-      "types": "./dist/core.d.ts",
-      "default": "./dist/core.js"
+      "types": "./dist/core.d.mts",
+      "default": "./dist/core.mjs"
     },
     "./css": {
       "types": "./src/styles/css.d.ts",
@@ -58,10 +58,10 @@
     }
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0",
-    "@types/react-dom": ">=16.8.0",
-    "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0"
+    "@types/react": ">=16.14.0",
+    "@types/react-dom": ">=16.14.0",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -75,25 +75,28 @@
     "clsx": "^2.1.1",
     "dequal": "^2.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
-    "shiki": "^4.0.0",
+    "shiki": "^4.0.2",
     "unist-util-visit": "^5.1.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/core": "^0.18.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@tsdown/css": "0.21.10",
     "@types/hast": "^3.0.4",
     "@types/jest": "^30.0.0",
-    "@types/node": "25.3.3",
-    "@types/react": "^19.1.10",
-    "@vitejs/plugin-react": "^5.1.4",
-    "html-react-parser": "^5.2.17",
-    "jsdom": "^28.1.0",
-    "tsup": "^8.5.1",
-    "vitest": "^4.0.18"
+    "@types/node": "25.6.0",
+    "@types/react": "^19.2.14",
+    "@vitejs/plugin-react": "^6.0.1",
+    "html-react-parser": "^6.1.0",
+    "jsdom": "^29.1.1",
+    "publint": "^0.3.19",
+    "tsdown": "^0.21.10",
+    "vitest": "^4.1.5"
   },
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
+    "dev": "tsdown --watch",
+    "build": "tsdown",
     "test": "vitest",
     "bench": "vitest bench",
     "lint": "biome lint .",

package/src/styles/css.d.ts

@@ -1 +1 @@
-export {};
+declare module '*.css';

package/src/styles/features.css

@@ -23,14 +23,29 @@
   .has-line-numbers,
   .rs-has-line-numbers {
     counter-reset: line-number calc(var(--line-start, 1) - 1);
-    --rs-line-numbers-foreground: var(--line-numbers-foreground, rgba(107, 114, 128, 0.5));
+    --rs-line-numbers-foreground: var(
+      --line-numbers-foreground,
+      rgba(107, 114, 128, 0.5)
+    );
     --rs-line-numbers-width: var(--line-numbers-width, 2ch);
     --rs-line-numbers-padding-left: var(--line-numbers-padding-left, 0ch);
-    --rs-line-numbers-padding-right: var(--line-numbers-padding-right, 2ch);
+    --rs-line-numbers-padding-right: var(
+      --line-numbers-padding-right,
+      2ch
+    );
     --rs-line-numbers-font-size: var(--line-numbers-font-size, inherit);
-    --rs-line-numbers-font-weight: var(--line-numbers-font-weight, inherit);
-    --rs-line-numbers-line-height: var(--line-numbers-line-height, inherit);
-    --rs-line-numbers-font-family: var(--line-numbers-font-family, inherit);
+    --rs-line-numbers-font-weight: var(
+      --line-numbers-font-weight,
+      inherit
+    );
+    --rs-line-numbers-line-height: var(
+      --line-numbers-line-height,
+      inherit
+    );
+    --rs-line-numbers-font-family: var(
+      --line-numbers-font-family,
+      inherit
+    );
     --rs-line-numbers-opacity: var(--line-numbers-opacity, 1);
   }
 }