rn-shiki 0.0.37-3 → 0.0.37-5

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,5 +1,7 @@
+import type { ThemeRegistrationAny } from 'shiki'
+import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
-import { Platform, ScrollView, type ScrollViewProps, StyleSheet, Text, type TextStyle, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, Text, type TextStyle, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import { convertShikiTheme } from '../../utils/style-transformer'
 
@@ -9,15 +11,6 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
-interface SyntaxHighlighterProps {
-  text: string
-  language: any
-  languageId: string
-  theme: any
-  textStyle?: TextStyle
-  scrollViewProps?: ScrollViewProps
-}
-
 const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
@@ -32,8 +25,8 @@ const styles = StyleSheet.create({
   },
 })
 
-const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme, textStyle, scrollViewProps }) => {
-  const themeStyles = React.useMemo(() => convertShikiTheme(theme), [theme])
+const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
+  const themeStyles = React.useMemo(() => convertShikiTheme(theme as ThemeRegistrationAny), [theme])
   const { tokens } = useSyntaxHighlighter({
     text,
     language,
@@ -48,7 +41,6 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
       ...(token.color && { color: token.color }),
       ...(token.fontStyle === 'italic' && themeStyles.italic),
       ...(token.fontWeight === 'bold' && themeStyles.bold),
-      ...textStyle,
     }
 
     return (
@@ -65,13 +57,7 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   )
 
   return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={Platform.OS !== 'web'}
-      style={styles.scrollView}
-      contentContainerStyle={[styles.contentContainer, themeStyles.container, scrollViewProps?.contentContainerStyle]}
-      {...scrollViewProps}
-    >
+    <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,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/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

@@ -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/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'