rn-shiki 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +6 -3
- package/src/syntax/highlighter/index.ts +68 -38
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "rn-shiki",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.0.
|
4
|
+
"version": "0.0.3",
|
5
5
|
"description": "Shiki syntax highlighter for React Native.",
|
6
6
|
"author": "Ryan Skinner <hello@ryanskinner.com>",
|
7
7
|
"license": "MIT",
|
@@ -10,7 +10,8 @@
|
|
10
10
|
"shiki",
|
11
11
|
"syntax-highlighting",
|
12
12
|
"ios",
|
13
|
-
"android"
|
13
|
+
"android",
|
14
|
+
"web"
|
14
15
|
],
|
15
16
|
"exports": {
|
16
17
|
".": {
|
@@ -42,7 +43,9 @@
|
|
42
43
|
"shiki": "^1.1.7"
|
43
44
|
},
|
44
45
|
"dependencies": {
|
45
|
-
"shiki": "^1.1.7"
|
46
|
+
"shiki": "^1.1.7",
|
47
|
+
"tm-grammars": "^1.18.6",
|
48
|
+
"tm-themes": "^1.9.0"
|
46
49
|
},
|
47
50
|
"devDependencies": {
|
48
51
|
"@antfu/eslint-config": "^3.8.0",
|
@@ -3,41 +3,39 @@ import type { TokenType } from '../../types'
|
|
3
3
|
import { createHighlighterCore } from 'shiki/core'
|
4
4
|
import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
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
|
-
}
|
25
|
-
}
|
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'
|
26
13
|
|
27
|
-
|
28
|
-
|
29
|
-
|
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
|
-
}
|
14
|
+
// Import themes
|
15
|
+
import githubDark from 'shiki/themes/github-dark.mjs'
|
16
|
+
import githubLight from 'shiki/themes/github-light.mjs'
|
37
17
|
|
38
|
-
|
18
|
+
// Define supported languages and themes explicitly
|
19
|
+
export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript'
|
39
20
|
export type SupportedTheme = 'github-dark' | 'github-light'
|
40
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,
|
30
|
+
}
|
31
|
+
|
32
|
+
// Bundled themes mapping
|
33
|
+
const THEME_IMPORTS: Record<SupportedTheme, ThemeInput> = {
|
34
|
+
'github-dark': githubDark,
|
35
|
+
'github-light': githubLight,
|
36
|
+
}
|
37
|
+
|
38
|
+
// Singleton highlighter instance with tracking
|
41
39
|
interface HighlighterInstance {
|
42
40
|
highlighter: Awaited<ReturnType<typeof createHighlighterCore>>
|
43
41
|
loadedLanguages: Set<string>
|
@@ -56,18 +54,21 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
|
|
56
54
|
throw new Error('Please provide both `langs` and `themes` when creating a highlighter.')
|
57
55
|
}
|
58
56
|
|
57
|
+
// Return existing instance if already initialized
|
59
58
|
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 =
|
62
|
+
const langData = LANGUAGE_IMPORTS[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
|
68
69
|
for (const theme of themes) {
|
69
70
|
if (!highlighterInstance.loadedThemes.has(theme)) {
|
70
|
-
const themeData =
|
71
|
+
const themeData = THEME_IMPORTS[theme]
|
71
72
|
await highlighterInstance.highlighter.loadTheme(themeData)
|
72
73
|
highlighterInstance.loadedThemes.add(theme)
|
73
74
|
}
|
@@ -77,15 +78,14 @@ export async function createHighlighter({ langs, themes }: HighlighterOptions) {
|
|
77
78
|
}
|
78
79
|
|
79
80
|
try {
|
80
|
-
|
81
|
-
const loadedThemes = await Promise.all(themes.map(loadTheme))
|
82
|
-
|
81
|
+
// Create highlighter with initial languages and themes
|
83
82
|
const highlighter = await createHighlighterCore({
|
84
83
|
engine: createJavaScriptRegexEngine(),
|
85
|
-
langs:
|
86
|
-
themes:
|
84
|
+
langs: langs.map(lang => LANGUAGE_IMPORTS[lang]),
|
85
|
+
themes: themes.map(theme => THEME_IMPORTS[theme]),
|
87
86
|
})
|
88
87
|
|
88
|
+
// Store the instance with tracking sets
|
89
89
|
highlighterInstance = {
|
90
90
|
highlighter,
|
91
91
|
loadedLanguages: new Set(langs),
|
@@ -100,6 +100,36 @@ 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
|
+
|
103
133
|
export function processTokens(tokens: ThemedToken[]): TokenType[] {
|
104
134
|
return tokens.map(token => ({
|
105
135
|
content: token.content,
|