react-codemirror-runmode 2.2.1 → 2.4.0

package/test/index.spec.tsx

@@ -1,12 +1,14 @@
+import { markdownLanguage } from '@codemirror/lang-markdown'
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { Parser } from '@lezer/common'
+import { tagHighlighter, tags } from '@lezer/highlight'
+import { render, screen } from '@testing-library/react'
 // @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))
+const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec))
 
 describe('getCodeParser', () => {
   it('loads a JavaScript parser', async () => {
@@ -133,6 +135,58 @@ describe('Highlight codeblocks', () => {
   })
 })
 
+describe('markdownConfig (GFM)', () => {
+  const strikeHighlighter = tagHighlighter([{ tag: tags.strikethrough, class: 'strike' }])
+
+  it('does not tokenize GFM strikethrough with the default CommonMark base', async () => {
+    const highlighted = await highlightCode(
+      'markdown',
+      '~~gone~~',
+      strikeHighlighter,
+      undefined,
+      undefined,
+      (text, style) => ({ text, style })
+    )
+    expect(highlighted.some(t => t.style === 'strike')).toBe(false)
+  })
+
+  it('tokenizes GFM strikethrough when base is markdownLanguage', async () => {
+    const highlighted = await highlightCode(
+      'markdown',
+      '~~gone~~',
+      strikeHighlighter,
+      undefined,
+      undefined,
+      (text, style) => ({ text, style }),
+      { base: markdownLanguage }
+    )
+    const struck = highlighted.find(t => t.style === 'strike')
+    expect(struck).toBeDefined()
+    expect(struck?.text).toContain('gone')
+  })
+})
+
+describe('multiple highlighters', () => {
+  const highlighterA = tagHighlighter([{ tag: tags.strikethrough, class: 'a-strike' }])
+  const highlighterB = tagHighlighter([{ tag: tags.strikethrough, class: 'b-strike' }])
+
+  it('merges classes emitted by an array of highlighters', async () => {
+    const highlighted = await highlightCode(
+      'markdown',
+      '~~gone~~',
+      [highlighterA, highlighterB],
+      undefined,
+      undefined,
+      (text, style) => ({ text, style }),
+      { base: markdownLanguage }
+    )
+    const struck = highlighted.find(t => t.style?.includes('a-strike'))
+    expect(struck).toBeDefined()
+    expect(struck?.style).toContain('a-strike')
+    expect(struck?.style).toContain('b-strike')
+  })
+})
+
 describe('React Highlighter', () => {
   it('renders highlighted code', async () => {
     const code = 'const x = 123'
@@ -149,4 +203,26 @@ describe('React Highlighter', () => {
     expect(element).toHaveProperty('className', 'ͼp')
     expect(screen.getByText('123')).toHaveProperty('className', 'ͼu')
   })
+
+  it('swaps in a freshly created wrapper once highlighting resolves', async () => {
+    const { container } = render(
+      <code>
+        <Highlighter lang="js" theme={oneDarkHighlightStyle}>
+          {'const x = 123'}
+        </Highlighter>
+      </code>
+    )
+    const pendingWrapper = container.querySelector('code > span')
+    expect(pendingWrapper).not.toBeNull()
+
+    await sleep(100)
+
+    // Reusing the pending element would make React insert every highlighted span
+    // into the already-attached DOM one at a time, which is ~25x slower on large
+    // input. The wrapper must be a genuinely new element.
+    const resolvedWrapper = container.querySelector('code > span')
+    expect(resolvedWrapper).not.toBe(pendingWrapper)
+    expect(resolvedWrapper?.getAttribute('style')).toContain('display: contents')
+    expect(container.textContent).toBe('const x = 123')
+  })
 })

package/test/perf.bench.tsx

@@ -0,0 +1,64 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { createRoot } from 'react-dom/client'
+import { bench, describe } from 'vitest'
+
+import { highlightCode, Highlighter } from '../src'
+
+const page = readFileSync(resolve(process.cwd(), 'test/fixtures/large.html'), 'utf8')
+
+/**
+ * Rendering ~90k spans into jsdom costs seconds per iteration, so the defaults
+ * (5 warmup + 10 timed runs) would take minutes. Keep the run bounded.
+ */
+const RENDER_BENCH_OPTIONS = { time: 0, iterations: 5, warmupTime: 0, warmupIterations: 1 }
+
+/**
+ * Resolves once the highlighted spans are in the document. The pending state is
+ * itself a single wrapper `<span>`, so waiting for *any* span would return
+ * immediately and measure nothing — hence the count.
+ */
+const waitForHighlight = (host: HTMLElement) =>
+  new Promise<void>(resolve => {
+    const poll = () => (host.querySelectorAll('span').length > 1 ? resolve() : setTimeout(poll, 5))
+    poll()
+  })
+
+describe(`html highlighting (${(page.length / 1024).toFixed(0)}KB)`, () => {
+  bench('highlightCode: parse + tokenize', async () => {
+    await highlightCode(
+      'html',
+      page,
+      oneDarkHighlightStyle,
+      undefined,
+      undefined,
+      (text, style, from, to) => ({ text, style, from, to })
+    )
+  })
+
+  // Rendered through createRoot rather than @testing-library/react so the
+  // measurement excludes act() overhead and each iteration starts on an empty DOM.
+  bench(
+    'Highlighter: parse + tokenize + React render into jsdom',
+    async () => {
+      const host = document.createElement('div')
+      document.body.appendChild(host)
+      const root = createRoot(host)
+
+      root.render(
+        <code>
+          <Highlighter lang="html" theme={oneDarkHighlightStyle}>
+            {page}
+          </Highlighter>
+        </code>
+      )
+      await waitForHighlight(host)
+
+      root.unmount()
+      host.remove()
+    },
+    RENDER_BENCH_OPTIONS
+  )
+})

package/tsconfig.build.json

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

package/tsconfig.json

@@ -15,6 +15,8 @@
     "outDir": "dist",
     "declaration": true,
     "declarationDir": "dist",
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
     "skipLibCheck": true
   }
 }

package/vite.config.ts

@@ -1,6 +1,5 @@
-/// <reference types="vitest/config" />
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [react()],

package/.prettierignore

@@ -1,137 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-# IDE
-.idea/
-.vscode/
-
-# Lock files
-pnpm-lock.yaml

package/.prettierrc.json

@@ -1,10 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "singleQuote": true,
-  "bracketSpacing": true,
-  "endOfLine": "lf",
-  "semi": false,
-  "tabWidth": 2,
-  "trailingComma": "none",
-  "plugins": []
-}

package/eslint.config.js

@@ -1,45 +0,0 @@
-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'
-      }
-    }
-  }
-)