rn-shiki 0.0.37-15 → 0.0.37-17

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,7 +1,7 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import type { ReactStyle } from '../../utils/style-transformer'
 import React, { useMemo } from 'react'
-import { Platform, ScrollView, StyleSheet, Text, type TextStyle, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
 
@@ -38,25 +38,29 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   })
 
   const renderToken = (token: any, index: number, lineIndex: number) => {
-    const tokenStyles: TextStyle = StyleSheet.flatten([
-      stylesheet.token,
+    // Ensure to collect all styles associated with the token's scopes
+    const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
+    const tokenStylesArray = tokenScopes.map((scope: string) => stylesheet[scope] || {})
+    const combinedStyles = StyleSheet.flatten([
+      ...tokenStylesArray,
       {
         fontFamily: monospaceFont,
-        ...(token.color && { color: token.color }),
-        ...(token.fontStyle === 'italic' && stylesheet.italic),
-        ...(token.fontWeight === 'bold' && stylesheet.bold),
       },
+      ...(token.color && { color: token.color }),
+      ...(token.fontStyle === 'italic' ? [{ fontStyle: 'italic' }] : []),
+      ...(token.fontStyle === 'bold' ? [{ fontWeight: 'bold' }] : []),
     ])
 
-    console.log(`Rendering token: ${token.content}, styles:`, tokenStyles)
+    console.log(`Rendering token: ${token.content}, styles:`, combinedStyles)
 
     return (
-      <Text key={`${lineIndex}-${index}`} style={tokenStyles}>
+      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
+  // In the renderLine and renderToken flow
   const renderLine = (line: any[], lineIndex: number) => {
     console.log(`Rendering line ${lineIndex}:`, line)
     return (

package/src/utils/style-transformer.ts

@@ -1,35 +1,57 @@
-import type { CSSProperties } from 'react'
 import type { TextStyle } from 'react-native'
 import transform from 'css-to-react-native'
 
 export interface HighlighterStyleSheet {
   [key: string]: TextStyle
 }
-export type ReactStyle = Record<string, CSSProperties>
+
+export type ReactStyle = Record<string, TextStyle>
 
 const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
   color: true,
-  background: true,
   backgroundColor: true,
   fontWeight: true,
   fontStyle: true,
 }
 
-export function getRNStylesFromShikiStyle(shikiStyle: ReactStyle): HighlighterStyleSheet {
-  return Object.fromEntries(
-    Object.entries(shikiStyle)
-      .map(([className, style]) => {
-        // Filter the styles based on allowed properties
-        const filteredStyle = Object.fromEntries(
-          Object.entries(style).filter(([property]) => ALLOWED_STYLE_PROPERTIES[property]),
-        )
+export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
+  const styleMap: ReactStyle = {}
+
+  tokenColors.forEach((token) => {
+    const { scope, settings } = token
+    const styleEntries: Array<[string, string]> = []
+
+    if (settings.foreground)
+      styleEntries.push(['color', settings.foreground])
+    if (settings.background)
+      styleEntries.push(['backgroundColor', settings.background])
+    if (settings.fontStyle) {
+      if (settings.fontStyle.includes('italic'))
+        styleEntries.push(['fontStyle', 'italic'])
+      if (settings.fontStyle.includes('bold'))
+        styleEntries.push(['fontWeight', 'bold'])
+    }
 
-        // Convert the filtered style to React Native style
-        const rnStyle: TextStyle = transform(Object.entries(filteredStyle)) as TextStyle
+    if (styleEntries.length > 0) {
+      const transformedStyle = transform(styleEntries.filter(([key]) => ALLOWED_STYLE_PROPERTIES[key]))
 
-        console.log(`Converted style for ${className}:`, rnStyle)
+      const scopes = Array.isArray(scope) ? scope : [scope]
+      scopes.forEach((sc: string) => {
+        styleMap[sc] = { ...(styleMap[sc] || {}), ...transformedStyle }
+      })
+    }
+  })
+
+  return styleMap
+}
 
-        return [className, rnStyle] // Return the class name and the converted style
-      }),
-  )
+export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
+  console.log('Converting theme to React Native styles:', theme)
+  if (!theme.tokenColors) {
+    console.error('Provided theme does not contain \'tokenColors\'.')
+    return {}
+  }
+  const reactStyle = convertTokenColorsToReactStyle(theme.tokenColors)
+  console.log('Converted theme to React Native styles:', reactStyle)
+  return reactStyle
 }