rn-shiki 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "rn-shiki",
3
3
  "type": "module",
4
- "version": "0.0.1",
4
+ "version": "0.0.2",
5
5
  "description": "Shiki syntax highlighter for React Native.",
6
6
  "author": "Ryan Skinner <hello@ryanskinner.com>",
7
7
  "license": "MIT",
@@ -3,39 +3,41 @@ import type { TokenType } from '../../types'
3
3
  import { createHighlighterCore } from 'shiki/core'
4
4
  import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
5
5
 
6
- // Import languages
7
- import css from 'shiki/langs/css.mjs'
8
- import html from 'shiki/langs/html.mjs'
9
- import javascript from 'shiki/langs/javascript.mjs'
10
- import json from 'shiki/langs/json.mjs'
11
- import php from 'shiki/langs/php.mjs'
12
- import typescript from 'shiki/langs/typescript.mjs'
13
-
14
- // Import themes
15
- import githubDark from 'shiki/themes/github-dark.mjs'
16
- import githubLight from 'shiki/themes/github-light.mjs'
17
-
18
- // Define supported languages and themes explicitly
19
- export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript'
20
- export type SupportedTheme = 'github-dark' | 'github-light'
21
-
22
- // Bundled languages mapping - using the imported grammars directly
23
- const LANGUAGE_IMPORTS: Record<SupportedLanguage, LanguageInput> = {
24
- css,
25
- html,
26
- javascript,
27
- json,
28
- php,
29
- typescript,
6
+ async function loadLanguage(lang: SupportedLanguage): Promise<LanguageInput> {
7
+ switch (lang) {
8
+ case 'css':
9
+ return (await import('shiki/dist/langs/css.mjs')).default
10
+ case 'html':
11
+ return (await import('shiki/dist/langs/html.mjs')).default
12
+ case 'javascript':
13
+ return (await import('shiki/dist/langs/javascript.mjs')).default
14
+ case 'json':
15
+ return (await import('shiki/dist/langs/json.mjs')).default
16
+ case 'php':
17
+ return (await import('shiki/dist/langs/php.mjs')).default
18
+ case 'typescript':
19
+ return (await import('shiki/dist/langs/typescript.mjs')).default
20
+ case 'tsx':
21
+ return (await import('shiki/dist/langs/tsx.mjs')).default
22
+ default:
23
+ throw new Error(`Unsupported language: ${lang}`)
24
+ }
30
25
  }
31
26
 
32
- // Bundled themes mapping
33
- const THEME_IMPORTS: Record<SupportedTheme, ThemeInput> = {
34
- 'github-dark': githubDark,
35
- 'github-light': githubLight,
27
+ async function loadTheme(theme: SupportedTheme): Promise<ThemeInput> {
28
+ switch (theme) {
29
+ case 'github-dark':
30
+ return (await import('shiki/dist/themes/github-dark.mjs')).default
31
+ case 'github-light':
32
+ return (await import('shiki/dist/themes/github-light.mjs')).default
33
+ default:
34
+ throw new Error(`Unsupported theme: ${theme}`)
35
+ }
36
36
  }
37
37
 
38
- // Singleton highlighter instance with tracking
38
+ export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript' | 'tsx'
39
+ export type SupportedTheme = 'github-dark' | 'github-light'
40
+
39
41
  interface HighlighterInstance {
40
42
  highlighter: Awaited<ReturnType<typeof createHighlighterCore>>
41
43
  loadedLanguages: Set<string>
@@ -54,21 +56,18 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
54
56
  throw new Error('Please provide both `langs` and `themes` when creating a highlighter.')
55
57
  }
56
58
 
57
- // Return existing instance if already initialized
58
59
  if (highlighterInstance?.highlighter) {
59
- // Load any new languages that weren't previously loaded
60
60
  for (const lang of langs) {
61
61
  if (!highlighterInstance.loadedLanguages.has(lang)) {
62
- const langData = LANGUAGE_IMPORTS[lang]
62
+ const langData = await loadLanguage(lang)
63
63
  await highlighterInstance.highlighter.loadLanguage(langData)
64
64
  highlighterInstance.loadedLanguages.add(lang)
65
65
  }
66
66
  }
67
67
 
68
- // Load any new themes that weren't previously loaded
69
68
  for (const theme of themes) {
70
69
  if (!highlighterInstance.loadedThemes.has(theme)) {
71
- const themeData = THEME_IMPORTS[theme]
70
+ const themeData = await loadTheme(theme)
72
71
  await highlighterInstance.highlighter.loadTheme(themeData)
73
72
  highlighterInstance.loadedThemes.add(theme)
74
73
  }
@@ -78,14 +77,15 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
78
77
  }
79
78
 
80
79
  try {
81
- // Create highlighter with initial languages and themes
80
+ const loadedLangs = await Promise.all(langs.map(loadLanguage))
81
+ const loadedThemes = await Promise.all(themes.map(loadTheme))
82
+
82
83
  const highlighter = await createHighlighterCore({
83
84
  engine: createJavaScriptRegexEngine(),
84
- langs: langs.map(lang => LANGUAGE_IMPORTS[lang]),
85
- themes: themes.map(theme => THEME_IMPORTS[theme]),
85
+ langs: loadedLangs,
86
+ themes: loadedThemes,
86
87
  })
87
88
 
88
- // Store the instance with tracking sets
89
89
  highlighterInstance = {
90
90
  highlighter,
91
91
  loadedLanguages: new Set(langs),
@@ -100,36 +100,6 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
100
100
  }
101
101
  }
102
102
 
103
- // Function to ensure a theme is loaded
104
- export async function loadTheme(theme: SupportedTheme) {
105
- if (!highlighterInstance?.highlighter) {
106
- throw new Error('Highlighter not initialized')
107
- }
108
-
109
- if (highlighterInstance.loadedThemes.has(theme)) {
110
- return
111
- }
112
-
113
- const themeData = THEME_IMPORTS[theme]
114
- await highlighterInstance.highlighter.loadTheme(themeData)
115
- highlighterInstance.loadedThemes.add(theme)
116
- }
117
-
118
- // Function to ensure a language is loaded
119
- export async function loadLanguage(lang: SupportedLanguage) {
120
- if (!highlighterInstance?.highlighter) {
121
- throw new Error('Highlighter not initialized')
122
- }
123
-
124
- if (highlighterInstance.loadedLanguages.has(lang)) {
125
- return
126
- }
127
-
128
- const langData = LANGUAGE_IMPORTS[lang]
129
- await highlighterInstance.highlighter.loadLanguage(langData)
130
- highlighterInstance.loadedLanguages.add(lang)
131
- }
132
-
133
103
  export function processTokens(tokens: ThemedToken[]): TokenType[] {
134
104
  return tokens.map(token => ({
135
105
  content: token.content,