rn-shiki 0.0.37-35 → 0.0.37-36

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,131 +1,64 @@
-import type { ColorValue, StyleProp, TextStyle } from 'react-native'
-import type { ThemedToken, ThemeInput, ThemeRegistration } from 'shiki'
-import type { SyntaxHighlighterProps } from 'src/types/shiki'
-import React, { useMemo } from 'react'
-import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
-import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
-import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
+// src/utils/getRNStylesFromShikiStyle.ts
 
-const monospaceFont = Platform.select({
-  ios: 'Menlo',
-  android: 'monospace',
-  default: 'monospace',
-})
+import type { TextStyle } from 'react-native'
+import type { ThemeRegistration } from 'shiki'
 
-interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
-  color?: ColorValue
-  fontStyle?: 'normal' | 'italic'
-  fontWeight?: FontWeight
-  fontFamily?: string
+export interface HighlighterStyleSheet {
+  [key: string]: TextStyle
 }
 
-type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
-
-function getThemeRegistration(theme: ThemeInput): ThemeRegistration {
-  if ('default' in theme) {
-    return theme.default
-  }
-  return theme as ThemeRegistration
+function normalizeColor(color: string | undefined): string {
+  if (!color)
+    return 'transparent'
+  return color
 }
 
-const baseStyles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-    minHeight: 20,
-    backgroundColor: '#1e1e1e',
-  },
-  contentContainer: {
-    flexGrow: 1,
-    minWidth: '100%',
-  },
-  codeContainer: {
-    paddingVertical: 8,
-    minWidth: '100%',
-  },
-  lineContainer: {
-    flexDirection: 'row',
-    minWidth: '100%',
-    paddingHorizontal: 16,
-    paddingVertical: 1,
-  },
-  line: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    flex: 1,
-  },
-  token: {
-    fontFamily: monospaceFont,
-    fontSize: 14,
-    color: '#d4d4d4',
-  },
-})
-
-const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme, fontSize = 14 }) => {
-  const stylesheet = useMemo(() => {
-    const themeRegistration = getThemeRegistration(theme)
-    const styles = getRNStylesFromShikiStyle(themeRegistration)
+export function getRNStylesFromShikiStyle(theme: ThemeRegistration): HighlighterStyleSheet {
+  if (!theme)
+    return {}
 
-    return StyleSheet.create({
-      ...styles,
+  try {
+    const styles: HighlighterStyleSheet = {
       editor: {
-        backgroundColor: themeRegistration.colors?.['editor.background'] || '#1e1e1e',
+        backgroundColor: normalizeColor(theme.colors?.['editor.background']),
       },
-      token: {
-        ...baseStyles.token,
-        fontSize,
-        color: themeRegistration.colors?.['editor.foreground'] || '#d4d4d4',
+      base: {
+        color: normalizeColor(theme.colors?.['editor.foreground']),
       },
-      lineNumber: {
-        width: 40,
-        paddingRight: 16,
-        textAlign: 'right',
-        color: themeRegistration.colors?.['editorLineNumber.foreground'] || '#858585',
-        fontFamily: monospaceFont,
-        fontSize,
-        opacity: 0.5,
-      },
-    })
-  }, [theme, fontSize])
-
-  const { tokens } = useSyntaxHighlighter({
-    text,
-    language,
-    languageId,
-    theme,
-  })
+    }
 
-  const renderToken = (token: ThemedToken, index: number) => {
-    const styles: StyleProp<TokenStyle>[] = [stylesheet.token]
+    if (theme.tokenColors) {
+      theme.tokenColors.forEach((token) => {
+        if (!token.settings)
+          return
 
-    if (token.color) {
-      styles.push({ color: token.color })
-    }
+        const style: TextStyle = {}
+        if (token.settings.foreground) {
+          style.color = token.settings.foreground
+        }
+        if (token.settings.background) {
+          style.backgroundColor = token.settings.background
+        }
+        if (token.settings.fontStyle) {
+          style.fontStyle = token.settings.fontStyle.includes('italic') ? 'italic' : 'normal'
+          style.fontWeight = token.settings.fontStyle.includes('bold') ? 'bold' : 'normal'
+        }
 
-    if (token.fontStyle) {
-      styles.push({
-        fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
-        fontWeight: (token.fontStyle as unknown as string).includes('bold') ? 'bold' : 'normal',
+        const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
+        scopes.forEach((scope) => {
+          if (scope) {
+            styles[scope] = style
+          }
+        })
       })
     }
 
-    return (
-      <Text key={index} style={styles}>
-        {token.content.replace(/ /g, '\u00A0')}
-      </Text>
-    )
+    return styles
+  }
+  catch (error) {
+    return {
+      editor: { backgroundColor: '#1e1e1e' },
+      base: { color: '#d4d4d4' },
+    }
   }
-
-  const renderLine = (line: ThemedToken[], lineIndex: number) => (
-    <View key={lineIndex} style={baseStyles.lineContainer}>
-      <View style={baseStyles.line}>{line.map((token, tokenIndex) => renderToken(token, tokenIndex))}</View>
-    </View>
-  )
-
-  return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.editor]} contentContainerStyle={baseStyles.contentContainer}>
-      <View style={baseStyles.codeContainer}>{tokens.map((line, index) => renderLine(line, index))}</View>
-    </ScrollView>
-  )
 }
-
-export default SyntaxHighlighter

package/src/hooks/useSyntaxHighlighter.ts

@@ -20,22 +20,17 @@ export function useSyntaxHighlighter({ text, language, languageId, theme }: Synt
       }
 
       try {
-        // First create the highlighter
         const highlighter = await createHighlighter({
           langs: [language],
           themes: [theme],
         })
 
-        // Get resolved theme name
-        const themeResolved = highlighter.getLoadedThemes()?.[0]
-        if (!themeResolved) {
-          throw new Error('Failed to resolve theme')
-        }
-
-        // Use resolved theme for tokenization
+        // The highlighter will resolve the theme internally
+        // We can use the theme directly here as highlighter.codeToTokens
+        // handles the ThemeInput resolution
         const result = highlighter.codeToTokens(text, {
           lang: languageId,
-          theme: themeResolved,
+          theme,
         }) as TokensResult
 
         if (mounted && result.tokens) {

package/src/utils/style-transformer.ts

@@ -1,12 +1,14 @@
 import type { TextStyle } from 'react-native'
 import type { ThemeRegistration } from 'shiki'
 
+// src/utils/getRNStylesFromShikiStyle.
+
+export type ReactStyle = Record<string, TextStyle>
+
 export interface HighlighterStyleSheet {
   [key: string]: TextStyle
 }
 
-export type ReactStyle = Record<string, TextStyle>
-
 function normalizeColor(color: string | undefined): string {
   if (!color)
     return 'transparent'