react-shiki 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Bassim Shahidy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# react-shiki
+Syntax highlighting component for react using [Shiki](https://shiki.matsu.io/)
+
+## Installation
+```bash
+(pnpm|bun|yarn) add react-shiki
+```
+```bash
+npm install react-shiki
+```
+
+## Usage
+
+```tsx
+import type { ReactNode } from 'react';
+import type { BundledLanguage } from 'shiki';
+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+)/);
+  // TODO: remove need for consumer use of BundledLanguage from shiki
+  const language = match ? (match[1] as BundledLanguage) : 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>
+  );
+};
+```

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import { BundledLanguage, BundledTheme } from 'shiki';
+import { Element } from 'hast';
+export { Element } from 'hast';
+
+interface ShikiHighlighterProps {
+    language: BundledLanguage;
+    children: string;
+    theme: BundledTheme;
+    addDefaultStyles?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    showLanguage?: boolean;
+    as?: React.ElementType;
+}
+declare const ShikiHighlighter: ({ language, theme, addDefaultStyles, style, className, showLanguage, children: code, as: Element, }: ShikiHighlighterProps) => React.JSX.Element;
+
+declare const useShikiHighlighter: (code: string, lang: BundledLanguage | undefined, theme: BundledTheme) => ReactNode;
+
+declare const isInlineCode: (node: Element) => boolean;
+
+export { ShikiHighlighter as default, isInlineCode, useShikiHighlighter };

package/dist/index.js

@@ -0,0 +1,3 @@
+function a(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))}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,i,r)=>{let[t,o]=y(null);return f(()=>{(async()=>{try{let n=await h(e,{lang:i,theme:r,transformers:[s]});o(p(n))}catch{let l=await h(e,{lang:"plaintext",theme:r,transformers:[s]});o(p(l))}})()},[e,r,i]),t};import{clsx as x}from"clsx";var C=({language:e,theme:i,addDefaultStyles:r=!0,style:t,className:o,showLanguage:m=!0,children:n,as:l="pre"})=>{let u=d(n,e,i);return g.createElement(l,{className:x("relative",r&&"container",o),style:t},m&&e?g.createElement("span",{className:"languageLabel",style:t},e):null,u)};export{C as default,c as isInlineCode,d as useShikiHighlighter};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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\ninterface ShikiHighlighterProps {\n  language: BundledLanguage;\n  children: string;\n  theme: BundledTheme;\n  addDefaultStyles?: boolean;\n  style?: React.CSSProperties;\n  className?: string;\n  showLanguage?: boolean;\n  as?: React.ElementType;\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) => {\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\nexport const useShikiHighlighter = (\n  code: string,\n  lang: BundledLanguage | undefined,\n  theme: BundledTheme\n) => {\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,EDNO,IAAME,EAAsB,CACjCC,EACAC,EACAC,IACG,CACH,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,EACE,aAAc,CAACO,CAAqB,CACxC,CAAC,EACDL,EAAmBM,EAAMH,CAAI,CAAC,CAChC,MAAgB,CACd,IAAMI,EAAe,MAAMH,EAAWR,EAAM,CAC1C,KAAM,YACN,MAAAE,EACE,aAAc,CAACO,CAAqB,CACxC,CAAC,EACDL,EAAmBM,EAAMC,CAAY,CAAC,CACxC,CACF,GAEc,CAChB,EAAG,CAACX,EAAME,EAAOD,CAAI,CAAC,EAEfE,CACT,EDhCA,OAAS,QAAAS,MAAY,OAad,IAAMC,EAAmB,CAAC,CAC/B,SAAAC,EACA,MAAAC,EACA,iBAAAC,EAAmB,GACnB,MAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,GACf,SAAUC,EACV,GAAIC,EAAU,KAChB,IAA6B,CAC3B,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"]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "react-shiki",
+  "description": "Syntax highlighter component for react using shiki",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": {
+    "name": "Bassim Shahidy",
+    "email": "bassim@shahidy.com",
+    "url": "https://bassim.build"
+  },
+  "repository": "https://github.com/avgvstvs96/react-shiki",
+  "keywords": [
+    "react",
+    "shiki",
+    "code",
+    "syntax",
+    "highlighter",
+    "syntax-highlighter",
+    "react-syntax-highlighter"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">= 15.0.0",
+    "react-dom": ">= 15.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "html-react-parser": "^5.1.12",
+    "shiki": "^1.12.1"
+  },
+  "devDependencies": {
+    "@types/hast": "^3.0.4",
+    "@types/react": "^18.3.3",
+    "tsup": "^8.2.4"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  }
+}