[PR #621] feat(diff): add SlottableDiff #664

New issue

Open

opened 2026-03-02 23:47:34 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 23:47:34 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/621
Author: @ishaksebsib
Created: 2/3/2026
Status: 🔄 Open

Base: main ← Head: feat/slottableDiff

📝 Commits (6)

4dcb052 feat(diff): add interactive diff with slot support
69dfb1e feat(examples): add example for interactive diff using SlottableDiff
bf4130f perf(core): optimize SlottableDiff with surgical slot updates
74dd8bf fix(diff): ensure syntax-highlighted lines fill full background
09dc50c perf(diff): add virtualization when enabled only visible diifs are rendered
85eab04 feat(diff): support wrapMode

📊 Changes

7 files changed (+1763 additions, -30 deletions)

View changed files

📝 packages/core/src/renderables/Diff.ts (+30 -30)
➕ packages/core/src/renderables/DiffLine.ts (+465 -0)
➕ packages/core/src/renderables/SlottableDiff.ts (+959 -0)
📝 packages/core/src/renderables/index.ts (+2 -0)
📝 packages/solid/examples/components/ExampleSelector.tsx (+9 -0)
➕ packages/solid/examples/components/interactive-diff-demo.tsx (+294 -0)
📝 packages/solid/src/elements/index.ts (+4 -0)

📄 Description

Summary

Adds a new SlottableDiffRenderable component that renders each diff line as a separate interactive element, enabling slots for inline content like comment boxes.

Why

The existing DiffRenderable component renders the entire diff as a monolithic CodeRenderable, which provides excellent performance for viewing but doesn't allow for interactivity. Each line is just part of a large text buffer with no individual identity or click handling.

Changes

DiffLine.ts: New DiffLineRenderable component for individual diff lines with click support, line numbers, and syntax highlighting
SlottableDiff.ts: New SlottableDiffRenderable that extends DiffRenderable with insertSlot()/removeSlot()/onLineClick methods for injecting arbitrary content between lines
Diff.ts: Made private properties/methods protected to enable inheritance by SlottableDiff
Demo: Added interactive-diff-demo.tsx examples showing click-to-comment functionality *interactive using the portal pattern

Features

Click any diff line to trigger onLineClick callback
Insert custom UI elements (input boxes, comments) between lines via slots
Works with both unified and split views

Performance

Virtualization: When virtualize is enabled, only the visible range is rendered with configurable overscan padding.
Surgical slot updates No full rebuilds on slot changes Instead of rebuilding all lines when adding/removing slots (O(n) operation), the component tracks visual rows via _visualRows array and uses insertBefore() to place slots at the exact position (O(1) operation)
Slot management: insertSlot() checks if the slot already exists and only performs manipulation when necessary
Efficient slot removal: Removing a slot doesn;t triggers a full view rebuild - only the slot is removed and render is requested

Example Use Case

Interactive code review where users can click on diff lines to add inline comments, similar to GitHub's PR review interface.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/621 **Author:** [@ishaksebsib](https://github.com/ishaksebsib) **Created:** 2/3/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/slottableDiff` --- ### 📝 Commits (6) - [`4dcb052`](https://github.com/anomalyco/opentui/commit/4dcb0526ae2e65160c747f4101d80929f89d77d4) feat(diff): add interactive diff with slot support - [`69dfb1e`](https://github.com/anomalyco/opentui/commit/69dfb1efeeca191ca79e49d1e716de4a6e4fdd95) feat(examples): add example for interactive diff using SlottableDiff - [`bf4130f`](https://github.com/anomalyco/opentui/commit/bf4130fa3226750a1eaf9c7d6b2c7edcc6865792) perf(core): optimize SlottableDiff with surgical slot updates - [`74dd8bf`](https://github.com/anomalyco/opentui/commit/74dd8bfffbaeeb5dd08a0cd295b92715d9ae1c12) fix(diff): ensure syntax-highlighted lines fill full background - [`09dc50c`](https://github.com/anomalyco/opentui/commit/09dc50c4326eb961f6095377f12038338d429969) perf(diff): add virtualization when enabled only visible diifs are rendered - [`85eab04`](https://github.com/anomalyco/opentui/commit/85eab0421588fd616ea30d8144d78e90875d558e) feat(diff): support wrapMode ### 📊 Changes **7 files changed** (+1763 additions, -30 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/renderables/Diff.ts` (+30 -30) ➕ `packages/core/src/renderables/DiffLine.ts` (+465 -0) ➕ `packages/core/src/renderables/SlottableDiff.ts` (+959 -0) 📝 `packages/core/src/renderables/index.ts` (+2 -0) 📝 `packages/solid/examples/components/ExampleSelector.tsx` (+9 -0) ➕ `packages/solid/examples/components/interactive-diff-demo.tsx` (+294 -0) 📝 `packages/solid/src/elements/index.ts` (+4 -0) </details> ### 📄 Description ## Summary Adds a new `SlottableDiffRenderable` component that renders each diff line as a separate interactive element, enabling slots for inline content like comment boxes. ## Why The existing `DiffRenderable` component renders the entire diff as a monolithic `CodeRenderable`, which provides excellent performance for viewing but doesn't allow for interactivity. Each line is just part of a large text buffer with no individual identity or click handling. ## Changes - **DiffLine.ts**: New `DiffLineRenderable` component for individual diff lines with click support, line numbers, and syntax highlighting - **SlottableDiff.ts**: New `SlottableDiffRenderable` that extends `DiffRenderable` with `insertSlot()`/`removeSlot()`/`onLineClick` methods for injecting arbitrary content between lines - **Diff.ts**: Made private properties/methods `protected` to enable inheritance by SlottableDiff - **Demo**: Added `interactive-diff-demo.tsx` examples showing click-to-comment functionality *interactive using the portal pattern ## Features - Click any diff line to trigger `onLineClick` callback - Insert custom UI elements (input boxes, comments) between lines via slots - Works with both unified and split views ## Performance - **Virtualization**: When `virtualize` is enabled, only the visible range is rendered with configurable `overscan` padding. - **Surgical slot updates** No full rebuilds on slot changes Instead of rebuilding all lines when adding/removing slots (O(n) operation), the component tracks visual rows via `_visualRows` array and uses `insertBefore()` to place slots at the exact position (O(1) operation) - **Slot management**: `insertSlot()` checks if the slot already exists and only performs manipulation when necessary - **Efficient slot removal**: Removing a slot doesn;t triggers a full view rebuild - only the slot is removed and render is requested ## Example Use Case Interactive code review where users can click on diff lines to add inline comments, similar to GitHub's PR review interface. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>