feat(git): add inline diff syntax highlighting with tokenizer and CSS classes#296
feat(git): add inline diff syntax highlighting with tokenizer and CSS classes#296DeryFerd wants to merge 2 commits into
Conversation
|
Warning Review limit reached
More reviews will be available in 23 minutes and 28 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughIntroduces a new ChangesDiff Syntax Highlighting
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@CodeRabbit review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/renderer/lib/diff-syntax-highlight.ts (1)
85-86: ⚡ Quick winConsider removing unused
PUNCTUATION_REconstant.The
PUNCTUATION_REregex is defined but never referenced. Line 208 marks any remaining character as punctuation without validating against this pattern. If the regex is intended for future use, consider adding a comment; otherwise, remove it to reduce maintenance overhead.♻️ Proposed fix
const NUMBER_RE = /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/ -const PUNCTUATION_RE = /^[{}()[\];:,.<>+\-*/%=!&|^~@#?]$/ function tokenizeLine(line: string): HighlightToken[] {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/renderer/lib/diff-syntax-highlight.ts` around lines 85 - 86, The PUNCTUATION_RE regex constant defined at the beginning of the file is never used anywhere in the code, which adds unnecessary maintenance overhead. Remove the PUNCTUATION_RE constant declaration entirely unless it is explicitly intended for future use, in which case add a clear comment explaining the intended purpose. Since line 208 already handles punctuation classification without reference to this pattern, the constant can be safely deleted.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/renderer/lib/diff-syntax-highlight.ts`:
- Around line 6-79: The KEYWORDS set in the diff-syntax-highlight.ts file
contains a duplicate entry for the keyword 'let', which appears twice in the set
definition. Remove one of the duplicate 'let' entries from the KEYWORDS set to
eliminate unnecessary duplication and improve code clarity for future
maintainers.
---
Nitpick comments:
In `@src/renderer/lib/diff-syntax-highlight.ts`:
- Around line 85-86: The PUNCTUATION_RE regex constant defined at the beginning
of the file is never used anywhere in the code, which adds unnecessary
maintenance overhead. Remove the PUNCTUATION_RE constant declaration entirely
unless it is explicitly intended for future use, in which case add a clear
comment explaining the intended purpose. Since line 208 already handles
punctuation classification without reference to this pattern, the constant can
be safely deleted.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8512b17d-c071-459d-ba5d-d7fd4015f5bb
📒 Files selected for processing (4)
src/renderer/components/git/GitDiffView.tsxsrc/renderer/index.csssrc/renderer/lib/diff-syntax-highlight.test.tssrc/renderer/lib/diff-syntax-highlight.ts
|
✅ Fixed - Code cleanup Removed code quality issues identified by CodeRabbit:
Changes:
No functional changes - pure code cleanup. |
2 participants
Problem
Git diffs in termul show code additions and deletions with colour-coded background lines, but the code itself was plain white text — no syntax highlighting. When reviewing a diff with multiple changed functions, variables, or string literals, you had to mentally parse each line to tell what's a keyword, a string, or a comment.
This adds a lightweight tokenizer that runs on every content line in the diff (context, addition, deletion) and wraps recognised tokens in
<span className="hl-...">elements with colour classes.What changed
New file —
src/renderer/lib/diff-syntax-highlight.tsA standalone tokenizer with no external dependencies. It walks a line character by character and classifies tokens into:
keyword— language keywords (TypeScript, Rust, Python, Go, etc.)string— double-quoted, single-quoted, and backtick template literalscomment—//,#, and/* */stylesnumber— integers, floats, scientific notationpunctuation— brackets, operators, semicolons, colonsplain— everything else (identifiers, whitespace, etc.)The keyword list covers roughly 80 keywords across the languages most commonly seen in a polyglot terminal environment.
New file —
src/renderer/lib/diff-syntax-highlight.test.ts15 tests covering keywords, strings (single, double, template), numbers (int, float), comments (
//,#,/* */), escape sequences inside strings, Rust-specific keywords, the empty string, and a combined expression.Modified —
src/renderer/components/git/GitDiffView.tsxBoth
InlineDiffandSplitCellnow pass their content throughrenderHighlighted(), which callshighlightLine()and maps the returned token array to React nodes. Header and meta lines (file paths, chunk headers) are left unhighlighted since they aren't source code.Modified —
src/renderer/index.cssFive new
@layer componentsrules added:.hl-keyword#c792ea(purple).hl-string#c3e88d(green).hl-comment#676e95(grey italic).hl-number#f78c6c(orange).hl-punctuation#89ddff(cyan)These match the project's existing dark-theme Material palette. No new dependencies, no theme system changes.
Why not use a library
No existing dependency (Prism, Shiki, highlight.js) was already in the project. Pulling one in for a single feature adds bundle weight, a new license, and maintenance surface. The tokenizer is ~130 lines of logic — enough to make diffs significantly more readable without the weight.
Validation
bun run typecheckpassesbun run test— 15 new tests pass covering all token typescontext,addition, anddeletionlines; header/meta lines remain plainSummary by CodeRabbit
Release Notes