feat(opentui): publish reusable diff component#182
Conversation
Expose Hunk's single-file diff view as a typed npm entrypoint so other OpenTUI apps can render diffs with the same terminal-native UI.
Greptile SummaryThis PR publishes a new reusable Key changes:
Issues found:
Confidence Score: 4/5Safe to merge after resolving the peerDeps/dependencies duplication, which risks broken React hooks for library consumers One P1 finding (React and OpenTUI listed in both
|
| Filename | Overview |
|---|---|
| package.json | Adds exports map and peerDependencies; @opentui/core, @opentui/react, and react are duplicated across both dependencies and peerDependencies, which can cause duplicate React instances for library consumers |
| src/ui/diff/useHighlightedDiff.ts | Adds metadataFingerprint fallback for zero-length patch; works correctly, but JSON-serializes the full hunks structure on every render cycle for patch-less files |
| src/opentui/HunkDiffView.tsx | Clean new component: adapts the public diff shape to the internal model, wires up highlighting + row building, and handles empty/no-diff states correctly |
| tsconfig.opentui.json | Correct for generating declarations, but emitDeclarationOnly with transitive imports will emit .d.ts files for all internal src/ui/ and src/core/ files into the published package |
| src/opentui/HunkDiffView.test.tsx | Well-structured integration test using the public entrypoint; covers rendering and theme-name export contract |
| scripts/build-npm.sh | Adds a second Bun build pass for the OpenTUI library bundle with correct externals, followed by tsc for declarations |
| src/opentui/index.ts | Clean barrel re-exporting the public API surface: component, types, theme names, and @pierre/diffs helpers |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["Consumer: import { HunkDiffView } from 'hunkdiff'"] --> B["src/opentui/index.ts"]
B --> C["HunkDiffView component"]
B --> D["Re-exports: parseDiffFromFile\nparsePatchFiles\nFileDiffMetadata"]
D --> E["@pierre/diffs"]
C --> F["toInternalDiffFile()\nAdapts HunkDiffFile → DiffFile"]
F --> G["useHighlightedDiff()"]
G --> H{"patch.length === 0?"}
H -- "yes (library path)" --> I["metadataFingerprint()\nJSON.stringify hunks"]
H -- "no (CLI path)" --> J["patchFingerprint()\nSubstring-based hash"]
I --> K["buildCacheKey → highlight cache"]
J --> K
K --> L["loadHighlightedDiff()"]
L --> M["buildSplitRows / buildStackRows"]
M --> N["DiffRowView → scrollbox/box"]
N --> O["OpenTUI terminal render"]
Reviews (1): Last reviewed commit: "feat(opentui): publish reusable diff com..." | Re-trigger Greptile
Show how to embed HunkDiffView from before/after contents and from raw patch text so OpenTUI consumers have concrete starting points.
|
oooh nice! was gonna request this! |
Let OpenTUI consumers switch between split and stack layouts directly in the runnable example, and fix the header rows so the controls render cleanly in narrow terminals.
Avoid duplicate React/OpenTUI installs for consumers, keep the public import path explicit, replace the expensive patch-less highlight fingerprint, and publish only the OpenTUI declaration files.
Summary
HunkDiffViewas a typedhunkdiff/hunkdiff/opentuientrypoint for OpenTUI appsTesting