rn-shiki 0.0.37-4 → 0.0.37-6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-4",
+  "version": "0.0.37-6",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -34,21 +34,16 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
-    "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,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,7 +1,7 @@
 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[][]>([])

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

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

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'