rn-shiki 0.0.37-3 → 0.0.37-4

package/package.json

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

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/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[][]
+}