rn-shiki 0.0.37-4 → 0.0.37-5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-4",
+  "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/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/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'