rn-shiki 0.0.36 → 0.0.37-0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.36",
+  "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, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { convertShikiTheme } from 'src/utils/style-transformer'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import SyntaxLine from './SyntaxLine'
 
@@ -32,7 +33,9 @@ const styles = StyleSheet.create({
   },
 })
 
-function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps & { fontSize?: number }) {
+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,
@@ -75,13 +78,15 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   }
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.container} contentContainerStyle={styles.scrollContent}>
-      <View style={styles.contentContainer} onStartShouldSetResponder={() => true}>
-        {tokens.map((line, lineIndex) => (
-          <SyntaxLine key={`line-${lineIndex}`} line={line} fontSize={fontSize} />
-        ))}
-      </View>
-    </ScrollView>
+    <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,3 +1,4 @@
+import type { RNTokenStyle } from 'src/utils/style-transformer'
 import type { TokenType } from '../../types'
 import React from 'react'
 import { Platform, StyleSheet, Text, View } from 'react-native'
@@ -21,10 +22,16 @@ const styles = StyleSheet.create({
 interface SyntaxLineProps {
   line: TokenType[]
   fontSize?: number
+  isLastLine?: boolean
+  themeStyles: {
+    backgroundColor: string
+    defaultColor: string
+    styles: Record<string, RNTokenStyle>
+  }
 }
 
-function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
-  const lineHeight = fontSize * 1.5
+function SyntaxLine({ line, fontSize = 14, isLastLine = false, themeStyles }: SyntaxLineProps) {
+  const lineHeight = Math.floor(fontSize * 1.5)
 
   return (
     <View
@@ -32,26 +39,32 @@ function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
         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={[
               styles.token,
               {
-                color: token.color || '#FFFFFF',
+                ...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: 1,
+                      paddingTop: 2,
                     }
                   : {}),
               },

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,
+  }
+}