rn-shiki 0.0.37-9 → 0.0.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-9",
+  "version": "0.0.37",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -34,17 +34,21 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
-    "css-to-react-native": "^3.2.0",
+    "esbuild": "^0.24.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 type { ReactStyle } from '../../utils/style-transformer'
-import React, { useMemo } from 'react'
-import { Platform, ScrollView, StyleSheet, Text, type TextStyle, View } from 'react-native'
+import React from 'react'
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { convertShikiTheme } from 'src/utils'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
-import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
+import SyntaxLine from './SyntaxLine'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -12,53 +12,81 @@ const monospaceFont = Platform.select({
 })
 
 const styles = StyleSheet.create({
-  scrollView: {
+  container: {
     flex: 1,
     minHeight: 20,
   },
-  lineContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+  scrollContent: {
+    flexGrow: 1,
+    padding: 8,
+  },
+  contentContainer: {
+    minWidth: '100%',
+  },
+  errorText: {
+    padding: 8,
+    color: '#ff6b6b',
+  },
+  loadingText: {
+    padding: 8,
+    color: '#666666',
   },
 })
 
-const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
-  const stylesheet = useMemo(() => getRNStylesFromShikiStyle(theme as ReactStyle), [theme])
-  const { tokens } = useSyntaxHighlighter({
+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,
     languageId,
     theme,
   })
 
-  const renderToken = (token: any, index: number, lineIndex: number) => {
-    const tokenStyles: TextStyle = StyleSheet.flatten([
-      stylesheet.token,
-      {
-        fontFamily: monospaceFont,
-        ...(token.color && { color: token.color }),
-        ...(token.fontStyle === 'italic' && stylesheet.italic),
-        ...(token.fontWeight === 'bold' && stylesheet.bold),
-      },
-    ])
-
+  if (error) {
     return (
-      <Text key={`${lineIndex}-${index}`} style={tokenStyles}>
-        {token.content.replace(/ /g, '\u00A0')}
+      <Text
+        style={[
+          styles.errorText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
+      >
+        Error:
+        {' '}
+        {error}
       </Text>
     )
   }
 
-  const renderLine = (line: any[], lineIndex: number) => (
-    <View key={lineIndex} style={styles.lineContainer}>
-      {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
-    </View>
-  )
+  if (isLoading) {
+    return (
+      <Text
+        style={[
+          styles.loadingText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
+      >
+        Loading...
+      </Text>
+    )
+  }
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.scrollView}>
-      <View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</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

@@ -0,0 +1,81 @@
+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'
+
+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

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

package/src/hooks/useSyntaxHighlighter.ts

@@ -1,7 +1,6 @@
-import type { ThemedToken } from 'shiki'
-import type { SyntaxHighlighterProps, TokensResult } from '../types/shiki'
+import type { SyntaxHighlighterProps, ThemedToken, TokensResult } from '../types/shiki'
 import { useEffect, useState } from 'react'
-import { createHighlighter } from '../syntax/highlighter'
+import { createHighlighter } from '../syntax'
 
 export function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
   const [tokens, setTokens] = useState<ThemedToken[][]>([])
@@ -20,22 +19,14 @@ export function useSyntaxHighlighter({ text, language, languageId, theme }: Synt
       }
 
       try {
-        // First create the highlighter
         const highlighter = await createHighlighter({
           langs: [language],
-          themes: [theme],
+          themes: theme ? [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: themeResolved,
+          theme: theme || 'none',
         }) as TokensResult
 
         if (mounted && result.tokens) {

package/src/index.ts

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

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

@@ -1,32 +1,19 @@
 import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
-import type { TokenType } from '../types/shiki'
+import type { TokenType } from '../../types'
 import { createHighlighterCore } from 'shiki/dist/core.mjs'
 import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs'
 
-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
-  }
+async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[]): Promise<Awaited<ReturnType<typeof createHighlighterCore>>> {
+  return createHighlighterCore({
+    engine: createJavaScriptRegexEngine(),
+    langs,
+    themes,
+  })
 }
 
-export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] }) {
-  if (!langs?.length) {
-    throw new Error('Please provide languages when creating a highlighter.')
+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.')
   }
 
   try {

package/src/syntax/index.ts

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

package/src/types/index.ts

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

package/src/types/shiki.ts

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

package/src/utils/index.ts

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

package/src/utils/style-transformer.ts

@@ -1,28 +1,71 @@
-import type { CSSProperties } from 'react'
 import type { TextStyle } from 'react-native'
-import transform, { type StyleTuple } from 'css-to-react-native'
+import type { ThemeRegistrationAny } from 'shiki'
 
-export interface HighlighterStyleSheet {
-  [key: string]: TextStyle
-}
-export type ReactStyle = Record<string, CSSProperties>
-
-const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
-  color: true,
-  background: true,
-  backgroundColor: true,
-  fontWeight: true,
-  fontStyle: true,
+export interface RNTokenStyle {
+  color?: string
+  backgroundColor?: string
+  fontWeight?: TextStyle['fontWeight']
+  fontStyle?: TextStyle['fontStyle']
 }
 
-export function getRNStylesFromShikiStyle(shikiStyle: ReactStyle): HighlighterStyleSheet {
-  return Object.fromEntries(Object.entries(shikiStyle).map(([className, style]) => [className, cleanStyle(style)]))
+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 cleanStyle(style: CSSProperties) {
-  const styles = Object.entries(style)
-    .filter(([key]) => ALLOWED_STYLE_PROPERTIES[key])
-    .map<StyleTuple>(([key, value]) => [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 transform(styles)
+  return {
+    backgroundColor,
+    defaultColor,
+    styles,
+  }
 }