Component reference
DiffBlock
A file diff: removed and added lines with their context.
Preview
DiffBlock has no story of its own; this one draws it as part of a composed scene.
Terminal, file, diff, and search
render: () => (
<Stack>
<TerminalBlock
command="bun test"
cwd="meowland"
exitCode={0}
output={
"\u001b[32mPASS\u001b[0m renderer\n" +
Array.from({ length: 24 }, (_, i) => `case ${i + 1}: passed`).join("\n")
}
/>
<ReadBlock
label="src/main.ts"
totalLines={120}
lines={Array.from({ length: 24 }, (_, i) => ({
number: i + 41,
text: `const item${i} = ${i};`,
highlighted: i === 2,
}))}
/>
<DiffBlock
files={[
{
path: "theme.ts",
lines: [
{ kind: "context", text: "export const theme = {" },
{ kind: "removed", text: " radius: 8," },
{ kind: "added", text: " radius: 16," },
{ kind: "context", text: "};" },
],
},
]}
/>
<SearchBlock
kind="matches"
total={20}
truncated
files={[
{ path: "src/theme.ts", matches: [{ lineNumber: 12, line: "export const theme = {};" }] },
{
path: "src/main.ts",
matches: [{ lineNumber: 4, line: "import { theme } from './theme';" }],
},
]}
/>
</Stack>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { DiffBlock } from "meowtail";
<DiffBlock
files={[
{
path: "theme.ts",
lines: [
{ kind: "context", text: "export const theme = {" },
{ kind: "removed", text: " radius: 8," },
{ kind: "added", text: " radius: 16," },
{ kind: "context", text: "};" },
],
},
]}
/>API reference
Hosts provide semantic diff rows; this view does not infer changes or apply patches.
Props
| Prop | Type | Default |
|---|---|---|
filesRequired | readonly DiffBlockFile[] | – |
maxLines | number | – |
onCopy | (text: string) => Promise<void> | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootlinepath
Registry
The component is registered as diff-block in the meowtail component registry.