rn-shiki 0.0.37-3 → 0.0.37-30

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. package/lib/commonjs/components/syntax/SyntaxHighlighter.js +100 -60
  2. package/lib/commonjs/components/syntax/SyntaxHighlighter.js.map +1 -1
  3. package/lib/commonjs/hooks/useSyntaxHighlighter.js +18 -10
  4. package/lib/commonjs/hooks/useSyntaxHighlighter.js.map +1 -1
  5. package/lib/commonjs/index.js +0 -23
  6. package/lib/commonjs/index.js.map +1 -1
  7. package/lib/commonjs/syntax/{highlighter/index.js → highlighter.js} +20 -10
  8. package/lib/commonjs/syntax/highlighter.js.map +1 -0
  9. package/lib/commonjs/utils/style-transformer.js +103 -0
  10. package/lib/commonjs/utils/style-transformer.js.map +1 -0
  11. package/lib/module/components/syntax/SyntaxHighlighter.js +100 -61
  12. package/lib/module/components/syntax/SyntaxHighlighter.js.map +1 -1
  13. package/lib/module/hooks/useSyntaxHighlighter.js +17 -9
  14. package/lib/module/hooks/useSyntaxHighlighter.js.map +1 -1
  15. package/lib/module/index.js +1 -3
  16. package/lib/module/index.js.map +1 -1
  17. package/lib/module/syntax/highlighter.js +44 -0
  18. package/lib/module/syntax/highlighter.js.map +1 -0
  19. package/lib/module/utils/style-transformer.js +98 -0
  20. package/lib/module/utils/style-transformer.js.map +1 -0
  21. package/lib/typescript/components/syntax/SyntaxHighlighter.d.ts +2 -10
  22. package/lib/typescript/components/syntax/SyntaxHighlighter.d.ts.map +1 -1
  23. package/lib/typescript/hooks/useSyntaxHighlighter.d.ts +3 -2
  24. package/lib/typescript/hooks/useSyntaxHighlighter.d.ts.map +1 -1
  25. package/lib/typescript/index.d.ts +1 -3
  26. package/lib/typescript/index.d.ts.map +1 -1
  27. package/lib/typescript/syntax/{highlighter/index.d.ts → highlighter.d.ts} +3 -4
  28. package/lib/typescript/syntax/highlighter.d.ts.map +1 -0
  29. package/lib/typescript/types/shiki.d.ts +10 -8
  30. package/lib/typescript/types/shiki.d.ts.map +1 -1
  31. package/lib/typescript/utils/string.d.ts +1 -1
  32. package/lib/typescript/utils/string.d.ts.map +1 -1
  33. package/lib/typescript/utils/style-transformer.d.ts +9 -0
  34. package/lib/typescript/utils/style-transformer.d.ts.map +1 -0
  35. package/package.json +2 -6
  36. package/src/components/syntax/SyntaxHighlighter.tsx +79 -36
  37. package/src/hooks/useSyntaxHighlighter.ts +13 -4
  38. package/src/index.ts +1 -4
  39. package/src/syntax/{highlighter/index.ts → highlighter.ts} +22 -10
  40. package/src/types/shiki.ts +7 -8
  41. package/src/utils/string.ts +1 -1
  42. package/src/utils/style-transformer.ts +50 -94
  43. package/lib/commonjs/components/syntax/SyntaxLine.js +0 -36
  44. package/lib/commonjs/components/syntax/SyntaxLine.js.map +0 -1
  45. package/lib/commonjs/components/syntax/index.js +0 -21
  46. package/lib/commonjs/components/syntax/index.js.map +0 -1
  47. package/lib/commonjs/syntax/highlighter/index.js.map +0 -1
  48. package/lib/commonjs/syntax/index.js +0 -19
  49. package/lib/commonjs/syntax/index.js.map +0 -1
  50. package/lib/commonjs/types/index.js +0 -2
  51. package/lib/commonjs/types/index.js.map +0 -1
  52. package/lib/commonjs/types/shiki.d.js +0 -6
  53. package/lib/commonjs/types/shiki.d.js.map +0 -1
  54. package/lib/commonjs/utils/index.js +0 -17
  55. package/lib/commonjs/utils/index.js.map +0 -1
  56. package/lib/module/components/syntax/SyntaxLine.js +0 -31
  57. package/lib/module/components/syntax/SyntaxLine.js.map +0 -1
  58. package/lib/module/components/syntax/index.js +0 -5
  59. package/lib/module/components/syntax/index.js.map +0 -1
  60. package/lib/module/syntax/highlighter/index.js +0 -34
  61. package/lib/module/syntax/highlighter/index.js.map +0 -1
  62. package/lib/module/syntax/index.js +0 -4
  63. package/lib/module/syntax/index.js.map +0 -1
  64. package/lib/module/types/index.js +0 -2
  65. package/lib/module/types/index.js.map +0 -1
  66. package/lib/module/types/shiki.d.js +0 -4
  67. package/lib/module/types/shiki.d.js.map +0 -1
  68. package/lib/module/utils/index.js +0 -4
  69. package/lib/module/utils/index.js.map +0 -1
  70. package/lib/typescript/components/syntax/SyntaxLine.d.ts +0 -9
  71. package/lib/typescript/components/syntax/SyntaxLine.d.ts.map +0 -1
  72. package/lib/typescript/components/syntax/index.d.ts +0 -3
  73. package/lib/typescript/components/syntax/index.d.ts.map +0 -1
  74. package/lib/typescript/syntax/highlighter/index.d.ts.map +0 -1
  75. package/lib/typescript/syntax/index.d.ts +0 -2
  76. package/lib/typescript/syntax/index.d.ts.map +0 -1
  77. package/lib/typescript/types/index.d.ts +0 -7
  78. package/lib/typescript/types/index.d.ts.map +0 -1
  79. package/lib/typescript/utils/index.d.ts +0 -2
  80. package/lib/typescript/utils/index.d.ts.map +0 -1
  81. package/src/components/syntax/SyntaxLine.tsx +0 -81
  82. package/src/components/syntax/index.ts +0 -2
  83. package/src/syntax/index.ts +0 -1
  84. package/src/types/index.ts +0 -6
  85. package/src/utils/index.ts +0 -1
@@ -1,74 +1,113 @@
1
1
  "use strict";
2
2
 
3
- import React from 'react';
4
- import { Text, View } from 'react-native';
5
- import typescript from 'shiki/langs/typescript.mjs';
6
- import githubDark from 'shiki/themes/github-dark.mjs';
3
+ import React, { useMemo } from 'react';
4
+ import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
7
5
  import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter';
8
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
9
- function SyntaxHighlighter({
6
+ import { getRNStylesFromShikiStyle } from '../../utils/style-transformer';
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ const monospaceFont = Platform.select({
9
+ ios: 'Menlo',
10
+ android: 'monospace',
11
+ default: 'monospace'
12
+ });
13
+ // Helper function to extract theme registration from Shiki theme input
14
+ function getThemeRegistration(theme) {
15
+ if ('default' in theme) {
16
+ return theme.default;
17
+ }
18
+ return theme;
19
+ }
20
+ const baseStyles = StyleSheet.create({
21
+ scrollView: {
22
+ flex: 1,
23
+ minHeight: 20
24
+ },
25
+ lineContainer: {
26
+ flexDirection: 'row',
27
+ flexWrap: 'wrap',
28
+ paddingHorizontal: 16,
29
+ paddingVertical: 8
30
+ },
31
+ token: {
32
+ fontFamily: monospaceFont,
33
+ fontSize: 14
34
+ },
35
+ container: {
36
+ flex: 1
37
+ }
38
+ });
39
+ const SyntaxHighlighter = ({
10
40
  text,
11
- lang = typescript,
12
- langName = 'typescript',
13
- theme = githubDark,
14
- themeName = 'github-dark',
15
- fontSize
16
- }) {
41
+ language,
42
+ languageId,
43
+ theme,
44
+ fontSize = 14
45
+ }) => {
46
+ const stylesheet = useMemo(() => {
47
+ const themeRegistration = getThemeRegistration(theme);
48
+ const styles = getRNStylesFromShikiStyle(themeRegistration);
49
+ return StyleSheet.create({
50
+ ...styles,
51
+ editor: {
52
+ backgroundColor: themeRegistration.colors?.['editor.background'] || '#1e1e1e'
53
+ },
54
+ token: {
55
+ ...baseStyles.token,
56
+ fontSize,
57
+ color: themeRegistration.colors?.['editor.foreground'] || '#d4d4d4'
58
+ }
59
+ });
60
+ }, [theme, fontSize]);
17
61
  const {
18
- tokens,
19
- error,
20
- isLoading
62
+ tokens
21
63
  } = useSyntaxHighlighter({
22
64
  text,
23
- lang,
24
- langName,
25
- theme,
26
- themeName
65
+ language,
66
+ languageId,
67
+ theme
27
68
  });
28
- if (error) {
29
- return /*#__PURE__*/_jsxs(Text, {
30
- style: {
31
- color: '#ff6b6b',
32
- fontFamily: 'monospace',
33
- fontSize
34
- },
35
- children: ["Error:", error]
69
+ const renderToken = (token, index, lineIndex) => {
70
+ const styles = [stylesheet.token];
71
+
72
+ // Add token-specific styles from stylesheet based on scope
73
+ const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope];
74
+ tokenScopes.forEach(scope => {
75
+ if (stylesheet[scope]) {
76
+ styles.push(stylesheet[scope]);
77
+ }
36
78
  });
37
- }
38
- if (isLoading) {
79
+
80
+ // Add token-specific styles from the token itself
81
+ const tokenStyles = {};
82
+ if (token.color) {
83
+ tokenStyles.color = token.color;
84
+ }
85
+ if (token.fontStyle === 'italic') {
86
+ tokenStyles.fontStyle = 'italic';
87
+ }
88
+ if (token.fontWeight === 'bold') {
89
+ tokenStyles.fontWeight = 'bold';
90
+ }
91
+ if (Object.keys(tokenStyles).length > 0) {
92
+ styles.push(tokenStyles);
93
+ }
94
+ const finalStyle = StyleSheet.flatten(styles);
39
95
  return /*#__PURE__*/_jsx(Text, {
40
- style: {
41
- color: '#f8f8f2',
42
- fontFamily: 'monospace',
43
- fontSize
44
- },
45
- children: "Loading..."
46
- });
47
- }
48
- return /*#__PURE__*/_jsx(View, {
49
- children: tokens.map((line, lineIndex) => /*#__PURE__*/_jsxs(View, {
50
- style: {
51
- flexDirection: 'row',
52
- flexWrap: 'wrap'
53
- },
54
- children: [line.map((token, tokenIndex) => /*#__PURE__*/_jsx(Text, {
55
- style: {
56
- color: token.color || '#FFFFFF',
57
- fontFamily: 'monospace',
58
- fontSize,
59
- fontStyle: token.fontStyle
60
- },
61
- children: token.content.replace(/ /g, '\u00A0')
62
- }, `${lineIndex}-${tokenIndex}`)), /*#__PURE__*/_jsx(Text, {
63
- style: {
64
- color: '#FFFFFF',
65
- fontFamily: 'monospace',
66
- fontSize
67
- },
68
- children: '\n'
69
- })]
70
- }, `line-${lineIndex}`))
96
+ style: finalStyle,
97
+ children: token.content.replace(/ /g, '\u00A0')
98
+ }, `${lineIndex}-${index}`);
99
+ };
100
+ const renderLine = (line, lineIndex) => /*#__PURE__*/_jsx(View, {
101
+ style: baseStyles.lineContainer,
102
+ children: line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))
103
+ }, lineIndex);
104
+ return /*#__PURE__*/_jsx(ScrollView, {
105
+ horizontal: true,
106
+ showsHorizontalScrollIndicator: Platform.OS !== 'web',
107
+ style: [baseStyles.scrollView, stylesheet.editor],
108
+ contentContainerStyle: baseStyles.container,
109
+ children: tokens.map((line, index) => renderLine(line, index))
71
110
  });
72
- }
111
+ };
73
112
  export default SyntaxHighlighter;
74
113
  //# sourceMappingURL=SyntaxHighlighter.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","Text","View","typescript","githubDark","useSyntaxHighlighter","jsxs","_jsxs","jsx","_jsx","SyntaxHighlighter","text","lang","langName","theme","themeName","fontSize","tokens","error","isLoading","style","color","fontFamily","children","map","line","lineIndex","flexDirection","flexWrap","token","tokenIndex","fontStyle","content","replace"],"sourceRoot":"../../../../src","sources":["components/syntax/SyntaxHighlighter.tsx"],"mappings":";;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACzC,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,UAAU,MAAM,8BAA8B;AACrD,SAASC,oBAAoB,QAAQ,kCAAkC;AAAA,SAAAC,IAAA,IAAAC,KAAA,EAAAC,GAAA,IAAAC,IAAA;AAWvE,SAASC,iBAAiBA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAGT,UAAU;EAAEU,QAAQ,GAAG,YAAY;EAAEC,KAAK,GAAGV,UAAU;EAAEW,SAAS,GAAG,aAAa;EAAEC;AAAiC,CAAC,EAAE;EAChK,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGd,oBAAoB,CAAC;IACxDM,IAAI;IACJC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,IAAIG,KAAK,EAAE;IACT,oBACEX,KAAA,CAACN,IAAI;MAACmB,KAAK,EAAE;QAAEC,KAAK,EAAE,SAAS;QAAEC,UAAU,EAAE,WAAW;QAAEN;MAAS,CAAE;MAAAO,QAAA,GAAC,QAEpE,EAACL,KAAK;IAAA,CACF,CAAC;EAEX;EAEA,IAAIC,SAAS,EAAE;IACb,oBAAOV,IAAA,CAACR,IAAI;MAACmB,KAAK,EAAE;QAAEC,KAAK,EAAE,SAAS;QAAEC,UAAU,EAAE,WAAW;QAAEN;MAAS,CAAE;MAAAO,QAAA,EAAC;IAAU,CAAM,CAAC;EAChG;EAEA,oBACEd,IAAA,CAACP,IAAI;IAAAqB,QAAA,EACFN,MAAM,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,SAAS,kBAC1BnB,KAAA,CAACL,IAAI;MAA2BkB,KAAK,EAAE;QAAEO,aAAa,EAAE,KAAK;QAAEC,QAAQ,EAAE;MAAO,CAAE;MAAAL,QAAA,GAC/EE,IAAI,CAACD,GAAG,CAAC,CAACK,KAAK,EAAEC,UAAU,kBAC1BrB,IAAA,CAACR,IAAI;QAEHmB,KAAK,EAAE;UACLC,KAAK,EAAEQ,KAAK,CAACR,KAAK,IAAI,SAAS;UAC/BC,UAAU,EAAE,WAAW;UACvBN,QAAQ;UACRe,SAAS,EAAEF,KAAK,CAACE;QACnB,CAAE;QAAAR,QAAA,EAEDM,KAAK,CAACG,OAAO,CAACC,OAAO,CAAC,IAAI,EAAE,QAAQ;MAAC,GARjC,GAAGP,SAAS,IAAII,UAAU,EAS3B,CACP,CAAC,eACFrB,IAAA,CAACR,IAAI;QAACmB,KAAK,EAAE;UAAEC,KAAK,EAAE,SAAS;UAAEC,UAAU,EAAE,WAAW;UAAEN;QAAS,CAAE;QAAAO,QAAA,EAAE;MAAI,CAAO,CAAC;IAAA,GAd1E,QAAQG,SAAS,EAetB,CACP;EAAC,CACE,CAAC;AAEX;AAEA,eAAehB,iBAAiB","ignoreList":[]}
1
+ {"version":3,"names":["React","useMemo","Platform","ScrollView","StyleSheet","Text","View","useSyntaxHighlighter","getRNStylesFromShikiStyle","jsx","_jsx","monospaceFont","select","ios","android","default","getThemeRegistration","theme","baseStyles","create","scrollView","flex","minHeight","lineContainer","flexDirection","flexWrap","paddingHorizontal","paddingVertical","token","fontFamily","fontSize","container","SyntaxHighlighter","text","language","languageId","stylesheet","themeRegistration","styles","editor","backgroundColor","colors","color","tokens","renderToken","index","lineIndex","tokenScopes","Array","isArray","scope","forEach","push","tokenStyles","fontStyle","fontWeight","Object","keys","length","finalStyle","flatten","style","children","content","replace","renderLine","line","map","tokenIndex","horizontal","showsHorizontalScrollIndicator","OS","contentContainerStyle"],"sourceRoot":"../../../../src","sources":["components/syntax/SyntaxHighlighter.tsx"],"mappings":"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","ignoreList":[]}
@@ -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
- lang,
8
- langName,
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: [lang],
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: langName,
31
- theme: themeName
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, lang, langName, theme, themeName]);
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","lang","langName","theme","themeName","tokens","setTokens","error","setError","isLoading","setIsLoading","mounted","highlight","highlighter","langs","themes","result","codeToTokens","undefined","err","console","Error","message"],"sourceRoot":"../../../src","sources":["hooks/useSyntaxHighlighter.ts"],"mappings":";;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,IAAI;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAkC,CAAC,EAAE;EACvG,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGT,QAAQ,CAAkB,EAAE,CAAC;EACzD,MAAM,CAACU,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAAS,CAAC;EAC5C,MAAM,CAACY,SAAS,EAAEC,YAAY,CAAC,GAAGb,QAAQ,CAAC,IAAI,CAAC;EAEhDD,SAAS,CAAC,MAAM;IACd,IAAIe,OAAO,GAAG,IAAI;IAClBD,YAAY,CAAC,IAAI,CAAC;IAElB,eAAeE,SAASA,CAAA,EAAG;MACzB,IAAI,CAACZ,IAAI,EAAE;QACTU,YAAY,CAAC,KAAK,CAAC;QACnBJ,SAAS,CAAC,EAAE,CAAC;QACb;MACF;MAEA,IAAI;QACF,MAAMO,WAAW,GAAG,MAAMf,iBAAiB,CAAC;UAC1CgB,KAAK,EAAE,CAACb,IAAI,CAAC;UACbc,MAAM,EAAE,CAACZ,KAAK;QAChB,CAAC,CAAC;QAEF,MAAMa,MAAM,GAAGH,WAAW,CAACI,YAAY,CAACjB,IAAI,EAAE;UAC5CC,IAAI,EAAEC,QAAQ;UACdC,KAAK,EAAEC;QACT,CAAC,CAAgB;QAEjB,IAAIO,OAAO,IAAIK,MAAM,CAACX,MAAM,EAAE;UAC5BC,SAAS,CAACU,MAAM,CAACX,MAAM,CAAC;UACxBG,QAAQ,CAACU,SAAS,CAAC;QACrB;MACF,CAAC,CACD,OAAOC,GAAG,EAAE;QACVC,OAAO,CAACb,KAAK,CAAC,qBAAqB,EAAEY,GAAG,CAAC;QACzC,IAAIR,OAAO,EAAE;UACXH,QAAQ,CAACW,GAAG,YAAYE,KAAK,GAAGF,GAAG,CAACG,OAAO,GAAG,4BAA4B,CAAC;UAC3EhB,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,CAACX,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,CAAC,CAAC;EAE5C,OAAO;IAAEC,MAAM;IAAEE,KAAK;IAAEE;EAAU,CAAC;AACrC","ignoreList":[]}
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":[]}
@@ -1,7 +1,5 @@
1
1
  "use strict";
2
2
 
3
3
  import SyntaxHighlighter from './components/syntax/SyntaxHighlighter';
4
- import SyntaxLine from './components/syntax/SyntaxLine';
5
- export * from './types/shiki';
6
- export { SyntaxHighlighter, SyntaxLine };
4
+ export { SyntaxHighlighter };
7
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["SyntaxHighlighter","SyntaxLine"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,OAAOA,iBAAiB,MAAM,uCAAuC;AACrE,OAAOC,UAAU,MAAM,gCAAgC;AAEvD,cAAc,eAAe;AAE7B,SAASD,iBAAiB,EAAEC,UAAU","ignoreList":[]}
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 // Pass the configured 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,MAAM,CAAE;IACV,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,98 @@
1
+ "use strict";
2
+
3
+ function hexToRgb(hex) {
4
+ // Remove # if present
5
+ hex = hex.replace(/^#/, '');
6
+
7
+ // Handle both 3 and 6 digit hex
8
+ if (hex.length === 3) {
9
+ hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
10
+ }
11
+ const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
12
+ return result ? {
13
+ r: Number.parseInt(result[1], 16),
14
+ g: Number.parseInt(result[2], 16),
15
+ b: Number.parseInt(result[3], 16)
16
+ } : null;
17
+ }
18
+ function normalizeColor(color) {
19
+ if (!color) return 'transparent';
20
+
21
+ // Handle hex colors
22
+ if (color.startsWith('#')) {
23
+ const rgb = hexToRgb(color);
24
+ if (rgb) {
25
+ return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
26
+ }
27
+ }
28
+ return color;
29
+ }
30
+ export function convertTokenColorsToReactStyle(tokenColors) {
31
+ if (!tokenColors) return {};
32
+ const styleMap = {};
33
+ tokenColors.forEach(token => {
34
+ if (!token.settings) return;
35
+
36
+ // Handle global theme settings
37
+ if (!token.scope) {
38
+ styleMap.default = {
39
+ color: normalizeColor(token.settings.foreground),
40
+ backgroundColor: normalizeColor(token.settings.background)
41
+ };
42
+ return;
43
+ }
44
+ const scopes = Array.isArray(token.scope) ? token.scope : [token.scope];
45
+ const style = {};
46
+ if (token.settings.foreground) {
47
+ style.color = normalizeColor(token.settings.foreground);
48
+ }
49
+ if (token.settings.background) {
50
+ style.backgroundColor = normalizeColor(token.settings.background);
51
+ }
52
+ if (token.settings.fontStyle) {
53
+ if (token.settings.fontStyle.includes('italic')) {
54
+ style.fontStyle = 'italic';
55
+ }
56
+ if (token.settings.fontStyle.includes('bold')) {
57
+ style.fontWeight = 'bold';
58
+ }
59
+ }
60
+ scopes.forEach(scope => {
61
+ styleMap[scope] = {
62
+ ...(styleMap[scope] || {}),
63
+ ...style
64
+ };
65
+ });
66
+ });
67
+ return styleMap;
68
+ }
69
+ export function getRNStylesFromShikiStyle(theme) {
70
+ if (!theme) return {};
71
+ try {
72
+ const styles = {
73
+ editor: {
74
+ backgroundColor: normalizeColor(theme.colors?.['editor.background'])
75
+ },
76
+ base: {
77
+ color: normalizeColor(theme.colors?.['editor.foreground'])
78
+ }
79
+ };
80
+
81
+ // Process token colors
82
+ if (theme.tokenColors) {
83
+ const tokenStyles = convertTokenColorsToReactStyle(theme.tokenColors);
84
+ Object.assign(styles, tokenStyles);
85
+ }
86
+ return styles;
87
+ } catch {
88
+ return {
89
+ editor: {
90
+ backgroundColor: '#1e1e1e'
91
+ },
92
+ base: {
93
+ color: '#d4d4d4'
94
+ }
95
+ };
96
+ }
97
+ }
98
+ //# sourceMappingURL=style-transformer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["hexToRgb","hex","replace","length","result","exec","r","Number","parseInt","g","b","normalizeColor","color","startsWith","rgb","convertTokenColorsToReactStyle","tokenColors","styleMap","forEach","token","settings","scope","default","foreground","backgroundColor","background","scopes","Array","isArray","style","fontStyle","includes","fontWeight","getRNStylesFromShikiStyle","theme","styles","editor","colors","base","tokenStyles","Object","assign"],"sourceRoot":"../../../src","sources":["utils/style-transformer.ts"],"mappings":"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","ignoreList":[]}
@@ -1,13 +1,5 @@
1
- import type { LanguageInput, ThemeInput } from 'shiki';
1
+ import type { SyntaxHighlighterProps } from 'src/types/shiki';
2
2
  import React from 'react';
3
- interface SyntaxHighlighterProps {
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,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,iBAAS,iBAAiB,CAAC,EAAE,IAAI,EAAE,IAAiB,EAAE,QAAuB,EAAE,KAAkB,EAAE,SAAyB,EAAE,QAAQ,EAAE,EAAE,sBAAsB,qBA4C/J;AAED,eAAe,iBAAiB,CAAA"}
1
+ {"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/syntax/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAoDtC,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuEvD,CAAA;AAED,eAAe,iBAAiB,CAAA"}
@@ -1,5 +1,6 @@
1
- import type { SyntaxHighlighterProps, ThemedToken } from '../types/shiki';
2
- export declare function useSyntaxHighlighter({ text, lang, langName, theme, themeName }: SyntaxHighlighterProps): {
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,EAAe,sBAAsB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAItF,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,sBAAsB;;;;EAqDtG"}
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
- import SyntaxLine from './components/syntax/SyntaxLine';
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;AACrE,OAAO,UAAU,MAAM,gCAAgC,CAAA;AAEvD,cAAc,eAAe,CAAA;AAE7B,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,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 '../../types';
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<Awaited<ReturnType<typeof createHighlighterCore>>>;
6
+ }): Promise<import("shiki").HighlighterCore>;
8
7
  export declare function processTokens(tokens: ThemedToken[]): TokenType[];
9
- //# sourceMappingURL=index.d.ts.map
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 type { LanguageInput, ThemedToken, ThemeInput };
3
- export interface ShikiResult {
4
- tokens: ThemedToken[][];
5
- bg: string;
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
- lang: LanguageInput;
11
- langName: string;
9
+ language: LanguageInput;
10
+ languageId: string;
12
11
  theme: ThemeInput;
13
- themeName: string;
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,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA;AAEtD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,WAAW,EAAE,EAAE,CAAA;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;CACX;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,UAAU,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB"}
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,UAAU,CAAA;AAEzC,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"}
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,9 @@
1
+ import type { TextStyle } from 'react-native';
2
+ import type { ThemeRegistration } from 'shiki';
3
+ export interface HighlighterStyleSheet {
4
+ [key: string]: TextStyle;
5
+ }
6
+ export type ReactStyle = Record<string, TextStyle>;
7
+ export declare function convertTokenColorsToReactStyle(tokenColors: ThemeRegistration['tokenColors']): ReactStyle;
8
+ export declare function getRNStylesFromShikiStyle(theme: ThemeRegistration): HighlighterStyleSheet;
9
+ //# 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;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,MAAM,WAAW,qBAAqB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;CACzB;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;AAoClD,wBAAgB,8BAA8B,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG,UAAU,CA2CxG;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,iBAAiB,GAAG,qBAAqB,CA4BzF"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "rn-shiki",
3
3
  "type": "module",
4
- "version": "0.0.37-3",
4
+ "version": "0.0.37-30",
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
- "esbuild": "^0.24.0",
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",