rn-shiki 0.0.37-2 → 0.0.37-21
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/commonjs/components/syntax/SyntaxHighlighter.js +69 -61
- package/lib/commonjs/components/syntax/SyntaxHighlighter.js.map +1 -1
- package/lib/commonjs/hooks/useSyntaxHighlighter.js +18 -10
- package/lib/commonjs/hooks/useSyntaxHighlighter.js.map +1 -1
- package/lib/commonjs/index.js +0 -23
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/syntax/{highlighter/index.js → highlighter.js} +20 -10
- package/lib/commonjs/syntax/highlighter.js.map +1 -0
- package/lib/commonjs/utils/style-transformer.js +97 -0
- package/lib/commonjs/utils/style-transformer.js.map +1 -0
- package/lib/module/components/syntax/SyntaxHighlighter.js +69 -62
- package/lib/module/components/syntax/SyntaxHighlighter.js.map +1 -1
- package/lib/module/hooks/useSyntaxHighlighter.js +17 -9
- package/lib/module/hooks/useSyntaxHighlighter.js.map +1 -1
- package/lib/module/index.js +1 -3
- package/lib/module/index.js.map +1 -1
- package/lib/module/syntax/highlighter.js +44 -0
- package/lib/module/syntax/highlighter.js.map +1 -0
- package/lib/module/utils/style-transformer.js +91 -0
- package/lib/module/utils/style-transformer.js.map +1 -0
- package/lib/typescript/components/syntax/SyntaxHighlighter.d.ts +2 -10
- package/lib/typescript/components/syntax/SyntaxHighlighter.d.ts.map +1 -1
- package/lib/typescript/hooks/useSyntaxHighlighter.d.ts +3 -2
- package/lib/typescript/hooks/useSyntaxHighlighter.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +1 -3
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/syntax/{highlighter/index.d.ts → highlighter.d.ts} +3 -4
- package/lib/typescript/syntax/highlighter.d.ts.map +1 -0
- package/lib/typescript/types/shiki.d.ts +10 -8
- package/lib/typescript/types/shiki.d.ts.map +1 -1
- package/lib/typescript/utils/string.d.ts +1 -1
- package/lib/typescript/utils/string.d.ts.map +1 -1
- package/lib/typescript/utils/style-transformer.d.ts +8 -0
- package/lib/typescript/utils/style-transformer.d.ts.map +1 -0
- package/package.json +2 -6
- package/src/components/syntax/SyntaxHighlighter.tsx +43 -56
- package/src/hooks/useSyntaxHighlighter.ts +13 -4
- package/src/index.ts +1 -4
- package/src/syntax/{highlighter/index.ts → highlighter.ts} +22 -10
- package/src/types/shiki.ts +7 -8
- package/src/utils/string.ts +1 -1
- package/src/utils/style-transformer.ts +89 -53
- package/lib/commonjs/components/syntax/SyntaxLine.js +0 -36
- package/lib/commonjs/components/syntax/SyntaxLine.js.map +0 -1
- package/lib/commonjs/components/syntax/index.js +0 -21
- package/lib/commonjs/components/syntax/index.js.map +0 -1
- package/lib/commonjs/syntax/highlighter/index.js.map +0 -1
- package/lib/commonjs/syntax/index.js +0 -19
- package/lib/commonjs/syntax/index.js.map +0 -1
- package/lib/commonjs/types/index.js +0 -2
- package/lib/commonjs/types/index.js.map +0 -1
- package/lib/commonjs/types/shiki.d.js +0 -6
- package/lib/commonjs/types/shiki.d.js.map +0 -1
- package/lib/commonjs/utils/index.js +0 -17
- package/lib/commonjs/utils/index.js.map +0 -1
- package/lib/module/components/syntax/SyntaxLine.js +0 -31
- package/lib/module/components/syntax/SyntaxLine.js.map +0 -1
- package/lib/module/components/syntax/index.js +0 -5
- package/lib/module/components/syntax/index.js.map +0 -1
- package/lib/module/syntax/highlighter/index.js +0 -34
- package/lib/module/syntax/highlighter/index.js.map +0 -1
- package/lib/module/syntax/index.js +0 -4
- package/lib/module/syntax/index.js.map +0 -1
- package/lib/module/types/index.js +0 -2
- package/lib/module/types/index.js.map +0 -1
- package/lib/module/types/shiki.d.js +0 -4
- package/lib/module/types/shiki.d.js.map +0 -1
- package/lib/module/utils/index.js +0 -4
- package/lib/module/utils/index.js.map +0 -1
- package/lib/typescript/components/syntax/SyntaxLine.d.ts +0 -9
- package/lib/typescript/components/syntax/SyntaxLine.d.ts.map +0 -1
- package/lib/typescript/components/syntax/index.d.ts +0 -3
- package/lib/typescript/components/syntax/index.d.ts.map +0 -1
- package/lib/typescript/syntax/highlighter/index.d.ts.map +0 -1
- package/lib/typescript/syntax/index.d.ts +0 -2
- package/lib/typescript/syntax/index.d.ts.map +0 -1
- package/lib/typescript/types/index.d.ts +0 -7
- package/lib/typescript/types/index.d.ts.map +0 -1
- package/lib/typescript/utils/index.d.ts +0 -2
- package/lib/typescript/utils/index.d.ts.map +0 -1
- package/src/components/syntax/SyntaxLine.tsx +0 -81
- package/src/components/syntax/index.ts +0 -2
- package/src/syntax/index.ts +0 -1
- package/src/types/index.ts +0 -6
- package/src/utils/index.ts +0 -1
@@ -1,13 +1,12 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
import { useEffect, useState } from 'react';
|
4
|
-
import { createHighlighter } from '../syntax';
|
4
|
+
import { createHighlighter } from '../syntax/highlighter';
|
5
5
|
export function useSyntaxHighlighter({
|
6
6
|
text,
|
7
|
-
|
8
|
-
|
9
|
-
theme
|
10
|
-
themeName
|
7
|
+
language,
|
8
|
+
languageId,
|
9
|
+
theme
|
11
10
|
}) {
|
12
11
|
const [tokens, setTokens] = useState([]);
|
13
12
|
const [error, setError] = useState();
|
@@ -22,13 +21,22 @@ export function useSyntaxHighlighter({
|
|
22
21
|
return;
|
23
22
|
}
|
24
23
|
try {
|
24
|
+
// First create the highlighter
|
25
25
|
const highlighter = await createHighlighter({
|
26
|
-
langs: [
|
26
|
+
langs: [language],
|
27
27
|
themes: [theme]
|
28
28
|
});
|
29
|
+
|
30
|
+
// Get resolved theme name
|
31
|
+
const themeResolved = highlighter.getLoadedThemes()?.[0];
|
32
|
+
if (!themeResolved) {
|
33
|
+
throw new Error('Failed to resolve theme');
|
34
|
+
}
|
35
|
+
|
36
|
+
// Use resolved theme for tokenization
|
29
37
|
const result = highlighter.codeToTokens(text, {
|
30
|
-
lang:
|
31
|
-
theme:
|
38
|
+
lang: languageId,
|
39
|
+
theme: themeResolved
|
32
40
|
});
|
33
41
|
if (mounted && result.tokens) {
|
34
42
|
setTokens(result.tokens);
|
@@ -50,7 +58,7 @@ export function useSyntaxHighlighter({
|
|
50
58
|
return () => {
|
51
59
|
mounted = false;
|
52
60
|
};
|
53
|
-
}, [text,
|
61
|
+
}, [text, language, languageId, theme]);
|
54
62
|
return {
|
55
63
|
tokens,
|
56
64
|
error,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useEffect","useState","createHighlighter","useSyntaxHighlighter","text","
|
1
|
+
{"version":3,"names":["useEffect","useState","createHighlighter","useSyntaxHighlighter","text","language","languageId","theme","tokens","setTokens","error","setError","isLoading","setIsLoading","mounted","highlight","highlighter","langs","themes","themeResolved","getLoadedThemes","Error","result","codeToTokens","lang","undefined","err","console","message"],"sourceRoot":"../../../src","sources":["hooks/useSyntaxHighlighter.ts"],"mappings":";;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,iBAAiB,QAAQ,uBAAuB;AAEzD,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAA8B,CAAC,EAAE;EAClG,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGR,QAAQ,CAAkB,EAAE,CAAC;EACzD,MAAM,CAACS,KAAK,EAAEC,QAAQ,CAAC,GAAGV,QAAQ,CAAS,CAAC;EAC5C,MAAM,CAACW,SAAS,EAAEC,YAAY,CAAC,GAAGZ,QAAQ,CAAC,IAAI,CAAC;EAEhDD,SAAS,CAAC,MAAM;IACd,IAAIc,OAAO,GAAG,IAAI;IAClBD,YAAY,CAAC,IAAI,CAAC;IAElB,eAAeE,SAASA,CAAA,EAAG;MACzB,IAAI,CAACX,IAAI,EAAE;QACTS,YAAY,CAAC,KAAK,CAAC;QACnBJ,SAAS,CAAC,EAAE,CAAC;QACb;MACF;MAEA,IAAI;QACF;QACA,MAAMO,WAAW,GAAG,MAAMd,iBAAiB,CAAC;UAC1Ce,KAAK,EAAE,CAACZ,QAAQ,CAAC;UACjBa,MAAM,EAAE,CAACX,KAAK;QAChB,CAAC,CAAC;;QAEF;QACA,MAAMY,aAAa,GAAGH,WAAW,CAACI,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC;QACxD,IAAI,CAACD,aAAa,EAAE;UAClB,MAAM,IAAIE,KAAK,CAAC,yBAAyB,CAAC;QAC5C;;QAEA;QACA,MAAMC,MAAM,GAAGN,WAAW,CAACO,YAAY,CAACnB,IAAI,EAAE;UAC5CoB,IAAI,EAAElB,UAAU;UAChBC,KAAK,EAAEY;QACT,CAAC,CAAiB;QAElB,IAAIL,OAAO,IAAIQ,MAAM,CAACd,MAAM,EAAE;UAC5BC,SAAS,CAACa,MAAM,CAACd,MAAM,CAAC;UACxBG,QAAQ,CAACc,SAAS,CAAC;QACrB;MACF,CAAC,CACD,OAAOC,GAAG,EAAE;QACVC,OAAO,CAACjB,KAAK,CAAC,qBAAqB,EAAEgB,GAAG,CAAC;QACzC,IAAIZ,OAAO,EAAE;UACXH,QAAQ,CAACe,GAAG,YAAYL,KAAK,GAAGK,GAAG,CAACE,OAAO,GAAG,4BAA4B,CAAC;UAC3EnB,SAAS,CAAC,EAAE,CAAC;QACf;MACF,CAAC,SACO;QACN,IAAIK,OAAO,EAAE;UACXD,YAAY,CAAC,KAAK,CAAC;QACrB;MACF;IACF;IAEAE,SAAS,CAAC,CAAC;IACX,OAAO,MAAM;MACXD,OAAO,GAAG,KAAK;IACjB,CAAC;EACH,CAAC,EAAE,CAACV,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,CAAC,CAAC;EAEvC,OAAO;IAAEC,MAAM;IAAEE,KAAK;IAAEE;EAAU,CAAC;AACrC","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
@@ -1,7 +1,5 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
import SyntaxHighlighter from './components/syntax/SyntaxHighlighter';
|
4
|
-
|
5
|
-
export * from './types/shiki';
|
6
|
-
export { SyntaxHighlighter, SyntaxLine };
|
4
|
+
export { SyntaxHighlighter };
|
7
5
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["SyntaxHighlighter"
|
1
|
+
{"version":3,"names":["SyntaxHighlighter"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,OAAOA,iBAAiB,MAAM,uCAAuC;AAErE,SAASA,iBAAiB","ignoreList":[]}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
import { createHighlighterCore } from 'shiki/dist/core.mjs';
|
4
|
+
import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs';
|
5
|
+
const engine = createJavaScriptRegexEngine({
|
6
|
+
forgiving: true,
|
7
|
+
simulation: true,
|
8
|
+
cache: new Map()
|
9
|
+
});
|
10
|
+
async function initializeHighlighter(langs, themes) {
|
11
|
+
try {
|
12
|
+
return await createHighlighterCore({
|
13
|
+
langs,
|
14
|
+
themes,
|
15
|
+
engine
|
16
|
+
});
|
17
|
+
} catch (err) {
|
18
|
+
console.error('Error initializing highlighter:', err);
|
19
|
+
throw err;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
export async function createHighlighter({
|
23
|
+
langs,
|
24
|
+
themes
|
25
|
+
}) {
|
26
|
+
if (!langs?.length) {
|
27
|
+
throw new Error('Please provide languages when creating a highlighter.');
|
28
|
+
}
|
29
|
+
try {
|
30
|
+
const highlighter = await initializeHighlighter(langs, themes);
|
31
|
+
return highlighter;
|
32
|
+
} catch (error) {
|
33
|
+
console.error('Failed to create highlighter:', error);
|
34
|
+
throw error;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
export function processTokens(tokens) {
|
38
|
+
return tokens.map(token => ({
|
39
|
+
content: token.content,
|
40
|
+
color: token.color || '#000000',
|
41
|
+
fontStyle: token.fontStyle?.toString()
|
42
|
+
}));
|
43
|
+
}
|
44
|
+
//# sourceMappingURL=highlighter.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["createHighlighterCore","createJavaScriptRegexEngine","engine","forgiving","simulation","cache","Map","initializeHighlighter","langs","themes","err","console","error","createHighlighter","length","Error","highlighter","processTokens","tokens","map","token","content","color","fontStyle","toString"],"sourceRoot":"../../../src","sources":["syntax/highlighter.ts"],"mappings":";;AAEA,SAASA,qBAAqB,QAAQ,qBAAqB;AAC3D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,MAAMC,MAAM,GAAGD,2BAA2B,CAAC;EACzCE,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE,IAAI;EAChBC,KAAK,EAAE,IAAIC,GAAG,CAAC;AACjB,CAAC,CAAC;AAEF,eAAeC,qBAAqBA,CAACC,KAAsB,EAAEC,MAAoB,EAAE;EACjF,IAAI;IACF,OAAO,MAAMT,qBAAqB,CAAC;MACjCQ,KAAK;MACLC,MAAM;MACNP;IACF,CAAC,CAAC;EACJ,CAAC,CACD,OAAOQ,GAAG,EAAE;IACVC,OAAO,CAACC,KAAK,CAAC,iCAAiC,EAAEF,GAAG,CAAC;IACrD,MAAMA,GAAG;EACX;AACF;AAEA,OAAO,eAAeG,iBAAiBA,CAAC;EAAEL,KAAK;EAAEC;AAAyD,CAAC,EAAE;EAC3G,IAAI,CAACD,KAAK,EAAEM,MAAM,EAAE;IAClB,MAAM,IAAIC,KAAK,CAAC,uDAAuD,CAAC;EAC1E;EAEA,IAAI;IACF,MAAMC,WAAW,GAAG,MAAMT,qBAAqB,CAACC,KAAK,EAAEC,MAAM,CAAC;IAC9D,OAAOO,WAAW;EACpB,CAAC,CACD,OAAOJ,KAAK,EAAE;IACZD,OAAO,CAACC,KAAK,CAAC,+BAA+B,EAAEA,KAAK,CAAC;IACrD,MAAMA,KAAK;EACb;AACF;AAEA,OAAO,SAASK,aAAaA,CAACC,MAAqB,EAAe;EAChE,OAAOA,MAAM,CAACC,GAAG,CAACC,KAAK,KAAK;IAC1BC,OAAO,EAAED,KAAK,CAACC,OAAO;IACtBC,KAAK,EAAEF,KAAK,CAACE,KAAK,IAAI,SAAS;IAC/BC,SAAS,EAAEH,KAAK,CAACG,SAAS,EAAEC,QAAQ,CAAC;EACvC,CAAC,CAAC,CAAC;AACL","ignoreList":[]}
|
@@ -0,0 +1,91 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
import transform from 'css-to-react-native';
|
4
|
+
// Helper function to convert hex color to RGB
|
5
|
+
function hexToRgb(hex) {
|
6
|
+
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
7
|
+
return result ? {
|
8
|
+
r: Number.parseInt(result[1], 16),
|
9
|
+
g: Number.parseInt(result[2], 16),
|
10
|
+
b: Number.parseInt(result[3], 16)
|
11
|
+
} : null;
|
12
|
+
}
|
13
|
+
|
14
|
+
// Helper function to normalize color values
|
15
|
+
function normalizeColor(color) {
|
16
|
+
if (!color) return 'transparent';
|
17
|
+
|
18
|
+
// Type guard to ensure color is string before we call string methods
|
19
|
+
if (typeof color === 'string' && color.startsWith('#')) {
|
20
|
+
const rgb = hexToRgb(color);
|
21
|
+
if (rgb) {
|
22
|
+
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
return color;
|
26
|
+
}
|
27
|
+
export function convertTokenColorsToReactStyle(tokenColors) {
|
28
|
+
const styleMap = {};
|
29
|
+
|
30
|
+
// Add default styles
|
31
|
+
styleMap.default = {
|
32
|
+
color: '#e1e4e8',
|
33
|
+
backgroundColor: 'transparent'
|
34
|
+
};
|
35
|
+
tokenColors.forEach(token => {
|
36
|
+
if (!token.settings || !token.scope) return;
|
37
|
+
const scopes = Array.isArray(token.scope) ? token.scope : [token.scope];
|
38
|
+
const styleEntries = [];
|
39
|
+
|
40
|
+
// Only add styles if they exist
|
41
|
+
if (token.settings.foreground) {
|
42
|
+
styleEntries.push(['color', normalizeColor(token.settings.foreground)]);
|
43
|
+
}
|
44
|
+
if (token.settings.background) {
|
45
|
+
styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)]);
|
46
|
+
}
|
47
|
+
if (token.settings.fontStyle) {
|
48
|
+
if (token.settings.fontStyle.includes('italic')) {
|
49
|
+
styleEntries.push(['fontStyle', 'italic']);
|
50
|
+
}
|
51
|
+
if (token.settings.fontStyle.includes('bold')) {
|
52
|
+
styleEntries.push(['fontWeight', 'bold']);
|
53
|
+
}
|
54
|
+
}
|
55
|
+
if (styleEntries.length > 0) {
|
56
|
+
const transformedStyle = transform(styleEntries);
|
57
|
+
scopes.forEach(scope => {
|
58
|
+
if (typeof scope === 'string') {
|
59
|
+
styleMap[scope] = {
|
60
|
+
...(styleMap[scope] || {}),
|
61
|
+
...transformedStyle
|
62
|
+
};
|
63
|
+
}
|
64
|
+
});
|
65
|
+
}
|
66
|
+
});
|
67
|
+
return styleMap;
|
68
|
+
}
|
69
|
+
export function getRNStylesFromShikiStyle(theme) {
|
70
|
+
if (!theme || !theme.tokenColors) {
|
71
|
+
console.error('Provided theme does not contain \'tokenColors\'.');
|
72
|
+
return {};
|
73
|
+
}
|
74
|
+
try {
|
75
|
+
// Convert theme colors to React Native styles
|
76
|
+
const styles = convertTokenColorsToReactStyle(theme.tokenColors);
|
77
|
+
|
78
|
+
// Add theme-specific base styles if they exist
|
79
|
+
if (theme.colors) {
|
80
|
+
styles.base = {
|
81
|
+
color: normalizeColor(theme.colors['editor.foreground']),
|
82
|
+
backgroundColor: normalizeColor(theme.colors['editor.background'])
|
83
|
+
};
|
84
|
+
}
|
85
|
+
return styles;
|
86
|
+
} catch {
|
87
|
+
console.error('Error converting theme styles');
|
88
|
+
return {};
|
89
|
+
}
|
90
|
+
}
|
91
|
+
//# sourceMappingURL=style-transformer.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["transform","hexToRgb","hex","result","exec","r","Number","parseInt","g","b","normalizeColor","color","startsWith","rgb","convertTokenColorsToReactStyle","tokenColors","styleMap","default","backgroundColor","forEach","token","settings","scope","scopes","Array","isArray","styleEntries","foreground","push","background","fontStyle","includes","length","transformedStyle","getRNStylesFromShikiStyle","theme","console","error","styles","colors","base"],"sourceRoot":"../../../src","sources":["utils/style-transformer.ts"],"mappings":"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","ignoreList":[]}
|
@@ -1,13 +1,5 @@
|
|
1
|
-
import type {
|
1
|
+
import type { SyntaxHighlighterProps } from 'src/types/shiki';
|
2
2
|
import React from 'react';
|
3
|
-
|
4
|
-
text: string;
|
5
|
-
lang?: LanguageInput;
|
6
|
-
langName?: string;
|
7
|
-
theme?: ThemeInput;
|
8
|
-
themeName?: string;
|
9
|
-
fontSize?: number;
|
10
|
-
}
|
11
|
-
declare function SyntaxHighlighter({ text, lang, langName, theme, themeName, fontSize }: SyntaxHighlighterProps): React.JSX.Element;
|
3
|
+
declare const SyntaxHighlighter: React.FC<SyntaxHighlighterProps>;
|
12
4
|
export default SyntaxHighlighter;
|
13
5
|
//# sourceMappingURL=SyntaxHighlighter.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/syntax/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
1
|
+
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/syntax/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAE7D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAsBtC,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqDvD,CAAA;AAED,eAAe,iBAAiB,CAAA"}
|
@@ -1,5 +1,6 @@
|
|
1
|
-
import type {
|
2
|
-
|
1
|
+
import type { ThemedToken } from 'shiki';
|
2
|
+
import type { SyntaxHighlighterProps } from '../types/shiki';
|
3
|
+
export declare function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps): {
|
3
4
|
tokens: ThemedToken[][];
|
4
5
|
error: string | undefined;
|
5
6
|
isLoading: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useSyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSyntaxHighlighter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
1
|
+
{"version":3,"file":"useSyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSyntaxHighlighter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAAK,EAAE,sBAAsB,EAAgB,MAAM,gBAAgB,CAAA;AAI1E,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,sBAAsB;;;;EA6DjG"}
|
@@ -1,5 +1,3 @@
|
|
1
1
|
import SyntaxHighlighter from './components/syntax/SyntaxHighlighter';
|
2
|
-
|
3
|
-
export * from './types/shiki';
|
4
|
-
export { SyntaxHighlighter, SyntaxLine };
|
2
|
+
export { SyntaxHighlighter };
|
5
3
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,uCAAuC,CAAA;
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,uCAAuC,CAAA;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
|
@@ -1,9 +1,8 @@
|
|
1
1
|
import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki';
|
2
|
-
import type { TokenType } from '
|
3
|
-
import { createHighlighterCore } from 'shiki/core';
|
2
|
+
import type { TokenType } from '../types/shiki';
|
4
3
|
export declare function createHighlighter({ langs, themes }: {
|
5
4
|
langs: LanguageInput[];
|
6
5
|
themes: ThemeInput[];
|
7
|
-
}): Promise<
|
6
|
+
}): Promise<import("shiki").HighlighterCore>;
|
8
7
|
export declare function processTokens(tokens: ThemedToken[]): TokenType[];
|
9
|
-
//# sourceMappingURL=
|
8
|
+
//# sourceMappingURL=highlighter.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"highlighter.d.ts","sourceRoot":"","sources":["../../../src/syntax/highlighter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAwB/C,wBAAsB,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAAC,MAAM,EAAE,UAAU,EAAE,CAAA;CAAE,4CAa1G;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAMhE"}
|
@@ -1,15 +1,17 @@
|
|
1
1
|
import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki';
|
2
|
-
export
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
fg: string;
|
2
|
+
export interface TokenType {
|
3
|
+
content: string;
|
4
|
+
color?: string;
|
5
|
+
fontStyle?: string;
|
7
6
|
}
|
8
7
|
export interface SyntaxHighlighterProps {
|
9
8
|
text: string;
|
10
|
-
|
11
|
-
|
9
|
+
language: LanguageInput;
|
10
|
+
languageId: string;
|
12
11
|
theme: ThemeInput;
|
13
|
-
|
12
|
+
fontSize?: number;
|
13
|
+
}
|
14
|
+
export interface TokensResult {
|
15
|
+
tokens: ThemedToken[][];
|
14
16
|
}
|
15
17
|
//# sourceMappingURL=shiki.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../../../src/types/shiki.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEnE,
|
1
|
+
{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../../../src/types/shiki.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEnE,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,aAAa,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,WAAW,EAAE,EAAE,CAAA;CACxB"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { TokenType } from '../types';
|
1
|
+
import type { TokenType } from '../types/shiki';
|
2
2
|
export declare function createContentPreview(tokens: TokenType[], maxLength?: number): string;
|
3
3
|
export declare function createLineKey(line: TokenType[], index: number): string;
|
4
4
|
export declare function removeExtraIndentation(text: string): string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/utils/string.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/utils/string.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAE,MAAW,GAAG,MAAM,CAMxF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,UAG7D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAqB3D"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import type { TextStyle } from 'react-native';
|
2
|
+
export interface HighlighterStyleSheet {
|
3
|
+
[key: string]: TextStyle;
|
4
|
+
}
|
5
|
+
export type ReactStyle = Record<string, TextStyle>;
|
6
|
+
export declare function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle;
|
7
|
+
export declare function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet;
|
8
|
+
//# sourceMappingURL=style-transformer.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"style-transformer.d.ts","sourceRoot":"","sources":["../../../src/utils/style-transformer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG7C,MAAM,WAAW,qBAAqB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;CACzB;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;AA6BlD,wBAAgB,8BAA8B,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,UAAU,CA4C7E;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,GAAG,GAAG,qBAAqB,CAwB3E"}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "rn-shiki",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.0.37-
|
4
|
+
"version": "0.0.37-21",
|
5
5
|
"description": "Shiki syntax highlighter for React Native.",
|
6
6
|
"author": "Ryan Skinner <hello@ryanskinner.com>",
|
7
7
|
"license": "MIT",
|
@@ -34,21 +34,17 @@
|
|
34
34
|
"shiki": "^1.1.7"
|
35
35
|
},
|
36
36
|
"dependencies": {
|
37
|
-
"
|
37
|
+
"css-to-react-native": "^3.2.0",
|
38
38
|
"shiki": "^1.1.7"
|
39
39
|
},
|
40
40
|
"devDependencies": {
|
41
41
|
"@antfu/eslint-config": "^3.8.0",
|
42
|
-
"@babel/core": "^7.24.0",
|
43
|
-
"@babel/preset-env": "^7.26.0",
|
44
42
|
"@eslint-react/eslint-plugin": "^1.15.0",
|
45
43
|
"@types/react": "^18.2.0",
|
46
44
|
"@types/react-native": "^0.73.0",
|
47
|
-
"babel-plugin-module-resolver": "^5.0.2",
|
48
45
|
"eslint": "^9.13.0",
|
49
46
|
"eslint-plugin-react-hooks": "^5.0.0",
|
50
47
|
"eslint-plugin-react-refresh": "^0.4.13",
|
51
|
-
"metro-react-native-babel-preset": "^0.77.0",
|
52
48
|
"react": "^18.2.0",
|
53
49
|
"react-native": "^0.73.0",
|
54
50
|
"react-native-builder-bob": "^0.30.2",
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import type { SyntaxHighlighterProps } from 'src/types/shiki'
|
2
|
-
import
|
2
|
+
import type { ReactStyle } from '../../utils/style-transformer'
|
3
|
+
import React, { useMemo } from 'react'
|
3
4
|
import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
|
4
5
|
import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
|
5
|
-
import {
|
6
|
-
import SyntaxLine from './SyntaxLine'
|
6
|
+
import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
|
7
7
|
|
8
8
|
const monospaceFont = Platform.select({
|
9
9
|
ios: 'Menlo',
|
@@ -12,81 +12,68 @@ const monospaceFont = Platform.select({
|
|
12
12
|
})
|
13
13
|
|
14
14
|
const styles = StyleSheet.create({
|
15
|
-
|
15
|
+
scrollView: {
|
16
16
|
flex: 1,
|
17
17
|
minHeight: 20,
|
18
18
|
},
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
},
|
23
|
-
contentContainer: {
|
24
|
-
minWidth: '100%',
|
25
|
-
},
|
26
|
-
errorText: {
|
27
|
-
padding: 8,
|
28
|
-
color: '#ff6b6b',
|
29
|
-
},
|
30
|
-
loadingText: {
|
31
|
-
padding: 8,
|
32
|
-
color: '#666666',
|
19
|
+
lineContainer: {
|
20
|
+
flexDirection: 'row',
|
21
|
+
flexWrap: 'wrap',
|
33
22
|
},
|
34
23
|
})
|
35
24
|
|
36
|
-
|
37
|
-
|
38
|
-
const
|
39
|
-
|
25
|
+
const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
|
26
|
+
console.log('theme:', theme)
|
27
|
+
const stylesheet = useMemo(() => {
|
28
|
+
const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
|
29
|
+
console.log('Generated stylesheet:', styles)
|
30
|
+
return styles
|
31
|
+
}, [theme])
|
32
|
+
|
33
|
+
const { tokens } = useSyntaxHighlighter({
|
40
34
|
text,
|
41
35
|
language,
|
42
36
|
languageId,
|
43
37
|
theme,
|
44
38
|
})
|
45
39
|
|
46
|
-
|
40
|
+
const renderToken = (token: any, index: number, lineIndex: number) => {
|
41
|
+
// Ensure to collect all styles associated with the token's scopes
|
42
|
+
const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
|
43
|
+
const tokenStylesArray = tokenScopes.map((scope: string) => stylesheet[scope] || {})
|
44
|
+
const combinedStyles = StyleSheet.flatten([
|
45
|
+
...tokenStylesArray,
|
46
|
+
{
|
47
|
+
fontFamily: monospaceFont,
|
48
|
+
...(token.color && { color: token.color }),
|
49
|
+
...(token.fontStyle === 'italic' && stylesheet.italic),
|
50
|
+
...(token.fontWeight === 'bold' && stylesheet.bold),
|
51
|
+
},
|
52
|
+
])
|
53
|
+
|
54
|
+
console.log(`Rendering token: ${token.content}, styles:`, combinedStyles)
|
55
|
+
|
47
56
|
return (
|
48
|
-
<Text
|
49
|
-
|
50
|
-
styles.errorText,
|
51
|
-
{
|
52
|
-
fontFamily: monospaceFont,
|
53
|
-
fontSize,
|
54
|
-
},
|
55
|
-
]}
|
56
|
-
>
|
57
|
-
Error:
|
58
|
-
{' '}
|
59
|
-
{error}
|
57
|
+
<Text key={`${lineIndex}-${index}`} style={combinedStyles}>
|
58
|
+
{token.content.replace(/ /g, '\u00A0')}
|
60
59
|
</Text>
|
61
60
|
)
|
62
61
|
}
|
63
62
|
|
64
|
-
|
63
|
+
// In the renderLine and renderToken flow
|
64
|
+
const renderLine = (line: any[], lineIndex: number) => {
|
65
|
+
console.log(`Rendering line ${lineIndex}:`, line)
|
65
66
|
return (
|
66
|
-
<
|
67
|
-
|
68
|
-
|
69
|
-
{
|
70
|
-
fontFamily: monospaceFont,
|
71
|
-
fontSize,
|
72
|
-
},
|
73
|
-
]}
|
74
|
-
>
|
75
|
-
Loading...
|
76
|
-
</Text>
|
67
|
+
<View key={lineIndex} style={styles.lineContainer}>
|
68
|
+
{line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
|
69
|
+
</View>
|
77
70
|
)
|
78
71
|
}
|
79
72
|
|
80
73
|
return (
|
81
|
-
<
|
82
|
-
<
|
83
|
-
|
84
|
-
{tokens.map((line, lineIndex) => (
|
85
|
-
<SyntaxLine key={`line-${lineIndex}`} line={line} fontSize={fontSize} isLastLine={lineIndex === tokens.length - 1} themeStyles={themeStyles} />
|
86
|
-
))}
|
87
|
-
</View>
|
88
|
-
</ScrollView>
|
89
|
-
</View>
|
74
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.scrollView}>
|
75
|
+
<View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</View>
|
76
|
+
</ScrollView>
|
90
77
|
)
|
91
78
|
}
|
92
79
|
|
@@ -1,6 +1,7 @@
|
|
1
|
-
import type {
|
1
|
+
import type { ThemedToken } from 'shiki'
|
2
|
+
import type { SyntaxHighlighterProps, TokensResult } from '../types/shiki'
|
2
3
|
import { useEffect, useState } from 'react'
|
3
|
-
import { createHighlighter } from '../syntax'
|
4
|
+
import { createHighlighter } from '../syntax/highlighter'
|
4
5
|
|
5
6
|
export function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
|
6
7
|
const [tokens, setTokens] = useState<ThemedToken[][]>([])
|
@@ -19,14 +20,22 @@ export function useSyntaxHighlighter({ text, language, languageId, theme }: Synt
|
|
19
20
|
}
|
20
21
|
|
21
22
|
try {
|
23
|
+
// First create the highlighter
|
22
24
|
const highlighter = await createHighlighter({
|
23
25
|
langs: [language],
|
24
|
-
themes:
|
26
|
+
themes: [theme],
|
25
27
|
})
|
26
28
|
|
29
|
+
// Get resolved theme name
|
30
|
+
const themeResolved = highlighter.getLoadedThemes()?.[0]
|
31
|
+
if (!themeResolved) {
|
32
|
+
throw new Error('Failed to resolve theme')
|
33
|
+
}
|
34
|
+
|
35
|
+
// Use resolved theme for tokenization
|
27
36
|
const result = highlighter.codeToTokens(text, {
|
28
37
|
lang: languageId,
|
29
|
-
theme:
|
38
|
+
theme: themeResolved,
|
30
39
|
}) as TokensResult
|
31
40
|
|
32
41
|
if (mounted && result.tokens) {
|
package/src/index.ts
CHANGED
@@ -1,19 +1,31 @@
|
|
1
1
|
import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
|
2
|
-
import type { TokenType } from '
|
2
|
+
import type { TokenType } from '../types/shiki'
|
3
3
|
import { createHighlighterCore } from 'shiki/dist/core.mjs'
|
4
4
|
import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs'
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
6
|
+
const engine = createJavaScriptRegexEngine({
|
7
|
+
forgiving: true,
|
8
|
+
simulation: true,
|
9
|
+
cache: new Map(),
|
10
|
+
})
|
11
|
+
|
12
|
+
async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[]) {
|
13
|
+
try {
|
14
|
+
return await createHighlighterCore({
|
15
|
+
langs,
|
16
|
+
themes,
|
17
|
+
engine,
|
18
|
+
})
|
19
|
+
}
|
20
|
+
catch (err) {
|
21
|
+
console.error('Error initializing highlighter:', err)
|
22
|
+
throw err
|
23
|
+
}
|
12
24
|
}
|
13
25
|
|
14
|
-
export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] })
|
15
|
-
if (!langs?.length
|
16
|
-
throw new Error('Please provide
|
26
|
+
export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] }) {
|
27
|
+
if (!langs?.length) {
|
28
|
+
throw new Error('Please provide languages when creating a highlighter.')
|
17
29
|
}
|
18
30
|
|
19
31
|
try {
|