github/claude-code-best
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: highlight 缓存改用 LRUCache 降低内存开销

Browse Source 
- Fallback.tsx: 手动 Map LRU 替换为 lru-cache 的 LRUCache
- Markdown.tsx: tokenCache 同样替换为 LRUCache
- color-diff-napi: 新增行级 hljs AST 缓存，避免终端 resize 时重复高亮

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
claude-code-best 2026-04-29 21:59:10 +08:00 committed by James Feng
parent b4629aa5bb
commit d35f0db17d
3 changed files with 154 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
packages/color-diff-napi/src/index.ts
View File

@ -18,26 +18,20 @@
*/
import { diffArrays } from 'diff'
import type * as hljsNamespace from 'highlight.js'
import hljs from 'highlight.js'
import { basename, extname } from 'path'
// Lazy: defers loading highlight.js until first render. The full bundle
// registers 190+ language grammars at require time (~50MB, 100-200ms on
// macOS, several× that on Windows). With a top-level import, any caller
// chunk that reaches this module — including test/preload.ts via
// StructuredDiff.tsx → colorDiff.ts — pays that cost at module-eval time
// and carries the heap for the rest of the process. On Windows CI this
// pushed later tests in the same shard into GC-pause territory and a
// beforeEach/afterEach hook timeout (officialRegistry.test.ts, PR #24150).
// Same lazy pattern the NAPI wrapper used for dlopen.
type HLJSApi = typeof hljsNamespace.default
// Static import — createRequire(import.meta.url) fails in Bun --compile mode
// because the resolved path points to the internal bunfs binary path where
// node_modules cannot be found. A top-level import ensures the module is
// bundled and accessible at runtime.
type HLJSApi = typeof hljs
let cachedHljs: HLJSApi | null = null
function hljs(): HLJSApi {
function hljsApi(): HLJSApi {
if (cachedHljs) return cachedHljs
// eslint-disable-next-line @typescript-eslint/no-require-imports
const mod = require('highlight.js')
// highlight.js uses `export =` (CJS). Under bun/ESM the interop wraps it
// in .default; under node CJS the module IS the API. Check at runtime.
const mod = hljs as HLJSApi & { default?: HLJSApi }
cachedHljs = 'default' in mod && mod.default ? mod.default : mod
return cachedHljs!
}
@ -436,9 +430,9 @@ function detectLanguage(
// Filename-based lookup (handles Dockerfile, Makefile, CMakeLists.txt, etc.)
const stem = base.split('.')[0] ?? ''
const byName = FILENAME_LANGS[base] ?? FILENAME_LANGS[stem]
if (byName && hljs().getLanguage(byName)) return byName
if (byName && hljsApi().getLanguage(byName)) return byName
if (ext) {
const lang = hljs().getLanguage(ext)
const lang = hljsApi().getLanguage(ext)
if (lang) return ext
}
// Shebang / first-line detection (strip UTF-8 BOM)
@ -508,6 +502,50 @@ function hasRootNode(emitter: unknown): emitter is { rootNode: HljsNode } {
let loggedEmitterShapeError = false
// Per-line hljs AST cache — ColorFile.render re-highlights every line on
// width change (terminal resize). The AST is theme-independent; flattenHljs
// applies theme colors separately. Capped at 2048 entries (~1 MB typical).
const HL_LINE_CACHE_MAX = 2048
const hlLineCache = new Map<string, HljsNode | null>()
function cachedHljsAst(
lang: string,
code: string,
): HljsNode | null {
const key = lang + '\0' + code
const hit = hlLineCache.get(key)
if (hit !== undefined) return hit
let result
try {
result = hljsApi().highlight(code, {
language: lang,
ignoreIllegals: true,
})
} catch {
hlLineCache.set(key, null)
return null
}
const emitter = result._emitter || {}
if (!hasRootNode(emitter)) {
if (!loggedEmitterShapeError) {
loggedEmitterShapeError = true
logError(
new Error(
`color-diff: hljs emitter shape mismatch (keys: ${Object.keys(emitter).join(',')}). Syntax highlighting disabled.`,
),
)
}
hlLineCache.set(key, null)
return null
}
const node = emitter.rootNode
if (hlLineCache.size >= HL_LINE_CACHE_MAX) {
const first = hlLineCache.keys().next().value
if (first !== undefined) hlLineCache.delete(first)
}
hlLineCache.set(key, node)
return node
}
function highlightLine(
state: { lang: string | null; stack: unknown },
line: string,
@ -518,30 +556,12 @@ function highlightLine(
if (!state.lang) {
return [[defaultStyle(theme), code]]
}
let result
try {
result = hljs().highlight(code, {
language: state.lang,
ignoreIllegals: true,
})
} catch {
// hljs throws on unknown language despite ignoreIllegals
return [[defaultStyle(theme), code]]
}
const emitter = result._emitter || {};
if (!hasRootNode(emitter)) {
if (!loggedEmitterShapeError) {
loggedEmitterShapeError = true
logError(
new Error(
`color-diff: hljs emitter shape mismatch (keys: ${Object.keys(emitter).join(',')}). Syntax highlighting disabled.`,
),
)
}
const rootNode = cachedHljsAst(state.lang, code)
if (!rootNode) {
return [[defaultStyle(theme), code]]
}
const blocks: Block[] = []
flattenHljs(emitter.rootNode, theme, undefined, blocks)
flattenHljs(rootNode, theme, undefined, blocks)
return blocks
}

90
src/components/HighlightedCode/Fallback.tsx
View File

@ -1,42 +1,34 @@
import { extname } from 'path'
import React, { Suspense, use, useMemo } from 'react'
import { Ansi, Text } from '@anthropic/ink'
import { getCliHighlightPromise } from '../../utils/cliHighlight.js'
import { logForDebugging } from '../../utils/debug.js'
import { convertLeadingTabsToSpaces } from '../../utils/file.js'
import { hashPair } from '../../utils/hash.js'
import { extname } from 'path';
import React, { Suspense, use, useMemo } from 'react';
import { Ansi, Text } from '@anthropic/ink';
import { LRUCache } from 'lru-cache';
import { getCliHighlightPromise } from '../../utils/cliHighlight.js';
import { logForDebugging } from '../../utils/debug.js';
import { convertLeadingTabsToSpaces } from '../../utils/file.js';
import { hashPair } from '../../utils/hash.js';
type Props = {
code: string
filePath: string
dim?: boolean
skipColoring?: boolean
}
code: string;
filePath: string;
dim?: boolean;
skipColoring?: boolean;
};
// Module-level highlight cache — hl.highlight() is the hot cost on virtual-
// scroll remounts. useMemo doesn't survive unmount→remount. Keyed by hash
// of code+language to avoid retaining full source strings (#24180 RSS fix).
const HL_CACHE_MAX = 500
const hlCache = new Map<string, string>()
const hlCache = new LRUCache<string, string>({ max: 500 });
function cachedHighlight(
hl: NonNullable<Awaited<ReturnType<typeof getCliHighlightPromise>>>,
code: string,
language: string,
): string {
const key = hashPair(language, code)
const hit = hlCache.get(key)
if (hit !== undefined) {
hlCache.delete(key)
hlCache.set(key, hit)
return hit
}
const out = hl.highlight(code, { language })
if (hlCache.size >= HL_CACHE_MAX) {
const first = hlCache.keys().next().value
if (first !== undefined) hlCache.delete(first)
}
hlCache.set(key, out)
return out
const key = hashPair(language, code);
const hit = hlCache.get(key);
if (hit !== undefined) return hit;
const out = hl.highlight(code, { language });
hlCache.set(key, out);
return out;
}
export function HighlightedCodeFallback({
@ -45,55 +37,45 @@ export function HighlightedCodeFallback({
dim = false,
skipColoring = false,
}: Props): React.ReactElement {
const codeWithSpaces = convertLeadingTabsToSpaces(code)
const codeWithSpaces = convertLeadingTabsToSpaces(code);
if (skipColoring) {
return (
<Text dimColor={dim}>
<Ansi>{codeWithSpaces}</Ansi>
</Text>
)
);
}
const language = extname(filePath).slice(1)
const language = extname(filePath).slice(1);
return (
<Text dimColor={dim}>
<Suspense fallback={<Ansi>{codeWithSpaces}</Ansi>}>
<Highlighted codeWithSpaces={codeWithSpaces} language={language} />
</Suspense>
</Text>
)
);
}
function Highlighted({
codeWithSpaces,
language,
}: {
codeWithSpaces: string
language: string
}): React.ReactElement {
const hl = use(getCliHighlightPromise())
function Highlighted({ codeWithSpaces, language }: { codeWithSpaces: string; language: string }): React.ReactElement {
const hl = use(getCliHighlightPromise());
const out = useMemo(() => {
if (!hl) return codeWithSpaces
let highlightLang = 'markdown'
if (!hl) return codeWithSpaces;
let highlightLang = 'markdown';
if (language) {
if (hl.supportsLanguage(language)) {
highlightLang = language
highlightLang = language;
} else {
logForDebugging(
`Language not supported while highlighting code, falling back to markdown: ${language}`,
)
logForDebugging(`Language not supported while highlighting code, falling back to markdown: ${language}`);
}
}
try {
return cachedHighlight(hl, codeWithSpaces, highlightLang)
return cachedHighlight(hl, codeWithSpaces, highlightLang);
} catch (e) {
if (e instanceof Error && e.message.includes('Unknown language')) {
logForDebugging(
`Language not supported while highlighting code, falling back to markdown: ${e}`,
)
return cachedHighlight(hl, codeWithSpaces, 'markdown')
logForDebugging(`Language not supported while highlighting code, falling back to markdown: ${e}`);
return cachedHighlight(hl, codeWithSpaces, 'markdown');
}
return codeWithSpaces
return codeWithSpaces;
}
}, [codeWithSpaces, language, hl])
return <Ansi>{out}</Ansi>
}, [codeWithSpaces, language, hl]);
return <Ansi>{out}</Ansi>;
}

148
src/components/Markdown.tsx
View File

@ -1,29 +1,26 @@
import { marked, type Token, type Tokens } from 'marked'
import React, { Suspense, use, useMemo, useRef } from 'react'
import { useSettings } from '../hooks/useSettings.js'
import { Ansi, Box, useTheme } from '@anthropic/ink'
import {
type CliHighlight,
getCliHighlightPromise,
} from '../utils/cliHighlight.js'
import { hashContent } from '../utils/hash.js'
import { configureMarked, formatToken } from '../utils/markdown.js'
import { stripPromptXMLTags } from '../utils/messages.js'
import { MarkdownTable } from './MarkdownTable.js'
import { marked, type Token, type Tokens } from 'marked';
import React, { Suspense, use, useMemo, useRef } from 'react';
import { LRUCache } from 'lru-cache';
import { useSettings } from '../hooks/useSettings.js';
import { Ansi, Box, useTheme } from '@anthropic/ink';
import { type CliHighlight, getCliHighlightPromise } from '../utils/cliHighlight.js';
import { hashContent } from '../utils/hash.js';
import { configureMarked, formatToken } from '../utils/markdown.js';
import { stripPromptXMLTags } from '../utils/messages.js';
import { MarkdownTable } from './MarkdownTable.js';
type Props = {
children: string
children: string;
/** When true, render all text content as dim */
dimColor?: boolean
}
dimColor?: boolean;
};
// Module-level token cache — marked.lexer is the hot cost on virtual-scroll
// remounts (~3ms per message). useMemo doesn't survive unmount→remount, so
// scrolling back to a previously-visible message re-parses. Messages are
// immutable in history; same content → same tokens. Keyed by hash to avoid
// retaining full content strings (turn50→turn99 RSS regression, #24180).
const TOKEN_CACHE_MAX = 500
const tokenCache = new Map<string, Token[]>()
const tokenCache = new LRUCache<string, Token[]>({ max: 500 });
// Characters that indicate markdown syntax. If none are present, skip the
// ~3ms marked.lexer call entirely — render as a single paragraph. Covers
@ -31,11 +28,11 @@ const tokenCache = new Map<string, Token[]>()
// plain sentences. Checked via indexOf (not regex) for speed.
// Single regex: matches any MD marker or ordered-list start (N. at line start).
// One pass instead of 10× includes scans.
const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /
const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
function hasMarkdownSyntax(s: string): boolean {
// Sample first 500 chars — if markdown exists it's usually early (headers,
// code fence, list). Long tool outputs are mostly plain text tails.
return MD_SYNTAX_RE.test(s.length > 500 ? s.slice(0, 500) : s)
return MD_SYNTAX_RE.test(s.length > 500 ? s.slice(0, 500) : s);
}
function cachedLexer(content: string): Token[] {
@ -51,25 +48,14 @@ function cachedLexer(content: string): Token[] {
text: content,
tokens: [{ type: 'text', raw: content, text: content }],
} as Token,
]
];
}
const key = hashContent(content)
const hit = tokenCache.get(key)
if (hit) {
// Promote to MRU — without this the eviction is FIFO (scrolling back to
// an early message evicts the very item you're looking at).
tokenCache.delete(key)
tokenCache.set(key, hit)
return hit
}
const tokens = marked.lexer(content)
if (tokenCache.size >= TOKEN_CACHE_MAX) {
// LRU-ish: drop oldest. Map preserves insertion order.
const first = tokenCache.keys().next().value
if (first !== undefined) tokenCache.delete(first)
}
tokenCache.set(key, tokens)
return tokens
const key = hashContent(content);
const hit = tokenCache.get(key);
if (hit) return hit;
const tokens = marked.lexer(content);
tokenCache.set(key, tokens);
return tokens;
}
/**
@ -78,9 +64,9 @@ function cachedLexer(content: string): Token[] {
* - Other content is rendered as ANSI strings via formatToken
*/
export function Markdown(props: Props): React.ReactNode {
const settings = useSettings()
const settings = useSettings();
if (settings.syntaxHighlightingDisabled) {
return <MarkdownBody {...props} highlight={null} />
return <MarkdownBody {...props} highlight={null} />;
}
// Suspense fallback renders with highlight=null — plain markdown shows
// for ~50ms on first ever render while cli-highlight loads.
@ -88,26 +74,22 @@ export function Markdown(props: Props): React.ReactNode {
<Suspense fallback={<MarkdownBody {...props} highlight={null} />}>
<MarkdownWithHighlight {...props} />
</Suspense>
)
);
}
function MarkdownWithHighlight(props: Props): React.ReactNode {
const highlight = use(getCliHighlightPromise())
return <MarkdownBody {...props} highlight={highlight} />
const highlight = use(getCliHighlightPromise());
return <MarkdownBody {...props} highlight={highlight} />;
}
function MarkdownBody({
children,
dimColor,
highlight,
}: Props & { highlight: CliHighlight | null }): React.ReactNode {
const [theme] = useTheme()
configureMarked()
function MarkdownBody({ children, dimColor, highlight }: Props & { highlight: CliHighlight | null }): React.ReactNode {
const [theme] = useTheme();
configureMarked();
const elements = useMemo(() => {
const tokens = cachedLexer(stripPromptXMLTags(children))
const elements: React.ReactNode[] = []
let nonTableContent = ''
const tokens = cachedLexer(stripPromptXMLTags(children));
const elements: React.ReactNode[] = [];
let nonTableContent = '';
function flushNonTableContent(): void {
if (nonTableContent) {
@ -115,40 +97,34 @@ function MarkdownBody({
<Ansi key={elements.length} dimColor={dimColor}>
{nonTableContent.trim()}
</Ansi>,
)
nonTableContent = ''
);
nonTableContent = '';
}
}
for (const token of tokens) {
if (token.type === 'table') {
flushNonTableContent()
elements.push(
<MarkdownTable
key={elements.length}
token={token as Tokens.Table}
highlight={highlight}
/>,
)
flushNonTableContent();
elements.push(<MarkdownTable key={elements.length} token={token as Tokens.Table} highlight={highlight} />);
} else {
nonTableContent += formatToken(token, theme, 0, null, null, highlight)
nonTableContent += formatToken(token, theme, 0, null, null, highlight);
}
}
flushNonTableContent()
return elements
}, [children, dimColor, highlight, theme])
flushNonTableContent();
return elements;
}, [children, dimColor, highlight, theme]);
return (
<Box flexDirection="column" gap={1}>
{elements}
</Box>
)
);
}
type StreamingProps = {
children: string
}
children: string;
};
/**
* Renders markdown during streaming by splitting at the last top-level block
@ -160,49 +136,47 @@ type StreamingProps = {
* is idempotent and safe under StrictMode double-rendering. Component unmounts
* between turns (streamingText → null), resetting the ref.
*/
export function StreamingMarkdown({
children,
}: StreamingProps): React.ReactNode {
export function StreamingMarkdown({ children }: StreamingProps): React.ReactNode {
// React Compiler: this component reads and writes stablePrefixRef.current
// during render by design. The boundary only advances (monotonic), so
// the ref mutation is idempotent under StrictMode double-render — but the
// compiler can't prove that, and memoizing around the ref reads would
// break the algorithm (stale boundary). Opt out.
'use no memo'
configureMarked()
'use no memo';
configureMarked();
// Strip before boundary tracking so it matches <Markdown>'s stripping
// (line 29). When a closing tag arrives, stripped(N+1) is not a prefix
// of stripped(N), but the startsWith reset below handles that with a
// one-time re-lex on the smaller stripped string.
const stripped = stripPromptXMLTags(children)
const stripped = stripPromptXMLTags(children);
const stablePrefixRef = useRef('')
const stablePrefixRef = useRef('');
// Reset if text was replaced (defensive; normally unmount handles this)
if (!stripped.startsWith(stablePrefixRef.current)) {
stablePrefixRef.current = ''
stablePrefixRef.current = '';
}
// Lex only from current boundary — O(unstable length), not O(full text)
const boundary = stablePrefixRef.current.length
const tokens = marked.lexer(stripped.substring(boundary))
const boundary = stablePrefixRef.current.length;
const tokens = marked.lexer(stripped.substring(boundary));
// Last non-space token is the growing block; everything before is final
let lastContentIdx = tokens.length - 1
let lastContentIdx = tokens.length - 1;
while (lastContentIdx >= 0 && tokens[lastContentIdx]!.type === 'space') {
lastContentIdx--
lastContentIdx--;
}
let advance = 0
let advance = 0;
for (let i = 0; i < lastContentIdx; i++) {
advance += tokens[i]!.raw.length
advance += tokens[i]!.raw.length;
}
if (advance > 0) {
stablePrefixRef.current = stripped.substring(0, boundary + advance)
stablePrefixRef.current = stripped.substring(0, boundary + advance);
}
const stablePrefix = stablePrefixRef.current
const unstableSuffix = stripped.substring(stablePrefix.length)
const stablePrefix = stablePrefixRef.current;
const unstableSuffix = stripped.substring(stablePrefix.length);
// stablePrefix is memoized inside <Markdown> via useMemo([children, ...])
// so it never re-parses as the unstable suffix grows
@ -211,5 +185,5 @@ export function StreamingMarkdown({
{stablePrefix && <Markdown>{stablePrefix}</Markdown>}
{unstableSuffix && <Markdown>{unstableSuffix}</Markdown>}
</Box>
)
);
}