rn-shiki 0.0.31 → 0.0.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,31 +1,20 @@
-import type { LanguageInput, ThemeInput } from 'shiki'
+import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
 import { Text, View } from 'react-native'
-import typescript from 'shiki/langs/typescript.mjs'
 import githubDark from 'shiki/themes/github-dark.mjs'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 
-interface SyntaxHighlighterProps {
-  text: string
-  lang?: LanguageInput
-  langName?: string
-  theme?: ThemeInput
-  themeName?: string
-  fontSize?: number
-}
-
-function SyntaxHighlighter({ text, lang = typescript, langName = 'typescript', theme = githubDark, themeName = 'github-dark', fontSize }: SyntaxHighlighterProps) {
+function SyntaxHighlighter({ text, language, languageId, theme = githubDark }: SyntaxHighlighterProps) {
   const { tokens, error, isLoading } = useSyntaxHighlighter({
     text,
-    lang,
-    langName,
+    language,
+    languageId,
     theme,
-    themeName,
   })
 
   if (error) {
     return (
-      <Text style={{ color: '#ff6b6b', fontFamily: 'monospace', fontSize }}>
+      <Text style={{ color: '#ff6b6b', fontFamily: 'monospace' }}>
         Error:
         {error}
       </Text>
@@ -33,7 +22,7 @@ function SyntaxHighlighter({ text, lang = typescript, langName = 'typescript', t
   }
 
   if (isLoading) {
-    return <Text style={{ color: '#f8f8f2', fontFamily: 'monospace', fontSize }}>Loading...</Text>
+    return <Text style={{ color: '#666666', fontFamily: 'monospace' }}>Loading...</Text>
   }
 
   return (
@@ -44,16 +33,22 @@ function SyntaxHighlighter({ text, lang = typescript, langName = 'typescript', t
             <Text
               key={`${lineIndex}-${tokenIndex}`}
               style={{
-                color: token.color || '#FFFFFF',
+                color: token.color || '#000000',
                 fontFamily: 'monospace',
-                fontSize,
                 fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
               }}
             >
               {token.content.replace(/ /g, '\u00A0')}
             </Text>
           ))}
-          <Text style={{ color: '#FFFFFF', fontFamily: 'monospace', fontSize }}>{'\n'}</Text>
+          <Text
+            style={{
+              color: theme === githubDark ? '#000000' : '#FFFFFF',
+              fontFamily: 'monospace',
+            }}
+          >
+            {'\n'}
+          </Text>
         </View>
       ))}
     </View>

package/src/hooks/useSyntaxHighlighter.ts

@@ -1,8 +1,8 @@
-import type { ShikiResult, SyntaxHighlighterProps, ThemedToken } from '../types/shiki'
+import type { SyntaxHighlighterProps, ThemedToken, TokensResult } from '../types/shiki'
 import { useEffect, useState } from 'react'
 import { createHighlighter } from '../syntax'
 
-export function useSyntaxHighlighter({ text, lang, langName, theme, themeName }: SyntaxHighlighterProps) {
+export function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
   const [tokens, setTokens] = useState<ThemedToken[][]>([])
   const [error, setError] = useState<string>()
   const [isLoading, setIsLoading] = useState(true)
@@ -20,14 +20,14 @@ export function useSyntaxHighlighter({ text, lang, langName, theme, themeName }:
 
       try {
         const highlighter = await createHighlighter({
-          langs: [lang],
-          themes: [theme],
+          langs: [language],
+          themes: theme ? [theme] : [],
         })
 
         const result = highlighter.codeToTokens(text, {
-          lang: langName,
-          theme: themeName,
-        }) as ShikiResult
+          lang: languageId,
+          theme: theme || 'none',
+        }) as TokensResult
 
         if (mounted && result.tokens) {
           setTokens(result.tokens)
@@ -52,7 +52,7 @@ export function useSyntaxHighlighter({ text, lang, langName, theme, themeName }:
     return () => {
       mounted = false
     }
-  }, [text, lang, langName, theme, themeName])
+  }, [text, language, languageId, theme])
 
   return { tokens, error, isLoading }
 }

package/src/types/shiki.ts

@@ -1,17 +1,19 @@
-import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
+import type { LanguageInput, ThemeRegistrationAny } from 'shiki'
 
-export type { LanguageInput, ThemedToken, ThemeInput }
+export interface ThemedToken {
+  content: string
+  color?: string
+  fontStyle?: string
+  fontWeight?: string
+}
 
-export interface ShikiResult {
+export interface TokensResult {
   tokens: ThemedToken[][]
-  bg: string
-  fg: string
 }
 
 export interface SyntaxHighlighterProps {
   text: string
-  lang: LanguageInput
-  langName: string
-  theme: ThemeInput
-  themeName: string
+  language: LanguageInput
+  languageId: string
+  theme?: ThemeRegistrationAny
 }

package/src/types/shiki.d.ts

@@ -1,15 +0,0 @@
-import type { LanguageInput, ThemeInput } from 'shiki'
-
-declare module 'vendor/shiki/core/core' {
-  export interface HighlighterCoreOptions {
-    engine: any
-    langs: LanguageInput[]
-    themes: ThemeInput[]
-  }
-
-  export function createHighlighterCore(options: HighlighterCoreOptions): any
-}
-
-declare module 'vendor/shiki/core/engine-javascript' {
-  export function createJavaScriptRegexEngine(): any
-}