rn-shiki 0.0.1

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "rn-shiki",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Shiki syntax highlighter for React Native.",
+  "author": "Ryan Skinner <hello@ryanskinner.com>",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "shiki",
+    "syntax-highlighting",
+    "ios",
+    "android"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/commonjs/index.js"
+    },
+    "./babel": "./babel.cjs"
+  },
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "babel.cjs",
+    "babel.config.cjs",
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typescript": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "shiki": "^1.1.7"
+  },
+  "dependencies": {
+    "shiki": "^1.1.7"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^3.8.0",
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@eslint-react/eslint-plugin": "^1.15.0",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.73.0",
+    "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",
+    "typescript": "^5.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.json"
+        }
+      ]
+    ]
+  }
+}

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -0,0 +1,57 @@
+import type { SupportedLanguage, SupportedTheme } from '../../syntax/highlighter'
+import React from 'react'
+import { Text, View } from 'react-native'
+import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
+
+interface SyntaxHighlighterProps {
+  text: string
+  lang: SupportedLanguage
+  theme?: SupportedTheme
+  fontSize?: number
+}
+
+function SyntaxHighlighter({ text, lang, theme = 'github-dark', fontSize }: SyntaxHighlighterProps) {
+  const { tokens, error, isLoading } = useSyntaxHighlighter({
+    text,
+    lang,
+    theme,
+  })
+
+  if (error) {
+    return (
+      <Text style={{ color: '#ff6b6b', fontFamily: 'monospace', fontSize }}>
+        Error:
+        {error}
+      </Text>
+    )
+  }
+
+  if (isLoading) {
+    return <Text style={{ color: '#f8f8f2', fontFamily: 'monospace', fontSize }}>Loading...</Text>
+  }
+
+  return (
+    <View>
+      {tokens.map((line, lineIndex) => (
+        <View key={`line-${lineIndex}`} style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+          {line.map((token, tokenIndex) => (
+            <Text
+              key={`${lineIndex}-${tokenIndex}`}
+              style={{
+                color: token.color || '#FFFFFF',
+                fontFamily: 'monospace',
+                fontSize,
+                fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
+              }}
+            >
+              {token.content.replace(/ /g, '\u00A0')}
+            </Text>
+          ))}
+          <Text style={{ color: '#FFFFFF', fontFamily: 'monospace', fontSize }}>{'\n'}</Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export default SyntaxHighlighter

package/src/components/syntax/SyntaxLine.tsx

@@ -0,0 +1,34 @@
+import type { TokenType } from '../../types'
+import React from 'react'
+import { Text, View } from 'react-native'
+
+interface SyntaxLineProps {
+  line: TokenType[]
+  fontSize?: number
+}
+
+function SyntaxLine({ line, fontSize }: SyntaxLineProps) {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      {line.map((token, tokenIndex) => {
+        // Preserve whitespace
+        const content = token.content.replace(/ /g, '\u00A0')
+        return (
+          <Text
+            key={`${content}-${tokenIndex}`}
+            style={{
+              color: token.color,
+              fontFamily: 'monospace',
+              fontSize,
+              fontStyle: token.fontStyle as 'normal' | 'italic',
+            }}
+          >
+            {content}
+          </Text>
+        )
+      })}
+    </View>
+  )
+}
+
+export default SyntaxLine

package/src/components/syntax/index.ts

@@ -0,0 +1,2 @@
+export { default as SyntaxHighlighter } from './SyntaxHighlighter'
+export { default as SyntaxLine } from './SyntaxLine'

package/src/hooks/useSyntaxHighlighter.ts

@@ -0,0 +1,65 @@
+import type { BundledLanguage, BundledTheme, ThemedToken } from 'shiki'
+import type { SupportedLanguage, SupportedTheme } from '../syntax/highlighter'
+import { useEffect, useState } from 'react'
+import { createHighlighter } from '../syntax'
+
+interface ShikiResult {
+  tokens: ThemedToken[][]
+  bg: string
+  fg: string
+}
+
+export function useSyntaxHighlighter({ text, lang, theme }: { text: string, lang: BundledLanguage, theme: BundledTheme }) {
+  const [tokens, setTokens] = useState<ThemedToken[][]>([])
+  const [error, setError] = useState<string>()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    let mounted = true
+    setIsLoading(true)
+
+    async function highlight() {
+      if (!text) {
+        setIsLoading(false)
+        setTokens([])
+        return
+      }
+
+      try {
+        const highlighter = await createHighlighter({
+          langs: [lang as SupportedLanguage],
+          themes: [theme as SupportedTheme],
+        })
+
+        const result = highlighter.codeToTokens(text, {
+          lang,
+          theme,
+        }) as ShikiResult
+
+        if (mounted && result.tokens) {
+          setTokens(result.tokens)
+          setError(undefined)
+        }
+      }
+      catch (err) {
+        console.error('Highlighting error:', err)
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Syntax highlighting failed')
+          setTokens([])
+        }
+      }
+      finally {
+        if (mounted) {
+          setIsLoading(false)
+        }
+      }
+    }
+
+    highlight()
+    return () => {
+      mounted = false
+    }
+  }, [text, lang, theme])
+
+  return { tokens, error, isLoading }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { SyntaxHighlighter, SyntaxLine } from './components/syntax'
+export { parseCodeFence } from './syntax'
+export type { ParsedCodeFence } from './syntax'

package/src/syntax/highlighter/index.ts

@@ -0,0 +1,139 @@
+import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
+import type { TokenType } from '../../types'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
+
+// Import languages
+import css from 'shiki/langs/css.mjs'
+import html from 'shiki/langs/html.mjs'
+import javascript from 'shiki/langs/javascript.mjs'
+import json from 'shiki/langs/json.mjs'
+import php from 'shiki/langs/php.mjs'
+import typescript from 'shiki/langs/typescript.mjs'
+
+// Import themes
+import githubDark from 'shiki/themes/github-dark.mjs'
+import githubLight from 'shiki/themes/github-light.mjs'
+
+// Define supported languages and themes explicitly
+export type SupportedLanguage = 'css' | 'html' | 'javascript' | 'json' | 'php' | 'typescript'
+export type SupportedTheme = 'github-dark' | 'github-light'
+
+// Bundled languages mapping - using the imported grammars directly
+const LANGUAGE_IMPORTS: Record<SupportedLanguage, LanguageInput> = {
+  css,
+  html,
+  javascript,
+  json,
+  php,
+  typescript,
+}
+
+// Bundled themes mapping
+const THEME_IMPORTS: Record<SupportedTheme, ThemeInput> = {
+  'github-dark': githubDark,
+  'github-light': githubLight,
+}
+
+// Singleton highlighter instance with tracking
+interface HighlighterInstance {
+  highlighter: Awaited<ReturnType<typeof createHighlighterCore>>
+  loadedLanguages: Set<string>
+  loadedThemes: Set<string>
+}
+
+let highlighterInstance: HighlighterInstance | null = null
+
+interface HighlighterOptions {
+  langs: SupportedLanguage[]
+  themes: SupportedTheme[]
+}
+
+export async function createHighlighter({ langs, themes }: HighlighterOptions) {
+  if (!langs || !themes) {
+    throw new Error('Please provide both `langs` and `themes` when creating a highlighter.')
+  }
+
+  // Return existing instance if already initialized
+  if (highlighterInstance?.highlighter) {
+    // Load any new languages that weren't previously loaded
+    for (const lang of langs) {
+      if (!highlighterInstance.loadedLanguages.has(lang)) {
+        const langData = LANGUAGE_IMPORTS[lang]
+        await highlighterInstance.highlighter.loadLanguage(langData)
+        highlighterInstance.loadedLanguages.add(lang)
+      }
+    }
+
+    // Load any new themes that weren't previously loaded
+    for (const theme of themes) {
+      if (!highlighterInstance.loadedThemes.has(theme)) {
+        const themeData = THEME_IMPORTS[theme]
+        await highlighterInstance.highlighter.loadTheme(themeData)
+        highlighterInstance.loadedThemes.add(theme)
+      }
+    }
+
+    return highlighterInstance.highlighter
+  }
+
+  try {
+    // Create highlighter with initial languages and themes
+    const highlighter = await createHighlighterCore({
+      engine: createJavaScriptRegexEngine(),
+      langs: langs.map(lang => LANGUAGE_IMPORTS[lang]),
+      themes: themes.map(theme => THEME_IMPORTS[theme]),
+    })
+
+    // Store the instance with tracking sets
+    highlighterInstance = {
+      highlighter,
+      loadedLanguages: new Set(langs),
+      loadedThemes: new Set(themes),
+    }
+
+    return highlighter
+  }
+  catch (error) {
+    console.error('Failed to create highlighter:', error)
+    throw error
+  }
+}
+
+// Function to ensure a theme is loaded
+export async function loadTheme(theme: SupportedTheme) {
+  if (!highlighterInstance?.highlighter) {
+    throw new Error('Highlighter not initialized')
+  }
+
+  if (highlighterInstance.loadedThemes.has(theme)) {
+    return
+  }
+
+  const themeData = THEME_IMPORTS[theme]
+  await highlighterInstance.highlighter.loadTheme(themeData)
+  highlighterInstance.loadedThemes.add(theme)
+}
+
+// Function to ensure a language is loaded
+export async function loadLanguage(lang: SupportedLanguage) {
+  if (!highlighterInstance?.highlighter) {
+    throw new Error('Highlighter not initialized')
+  }
+
+  if (highlighterInstance.loadedLanguages.has(lang)) {
+    return
+  }
+
+  const langData = LANGUAGE_IMPORTS[lang]
+  await highlighterInstance.highlighter.loadLanguage(langData)
+  highlighterInstance.loadedLanguages.add(lang)
+}
+
+export function processTokens(tokens: ThemedToken[]): TokenType[] {
+  return tokens.map(token => ({
+    content: token.content,
+    color: token.color || '#000000',
+    fontStyle: token.fontStyle?.toString(),
+  }))
+}

package/src/syntax/index.ts

@@ -0,0 +1,3 @@
+export { createHighlighter, processTokens } from './highlighter'
+export { parseCodeFence } from './parser'
+export type { ParsedCodeFence } from './parser'

package/src/syntax/parser/index.ts

@@ -0,0 +1,32 @@
+import type { BundledLanguage } from 'shiki/langs'
+import type { SupportedLanguage } from '../../syntax/highlighter'
+import { removeExtraIndentation } from '../../utils'
+
+export interface ParsedCodeFence {
+  code: string
+  language: BundledLanguage
+  valid: boolean
+  outsideText: string[]
+}
+
+const CODE_BLOCK_REGEX = /```([a-z0-9]+)?\n([\s\S]*?)\n```/gi
+
+export function parseCodeFence(text: string, defaultLang?: SupportedLanguage): ParsedCodeFence {
+  const matches = [...text.matchAll(CODE_BLOCK_REGEX)]
+  if (matches.length === 0) {
+    return {
+      code: text,
+    } as ParsedCodeFence
+  }
+
+  const code = matches[0]?.[2] || ''
+  const language = (matches[0]?.[1] as unknown as SupportedLanguage) || defaultLang
+  const outsideText = text.split(CODE_BLOCK_REGEX).filter(Boolean)
+
+  return {
+    code: removeExtraIndentation(code),
+    language,
+    valid: true,
+    outsideText,
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,6 @@
+export interface TokenType {
+  content: string
+  color: string
+  fontStyle?: string
+  fontWeight?: string
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './string'

package/src/utils/string.ts

@@ -0,0 +1,37 @@
+import type { TokenType } from '../types'
+
+export function createContentPreview(tokens: TokenType[], maxLength: number = 20): string {
+  return tokens
+    .slice(0, 3)
+    .map(token => token.content)
+    .join('')
+    .slice(0, maxLength)
+}
+
+export function createLineKey(line: TokenType[], index: number) {
+  const contentPreview = createContentPreview(line)
+  return `line-${index}-${contentPreview}`
+}
+
+export function removeExtraIndentation(text: string): string {
+  const preserved = text.replace(/\\n/g, '§NEWLINE§')
+  const lines = preserved.split('\n')
+  const minIndent = Math.min(
+    ...lines
+      .filter(line => line.trim().length > 0)
+      .map(line => line.match(/^\s*/)?.[0].length ?? 0),
+  )
+
+  const normalized = lines
+    .map((line) => {
+      if (line.trim().length === 0)
+        return ''
+
+      const indent = line.match(/^\s*/)?.[0] ?? ''
+      const relativeIndent = ' '.repeat(Math.max(0, indent.length - minIndent))
+      return relativeIndent + line.trim()
+    })
+    .join('\n')
+
+  return normalized.replace(/§NEWLINE§/g, '\\n')
+}