UIDiffRenderer

Preview

Unified diff

2 files changed

▶∙src/index.ts+2-1

	@@ -1,5 +1,6 @@
1	import { serve } from "bun";
2	import { logger } from "./logger";
3	const server = serve({
3	port: 3000,
4	port: process.env.PORT || 3000,
5	fetch(req) {

▶+src/logger.ts+4

	@@ -0,0 +1,4 @@
1	export function logger(msg: string) {
2	const timestamp = new Date().toISOString();
3	console.log(`[${timestamp}] ${msg}`);
4	}

Split diff

2 files changed

▶∙src/index.ts+2-1

				@@ -1,5 +1,6 @@
1	import { serve } from "bun";		1	import { serve } from "bun";
			2	import { logger } from "./logger";
2	const server = serve({		3	const server = serve({
3	port: 3000,		4	port: process.env.PORT || 3000,
4	fetch(req) {		5	fetch(req) {

▶+src/logger.ts+4

				@@ -0,0 +1,4 @@
			1	export function logger(msg: string) {
			2	const timestamp = new Date().toISOString();
			3	console.log(`[${timestamp}] ${msg}`);
			4	}

Key Props

Prop	Type	Default	Description
files	DiffFile[]	required	Parsed diff files (use parseDiff())
viewMode	"unified" | "split"	"unified"	Display mode
activeFile	string	—	Currently focused file path
expandedFiles	Set<string>	all expanded	Which files are expanded
onToggleFile	(path: string) => void	—	Called when a file header is toggled
onViewModeChange	(mode: DiffViewMode) => void	—	Called when view mode toggles
syntaxHighlighter	DiffSyntaxHighlighter	fallback	Custom syntax highlighting function
showToolbar	boolean	true	Shows the unified/split toggle toolbar
compact	boolean	false	Compact mode with smaller fonts

Usage

import { UIDiffRenderer, parseDiff } from "tango-api";

const files = parseDiff(unifiedDiffString);

<UIDiffRenderer files={files} viewMode="unified" />