rn-shiki 0.0.37-2 → 0.0.37-4

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,9 +1,7 @@
-import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
-import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { Platform, ScrollView, type ScrollViewProps, StyleSheet, Text, type TextStyle, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import { convertShikiTheme } from '../../utils/style-transformer'
-import SyntaxLine from './SyntaxLine'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -11,83 +9,72 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
+interface SyntaxHighlighterProps {
+  text: string
+  language: any
+  languageId: string
+  theme: any
+  textStyle?: TextStyle
+  scrollViewProps?: ScrollViewProps
+}
+
 const styles = StyleSheet.create({
-  container: {
+  scrollView: {
     flex: 1,
     minHeight: 20,
   },
-  scrollContent: {
-    flexGrow: 1,
-    padding: 8,
-  },
   contentContainer: {
-    minWidth: '100%',
-  },
-  errorText: {
-    padding: 8,
-    color: '#ff6b6b',
+    flexGrow: 1,
   },
-  loadingText: {
-    padding: 8,
-    color: '#666666',
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
 })
 
-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({
+const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme, textStyle, scrollViewProps }) => {
+  const themeStyles = React.useMemo(() => convertShikiTheme(theme), [theme])
+  const { tokens } = useSyntaxHighlighter({
     text,
     language,
     languageId,
     theme,
   })
 
-  if (error) {
-    return (
-      <Text
-        style={[
-          styles.errorText,
-          {
-            fontFamily: monospaceFont,
-            fontSize,
-          },
-        ]}
-      >
-        Error:
-        {' '}
-        {error}
-      </Text>
-    )
-  }
+  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),
+      ...textStyle,
+    }
 
-  if (isLoading) {
     return (
-      <Text
-        style={[
-          styles.loadingText,
-          {
-            fontFamily: monospaceFont,
-            fontSize,
-          },
-        ]}
-      >
-        Loading...
+      <Text key={`${lineIndex}-${index}`} style={tokenStyle}>
+        {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
-  return (
-    <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>
+  const renderLine = (line: any[], lineIndex: number) => (
+    <View key={lineIndex} style={styles.lineContainer}>
+      {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
     </View>
   )
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={Platform.OS !== 'web'}
+      style={styles.scrollView}
+      contentContainerStyle={[styles.contentContainer, themeStyles.container, scrollViewProps?.contentContainerStyle]}
+      {...scrollViewProps}
+    >
+      <View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</View>
+    </ScrollView>
+  )
 }
 
 export default SyntaxHighlighter

package/src/hooks/useSyntaxHighlighter.ts

@@ -1,4 +1,5 @@
-import type { SyntaxHighlighterProps, ThemedToken, TokensResult } from '../types/shiki'
+import type { ThemedToken } from 'shiki'
+import type { SyntaxHighlighterProps, TokensResult } from '../types/shiki'
 import { useEffect, useState } from 'react'
 import { createHighlighter } from '../syntax'
 
@@ -19,14 +20,22 @@ export function useSyntaxHighlighter({ text, language, languageId, theme }: Synt
       }
 
       try {
+        // First create the highlighter
         const highlighter = await createHighlighter({
           langs: [language],
-          themes: theme ? [theme] : [],
+          themes: [theme],
         })
 
+        // Get resolved theme name
+        const themeResolved = highlighter.getLoadedThemes()?.[0]
+        if (!themeResolved) {
+          throw new Error('Failed to resolve theme')
+        }
+
+        // Use resolved theme for tokenization
         const result = highlighter.codeToTokens(text, {
           lang: languageId,
-          theme: theme || 'none',
+          theme: themeResolved,
         }) as TokensResult
 
         if (mounted && result.tokens) {

package/src/syntax/highlighter/index.ts

@@ -3,17 +3,30 @@ import type { TokenType } from '../../types'
 import { createHighlighterCore } from 'shiki/dist/core.mjs'
 import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs'
 
-async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[]): Promise<Awaited<ReturnType<typeof createHighlighterCore>>> {
-  return createHighlighterCore({
-    engine: createJavaScriptRegexEngine(),
-    langs,
-    themes,
-  })
+const engine = createJavaScriptRegexEngine({
+  forgiving: true,
+  simulation: true,
+  cache: new Map(),
+})
+
+async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[]) {
+  try {
+    // Initialize the core highlighter with our configured engine
+    return await createHighlighterCore({
+      langs,
+      themes,
+      engine, // Pass the configured engine
+    })
+  }
+  catch (err) {
+    console.error('Error initializing highlighter:', err)
+    throw err
+  }
 }
 
-export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] }): Promise<Awaited<ReturnType<typeof createHighlighterCore>>> {
-  if (!langs?.length || !themes?.length) {
-    throw new Error('Please provide both `langs` and `themes` when creating a highlighter.')
+export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] }) {
+  if (!langs?.length) {
+    throw new Error('Please provide languages when creating a highlighter.')
   }
 
   try {

package/src/types/shiki.ts

@@ -1,20 +1,19 @@
-import type { LanguageInput, ThemeRegistrationAny } from 'shiki'
+import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
 
-export interface ThemedToken {
+export interface TokenType {
   content: string
   color?: string
   fontStyle?: string
-  fontWeight?: string
-}
-
-export interface TokensResult {
-  tokens: ThemedToken[][]
 }
 
 export interface SyntaxHighlighterProps {
   text: string
   language: LanguageInput
   languageId: string
-  theme?: ThemeRegistrationAny
+  theme: ThemeInput
   fontSize?: number
 }
+
+export interface TokensResult {
+  tokens: ThemedToken[][]
+}

package/src/utils/style-transformer.ts

@@ -1,71 +1,108 @@
-import type { TextStyle } from 'react-native'
-import type { ThemeRegistrationAny } from 'shiki'
+import type { RawThemeSetting, ThemeRegistrationAny } from 'shiki'
+import { StyleSheet, type TextStyle } from 'react-native'
 
-export interface RNTokenStyle {
-  color?: string
-  backgroundColor?: string
-  fontWeight?: TextStyle['fontWeight']
-  fontStyle?: TextStyle['fontStyle']
+export interface HighlighterStyleSheet {
+  container: TextStyle
+  token: TextStyle
+  selection: TextStyle
+  styles: Record<string, TextStyle>
+  [key: string]: TextStyle | Record<string, TextStyle>
 }
 
-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]
-  }
+interface TokenStyle {
+  color?: string
+  fontStyle?: 'normal' | 'italic'
+  fontWeight?: 'normal' | 'bold'
 }
 
-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'
+function processSettings(settings: RawThemeSetting[]): Record<string, TokenStyle> {
+  const tokenStyles: Record<string, TokenStyle> = {}
 
-  // Convert token colors
-  const styles: Record<string, RNTokenStyle> = {}
-
-  theme.settings?.forEach((setting) => {
+  settings.forEach((setting) => {
     if (!setting.scope || !setting.settings)
       return
 
-    const scopes = Array.isArray(setting.scope) ? setting.scope : [setting.scope]
-    const style: RNTokenStyle = {}
+    const style: TokenStyle = {}
+    const { foreground, fontStyle } = setting.settings
+
+    if (foreground) {
+      style.color = foreground
+    }
 
-    // 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
+    if (fontStyle) {
+      if (fontStyle.includes('italic')) {
+        style.fontStyle = 'italic'
       }
-    })
+      if (fontStyle.includes('bold')) {
+        style.fontWeight = 'bold'
+      }
+    }
 
-    // Apply style to each scope
-    scopes.forEach((scope) => {
-      styles[scope] = style
-    })
+    // 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 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 getTokenStyle(theme: HighlighterStyleSheet, tokenTypes: string[], defaultColor: string): TextStyle {
+  const matchingStyles = tokenTypes.map(type => theme.styles[`token-${type.replace(/\./g, '-')}`]).filter(Boolean)
+
   return {
-    backgroundColor,
-    defaultColor,
-    styles,
+    ...theme.token,
+    color: matchingStyles[0]?.color || defaultColor,
+    ...(matchingStyles.some(s => s?.fontStyle === 'italic') && { fontStyle: 'italic' }),
+    ...(matchingStyles.some(s => s?.fontWeight === 'bold') && { fontWeight: 'bold' }),
   }
 }