rn-shiki 0.0.37-2 → 0.0.37-21

package/lib/module/hooks/useSyntaxHighlighter.js

@@ -1,13 +1,12 @@
 "use strict";
 
 import { useEffect, useState } from 'react';
-import { createHighlighter } from '../syntax';
+import { createHighlighter } from '../syntax/highlighter';
 export function useSyntaxHighlighter({
   text,
-  lang,
-  langName,
-  theme,
-  themeName
+  language,
+  languageId,
+  theme
 }) {
   const [tokens, setTokens] = useState([]);
   const [error, setError] = useState();
@@ -22,13 +21,22 @@ export function useSyntaxHighlighter({
         return;
       }
       try {
+        // First create the highlighter
         const highlighter = await createHighlighter({
-          langs: [lang],
+          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);
@@ -50,7 +58,7 @@ export function useSyntaxHighlighter({
     return () => {
       mounted = false;
     };
-  }, [text, lang, langName, theme, themeName]);
+  }, [text, language, languageId, theme]);
   return {
     tokens,
     error,

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

@@ -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":[]}
+{"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

@@ -1,7 +1,5 @@
 "use strict";
 
 import SyntaxHighlighter from './components/syntax/SyntaxHighlighter';
-import SyntaxLine from './components/syntax/SyntaxLine';
-export * from './types/shiki';
-export { SyntaxHighlighter, SyntaxLine };
+export { SyntaxHighlighter };
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -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":[]}
+{"version":3,"names":["SyntaxHighlighter"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,OAAOA,iBAAiB,MAAM,uCAAuC;AAErE,SAASA,iBAAiB","ignoreList":[]}

package/lib/module/syntax/highlighter.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { createHighlighterCore } from 'shiki/dist/core.mjs';
+import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs';
+const engine = createJavaScriptRegexEngine({
+  forgiving: true,
+  simulation: true,
+  cache: new Map()
+});
+async function initializeHighlighter(langs, themes) {
+  try {
+    return await createHighlighterCore({
+      langs,
+      themes,
+      engine
+    });
+  } catch (err) {
+    console.error('Error initializing highlighter:', err);
+    throw err;
+  }
+}
+export async function createHighlighter({
+  langs,
+  themes
+}) {
+  if (!langs?.length) {
+    throw new Error('Please provide languages when creating a highlighter.');
+  }
+  try {
+    const highlighter = await initializeHighlighter(langs, themes);
+    return highlighter;
+  } catch (error) {
+    console.error('Failed to create highlighter:', error);
+    throw error;
+  }
+}
+export function processTokens(tokens) {
+  return tokens.map(token => ({
+    content: token.content,
+    color: token.color || '#000000',
+    fontStyle: token.fontStyle?.toString()
+  }));
+}
+//# sourceMappingURL=highlighter.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,91 @@
+"use strict";
+
+import transform from 'css-to-react-native';
+// 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;
+}
+export 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 = transform(styleEntries);
+      scopes.forEach(scope => {
+        if (typeof scope === 'string') {
+          styleMap[scope] = {
+            ...(styleMap[scope] || {}),
+            ...transformedStyle
+          };
+        }
+      });
+    }
+  });
+  return styleMap;
+}
+export 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/module/utils/style-transformer.js.map

@@ -0,0 +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":[]}

package/lib/typescript/components/syntax/SyntaxHighlighter.d.ts

@@ -1,13 +1,5 @@
-import type { LanguageInput, ThemeInput } from 'shiki';
+import type { SyntaxHighlighterProps } from 'src/types/shiki';
 import React from 'react';
-interface SyntaxHighlighterProps {
-    text: string;
-    lang?: LanguageInput;
-    langName?: string;
-    theme?: ThemeInput;
-    themeName?: string;
-    fontSize?: number;
-}
-declare function SyntaxHighlighter({ text, lang, langName, theme, themeName, fontSize }: SyntaxHighlighterProps): React.JSX.Element;
+declare const SyntaxHighlighter: React.FC<SyntaxHighlighterProps>;
 export default SyntaxHighlighter;
 //# sourceMappingURL=SyntaxHighlighter.d.ts.map

package/lib/typescript/components/syntax/SyntaxHighlighter.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/hooks/useSyntaxHighlighter.d.ts

@@ -1,5 +1,6 @@
-import type { SyntaxHighlighterProps, ThemedToken } from '../types/shiki';
-export declare function useSyntaxHighlighter({ text, lang, langName, theme, themeName }: SyntaxHighlighterProps): {
+import type { ThemedToken } from 'shiki';
+import type { SyntaxHighlighterProps } from '../types/shiki';
+export declare function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps): {
     tokens: ThemedToken[][];
     error: string | undefined;
     isLoading: boolean;

package/lib/typescript/hooks/useSyntaxHighlighter.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/index.d.ts

@@ -1,5 +1,3 @@
 import SyntaxHighlighter from './components/syntax/SyntaxHighlighter';
-import SyntaxLine from './components/syntax/SyntaxLine';
-export * from './types/shiki';
-export { SyntaxHighlighter, SyntaxLine };
+export { SyntaxHighlighter };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/syntax/{highlighter/index.d.ts → highlighter.d.ts}

@@ -1,9 +1,8 @@
 import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki';
-import type { TokenType } from '../../types';
-import { createHighlighterCore } from 'shiki/core';
+import type { TokenType } from '../types/shiki';
 export declare function createHighlighter({ langs, themes }: {
     langs: LanguageInput[];
     themes: ThemeInput[];
-}): Promise<Awaited<ReturnType<typeof createHighlighterCore>>>;
+}): Promise<import("shiki").HighlighterCore>;
 export declare function processTokens(tokens: ThemedToken[]): TokenType[];
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=highlighter.d.ts.map

package/lib/typescript/syntax/highlighter.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/types/shiki.d.ts

@@ -1,15 +1,17 @@
 import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki';
-export type { LanguageInput, ThemedToken, ThemeInput };
-export interface ShikiResult {
-    tokens: ThemedToken[][];
-    bg: string;
-    fg: string;
+export interface TokenType {
+    content: string;
+    color?: string;
+    fontStyle?: string;
 }
 export interface SyntaxHighlighterProps {
     text: string;
-    lang: LanguageInput;
-    langName: string;
+    language: LanguageInput;
+    languageId: string;
     theme: ThemeInput;
-    themeName: string;
+    fontSize?: number;
+}
+export interface TokensResult {
+    tokens: ThemedToken[][];
 }
 //# sourceMappingURL=shiki.d.ts.map

package/lib/typescript/types/shiki.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/utils/string.d.ts

@@ -1,4 +1,4 @@
-import type { TokenType } from '../types';
+import type { TokenType } from '../types/shiki';
 export declare function createContentPreview(tokens: TokenType[], maxLength?: number): string;
 export declare function createLineKey(line: TokenType[], index: number): string;
 export declare function removeExtraIndentation(text: string): string;

package/lib/typescript/utils/string.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/utils/style-transformer.d.ts

@@ -0,0 +1,8 @@
+import type { TextStyle } from 'react-native';
+export interface HighlighterStyleSheet {
+    [key: string]: TextStyle;
+}
+export type ReactStyle = Record<string, TextStyle>;
+export declare function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle;
+export declare function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet;
+//# sourceMappingURL=style-transformer.d.ts.map

package/lib/typescript/utils/style-transformer.d.ts.map

@@ -0,0 +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

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-2",
+  "version": "0.0.37-21",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -34,21 +34,17 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
-    "esbuild": "^0.24.0",
+    "css-to-react-native": "^3.2.0",
     "shiki": "^1.1.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.26.0",
     "@eslint-react/eslint-plugin": "^1.15.0",
     "@types/react": "^18.2.0",
     "@types/react-native": "^0.73.0",
-    "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
-    "metro-react-native-babel-preset": "^0.77.0",
     "react": "^18.2.0",
     "react-native": "^0.73.0",
     "react-native-builder-bob": "^0.30.2",

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,9 +1,9 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
-import React from 'react'
+import type { ReactStyle } from '../../utils/style-transformer'
+import React, { useMemo } from 'react'
 import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
-import { convertShikiTheme } from '../../utils/style-transformer'
-import SyntaxLine from './SyntaxLine'
+import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -12,81 +12,68 @@ const monospaceFont = Platform.select({
 })
 
 const styles = StyleSheet.create({
-  container: {
+  scrollView: {
     flex: 1,
     minHeight: 20,
   },
-  scrollContent: {
-    flexGrow: 1,
-    padding: 8,
-  },
-  contentContainer: {
-    minWidth: '100%',
-  },
-  errorText: {
-    padding: 8,
-    color: '#ff6b6b',
-  },
-  loadingText: {
-    padding: 8,
-    color: '#666666',
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
 })
 
-function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps) {
-  // Convert theme on mount
-  const themeStyles = React.useMemo(() => convertShikiTheme(theme ?? {}), [theme])
-  const { tokens, error, isLoading } = useSyntaxHighlighter({
+const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
+  console.log('theme:', theme)
+  const stylesheet = useMemo(() => {
+    const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
+    console.log('Generated stylesheet:', styles)
+    return styles
+  }, [theme])
+
+  const { tokens } = useSyntaxHighlighter({
     text,
     language,
     languageId,
     theme,
   })
 
-  if (error) {
+  const renderToken = (token: any, index: number, lineIndex: number) => {
+    // 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: string) => 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 (
-      <Text
-        style={[
-          styles.errorText,
-          {
-            fontFamily: monospaceFont,
-            fontSize,
-          },
-        ]}
-      >
-        Error:
-        {' '}
-        {error}
+      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
+        {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
-  if (isLoading) {
+  // In the renderLine and renderToken flow
+  const renderLine = (line: any[], lineIndex: number) => {
+    console.log(`Rendering line ${lineIndex}:`, line)
     return (
-      <Text
-        style={[
-          styles.loadingText,
-          {
-            fontFamily: monospaceFont,
-            fontSize,
-          },
-        ]}
-      >
-        Loading...
-      </Text>
+      <View key={lineIndex} style={styles.lineContainer}>
+        {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
+      </View>
     )
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
-      <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} contentContainerStyle={{ flexGrow: 1 }}>
-        <View style={styles.contentContainer}>
-          {tokens.map((line, lineIndex) => (
-            <SyntaxLine key={`line-${lineIndex}`} line={line} fontSize={fontSize} isLastLine={lineIndex === tokens.length - 1} themeStyles={themeStyles} />
-          ))}
-        </View>
-      </ScrollView>
-    </View>
+    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.scrollView}>
+      <View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</View>
+    </ScrollView>
   )
 }
 

package/src/hooks/useSyntaxHighlighter.ts

@@ -1,6 +1,7 @@
-import type { SyntaxHighlighterProps, ThemedToken, TokensResult } from '../types/shiki'
+import type { ThemedToken } from 'shiki'
+import type { SyntaxHighlighterProps, TokensResult } from '../types/shiki'
 import { useEffect, useState } from 'react'
-import { createHighlighter } from '../syntax'
+import { createHighlighter } from '../syntax/highlighter'
 
 export function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
   const [tokens, setTokens] = useState<ThemedToken[][]>([])
@@ -19,14 +20,22 @@ export function useSyntaxHighlighter({ text, language, languageId, theme }: Synt
       }
 
       try {
+        // First create the highlighter
         const highlighter = await createHighlighter({
           langs: [language],
-          themes: theme ? [theme] : [],
+          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: languageId,
-          theme: theme || 'none',
+          theme: themeResolved,
         }) as TokensResult
 
         if (mounted && result.tokens) {

package/src/index.ts

@@ -1,6 +1,3 @@
 import SyntaxHighlighter from './components/syntax/SyntaxHighlighter'
-import SyntaxLine from './components/syntax/SyntaxLine'
 
-export * from './types/shiki'
-
-export { SyntaxHighlighter, SyntaxLine }
+export { SyntaxHighlighter }

package/src/syntax/{highlighter/index.ts → highlighter.ts}

@@ -1,19 +1,31 @@
 import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
-import type { TokenType } from '../../types'
+import type { TokenType } from '../types/shiki'
 import { createHighlighterCore } from 'shiki/dist/core.mjs'
 import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs'
 
-async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[]): Promise<Awaited<ReturnType<typeof createHighlighterCore>>> {
-  return createHighlighterCore({
-    engine: createJavaScriptRegexEngine(),
-    langs,
-    themes,
-  })
+const engine = createJavaScriptRegexEngine({
+  forgiving: true,
+  simulation: true,
+  cache: new Map(),
+})
+
+async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[]) {
+  try {
+    return await createHighlighterCore({
+      langs,
+      themes,
+      engine,
+    })
+  }
+  catch (err) {
+    console.error('Error initializing highlighter:', err)
+    throw err
+  }
 }
 
-export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] }): Promise<Awaited<ReturnType<typeof createHighlighterCore>>> {
-  if (!langs?.length || !themes?.length) {
-    throw new Error('Please provide both `langs` and `themes` when creating a highlighter.')
+export async function createHighlighter({ langs, themes }: { langs: LanguageInput[], themes: ThemeInput[] }) {
+  if (!langs?.length) {
+    throw new Error('Please provide languages when creating a highlighter.')
   }
 
   try {