rn-shiki 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -10,7 +10,8 @@
     "shiki",
     "syntax-highlighting",
     "ios",
-    "android"
+    "android",
+    "web"
   ],
   "exports": {
     ".": {
@@ -42,7 +43,9 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
-    "shiki": "^1.1.7"
+    "shiki": "^1.1.7",
+    "tm-grammars": "^1.18.6",
+    "tm-themes": "^1.9.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",

package/src/syntax/highlighter/index.ts

@@ -3,41 +3,39 @@ import type { TokenType } from '../../types'
 import { createHighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
 
-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}`)
-  }
-}
+// 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'
 
-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}`)
-  }
-}
+// Import themes
+import githubDark from 'shiki/themes/github-dark.mjs'
+import githubLight from 'shiki/themes/github-light.mjs'
 
-export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript' | 'tsx'
+// 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,
+}
+
+// Bundled themes mapping
+const THEME_IMPORTS: Record<SupportedTheme, ThemeInput> = {
+  'github-dark': githubDark,
+  'github-light': githubLight,
+}
+
+// Singleton highlighter instance with tracking
 interface HighlighterInstance {
   highlighter: Awaited<ReturnType<typeof createHighlighterCore>>
   loadedLanguages: Set<string>
@@ -56,18 +54,21 @@ 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 = await loadLanguage(lang)
+        const langData = LANGUAGE_IMPORTS[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 = await loadTheme(theme)
+        const themeData = THEME_IMPORTS[theme]
         await highlighterInstance.highlighter.loadTheme(themeData)
         highlighterInstance.loadedThemes.add(theme)
       }
@@ -77,15 +78,14 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
   }
 
   try {
-    const loadedLangs = await Promise.all(langs.map(loadLanguage))
-    const loadedThemes = await Promise.all(themes.map(loadTheme))
-
+    // Create highlighter with initial languages and themes
     const highlighter = await createHighlighterCore({
       engine: createJavaScriptRegexEngine(),
-      langs: loadedLangs,
-      themes: loadedThemes,
+      langs: langs.map(lang => LANGUAGE_IMPORTS[lang]),
+      themes: themes.map(theme => THEME_IMPORTS[theme]),
     })
 
+    // Store the instance with tracking sets
     highlighterInstance = {
       highlighter,
       loadedLanguages: new Set(langs),
@@ -100,6 +100,36 @@ 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,