Data Display

DiffViewer

Read-only unified diff pane with add/remove tinting and line numbers.

Props

DiffLine fields: type ("add" | "del" | "ctx" | "hunk"), content, oldNo?, newNo?.

DiffViewerProps props

Prop	Type	Default	Description
`diff`	`string`	—	Unified diff text, parsed internally. Takes precedence over lines.
`lines`	`DiffLine[]`	—	Pre-parsed diff lines array.
`noGutter`	`boolean`	—	Hide the old/new line-number gutters.

0−-- a/src/utils.ts

0+++ b/src/utils.ts

@@ -3,8 +3,9 @@ export function cx(...classes: unknown[]): string {

33 return classes.filter(Boolean).join(" ");

44}

6−export function formatDate(date: Date): string {

7− return date.toISOString().slice(0, 10);

6+export function formatDate(date: Date, includeTime = false): string {

7+ const iso = date.toISOString();

8+ return includeTime ? iso.slice(0, 19) : iso.slice(0, 10);

89}

910

1011export function parseQuery(input: string): Record<string, string> {

Unified diff

−-- a/src/utils.ts

+++ b/src/utils.ts

@@ -3,8 +3,9 @@ export function cx(...classes: unknown[]): string {

return classes.filter(Boolean).join(" ");

}

−export function formatDate(date: Date): string {

− return date.toISOString().slice(0, 10);

+export function formatDate(date: Date, includeTime = false): string {

+ const iso = date.toISOString();

+ return includeTime ? iso.slice(0, 19) : iso.slice(0, 10);

}

export function parseQuery(input: string): Record<string, string> {

No gutter

ImportTSX

import { DiffViewer, parseUnifiedDiff } from "@solarius/onset";
import type { DiffLine } from "@solarius/onset";