perf(code): replace react-syntax-highlighter and prismjs with the Shiki worker
Route all non-markdown code highlighting through the off-main-thread Shiki worker, removing react-syntax-highlighter and prismjs entirely. - Extend the worker with highlightLines: tokenize a whole block once and return per-line inner HTML, so per-line layouts (diffs, gutters, virtualization) make one worker call instead of one highlighter per line. - Add shared WorkerHighlightedCode (whole-block) and useWorkerHighlightedLines (per-line) primitives. Colors resolve via the --md-syntax-* CSS variables, so theme changes never re-highlight. - Migrate all 12 react-syntax-highlighter call sites: PermissionCard, ToolPart, ContextSidebarTab, ToolOutputDialog (whole block) and DiffPreview/WritePreview (per line). - Migrate VirtualizedCodeBlock off prismjs to the worker, keeping virtua virtualization; whole-block tokenization also restores cross-line syntax context that per-line highlighting lost. - Drop react-syntax-highlighter (+types) from ui and web, prismjs (+types) from ui, and the orphaned create-element type shim.
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { highlightLinesInWorker } from '@/components/chat/markdown/markdown-worker';
|
||||
|
||||
// Tokenize a whole block ONCE in the Shiki worker and expose per-line inner
|
||||
// HTML. For per-line layouts (diffs, gutters, virtualization) that would
|
||||
// otherwise spawn one highlighter per row. Returns `null` until the first
|
||||
// result lands (or permanently on failure) — callers render plain text then.
|
||||
//
|
||||
// Whole-block tokenization also restores cross-line syntax context (multi-line
|
||||
// strings / comments) that independent per-line highlighting loses.
|
||||
export const useWorkerHighlightedLines = (code: string, language: string): string[] | null => {
|
||||
const [lines, setLines] = React.useState<string[] | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
let active = true;
|
||||
setLines(null);
|
||||
void highlightLinesInWorker(code, (language || 'text').toLowerCase()).then((result) => {
|
||||
if (active) setLines(result);
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [code, language]);
|
||||
|
||||
return lines;
|
||||
};
|
||||
Reference in New Issue
Block a user