rn-shiki 0.0.35 → 0.0.37-0

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,6 +1,7 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
-import { Platform, Text, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { convertShikiTheme } from 'src/utils/style-transformer'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import SyntaxLine from './SyntaxLine'
 
@@ -10,7 +11,31 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
-function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps & { fontSize?: number }) {
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    minHeight: 20,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    padding: 8,
+  },
+  contentContainer: {
+    minWidth: '100%',
+  },
+  errorText: {
+    padding: 8,
+    color: '#ff6b6b',
+  },
+  loadingText: {
+    padding: 8,
+    color: '#666666',
+  },
+})
+
+function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps) {
+  // Convert theme on mount
+  const themeStyles = React.useMemo(() => convertShikiTheme(theme ?? {}), [theme])
   const { tokens, error, isLoading } = useSyntaxHighlighter({
     text,
     language,
@@ -21,12 +46,13 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   if (error) {
     return (
       <Text
-        style={{
-          color: '#ff6b6b',
-          fontFamily: monospaceFont,
-          fontSize,
-          padding: 4,
-        }}
+        style={[
+          styles.errorText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
       >
         Error:
         {' '}
@@ -38,12 +64,13 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   if (isLoading) {
     return (
       <Text
-        style={{
-          color: '#666666',
-          fontFamily: monospaceFont,
-          fontSize,
-          padding: 4,
-        }}
+        style={[
+          styles.loadingText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
       >
         Loading...
       </Text>
@@ -51,18 +78,14 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   }
 
   return (
-    <View style={{ flex: 1 }}>
-      {tokens.map((line, lineIndex) => (
-        <View
-          key={`line-${lineIndex}`}
-          style={{
-            minHeight: fontSize * 1.5, // Ensure consistent line height
-            paddingVertical: 2,
-          }}
-        >
-          <SyntaxLine line={line} fontSize={fontSize} />
+    <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} contentContainerStyle={{ flexGrow: 1 }}>
+        <View style={styles.contentContainer}>
+          {tokens.map((line, lineIndex) => (
+            <SyntaxLine key={`line-${lineIndex}`} line={line} fontSize={fontSize} isLastLine={lineIndex === tokens.length - 1} themeStyles={themeStyles} />
+          ))}
         </View>
-      ))}
+      </ScrollView>
     </View>
   )
 }

package/src/components/syntax/SyntaxLine.tsx

@@ -1,6 +1,7 @@
+import type { RNTokenStyle } from 'src/utils/style-transformer'
 import type { TokenType } from '../../types'
 import React from 'react'
-import { Platform, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -8,56 +9,71 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
+const styles = StyleSheet.create({
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  token: {
+    includeFontPadding: false,
+  },
+})
+
 interface SyntaxLineProps {
   line: TokenType[]
   fontSize?: number
+  isLastLine?: boolean
+  themeStyles: {
+    backgroundColor: string
+    defaultColor: string
+    styles: Record<string, RNTokenStyle>
+  }
 }
 
-function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
+function SyntaxLine({ line, fontSize = 14, isLastLine = false, themeStyles }: SyntaxLineProps) {
+  const lineHeight = Math.floor(fontSize * 1.5)
+
   return (
     <View
-      style={{
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        minHeight: fontSize * 1.5, // Match parent container
-      }}
+      style={[
+        styles.lineContainer,
+        {
+          minHeight: lineHeight,
+          paddingBottom: !isLastLine ? 4 : 0,
+        },
+      ]}
     >
       {line.map((token, tokenIndex) => {
         const content = token.content.replace(/ /g, '\u00A0')
+        // Use converted theme styles
+        const tokenStyle = token.color ? { color: token.color } : { color: themeStyles.defaultColor }
+
         return (
           <Text
             key={`${tokenIndex}-${content.slice(0, 8)}`}
-            style={{
-              color: token.color || '#FFFFFF',
-              fontFamily: monospaceFont,
-              fontSize,
-              fontStyle: token.fontStyle as 'normal' | 'italic',
-              fontWeight: token.fontWeight as 'normal' | 'bold',
-              includeFontPadding: false,
-              textAlignVertical: 'center',
-              lineHeight: fontSize * 1.5,
-              ...(Platform.OS === 'ios'
-                ? {
-                    paddingTop: 2, // Fine-tune iOS vertical alignment
-                  }
-                : {}),
-            }}
+            style={[
+              styles.token,
+              {
+                ...tokenStyle,
+                fontFamily: monospaceFont,
+                fontSize,
+                fontStyle: token.fontStyle as 'normal' | 'italic',
+                fontWeight: token.fontWeight as 'normal' | 'bold',
+                lineHeight,
+                height: lineHeight,
+                textAlignVertical: 'center',
+                ...(Platform.OS === 'ios'
+                  ? {
+                      paddingTop: 2,
+                    }
+                  : {}),
+              },
+            ]}
           >
             {content}
           </Text>
         )
       })}
-      <Text
-        style={{
-          fontFamily: monospaceFont,
-          fontSize,
-          color: 'transparent',
-          lineHeight: fontSize * 1.5,
-          height: fontSize * 1.5,
-        }}
-      >
-        {'\n'}
-      </Text>
     </View>
   )
 }

package/src/utils/style-transformer.ts

@@ -0,0 +1,71 @@
+import type { TextStyle } from 'react-native'
+import type { ThemeRegistrationAny } from 'shiki'
+
+export interface RNTokenStyle {
+  color?: string
+  backgroundColor?: string
+  fontWeight?: TextStyle['fontWeight']
+  fontStyle?: TextStyle['fontStyle']
+}
+
+const ALLOWED_STYLE_PROPERTIES = {
+  'color': true,
+  'background': true,
+  'background-color': true,
+  'font-weight': true,
+  'font-style': true,
+} as const
+
+function transformValue(key: string, value: string): any {
+  switch (key) {
+    case 'background':
+    case 'background-color':
+      return ['backgroundColor', value]
+    case 'font-weight':
+      return ['fontWeight', value === 'bold' ? 'bold' : 'normal']
+    case 'font-style':
+      return ['fontStyle', value === 'italic' ? 'italic' : 'normal']
+    default:
+      return [key, value]
+  }
+}
+
+export function convertShikiTheme(theme: ThemeRegistrationAny): {
+  backgroundColor: string
+  defaultColor: string
+  styles: Record<string, RNTokenStyle>
+} {
+  // Extract theme colors
+  const backgroundColor = theme.bg || '#1e1e1e'
+  const defaultColor = theme.fg || '#d4d4d4'
+
+  // Convert token colors
+  const styles: Record<string, RNTokenStyle> = {}
+
+  theme.settings?.forEach((setting) => {
+    if (!setting.scope || !setting.settings)
+      return
+
+    const scopes = Array.isArray(setting.scope) ? setting.scope : [setting.scope]
+    const style: RNTokenStyle = {}
+
+    // Convert CSS-style properties to RN style properties
+    Object.entries(setting.settings).forEach(([key, value]) => {
+      if (ALLOWED_STYLE_PROPERTIES[key as keyof typeof ALLOWED_STYLE_PROPERTIES]) {
+        const [rnKey, rnValue] = transformValue(key, value as string)
+        style[rnKey as keyof RNTokenStyle] = rnValue
+      }
+    })
+
+    // Apply style to each scope
+    scopes.forEach((scope) => {
+      styles[scope] = style
+    })
+  })
+
+  return {
+    backgroundColor,
+    defaultColor,
+    styles,
+  }
+}