rn-shiki 0.0.37-24 → 0.0.37-26

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,6 +1,5 @@
-import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native'
+import type { ColorValue, StyleProp, TextStyle } from 'react-native'
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
-import type { ReactStyle } from '../../utils/style-transformer'
 import React, { useMemo } from 'react'
 import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
@@ -12,14 +11,30 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
+interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
+  color?: ColorValue
+  fontStyle?: 'normal' | 'italic'
+  fontWeight?: FontWeight
+  fontFamily?: string
+}
+
 interface Styles {
-  scrollView: ViewStyle
-  lineContainer: ViewStyle
-  token: TextStyle
-  container: ViewStyle
+  [key: string]: TokenStyle
+}
+
+type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
+
+interface ThemeColors {
+  'editor.background'?: string
+  'editor.foreground'?: string
+}
+
+interface Theme {
+  colors?: ThemeColors
+  tokenColors?: any[]
 }
 
-const baseStyles = StyleSheet.create<Styles>({
+const baseStyles = StyleSheet.create({
   scrollView: {
     flex: 1,
     minHeight: 20,
@@ -27,29 +42,39 @@ const baseStyles = StyleSheet.create<Styles>({
   lineContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
   },
   token: {
     fontFamily: monospaceFont,
+    fontSize: 14,
   },
   container: {
     flex: 1,
   },
 })
 
-type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
-
-interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
-  color?: ColorValue
-  fontStyle?: 'normal' | 'italic'
-  fontWeight?: FontWeight
-  fontFamily?: string
-}
-
-const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
+const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  text,
+  language,
+  languageId,
+  theme,
+  fontSize = 14,
+}) => {
   const stylesheet = useMemo(() => {
-    const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
-    return StyleSheet.create(styles)
-  }, [theme])
+    const styles = getRNStylesFromShikiStyle(theme as Theme)
+    return StyleSheet.create<Styles>({
+      ...styles,
+      editor: {
+        backgroundColor: (theme as Theme).colors?.['editor.background'] || '#1e1e1e',
+      },
+      token: {
+        ...baseStyles.token,
+        fontSize,
+        color: (theme as Theme).colors?.['editor.foreground'] || '#d4d4d4',
+      },
+    })
+  }, [theme, fontSize])
 
   const { tokens } = useSyntaxHighlighter({
     text,
@@ -59,19 +84,17 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   })
 
   const renderToken = (token: any, index: number, lineIndex: number) => {
-    const styles: StyleProp<TokenStyle>[] = [baseStyles.token]
-
-    if (stylesheet.base) {
-      styles.push(stylesheet.base as unknown as TokenStyle)
-    }
+    const styles: StyleProp<TokenStyle>[] = [stylesheet.token]
 
+    // Add token-specific styles from stylesheet based on scope
     const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
     tokenScopes.forEach((scope: string) => {
       if (stylesheet[scope]) {
-        styles.push(stylesheet[scope] as unknown as TokenStyle)
+        styles.push(stylesheet[scope])
       }
     })
 
+    // Add token-specific styles from the token itself
     const tokenStyles: TokenStyle = {}
     if (token.color) {
       tokenStyles.color = token.color
@@ -87,10 +110,10 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
       styles.push(tokenStyles)
     }
 
-    const combinedStyles = StyleSheet.flatten(styles)
+    const finalStyle = StyleSheet.flatten(styles)
 
     return (
-      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
+      <Text key={`${lineIndex}-${index}`} style={finalStyle}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
@@ -103,10 +126,13 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   )
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.base as unknown as TokenStyle]}>
-      <View style={baseStyles.container} onStartShouldSetResponder={() => true}>
-        {tokens.map((line, index) => renderLine(line, index))}
-      </View>
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={Platform.OS !== 'web'}
+      style={[baseStyles.scrollView, stylesheet.editor]}
+      contentContainerStyle={baseStyles.container}
+    >
+      {tokens.map((line, index) => renderLine(line, index))}
     </ScrollView>
   )
 }

package/src/utils/style-transformer.ts

@@ -1,5 +1,4 @@
 import type { TextStyle } from 'react-native'
-import transform from 'css-to-react-native'
 
 export interface HighlighterStyleSheet {
   [key: string]: TextStyle
@@ -9,7 +8,15 @@ export type ReactStyle = Record<string, TextStyle>
 
 // Helper function to convert hex color to RGB
 function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  // Remove # if present
+  hex = hex.replace(/^#/, '')
+
+  // Handle both 3 and 6 digit hex
+  if (hex.length === 3) {
+    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
+  }
+
+  const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result
     ? {
         r: Number.parseInt(result[1]!, 16),
@@ -19,18 +26,25 @@ function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
     : null
 }
 
-// Helper function to normalize color values
 function normalizeColor(color: string | undefined): string {
-  if (!color)
+  if (!color) {
     return 'transparent'
+  }
 
-  // Type guard to ensure color is string before we call string methods
-  if (typeof color === 'string' && color.startsWith('#')) {
+  // Handle hex colors
+  if (color.startsWith('#')) {
     const rgb = hexToRgb(color)
     if (rgb) {
       return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
     }
   }
+
+  // Handle rgb/rgba
+  if (color.startsWith('rgb')) {
+    return color
+  }
+
+  // Handle named colors
   return color
 }
 
@@ -44,64 +58,86 @@ export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
   }
 
   tokenColors.forEach((token) => {
-    if (!token.settings || !token.scope)
+    if (!token.settings)
       return
 
+    // Handle global theme settings
+    if (!token.scope) {
+      if (token.settings.foreground) {
+        styleMap.default!.color = normalizeColor(token.settings.foreground)
+      }
+      if (token.settings.background) {
+        styleMap.default!.backgroundColor = normalizeColor(token.settings.background)
+      }
+      return
+    }
+
     const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
-    const styleEntries: Array<[string, string]> = []
+    const style: TextStyle = {}
 
-    // Only add styles if they exist
     if (token.settings.foreground) {
-      styleEntries.push(['color', normalizeColor(token.settings.foreground)])
+      style.color = normalizeColor(token.settings.foreground)
     }
     if (token.settings.background) {
-      styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)])
+      style.backgroundColor = normalizeColor(token.settings.background)
     }
     if (token.settings.fontStyle) {
       if (token.settings.fontStyle.includes('italic')) {
-        styleEntries.push(['fontStyle', 'italic'])
+        style.fontStyle = 'italic'
       }
       if (token.settings.fontStyle.includes('bold')) {
-        styleEntries.push(['fontWeight', 'bold'])
+        style.fontWeight = 'bold'
       }
     }
 
-    if (styleEntries.length > 0) {
-      const transformedStyle = transform(styleEntries)
-
-      scopes.forEach((scope: string) => {
-        if (typeof scope === 'string') {
-          styleMap[scope] = { ...(styleMap[scope] || {}), ...transformedStyle }
-        }
-      })
-    }
+    scopes.forEach((scope: string) => {
+      styleMap[scope] = { ...(styleMap[scope] || {}), ...style }
+    })
   })
 
   return styleMap
 }
 
-export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
-  if (!theme || !theme.tokenColors) {
-    console.error('Provided theme does not contain \'tokenColors\'.')
+interface ThemeColors {
+  'editor.background'?: string
+  'editor.foreground'?: string
+  [key: string]: string | undefined
+}
+
+interface Theme {
+  colors?: ThemeColors
+  tokenColors?: any[]
+}
+
+export function getRNStylesFromShikiStyle(theme: Theme): HighlighterStyleSheet {
+  if (!theme) {
     return {}
   }
 
   try {
-    // Convert theme colors to React Native styles
-    const styles = convertTokenColorsToReactStyle(theme.tokenColors)
+    const styles: HighlighterStyleSheet = {}
+
+    // Convert token colors
+    if (theme.tokenColors) {
+      Object.assign(styles, convertTokenColorsToReactStyle(theme.tokenColors))
+    }
 
-    // Add theme-specific base styles if they exist
+    // Add theme-specific editor styles
     if (theme.colors) {
+      styles.editor = {
+        backgroundColor: normalizeColor(theme.colors['editor.background']),
+      }
       styles.base = {
         color: normalizeColor(theme.colors['editor.foreground']),
-        backgroundColor: normalizeColor(theme.colors['editor.background']),
       }
     }
 
     return styles
   }
   catch {
-    console.error('Error converting theme styles')
-    return {}
+    return {
+      editor: { backgroundColor: '#1e1e1e' },
+      base: { color: '#d4d4d4' },
+    }
   }
 }