rn-shiki 0.0.37-20 → 0.0.37-22

package/lib/commonjs/components/syntax/SyntaxHighlighter.js

@@ -4,76 +4,84 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _typescript = _interopRequireDefault(require("shiki/langs/typescript.mjs"));
-var _githubDark = _interopRequireDefault(require("shiki/themes/github-dark.mjs"));
 var _useSyntaxHighlighter = require("../../hooks/useSyntaxHighlighter");
+var _styleTransformer = require("../../utils/style-transformer");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function SyntaxHighlighter({
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const monospaceFont = _reactNative.Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace'
+});
+const styles = _reactNative.StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    minHeight: 20
+  },
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  }
+});
+const SyntaxHighlighter = ({
   text,
-  lang = _typescript.default,
-  langName = 'typescript',
-  theme = _githubDark.default,
-  themeName = 'github-dark',
-  fontSize
-}) {
+  language,
+  languageId,
+  theme
+}) => {
+  console.log('theme:', theme);
+  const stylesheet = (0, _react.useMemo)(() => {
+    const styles = (0, _styleTransformer.getRNStylesFromShikiStyle)(theme);
+    console.log('Generated stylesheet:', styles);
+    return styles;
+  }, [theme]);
   const {
-    tokens,
-    error,
-    isLoading
+    tokens
   } = (0, _useSyntaxHighlighter.useSyntaxHighlighter)({
     text,
-    lang,
-    langName,
-    theme,
-    themeName
+    language,
+    languageId,
+    theme
   });
-  if (error) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: {
-        color: '#ff6b6b',
-        fontFamily: 'monospace',
-        fontSize
-      },
-      children: ["Error:", error]
-    });
-  }
-  if (isLoading) {
+  const renderToken = (token, index, lineIndex) => {
+    // Ensure to collect all styles associated with the token's scopes
+    const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope];
+    const tokenStylesArray = tokenScopes.map(scope => stylesheet[scope] || {});
+    const combinedStyles = _reactNative.StyleSheet.flatten([...tokenStylesArray, {
+      fontFamily: monospaceFont,
+      ...(token.color && {
+        color: token.color
+      }),
+      ...(token.fontStyle === 'italic' && stylesheet.italic),
+      ...(token.fontWeight === 'bold' && stylesheet.bold)
+    }]);
+    console.log(`Rendering token: ${token.content}, styles:`, combinedStyles);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: {
-        color: '#f8f8f2',
-        fontFamily: 'monospace',
-        fontSize
-      },
-      children: "Loading..."
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    children: tokens.map((line, lineIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        flexWrap: 'wrap'
-      },
-      children: [line.map((token, tokenIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: {
-          color: token.color || '#FFFFFF',
-          fontFamily: 'monospace',
-          fontSize,
-          fontStyle: token.fontStyle
-        },
-        children: token.content.replace(/ /g, '\u00A0')
-      }, `${lineIndex}-${tokenIndex}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: {
-          color: '#FFFFFF',
-          fontFamily: 'monospace',
-          fontSize
-        },
-        children: '\n'
-      })]
-    }, `line-${lineIndex}`))
+      style: combinedStyles,
+      children: token.content.replace(/ /g, '\u00A0')
+    }, `${lineIndex}-${index}`);
+  };
+
+  // In the renderLine and renderToken flow
+  const renderLine = (line, lineIndex) => {
+    console.log(`Rendering line ${lineIndex}:`, line);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.lineContainer,
+      children: line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))
+    }, lineIndex);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: _reactNative.Platform.OS !== 'web',
+    style: styles.scrollView,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onStartShouldSetResponder: () => true,
+      children: tokens.map((line, index) => renderLine(line, index))
+    })
   });
-}
+};
 var _default = exports.default = SyntaxHighlighter;
 //# sourceMappingURL=SyntaxHighlighter.js.map

package/lib/commonjs/components/syntax/SyntaxHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_typescript","_githubDark","_useSyntaxHighlighter","_jsxRuntime","e","__esModule","default","SyntaxHighlighter","text","lang","typescript","langName","theme","githubDark","themeName","fontSize","tokens","error","isLoading","useSyntaxHighlighter","jsxs","Text","style","color","fontFamily","children","jsx","View","map","line","lineIndex","flexDirection","flexWrap","token","tokenIndex","fontStyle","content","replace","_default","exports"],"sourceRoot":"../../../../src","sources":["components/syntax/SyntaxHighlighter.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,qBAAA,GAAAJ,OAAA;AAAuE,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWvE,SAASG,iBAAiBA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAGC,mBAAU;EAAEC,QAAQ,GAAG,YAAY;EAAEC,KAAK,GAAGC,mBAAU;EAAEC,SAAS,GAAG,aAAa;EAAEC;AAAiC,CAAC,EAAE;EAChK,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAG,IAAAC,0CAAoB,EAAC;IACxDX,IAAI;IACJC,IAAI;IACJE,QAAQ;IACRC,KAAK;IACLE;EACF,CAAC,CAAC;EAEF,IAAIG,KAAK,EAAE;IACT,oBACE,IAAAd,WAAA,CAAAiB,IAAA,EAACrB,YAAA,CAAAsB,IAAI;MAACC,KAAK,EAAE;QAAEC,KAAK,EAAE,SAAS;QAAEC,UAAU,EAAE,WAAW;QAAET;MAAS,CAAE;MAAAU,QAAA,GAAC,QAEpE,EAACR,KAAK;IAAA,CACF,CAAC;EAEX;EAEA,IAAIC,SAAS,EAAE;IACb,oBAAO,IAAAf,WAAA,CAAAuB,GAAA,EAAC3B,YAAA,CAAAsB,IAAI;MAACC,KAAK,EAAE;QAAEC,KAAK,EAAE,SAAS;QAAEC,UAAU,EAAE,WAAW;QAAET;MAAS,CAAE;MAAAU,QAAA,EAAC;IAAU,CAAM,CAAC;EAChG;EAEA,oBACE,IAAAtB,WAAA,CAAAuB,GAAA,EAAC3B,YAAA,CAAA4B,IAAI;IAAAF,QAAA,EACFT,MAAM,CAACY,GAAG,CAAC,CAACC,IAAI,EAAEC,SAAS,kBAC1B,IAAA3B,WAAA,CAAAiB,IAAA,EAACrB,YAAA,CAAA4B,IAAI;MAA2BL,KAAK,EAAE;QAAES,aAAa,EAAE,KAAK;QAAEC,QAAQ,EAAE;MAAO,CAAE;MAAAP,QAAA,GAC/EI,IAAI,CAACD,GAAG,CAAC,CAACK,KAAK,EAAEC,UAAU,kBAC1B,IAAA/B,WAAA,CAAAuB,GAAA,EAAC3B,YAAA,CAAAsB,IAAI;QAEHC,KAAK,EAAE;UACLC,KAAK,EAAEU,KAAK,CAACV,KAAK,IAAI,SAAS;UAC/BC,UAAU,EAAE,WAAW;UACvBT,QAAQ;UACRoB,SAAS,EAAEF,KAAK,CAACE;QACnB,CAAE;QAAAV,QAAA,EAEDQ,KAAK,CAACG,OAAO,CAACC,OAAO,CAAC,IAAI,EAAE,QAAQ;MAAC,GARjC,GAAGP,SAAS,IAAII,UAAU,EAS3B,CACP,CAAC,eACF,IAAA/B,WAAA,CAAAuB,GAAA,EAAC3B,YAAA,CAAAsB,IAAI;QAACC,KAAK,EAAE;UAAEC,KAAK,EAAE,SAAS;UAAEC,UAAU,EAAE,WAAW;UAAET;QAAS,CAAE;QAAAU,QAAA,EAAE;MAAI,CAAO,CAAC;IAAA,GAd1E,QAAQK,SAAS,EAetB,CACP;EAAC,CACE,CAAC;AAEX;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAjC,OAAA,GAEcC,iBAAiB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useSyntaxHighlighter","_styleTransformer","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","monospaceFont","Platform","select","ios","android","styles","StyleSheet","create","scrollView","flex","minHeight","lineContainer","flexDirection","flexWrap","SyntaxHighlighter","text","language","languageId","theme","console","log","stylesheet","useMemo","getRNStylesFromShikiStyle","tokens","useSyntaxHighlighter","renderToken","token","index","lineIndex","tokenScopes","Array","isArray","scope","tokenStylesArray","map","combinedStyles","flatten","fontFamily","color","fontStyle","italic","fontWeight","bold","content","jsx","Text","style","children","replace","renderLine","line","View","tokenIndex","ScrollView","horizontal","showsHorizontalScrollIndicator","OS","onStartShouldSetResponder","_default","exports"],"sourceRoot":"../../../../src","sources":["components/syntax/SyntaxHighlighter.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/hooks/useSyntaxHighlighter.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSyntaxHighlighter = useSyntaxHighlighter;
 var _react = require("react");
-var _syntax = require("../syntax");
+var _highlighter = require("../syntax/highlighter");
 function useSyntaxHighlighter({
   text,
-  lang,
-  langName,
-  theme,
-  themeName
+  language,
+  languageId,
+  theme
 }) {
   const [tokens, setTokens] = (0, _react.useState)([]);
   const [error, setError] = (0, _react.useState)();
@@ -26,13 +25,22 @@ function useSyntaxHighlighter({
         return;
       }
       try {
-        const highlighter = await (0, _syntax.createHighlighter)({
-          langs: [lang],
+        // First create the highlighter
+        const highlighter = await (0, _highlighter.createHighlighter)({
+          langs: [language],
           themes: [theme]
         });
+
+        // Get resolved theme name
+        const themeResolved = highlighter.getLoadedThemes()?.[0];
+        if (!themeResolved) {
+          throw new Error('Failed to resolve theme');
+        }
+
+        // Use resolved theme for tokenization
         const result = highlighter.codeToTokens(text, {
-          lang: langName,
-          theme: themeName
+          lang: languageId,
+          theme: themeResolved
         });
         if (mounted && result.tokens) {
           setTokens(result.tokens);
@@ -54,7 +62,7 @@ function useSyntaxHighlighter({
     return () => {
       mounted = false;
     };
-  }, [text, lang, langName, theme, themeName]);
+  }, [text, language, languageId, theme]);
   return {
     tokens,
     error,

package/lib/commonjs/hooks/useSyntaxHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_syntax","useSyntaxHighlighter","text","lang","langName","theme","themeName","tokens","setTokens","useState","error","setError","isLoading","setIsLoading","useEffect","mounted","highlight","highlighter","createHighlighter","langs","themes","result","codeToTokens","undefined","err","console","Error","message"],"sourceRoot":"../../../src","sources":["hooks/useSyntaxHighlighter.ts"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,SAASE,oBAAoBA,CAAC;EAAEC,IAAI;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAkC,CAAC,EAAE;EACvG,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAkB,EAAE,CAAC;EACzD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAF,eAAQ,EAAS,CAAC;EAC5C,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAJ,eAAQ,EAAC,IAAI,CAAC;EAEhD,IAAAK,gBAAS,EAAC,MAAM;IACd,IAAIC,OAAO,GAAG,IAAI;IAClBF,YAAY,CAAC,IAAI,CAAC;IAElB,eAAeG,SAASA,CAAA,EAAG;MACzB,IAAI,CAACd,IAAI,EAAE;QACTW,YAAY,CAAC,KAAK,CAAC;QACnBL,SAAS,CAAC,EAAE,CAAC;QACb;MACF;MAEA,IAAI;QACF,MAAMS,WAAW,GAAG,MAAM,IAAAC,yBAAiB,EAAC;UAC1CC,KAAK,EAAE,CAAChB,IAAI,CAAC;UACbiB,MAAM,EAAE,CAACf,KAAK;QAChB,CAAC,CAAC;QAEF,MAAMgB,MAAM,GAAGJ,WAAW,CAACK,YAAY,CAACpB,IAAI,EAAE;UAC5CC,IAAI,EAAEC,QAAQ;UACdC,KAAK,EAAEC;QACT,CAAC,CAAgB;QAEjB,IAAIS,OAAO,IAAIM,MAAM,CAACd,MAAM,EAAE;UAC5BC,SAAS,CAACa,MAAM,CAACd,MAAM,CAAC;UACxBI,QAAQ,CAACY,SAAS,CAAC;QACrB;MACF,CAAC,CACD,OAAOC,GAAG,EAAE;QACVC,OAAO,CAACf,KAAK,CAAC,qBAAqB,EAAEc,GAAG,CAAC;QACzC,IAAIT,OAAO,EAAE;UACXJ,QAAQ,CAACa,GAAG,YAAYE,KAAK,GAAGF,GAAG,CAACG,OAAO,GAAG,4BAA4B,CAAC;UAC3EnB,SAAS,CAAC,EAAE,CAAC;QACf;MACF,CAAC,SACO;QACN,IAAIO,OAAO,EAAE;UACXF,YAAY,CAAC,KAAK,CAAC;QACrB;MACF;IACF;IAEAG,SAAS,CAAC,CAAC;IACX,OAAO,MAAM;MACXD,OAAO,GAAG,KAAK;IACjB,CAAC;EACH,CAAC,EAAE,CAACb,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,CAAC,CAAC;EAE5C,OAAO;IAAEC,MAAM;IAAEG,KAAK;IAAEE;EAAU,CAAC;AACrC","ignoreList":[]}
+{"version":3,"names":["_react","require","_highlighter","useSyntaxHighlighter","text","language","languageId","theme","tokens","setTokens","useState","error","setError","isLoading","setIsLoading","useEffect","mounted","highlight","highlighter","createHighlighter","langs","themes","themeResolved","getLoadedThemes","Error","result","codeToTokens","lang","undefined","err","console","message"],"sourceRoot":"../../../src","sources":["hooks/useSyntaxHighlighter.ts"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEO,SAASE,oBAAoBA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAA8B,CAAC,EAAE;EAClG,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAkB,EAAE,CAAC;EACzD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAF,eAAQ,EAAS,CAAC;EAC5C,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAJ,eAAQ,EAAC,IAAI,CAAC;EAEhD,IAAAK,gBAAS,EAAC,MAAM;IACd,IAAIC,OAAO,GAAG,IAAI;IAClBF,YAAY,CAAC,IAAI,CAAC;IAElB,eAAeG,SAASA,CAAA,EAAG;MACzB,IAAI,CAACb,IAAI,EAAE;QACTU,YAAY,CAAC,KAAK,CAAC;QACnBL,SAAS,CAAC,EAAE,CAAC;QACb;MACF;MAEA,IAAI;QACF;QACA,MAAMS,WAAW,GAAG,MAAM,IAAAC,8BAAiB,EAAC;UAC1CC,KAAK,EAAE,CAACf,QAAQ,CAAC;UACjBgB,MAAM,EAAE,CAACd,KAAK;QAChB,CAAC,CAAC;;QAEF;QACA,MAAMe,aAAa,GAAGJ,WAAW,CAACK,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC;QACxD,IAAI,CAACD,aAAa,EAAE;UAClB,MAAM,IAAIE,KAAK,CAAC,yBAAyB,CAAC;QAC5C;;QAEA;QACA,MAAMC,MAAM,GAAGP,WAAW,CAACQ,YAAY,CAACtB,IAAI,EAAE;UAC5CuB,IAAI,EAAErB,UAAU;UAChBC,KAAK,EAAEe;QACT,CAAC,CAAiB;QAElB,IAAIN,OAAO,IAAIS,MAAM,CAACjB,MAAM,EAAE;UAC5BC,SAAS,CAACgB,MAAM,CAACjB,MAAM,CAAC;UACxBI,QAAQ,CAACgB,SAAS,CAAC;QACrB;MACF,CAAC,CACD,OAAOC,GAAG,EAAE;QACVC,OAAO,CAACnB,KAAK,CAAC,qBAAqB,EAAEkB,GAAG,CAAC;QACzC,IAAIb,OAAO,EAAE;UACXJ,QAAQ,CAACiB,GAAG,YAAYL,KAAK,GAAGK,GAAG,CAACE,OAAO,GAAG,4BAA4B,CAAC;UAC3EtB,SAAS,CAAC,EAAE,CAAC;QACf;MACF,CAAC,SACO;QACN,IAAIO,OAAO,EAAE;UACXF,YAAY,CAAC,KAAK,CAAC;QACrB;MACF;IACF;IAEAG,SAAS,CAAC,CAAC;IACX,OAAO,MAAM;MACXD,OAAO,GAAG,KAAK;IACjB,CAAC;EACH,CAAC,EAAE,CAACZ,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,CAAC,CAAC;EAEvC,OAAO;IAAEC,MAAM;IAAEG,KAAK;IAAEE;EAAU,CAAC;AACrC","ignoreList":[]}

package/lib/commonjs/index.js

@@ -3,35 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  SyntaxHighlighter: true,
-  SyntaxLine: true
-};
 Object.defineProperty(exports, "SyntaxHighlighter", {
   enumerable: true,
   get: function () {
     return _SyntaxHighlighter.default;
   }
 });
-Object.defineProperty(exports, "SyntaxLine", {
-  enumerable: true,
-  get: function () {
-    return _SyntaxLine.default;
-  }
-});
 var _SyntaxHighlighter = _interopRequireDefault(require("./components/syntax/SyntaxHighlighter"));
-var _SyntaxLine = _interopRequireDefault(require("./components/syntax/SyntaxLine"));
-var _shiki = require("./types/shiki");
-Object.keys(_shiki).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _shiki[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _shiki[key];
-    }
-  });
-});
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_SyntaxHighlighter","_interopRequireDefault","require","_SyntaxLine","_shiki","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAA6B,SAAAP,uBAAAgB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
+{"version":3,"names":["_SyntaxHighlighter","_interopRequireDefault","require","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAqE,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/syntax/{highlighter/index.js → highlighter.js}

@@ -5,21 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createHighlighter = createHighlighter;
 exports.processTokens = processTokens;
-var _core = require("shiki/core");
-var _javascript = require("shiki/engine/javascript");
+var _core = require("shiki/dist/core.mjs");
+var _engineJavascript = require("shiki/dist/engine-javascript.mjs");
+const engine = (0, _engineJavascript.createJavaScriptRegexEngine)({
+  forgiving: true,
+  simulation: true,
+  cache: new Map()
+});
 async function initializeHighlighter(langs, themes) {
-  return (0, _core.createHighlighterCore)({
-    engine: (0, _javascript.createJavaScriptRegexEngine)(),
-    langs,
-    themes
-  });
+  try {
+    return await (0, _core.createHighlighterCore)({
+      langs,
+      themes,
+      engine
+    });
+  } catch (err) {
+    console.error('Error initializing highlighter:', err);
+    throw err;
+  }
 }
 async function createHighlighter({
   langs,
   themes
 }) {
-  if (!langs?.length || !themes?.length) {
-    throw new Error('Please provide both `langs` and `themes` when creating a highlighter.');
+  if (!langs?.length) {
+    throw new Error('Please provide languages when creating a highlighter.');
   }
   try {
     const highlighter = await initializeHighlighter(langs, themes);
@@ -36,4 +46,4 @@ function processTokens(tokens) {
     fontStyle: token.fontStyle?.toString()
   }));
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=highlighter.js.map

package/lib/commonjs/syntax/highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_core","require","_engineJavascript","engine","createJavaScriptRegexEngine","forgiving","simulation","cache","Map","initializeHighlighter","langs","themes","createHighlighterCore","err","console","error","createHighlighter","length","Error","highlighter","processTokens","tokens","map","token","content","color","fontStyle","toString"],"sourceRoot":"../../../src","sources":["syntax/highlighter.ts"],"mappings":";;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,MAAME,MAAM,GAAG,IAAAC,6CAA2B,EAAC;EACzCC,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,MAAM,IAAAC,2BAAqB,EAAC;MACjCF,KAAK;MACLC,MAAM;MACNR;IACF,CAAC,CAAC;EACJ,CAAC,CACD,OAAOU,GAAG,EAAE;IACVC,OAAO,CAACC,KAAK,CAAC,iCAAiC,EAAEF,GAAG,CAAC;IACrD,MAAMA,GAAG;EACX;AACF;AAEO,eAAeG,iBAAiBA,CAAC;EAAEN,KAAK;EAAEC;AAAyD,CAAC,EAAE;EAC3G,IAAI,CAACD,KAAK,EAAEO,MAAM,EAAE;IAClB,MAAM,IAAIC,KAAK,CAAC,uDAAuD,CAAC;EAC1E;EAEA,IAAI;IACF,MAAMC,WAAW,GAAG,MAAMV,qBAAqB,CAACC,KAAK,EAAEC,MAAM,CAAC;IAC9D,OAAOQ,WAAW;EACpB,CAAC,CACD,OAAOJ,KAAK,EAAE;IACZD,OAAO,CAACC,KAAK,CAAC,+BAA+B,EAAEA,KAAK,CAAC;IACrD,MAAMA,KAAK;EACb;AACF;AAEO,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":[]}

package/lib/commonjs/utils/style-transformer.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertTokenColorsToReactStyle = convertTokenColorsToReactStyle;
+exports.getRNStylesFromShikiStyle = getRNStylesFromShikiStyle;
+var _cssToReactNative = _interopRequireDefault(require("css-to-react-native"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Helper function to convert hex color to RGB
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: Number.parseInt(result[1], 16),
+    g: Number.parseInt(result[2], 16),
+    b: Number.parseInt(result[3], 16)
+  } : null;
+}
+
+// Helper function to normalize color values
+function normalizeColor(color) {
+  if (!color) return 'transparent';
+
+  // Type guard to ensure color is string before we call string methods
+  if (typeof color === 'string' && color.startsWith('#')) {
+    const rgb = hexToRgb(color);
+    if (rgb) {
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    }
+  }
+  return color;
+}
+function convertTokenColorsToReactStyle(tokenColors) {
+  const styleMap = {};
+
+  // Add default styles
+  styleMap.default = {
+    color: '#e1e4e8',
+    backgroundColor: 'transparent'
+  };
+  tokenColors.forEach(token => {
+    if (!token.settings || !token.scope) return;
+    const scopes = Array.isArray(token.scope) ? token.scope : [token.scope];
+    const styleEntries = [];
+
+    // Only add styles if they exist
+    if (token.settings.foreground) {
+      styleEntries.push(['color', normalizeColor(token.settings.foreground)]);
+    }
+    if (token.settings.background) {
+      styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)]);
+    }
+    if (token.settings.fontStyle) {
+      if (token.settings.fontStyle.includes('italic')) {
+        styleEntries.push(['fontStyle', 'italic']);
+      }
+      if (token.settings.fontStyle.includes('bold')) {
+        styleEntries.push(['fontWeight', 'bold']);
+      }
+    }
+    if (styleEntries.length > 0) {
+      const transformedStyle = (0, _cssToReactNative.default)(styleEntries);
+      scopes.forEach(scope => {
+        if (typeof scope === 'string') {
+          styleMap[scope] = {
+            ...(styleMap[scope] || {}),
+            ...transformedStyle
+          };
+        }
+      });
+    }
+  });
+  return styleMap;
+}
+function getRNStylesFromShikiStyle(theme) {
+  if (!theme || !theme.tokenColors) {
+    console.error('Provided theme does not contain \'tokenColors\'.');
+    return {};
+  }
+  try {
+    // Convert theme colors to React Native styles
+    const styles = convertTokenColorsToReactStyle(theme.tokenColors);
+
+    // Add theme-specific base styles if they exist
+    if (theme.colors) {
+      styles.base = {
+        color: normalizeColor(theme.colors['editor.foreground']),
+        backgroundColor: normalizeColor(theme.colors['editor.background'])
+      };
+    }
+    return styles;
+  } catch {
+    console.error('Error converting theme styles');
+    return {};
+  }
+}
+//# sourceMappingURL=style-transformer.js.map

package/lib/commonjs/utils/style-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cssToReactNative","_interopRequireDefault","require","e","__esModule","default","hexToRgb","hex","result","exec","r","Number","parseInt","g","b","normalizeColor","color","startsWith","rgb","convertTokenColorsToReactStyle","tokenColors","styleMap","backgroundColor","forEach","token","settings","scope","scopes","Array","isArray","styleEntries","foreground","push","background","fontStyle","includes","length","transformedStyle","transform","getRNStylesFromShikiStyle","theme","console","error","styles","colors","base"],"sourceRoot":"../../../src","sources":["utils/style-transformer.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/syntax/SyntaxHighlighter.js

@@ -1,74 +1,81 @@
 "use strict";
 
-import React from 'react';
-import { Text, View } from 'react-native';
-import typescript from 'shiki/langs/typescript.mjs';
-import githubDark from 'shiki/themes/github-dark.mjs';
+import React, { useMemo } from 'react';
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-function SyntaxHighlighter({
+import { getRNStylesFromShikiStyle } from '../../utils/style-transformer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const monospaceFont = Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace'
+});
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    minHeight: 20
+  },
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  }
+});
+const SyntaxHighlighter = ({
   text,
-  lang = typescript,
-  langName = 'typescript',
-  theme = githubDark,
-  themeName = 'github-dark',
-  fontSize
-}) {
+  language,
+  languageId,
+  theme
+}) => {
+  console.log('theme:', theme);
+  const stylesheet = useMemo(() => {
+    const styles = getRNStylesFromShikiStyle(theme);
+    console.log('Generated stylesheet:', styles);
+    return styles;
+  }, [theme]);
   const {
-    tokens,
-    error,
-    isLoading
+    tokens
   } = useSyntaxHighlighter({
     text,
-    lang,
-    langName,
-    theme,
-    themeName
+    language,
+    languageId,
+    theme
   });
-  if (error) {
-    return /*#__PURE__*/_jsxs(Text, {
-      style: {
-        color: '#ff6b6b',
-        fontFamily: 'monospace',
-        fontSize
-      },
-      children: ["Error:", error]
-    });
-  }
-  if (isLoading) {
+  const renderToken = (token, index, lineIndex) => {
+    // Ensure to collect all styles associated with the token's scopes
+    const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope];
+    const tokenStylesArray = tokenScopes.map(scope => stylesheet[scope] || {});
+    const combinedStyles = StyleSheet.flatten([...tokenStylesArray, {
+      fontFamily: monospaceFont,
+      ...(token.color && {
+        color: token.color
+      }),
+      ...(token.fontStyle === 'italic' && stylesheet.italic),
+      ...(token.fontWeight === 'bold' && stylesheet.bold)
+    }]);
+    console.log(`Rendering token: ${token.content}, styles:`, combinedStyles);
     return /*#__PURE__*/_jsx(Text, {
-      style: {
-        color: '#f8f8f2',
-        fontFamily: 'monospace',
-        fontSize
-      },
-      children: "Loading..."
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    children: tokens.map((line, lineIndex) => /*#__PURE__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        flexWrap: 'wrap'
-      },
-      children: [line.map((token, tokenIndex) => /*#__PURE__*/_jsx(Text, {
-        style: {
-          color: token.color || '#FFFFFF',
-          fontFamily: 'monospace',
-          fontSize,
-          fontStyle: token.fontStyle
-        },
-        children: token.content.replace(/ /g, '\u00A0')
-      }, `${lineIndex}-${tokenIndex}`)), /*#__PURE__*/_jsx(Text, {
-        style: {
-          color: '#FFFFFF',
-          fontFamily: 'monospace',
-          fontSize
-        },
-        children: '\n'
-      })]
-    }, `line-${lineIndex}`))
+      style: combinedStyles,
+      children: token.content.replace(/ /g, '\u00A0')
+    }, `${lineIndex}-${index}`);
+  };
+
+  // In the renderLine and renderToken flow
+  const renderLine = (line, lineIndex) => {
+    console.log(`Rendering line ${lineIndex}:`, line);
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.lineContainer,
+      children: line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))
+    }, lineIndex);
+  };
+  return /*#__PURE__*/_jsx(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: Platform.OS !== 'web',
+    style: styles.scrollView,
+    children: /*#__PURE__*/_jsx(View, {
+      onStartShouldSetResponder: () => true,
+      children: tokens.map((line, index) => renderLine(line, index))
+    })
   });
-}
+};
 export default SyntaxHighlighter;
 //# sourceMappingURL=SyntaxHighlighter.js.map

package/lib/module/components/syntax/SyntaxHighlighter.js.map

@@ -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":[]}
+{"version":3,"names":["React","useMemo","Platform","ScrollView","StyleSheet","Text","View","useSyntaxHighlighter","getRNStylesFromShikiStyle","jsx","_jsx","monospaceFont","select","ios","android","default","styles","create","scrollView","flex","minHeight","lineContainer","flexDirection","flexWrap","SyntaxHighlighter","text","language","languageId","theme","console","log","stylesheet","tokens","renderToken","token","index","lineIndex","tokenScopes","Array","isArray","scope","tokenStylesArray","map","combinedStyles","flatten","fontFamily","color","fontStyle","italic","fontWeight","bold","content","style","children","replace","renderLine","line","tokenIndex","horizontal","showsHorizontalScrollIndicator","OS","onStartShouldSetResponder"],"sourceRoot":"../../../../src","sources":["components/syntax/SyntaxHighlighter.tsx"],"mappings":"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","ignoreList":[]}