rn-shiki 0.0.37-7 → 0.0.37-9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-7",
+  "version": "0.0.37-9",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
+    "css-to-react-native": "^3.2.0",
     "shiki": "^1.1.7"
   },
   "devDependencies": {

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,9 +1,9 @@
-import type { ThemeRegistrationAny } from 'shiki'
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
-import React from 'react'
+import type { ReactStyle } from '../../utils/style-transformer'
+import React, { useMemo } from 'react'
 import { Platform, ScrollView, StyleSheet, Text, type TextStyle, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
-import { convertShikiTheme } from '../../utils/style-transformer'
+import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -16,9 +16,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: 20,
   },
-  contentContainer: {
-    flexGrow: 1,
-  },
   lineContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -26,7 +23,7 @@ const styles = StyleSheet.create({
 })
 
 const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
-  const themeStyles = React.useMemo(() => convertShikiTheme(theme as ThemeRegistrationAny), [theme])
+  const stylesheet = useMemo(() => getRNStylesFromShikiStyle(theme as ReactStyle), [theme])
   const { tokens } = useSyntaxHighlighter({
     text,
     language,
@@ -35,16 +32,18 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   })
 
   const renderToken = (token: any, index: number, lineIndex: number) => {
-    const tokenStyle: TextStyle = {
-      ...themeStyles.token,
-      fontFamily: monospaceFont,
-      ...(token.color && { color: token.color }),
-      ...(token.fontStyle === 'italic' && themeStyles.italic),
-      ...(token.fontWeight === 'bold' && themeStyles.bold),
-    }
+    const tokenStyles: TextStyle = StyleSheet.flatten([
+      stylesheet.token,
+      {
+        fontFamily: monospaceFont,
+        ...(token.color && { color: token.color }),
+        ...(token.fontStyle === 'italic' && stylesheet.italic),
+        ...(token.fontWeight === 'bold' && stylesheet.bold),
+      },
+    ])
 
     return (
-      <Text key={`${lineIndex}-${index}`} style={tokenStyle}>
+      <Text key={`${lineIndex}-${index}`} style={tokenStyles}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )

package/src/utils/style-transformer.ts

@@ -1,108 +1,28 @@
-import type { RawThemeSetting, ThemeRegistrationAny } from 'shiki'
-import { StyleSheet, type TextStyle } from 'react-native'
+import type { CSSProperties } from 'react'
+import type { TextStyle } from 'react-native'
+import transform, { type StyleTuple } from 'css-to-react-native'
 
 export interface HighlighterStyleSheet {
-  container: TextStyle
-  token: TextStyle
-  selection: TextStyle
-  styles: Record<string, TextStyle>
-  [key: string]: TextStyle | Record<string, TextStyle>
+  [key: string]: TextStyle
 }
-
-interface TokenStyle {
-  color?: string
-  fontStyle?: 'normal' | 'italic'
-  fontWeight?: 'normal' | 'bold'
-}
-
-function processSettings(settings: RawThemeSetting[]): Record<string, TokenStyle> {
-  const tokenStyles: Record<string, TokenStyle> = {}
-
-  settings.forEach((setting) => {
-    if (!setting.scope || !setting.settings)
-      return
-
-    const style: TokenStyle = {}
-    const { foreground, fontStyle } = setting.settings
-
-    if (foreground) {
-      style.color = foreground
-    }
-
-    if (fontStyle) {
-      if (fontStyle.includes('italic')) {
-        style.fontStyle = 'italic'
-      }
-      if (fontStyle.includes('bold')) {
-        style.fontWeight = 'bold'
-      }
-    }
-
-    // Handle single scope
-    if (typeof setting.scope === 'string') {
-      tokenStyles[setting.scope] = style
-    }
-    // Handle multiple scopes
-    else if (Array.isArray(setting.scope)) {
-      setting.scope.forEach((scope) => {
-        tokenStyles[scope] = style
-      })
-    }
-  })
-
-  return tokenStyles
+export type ReactStyle = Record<string, CSSProperties>
+
+const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
+  color: true,
+  background: true,
+  backgroundColor: true,
+  fontWeight: true,
+  fontStyle: true,
 }
 
-export function convertShikiTheme(theme: ThemeRegistrationAny): ReturnType<typeof StyleSheet.create> {
-  // Get all styles from both settings and tokenColors
-  const settings = [...(theme.settings || []), ...(theme.tokenColors || [])]
-
-  // Process basic colors from the theme
-  const backgroundColor = theme.colors?.['editor.background'] || theme.bg || '#1e1e1e'
-  const defaultColor = theme.colors?.['editor.foreground'] || theme.fg || '#d4d4d4'
-  const selectionColor = theme.colors?.['editor.selectionBackground'] || 'rgba(255, 255, 255, 0.1)'
-
-  // Process token styles
-  const tokenStyles = processSettings(settings)
-
-  // Convert token styles to RN styles
-  const tokenStylesMap = Object.entries(tokenStyles).reduce<Record<string, TextStyle>>((acc, [scope, style]) => {
-    acc[`token-${scope.replace(/\./g, '-')}`] = {
-      color: style.color,
-      ...(style.fontStyle && { fontStyle: style.fontStyle }),
-      ...(style.fontWeight && { fontWeight: style.fontWeight }),
-    }
-    return acc
-  }, {})
-
-  // Create the complete styles object
-  const completeStyles: HighlighterStyleSheet = {
-    container: {
-      backgroundColor,
-      flex: 1,
-      padding: 16,
-    },
-    token: {
-      color: defaultColor,
-      fontSize: 14,
-      lineHeight: 21,
-    },
-    selection: {
-      backgroundColor: selectionColor,
-    },
-    styles: tokenStylesMap,
-  }
-
-  return StyleSheet.create(completeStyles)
+export function getRNStylesFromShikiStyle(shikiStyle: ReactStyle): HighlighterStyleSheet {
+  return Object.fromEntries(Object.entries(shikiStyle).map(([className, style]) => [className, cleanStyle(style)]))
 }
 
-export function getTokenStyle(theme: HighlighterStyleSheet, tokenTypes: string[], defaultColor: string): TextStyle {
-  const matchingStyles = tokenTypes.map(type => theme.styles[`token-${type.replace(/\./g, '-')}`]).filter(Boolean)
+export function cleanStyle(style: CSSProperties) {
+  const styles = Object.entries(style)
+    .filter(([key]) => ALLOWED_STYLE_PROPERTIES[key])
+    .map<StyleTuple>(([key, value]) => [key, value])
 
-  return {
-    ...theme.token,
-    color: matchingStyles[0]?.color || defaultColor,
-    ...(matchingStyles.some(s => s?.fontStyle === 'italic') && { fontStyle: 'italic' }),
-    ...(matchingStyles.some(s => s?.fontWeight === 'bold') && { fontWeight: 'bold' }),
-  }
+  return transform(styles)
 }