react-codemirror-runmode 2.3.0 → 2.4.0

package/test/index.spec.tsx

@@ -203,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.json

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