react-codemirror-runmode 2.0.0 → 2.0.2

package/README.md

@@ -20,7 +20,7 @@ import ReactDOM from 'react-dom/client'
 const code = 'const x = 123'
 
 ReactDOM.createRoot(document.getElementById('app')!).render(
-  <Highlighter lang="js" highlightStyle={oneDarkHighlightStyle}>
+  <Highlighter lang="js" theme={oneDarkHighlightStyle}>
     {code}
   </Highlighter>
 )
@@ -37,7 +37,7 @@ You can apply custom themes using CodeMirror's theme system. This component uses
 Props:
 
 - `lang`: `string` - The name of the language
-- `highlightStyle`: [`HighlightStyle`](https://codemirror.net/docs/ref#language.HighlightStyle) - The highlight style
+- `theme`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
 - `children`: `string` - The code to highlight
 
 ### `highlightCode<Output>(languageName, input, highlightStyle, callback): Promise<Output[]>`
@@ -46,7 +46,7 @@ Parameters:
 
 - `languageName`: `string` - The name of the language
 - `input`: `string` - The code to highlight
-- `highlightStyle`: [`HighlightStyle`](https://codemirror.net/docs/ref#language.HighlightStyle) - The highlight style
+- `highlighter`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
 - `callback`: `(text: string, style: string | null, from: number, to: number) => Output)` - A callback function that converts the parsed tokens
 
 ### `getCodeParser(languageName, defaultLanguage?): Promise<Parser | null>`

package/dist/highlight.d.ts

@@ -1,4 +1,5 @@
 import { Parser } from '@lezer/common';
-import { HighlightStyle, Language } from '@codemirror/language';
+import { Language } from '@codemirror/language';
+import { Highlighter } from '@lezer/highlight';
 export declare function getCodeParser(languageName: string, defaultLanguage?: Language): Promise<Parser | null>;
-export declare function highlightCode<Output>(languageName: string, input: string, highlightStyle: HighlightStyle, callback: (text: string, style: string | null, from: number, to: number) => Output): Promise<Output[]>;
+export declare function highlightCode<Output>(languageName: string, input: string, highlighter: Highlighter, callback: (text: string, style: string | null, from: number, to: number) => Output): Promise<Output[]>;

package/dist/highlight.js

@@ -14,13 +14,13 @@ export async function getCodeParser(languageName, defaultLanguage) {
     }
     return defaultLanguage ? defaultLanguage.parser : null;
 }
-export async function highlightCode(languageName, input, highlightStyle, callback) {
+export async function highlightCode(languageName, input, highlighter, callback) {
     const parser = await getCodeParser(languageName);
     if (parser) {
         const tree = parser.parse(input);
         const output = [];
         let pos = 0;
-        highlightTree(tree, highlightStyle, (from, to, classes) => {
+        highlightTree(tree, highlighter, (from, to, classes) => {
             if (from > pos)
                 output.push(callback(input.slice(pos, from), null, pos, from));
             output.push(callback(input.slice(from, to), classes, from, to));

package/dist/react-highlighter.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { HighlightStyle } from '@codemirror/language';
+import type { Highlighter as LezerHighlighter } from '@lezer/highlight';
 export type HighlighterProps = {
     lang: string;
     children: string;
-    highlightStyle: HighlightStyle;
+    theme: LezerHighlighter;
 };
 export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;

package/dist/react-highlighter.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useEffect, useState } from 'react';
-import { highlightCode } from './highlight';
+import { highlightCode } from './highlight.js';
 export const Highlighter = memo((props) => {
-    const { lang, children: code, highlightStyle } = props;
+    const { lang, children: code, theme } = props;
     const [highlightedCode, setHighlightedCode] = useState(null);
     useEffect(() => {
-        highlightCode(lang, code, highlightStyle, (text, style, from) => {
+        highlightCode(lang, code, theme, (text, style, from) => {
             return (_jsx("span", { className: style || '', children: text }, from));
         }).then(setHighlightedCode);
-    }, [lang, code, highlightStyle]);
+    }, [lang, code, theme]);
     return _jsx(_Fragment, { children: highlightedCode || code });
 });
+Highlighter.displayName = 'Highlighter';

package/eslint.config.js

@@ -0,0 +1,45 @@
+import js from '@eslint/js'
+import eslintTs from 'typescript-eslint'
+import eslintReact from 'eslint-plugin-react'
+
+export default eslintTs.config(
+  { ignores: ['dist'] },
+  js.configs.recommended,
+  eslintTs.configs.recommended,
+  eslintReact.configs.flat.recommended,
+  eslintReact.configs.flat['jsx-runtime'],
+  {
+    plugins: {
+      '@typescript-eslint': eslintTs.plugin
+    },
+    rules: {
+      // TypeScript
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_'
+        }
+      ],
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-this-alias': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+
+      // JavaScript and React rules
+      'no-useless-escape': 0,
+      'prefer-const': 2,
+      'no-unused-vars': 0
+    }
+  },
+
+  {
+    settings: {
+      react: {
+        version: '19'
+      }
+    }
+  }
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror-runmode",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Syntax highlighting for react, utilizing CodeMirror's parser",
   "type": "module",
   "main": "dist/index.js",
@@ -31,30 +31,30 @@
     "url": "https://github.com/craftzdog/react-codemirror-runmode.git"
   },
   "dependencies": {
-    "@codemirror/language": "^6.10.1",
+    "@codemirror/language": "^6.11.0",
     "@codemirror/language-data": "^6.5.1",
-    "@lezer/common": "^1.2.1",
-    "@lezer/highlight": "^1.2.0"
+    "@lezer/common": "^1.2.3",
+    "@lezer/highlight": "^1.2.1"
   },
   "peerDependencies": {
     "react": ">= 18"
   },
   "devDependencies": {
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@testing-library/react": "^15.0.7",
-    "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "jsdom": "^24.0.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.13.10",
+    "@types/react": "^19.0.12",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-react": "^7.37.4",
+    "jsdom": "^26.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5",
-    "react": "^18.3.1",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vitest": "^1.6.0"
+    "prettier": "^3.5.3",
+    "react": "^19.0.0",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.27.0",
+    "vite": "^6.2.2",
+    "vitest": "^3.0.9"
   }
 }

package/src/highlight.ts

@@ -1,10 +1,6 @@
 import { Parser } from '@lezer/common'
-import {
-  HighlightStyle,
-  Language,
-  LanguageDescription
-} from '@codemirror/language'
-import { highlightTree } from '@lezer/highlight'
+import { Language, LanguageDescription } from '@codemirror/language'
+import { Highlighter, highlightTree } from '@lezer/highlight'
 import { languages } from '@codemirror/language-data'
 
 export async function getCodeParser(
@@ -28,7 +24,7 @@ export async function getCodeParser(
 export async function highlightCode<Output>(
   languageName: string,
   input: string,
-  highlightStyle: HighlightStyle,
+  highlighter: Highlighter,
   callback: (
     text: string,
     style: string | null,
@@ -41,7 +37,7 @@ export async function highlightCode<Output>(
     const tree = parser.parse(input)
     const output: Array<Output> = []
     let pos = 0
-    highlightTree(tree, highlightStyle, (from, to, classes) => {
+    highlightTree(tree, highlighter, (from, to, classes) => {
       if (from > pos)
         output.push(callback(input.slice(pos, from), null, pos, from))
       output.push(callback(input.slice(from, to), classes, from, to))

package/src/react-highlighter.tsx

@@ -1,15 +1,15 @@
 import React, { memo, useEffect, useState } from 'react'
-import { highlightCode } from './highlight'
-import type { HighlightStyle } from '@codemirror/language'
+import { highlightCode } from './highlight.js'
+import type { Highlighter as LezerHighlighter } from '@lezer/highlight'
 
 export type HighlighterProps = {
   lang: string
   children: string
-  highlightStyle: HighlightStyle
+  theme: LezerHighlighter
 }
 
 export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
-  const { lang, children: code, highlightStyle } = props
+  const { lang, children: code, theme } = props
   const [highlightedCode, setHighlightedCode] = useState<
     React.ReactNode[] | null
   >(null)
@@ -18,7 +18,7 @@ export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
     highlightCode(
       lang,
       code,
-      highlightStyle,
+      theme,
       (text: string, style: string | null, from: number) => {
         return (
           <span key={from} className={style || ''}>
@@ -27,7 +27,8 @@ export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
         )
       }
     ).then(setHighlightedCode)
-  }, [lang, code, highlightStyle])
+  }, [lang, code, theme])
 
   return <>{highlightedCode || code}</>
 })
+Highlighter.displayName = 'Highlighter'

package/test/index.spec.tsx

@@ -70,7 +70,7 @@ describe('React Highlighter', () => {
     const code = 'const x = 123'
     render(
       <code className="mde-preview">
-        <Highlighter lang="js" highlightStyle={oneDarkHighlightStyle}>
+        <Highlighter lang="js" theme={oneDarkHighlightStyle}>
           {code}
         </Highlighter>
       </code>

package/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "lib": ["es2022", "dom"],
+    "lib": ["es2024", "dom"],
     "jsx": "react-jsx",
     "esModuleInterop": true,
     "strict": true,

package/.eslintignore

@@ -1 +0,0 @@
-dist

package/.eslintrc.yml

@@ -1,19 +0,0 @@
-root: true
-extends:
-  - plugin:@typescript-eslint/eslint-recommended
-  - plugin:@typescript-eslint/recommended
-  - prettier
-parser: '@typescript-eslint/parser'
-parserOptions:
-  ecmaVersion: 2022
-  sourceType: 'module'
-rules:
-  no-useless-escape: 0
-  '@typescript-eslint/no-explicit-any': 0
-  '@typescript-eslint/no-unused-vars':
-    - 2
-    - argsIgnorePattern: ^_
-      varsIgnorePattern: ^_
-  '@typescript-eslint/ban-ts-comment': 0
-  '@typescript-eslint/no-this-alias': 0
-  '@typescript-eslint/no-var-requires': 0