rn-shiki 0.0.1 → 0.0.2

package/package.json

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

package/src/syntax/highlighter/index.ts

@@ -3,39 +3,41 @@ import type { TokenType } from '../../types'
 import { createHighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
 
-// Import languages
-import css from 'shiki/langs/css.mjs'
-import html from 'shiki/langs/html.mjs'
-import javascript from 'shiki/langs/javascript.mjs'
-import json from 'shiki/langs/json.mjs'
-import php from 'shiki/langs/php.mjs'
-import typescript from 'shiki/langs/typescript.mjs'
-
-// Import themes
-import githubDark from 'shiki/themes/github-dark.mjs'
-import githubLight from 'shiki/themes/github-light.mjs'
-
-// Define supported languages and themes explicitly
-export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript'
-export type SupportedTheme = 'github-dark' | 'github-light'
-
-// Bundled languages mapping - using the imported grammars directly
-const LANGUAGE_IMPORTS: Record<SupportedLanguage, LanguageInput> = {
-  css,
-  html,
-  javascript,
-  json,
-  php,
-  typescript,
+async function loadLanguage(lang: SupportedLanguage): Promise<LanguageInput> {
+  switch (lang) {
+    case 'css':
+      return (await import('shiki/dist/langs/css.mjs')).default
+    case 'html':
+      return (await import('shiki/dist/langs/html.mjs')).default
+    case 'javascript':
+      return (await import('shiki/dist/langs/javascript.mjs')).default
+    case 'json':
+      return (await import('shiki/dist/langs/json.mjs')).default
+    case 'php':
+      return (await import('shiki/dist/langs/php.mjs')).default
+    case 'typescript':
+      return (await import('shiki/dist/langs/typescript.mjs')).default
+    case 'tsx':
+      return (await import('shiki/dist/langs/tsx.mjs')).default
+    default:
+      throw new Error(`Unsupported language: ${lang}`)
+  }
 }
 
-// Bundled themes mapping
-const THEME_IMPORTS: Record<SupportedTheme, ThemeInput> = {
-  'github-dark': githubDark,
-  'github-light': githubLight,
+async function loadTheme(theme: SupportedTheme): Promise<ThemeInput> {
+  switch (theme) {
+    case 'github-dark':
+      return (await import('shiki/dist/themes/github-dark.mjs')).default
+    case 'github-light':
+      return (await import('shiki/dist/themes/github-light.mjs')).default
+    default:
+      throw new Error(`Unsupported theme: ${theme}`)
+  }
 }
 
-// Singleton highlighter instance with tracking
+export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript' | 'tsx'
+export type SupportedTheme = 'github-dark' | 'github-light'
+
 interface HighlighterInstance {
   highlighter: Awaited<ReturnType<typeof createHighlighterCore>>
   loadedLanguages: Set<string>
@@ -54,21 +56,18 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
     throw new Error('Please provide both `langs` and `themes` when creating a highlighter.')
   }
 
-  // Return existing instance if already initialized
   if (highlighterInstance?.highlighter) {
-    // Load any new languages that weren't previously loaded
     for (const lang of langs) {
       if (!highlighterInstance.loadedLanguages.has(lang)) {
-        const langData = LANGUAGE_IMPORTS[lang]
+        const langData = await loadLanguage(lang)
         await highlighterInstance.highlighter.loadLanguage(langData)
         highlighterInstance.loadedLanguages.add(lang)
       }
     }
 
-    // Load any new themes that weren't previously loaded
     for (const theme of themes) {
       if (!highlighterInstance.loadedThemes.has(theme)) {
-        const themeData = THEME_IMPORTS[theme]
+        const themeData = await loadTheme(theme)
         await highlighterInstance.highlighter.loadTheme(themeData)
         highlighterInstance.loadedThemes.add(theme)
       }
@@ -78,14 +77,15 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
   }
 
   try {
-    // Create highlighter with initial languages and themes
+    const loadedLangs = await Promise.all(langs.map(loadLanguage))
+    const loadedThemes = await Promise.all(themes.map(loadTheme))
+
     const highlighter = await createHighlighterCore({
       engine: createJavaScriptRegexEngine(),
-      langs: langs.map(lang => LANGUAGE_IMPORTS[lang]),
-      themes: themes.map(theme => THEME_IMPORTS[theme]),
+      langs: loadedLangs,
+      themes: loadedThemes,
     })
 
-    // Store the instance with tracking sets
     highlighterInstance = {
       highlighter,
       loadedLanguages: new Set(langs),
@@ -100,36 +100,6 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
   }
 }
 
-// Function to ensure a theme is loaded
-export async function loadTheme(theme: SupportedTheme) {
-  if (!highlighterInstance?.highlighter) {
-    throw new Error('Highlighter not initialized')
-  }
-
-  if (highlighterInstance.loadedThemes.has(theme)) {
-    return
-  }
-
-  const themeData = THEME_IMPORTS[theme]
-  await highlighterInstance.highlighter.loadTheme(themeData)
-  highlighterInstance.loadedThemes.add(theme)
-}
-
-// Function to ensure a language is loaded
-export async function loadLanguage(lang: SupportedLanguage) {
-  if (!highlighterInstance?.highlighter) {
-    throw new Error('Highlighter not initialized')
-  }
-
-  if (highlighterInstance.loadedLanguages.has(lang)) {
-    return
-  }
-
-  const langData = LANGUAGE_IMPORTS[lang]
-  await highlighterInstance.highlighter.loadLanguage(langData)
-  highlighterInstance.loadedLanguages.add(lang)
-}
-
 export function processTokens(tokens: ThemedToken[]): TokenType[] {
   return tokens.map(token => ({
     content: token.content,