rn-shiki 0.0.37-2 → 0.0.37-20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-2",
+  "version": "0.0.37-20",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -34,21 +34,17 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
-    "esbuild": "^0.24.0",
+    "css-to-react-native": "^3.2.0",
     "shiki": "^1.1.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.26.0",
     "@eslint-react/eslint-plugin": "^1.15.0",
     "@types/react": "^18.2.0",
     "@types/react-native": "^0.73.0",
-    "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
-    "metro-react-native-babel-preset": "^0.77.0",
     "react": "^18.2.0",
     "react-native": "^0.73.0",
     "react-native-builder-bob": "^0.30.2",

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,9 +1,9 @@
 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, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
-import { convertShikiTheme } from '../../utils/style-transformer'
-import SyntaxLine from './SyntaxLine'
+import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -12,81 +12,68 @@ const monospaceFont = Platform.select({
 })
 
 const styles = StyleSheet.create({
-  container: {
+  scrollView: {
     flex: 1,
     minHeight: 20,
   },
-  scrollContent: {
-    flexGrow: 1,
-    padding: 8,
-  },
-  contentContainer: {
-    minWidth: '100%',
-  },
-  errorText: {
-    padding: 8,
-    color: '#ff6b6b',
-  },
-  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 }) => {
+  console.log('theme:', theme)
+  const stylesheet = useMemo(() => {
+    const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
+    console.log('Generated stylesheet:', styles)
+    return styles
+  }, [theme])
+
+  const { tokens } = useSyntaxHighlighter({
     text,
     language,
     languageId,
     theme,
   })
 
-  if (error) {
+  const renderToken = (token: any, index: number, lineIndex: number) => {
+    // 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),
+      },
+    ])
+
+    console.log(`Rendering token: ${token.content}, styles:`, combinedStyles)
+
     return (
-      <Text
-        style={[
-          styles.errorText,
-          {
-            fontFamily: monospaceFont,
-            fontSize,
-          },
-        ]}
-      >
-        Error:
-        {' '}
-        {error}
+      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
+        {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
-  if (isLoading) {
+  // In the renderLine and renderToken flow
+  const renderLine = (line: any[], lineIndex: number) => {
+    console.log(`Rendering line ${lineIndex}:`, line)
     return (
-      <Text
-        style={[
-          styles.loadingText,
-          {
-            fontFamily: monospaceFont,
-            fontSize,
-          },
-        ]}
-      >
-        Loading...
-      </Text>
+      <View key={lineIndex} style={styles.lineContainer}>
+        {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
+      </View>
     )
   }
 
   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>
-    </View>
+    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.scrollView}>
+      <View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</View>
+    </ScrollView>
   )
 }
 

package/src/hooks/useSyntaxHighlighter.ts

@@ -1,6 +1,7 @@
-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'
+import { createHighlighter } from '../syntax/highlighter'
 
 export function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
   const [tokens, setTokens] = useState<ThemedToken[][]>([])
@@ -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/index.ts

@@ -1,6 +1,3 @@
 import SyntaxHighlighter from './components/syntax/SyntaxHighlighter'
-import SyntaxLine from './components/syntax/SyntaxLine'
 
-export * from './types/shiki'
-
-export { SyntaxHighlighter, SyntaxLine }
+export { SyntaxHighlighter }

package/src/syntax/{highlighter/index.ts → highlighter.ts}

@@ -1,19 +1,31 @@
 import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
-import type { TokenType } from '../../types'
+import type { TokenType } from '../types/shiki'
 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 {
+    return await createHighlighterCore({
+      langs,
+      themes,
+      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,107 @@
 import type { TextStyle } from 'react-native'
-import type { ThemeRegistrationAny } from 'shiki'
+import transform from 'css-to-react-native'
 
-export interface RNTokenStyle {
-  color?: string
-  backgroundColor?: string
-  fontWeight?: TextStyle['fontWeight']
-  fontStyle?: TextStyle['fontStyle']
+export interface HighlighterStyleSheet {
+  [key: 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]
+export type ReactStyle = Record<string, TextStyle>
+
+// Helper function to convert hex color to RGB
+function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: Number.parseInt(result[1]!, 16),
+        g: Number.parseInt(result[2]!, 16),
+        b: Number.parseInt(result[3]!, 16),
+      }
+    : null
+}
+
+// Helper function to normalize color values
+function normalizeColor(color: string | undefined): string {
+  if (!color)
+    return 'transparent'
+
+  // Type guard to ensure color is string before we call string methods
+  if (typeof color === 'string' && color.startsWith('#')) {
+    const rgb = hexToRgb(color)
+    if (rgb) {
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+    }
   }
+  return color
 }
 
-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'
+export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
+  const styleMap: ReactStyle = {}
 
-  // Convert token colors
-  const styles: Record<string, RNTokenStyle> = {}
+  // Add default styles
+  styleMap.default = {
+    color: '#e1e4e8',
+    backgroundColor: 'transparent',
+  }
 
-  theme.settings?.forEach((setting) => {
-    if (!setting.scope || !setting.settings)
+  tokenColors.forEach((token) => {
+    if (!token.settings || !token.scope)
       return
 
-    const scopes = Array.isArray(setting.scope) ? setting.scope : [setting.scope]
-    const style: RNTokenStyle = {}
+    const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
+    const styleEntries: Array<[string, string]> = []
 
-    // 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
+    // Only add styles if they exist
+    if (token.settings.foreground) {
+      styleEntries.push(['color', normalizeColor(token.settings.foreground)])
+    }
+    if (token.settings.background) {
+      styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)])
+    }
+    if (token.settings.fontStyle) {
+      if (token.settings.fontStyle.includes('italic')) {
+        styleEntries.push(['fontStyle', 'italic'])
       }
-    })
+      if (token.settings.fontStyle.includes('bold')) {
+        styleEntries.push(['fontWeight', 'bold'])
+      }
+    }
+
+    if (styleEntries.length > 0) {
+      const transformedStyle = transform(styleEntries)
 
-    // Apply style to each scope
-    scopes.forEach((scope) => {
-      styles[scope] = style
-    })
+      scopes.forEach((scope: string) => {
+        if (typeof scope === 'string') {
+          styleMap[scope] = { ...(styleMap[scope] || {}), ...transformedStyle }
+        }
+      })
+    }
   })
 
-  return {
-    backgroundColor,
-    defaultColor,
-    styles,
+  return styleMap
+}
+
+export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
+  if (!theme || !theme.tokenColors) {
+    console.error('Provided theme does not contain \'tokenColors\'.')
+    return {}
+  }
+
+  try {
+    // Convert theme colors to React Native styles
+    const styles = convertTokenColorsToReactStyle(theme.tokenColors)
+
+    // Add theme-specific base styles if they exist
+    if (theme.colors) {
+      styles.base = {
+        color: normalizeColor(theme.colors['editor.foreground']),
+        backgroundColor: normalizeColor(theme.colors['editor.background']),
+      }
+    }
+
+    return styles
+  }
+  catch {
+    console.error('Error converting theme styles')
+    return {}
   }
 }

package/src/components/syntax/SyntaxLine.tsx

@@ -1,81 +0,0 @@
-import type { TokenType } from '../../types'
-import type { RNTokenStyle } from '../../utils/style-transformer'
-import React from 'react'
-import { Platform, StyleSheet, Text, View } from 'react-native'
-
-const monospaceFont = Platform.select({
-  ios: 'Menlo',
-  android: 'monospace',
-  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, isLastLine = false, themeStyles }: SyntaxLineProps) {
-  const lineHeight = Math.floor(fontSize * 1.5)
-
-  return (
-    <View
-      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={[
-              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>
-        )
-      })}
-    </View>
-  )
-}
-
-export default SyntaxLine

package/src/components/syntax/index.ts

@@ -1,2 +0,0 @@
-export { default as SyntaxHighlighter } from './SyntaxHighlighter'
-export { default as SyntaxLine } from './SyntaxLine'

package/src/syntax/index.ts

@@ -1 +0,0 @@
-export { createHighlighter, processTokens } from './highlighter'

package/src/types/index.ts

@@ -1,6 +0,0 @@
-export interface TokenType {
-  content: string
-  color?: string
-  fontStyle?: string
-  fontWeight?: string
-}

package/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './string'