react-codemirror-runmode 1.0.5 → 2.0.1

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "react-codemirror-runmode",
-  "version": "1.0.5",
+  "version": "2.0.1",
   "description": "Syntax highlighting for react, utilizing CodeMirror's parser",
-  "main": "lib/index.js",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "build": "babel src -d lib",
-    "watch": "babel src --watch -d lib",
-    "watch:demo": "webpack --progress --watch --config webpack.config.demo.babel.js",
-    "lint": "eslint src --ext .js --ext .jsx",
-    "test": "mocha --require @babel/register --require test/setup.js",
-    "prepublishOnly": "npm run build && npm run lint && npm test"
+    "build": "tsc --project tsconfig.build.json",
+    "test": "vitest",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm-run-all lint format:check build && npm run test run"
   },
   "keywords": [
-    "remark",
     "react",
     "codemirror",
     "syntax",
@@ -24,35 +30,31 @@
     "type": "git",
     "url": "https://github.com/craftzdog/react-codemirror-runmode.git"
   },
+  "dependencies": {
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/language-data": "^6.5.1",
+    "@lezer/common": "^1.2.1",
+    "@lezer/highlight": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": ">= 18"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.5.5",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "codemirror": "^5.48.2",
-    "core-js": "^3.1.4",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
-    "jsdom": "^15.1.1",
-    "mocha": "^6.2.0",
-    "prettier": "^1.18.2",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
-    "remark": "^11.0.1",
-    "remark-react": "^6.0.0",
-    "webpack": "^4.37.0",
-    "webpack-cli": "^3.3.6"
+    "@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",
+    "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"
   }
 }

package/src/highlight.ts

@@ -0,0 +1,54 @@
+import { Parser } from '@lezer/common'
+import { Language, LanguageDescription } from '@codemirror/language'
+import { Highlighter, highlightTree } from '@lezer/highlight'
+import { languages } from '@codemirror/language-data'
+
+export async function getCodeParser(
+  languageName: string,
+  defaultLanguage?: Language
+): Promise<Parser | null> {
+  if (languageName && languages) {
+    const found = LanguageDescription.matchLanguageName(
+      languages,
+      languageName,
+      true
+    )
+    if (found instanceof LanguageDescription) {
+      if (!found.support) await found.load()
+      return found.support ? found.support.language.parser : null
+    } else if (found) return (found as any).parser
+  }
+  return defaultLanguage ? defaultLanguage.parser : null
+}
+
+export async function highlightCode<Output>(
+  languageName: string,
+  input: string,
+  highlighter: Highlighter,
+  callback: (
+    text: string,
+    style: string | null,
+    from: number,
+    to: number
+  ) => Output
+): Promise<Output[]> {
+  const parser = await getCodeParser(languageName)
+  if (parser) {
+    const tree = parser.parse(input)
+    const output: Array<Output> = []
+    let pos = 0
+    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))
+      pos = to
+    })
+    pos != tree.length &&
+      output.push(
+        callback(input.slice(pos, tree.length), null, pos, tree.length)
+      )
+    return output
+  } else {
+    return [callback(input, null, 0, input.length)]
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './highlight.js'
+export * from './react-highlighter.js'

package/src/react-highlighter.tsx

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

package/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,48 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`highlightCode > highlights JavaScript code 1`] = `
+[
+  {
+    "from": 0,
+    "style": "ͼp",
+    "text": "const",
+    "to": 5,
+  },
+  {
+    "from": 5,
+    "style": null,
+    "text": " ",
+    "to": 6,
+  },
+  {
+    "from": 6,
+    "style": "ͼt",
+    "text": "x",
+    "to": 7,
+  },
+  {
+    "from": 7,
+    "style": null,
+    "text": " ",
+    "to": 8,
+  },
+  {
+    "from": 8,
+    "style": "ͼv",
+    "text": "=",
+    "to": 9,
+  },
+  {
+    "from": 9,
+    "style": null,
+    "text": " ",
+    "to": 10,
+  },
+  {
+    "from": 10,
+    "style": "ͼu",
+    "text": "123",
+    "to": 13,
+  },
+]
+`;

package/test/index.spec.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { Parser } from '@lezer/common'
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { getCodeParser, highlightCode, Highlighter } from '../src'
+import { render, screen } from '@testing-library/react'
+
+const sleep = (msec: number) =>
+  new Promise(resolve => setTimeout(resolve, msec))
+
+describe('getCodeParser', () => {
+  it('loads a JavaScript parser', async () => {
+    const parser = await getCodeParser('js')
+    expect(parser).toBeInstanceOf(Parser)
+  })
+  it('loads a Python parser', async () => {
+    const parser = await getCodeParser('python')
+    expect(parser).toBeInstanceOf(Parser)
+  })
+  it('returns null for non-existing languages', async () => {
+    const parser = await getCodeParser('foobar123')
+    expect(parser).toBeNull()
+  })
+})
+
+describe('highlightCode', () => {
+  it('highlights JavaScript code', async () => {
+    const highlighted = await highlightCode(
+      'js',
+      'const x = 123',
+      oneDarkHighlightStyle,
+      (text, style, from, to) => ({ text, style, from, to })
+    )
+    expect(highlighted).toHaveLength(7)
+    expect(highlighted[0]).toEqual({
+      text: 'const',
+      style: 'ͼp',
+      from: 0,
+      to: 5
+    })
+    expect(highlighted[1]).toEqual({
+      text: ' ',
+      style: null,
+      from: 5,
+      to: 6
+    })
+    expect(highlighted[2]).toEqual({
+      text: 'x',
+      style: 'ͼt',
+      from: 6,
+      to: 7
+    })
+    expect(highlighted[4]).toEqual({
+      text: '=',
+      style: 'ͼv',
+      from: 8,
+      to: 9
+    })
+    expect(highlighted[6]).toEqual({
+      text: '123',
+      style: 'ͼu',
+      from: 10,
+      to: 13
+    })
+  })
+})
+
+describe('React Highlighter', () => {
+  it('renders highlighted code', async () => {
+    const code = 'const x = 123'
+    render(
+      <code className="mde-preview">
+        <Highlighter lang="js" theme={oneDarkHighlightStyle}>
+          {code}
+        </Highlighter>
+      </code>
+    )
+    await sleep(100)
+    const element = screen.getByText('const')
+    expect(element).toBeDefined()
+    expect(element).toHaveProperty('className', 'ͼp')
+    expect(screen.getByText('123')).toHaveProperty('className', 'ͼu')
+  })
+})

package/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["test", "vite.config.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "include": ["src", "test", "vite.config.ts"],
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["es2022", "dom"],
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "strict": true,
+    "isolatedModules": true,
+    "sourceMap": false,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noImplicitAny": false,
+    "outDir": "dist",
+    "declaration": true,
+    "declarationDir": "dist"
+  }
+}

package/vite.config.ts

@@ -0,0 +1,14 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    conditions: ['node']
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom'
+  }
+})

package/.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": { "electron": "3.0.14" },
-      "useBuiltIns": "usage",
-      "debug": false,
-      "corejs": 3
-    }],
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties",
-    "add-module-exports"
-  ]
-}

package/demo/index.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <script src="../node_modules/codemirror/lib/codemirror.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/addon/mode/overlay.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/addon/runmode/runmode.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/mode/meta.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/mode/javascript/javascript.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/mode/markdown/markdown.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/mode/gfm/gfm.js" language="javascript"></script>
-    <script src="../node_modules/codemirror/mode/clike/clike.js" language="javascript"></script>
-    <script src="../node_modules/react/umd/react.development.js" language="javascript"></script>
-    <script src="../node_modules/react-dom/umd/react-dom.development.js" language="javascript"></script>
-  </head>
-  <body>
-    <h1>react-codemirror-runmode demo</h1>
-    <div id="root"></div>
-    <link rel="stylesheet" type="text/css" href="../node_modules/codemirror/lib/codemirror.css" />
-    <link rel="stylesheet" type="text/css" href="../node_modules/codemirror/theme/solarized.css" />
-    <script src="./js/demo.min.js" language="javascript"></script>
-    <style>
-      pre {
-        margin: 0;
-        padding: 1em;
-      }
-    </style>
-  </body>
-</html>

package/demo/js/demo.js

@@ -1,52 +0,0 @@
-import 'core-js/stable'
-import MirrorLight from '../../src/index'
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-const exampleCode = `
-* Incremental highlighted search (/, ?, #, *, g#, g*)
-  * Search/replace with confirm (:substitute, :%s)
-  * Search history
-
-\`\`\`javascript
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class MirrorLight extends React.Component {
-  static propTypes = {
-    codeMirror: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    inline: PropTypes.bool,
-    language: PropTypes.string,
-    prefix: PropTypes.string,
-    subset: PropTypes.arrayOf(PropTypes.string),
-    value: PropTypes.string.isRequired
-  }
-
-  render () {
-    const { inline, codeMirror, value, language, className } = this.props
-    const elements = []
-    codeMirror.runMode(value, language, (token, style) => {
-      elements.push(<span className={style}>{token}</span>)
-    })
-    const code = (
-      <code className={inline ? 'inline' : ''}>
-        {elements}
-      </code>
-    )
-
-    return inline ? code : <pre className={className}>{code}</pre>
-  }
-}
-\`\`\`
-`
-
-ReactDOM.render(
-  <MirrorLight
-    codeMirror={CodeMirror}
-    theme="solarized"
-    value={exampleCode}
-    language="gfm"
-  />,
-  document.getElementById('root')
-)