Diff views for lit-material: line diff of two texts (unified or side by side), a list of changes by path, and a three-way merge view.
4.7 KB gzipped
@lit-material/diff 0.0.0
Renders on the server
Example
Diff
How a text changed, line by line, in one column or side by side. Unchanged runs fold down to a few lines of context, and a screen reader hears each line as added or removed.
For structured data, such as two JSON responses or two sets of headers, list what changed at each path instead of diffing lines.
$.statuschangedpending→toready
$.replicaschanged1→to3
$.endpointadded
https://api.example.com
$.errorremovedimage pull failed
Merge view
Two versions that both changed a common base, next to the base. Each one marks what it added or changed and counts what it dropped. Put actions for a version in its side-<index> slot.
Mine (this device)
1 new or changed
GET /users
Accept: application/json
New: X-Trace: on
Theirs (the server)
1 new or changed, 1 dropped
New: GET /users?page=2
Accept: application/json
Before both changes
Base
GET /users
Accept: application/json
Without a DOM
diffLines, sideBySide, hunks and stats work in Node and workers:
Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-change-list>
A list of changes by path: what was added, removed or changed, with the
old and new values. For structured data (JSON fields, headers, settings)
where a line diff would be noise.
Properties
Property
Attribute
Type
Default
Description
changes
changes
Change[]
[]
The changes, in the order to show them.
label
label
string
"Changes"
Accessible name of the list.
CSS parts
Part
Description
list
The <ul>.
item
Each change.
path
The path of each change.
<lit-material-diff>
Shows how one text changed into another, line by line: one column with
+ and - lines (unified), or the two texts side by side (split).
Properties
Property
Attribute
Type
Default
Description
original
original
string
""
The text before the change.
modified
modified
string
""
The text after the change.
mode
mode
DiffMode
"unified"
unified (one column) or split (side by side).
context
context
number
3
Unchanged lines kept around each change; -1 keeps every line.
label
label
string
"Changes"
Accessible name of the table, such as "Changes to config.yaml".
originalLabel
original-label
string
"Before"
Column heading for the original side.
modifiedLabel
modified-label
string
"After"
Column heading for the modified side.
hideStats
hide-stats
boolean
false
Hides the added and removed counts.
diff
property only
DiffLine[]
none
The diff as lines, for code that wants it without rendering.
CSS parts
Part
Description
table
The table of lines.
stats
The added and removed counts.
CSS custom properties
Property
Description
--lit-material-diff-added-background
Background of added lines.
--lit-material-diff-added-color
Text colour of added lines.
--lit-material-diff-removed-background
Background of removed lines.
--lit-material-diff-removed-color
Text colour of removed lines.
--lit-material-diff-font
Font of the lines (a monospace stack).
--lit-material-diff-max-height
Height after which the lines scroll (default none).
<lit-material-merge-view>
Two or more versions of one text side by side, each compared with a
common base: lines a version added or changed are highlighted, and lines
it dropped are counted. For sync conflicts and three-way merges ("mine",
"theirs", "before both changes").
Properties
Property
Attribute
Type
Default
Description
sides
sides
MergeSide[]
[]
The versions, each with a label and its text.
base
base
number
0
Index of the side the others are compared with.
Slots
Slot
Description
side-0
Actions under the first side's heading; side-1, side-2 and so on for the others.
CSS parts
Part
Description
side
Each column.
heading
Each column's heading.
lines
Each column's lines.
CSS custom properties
Property
Description
--lit-material-diff-max-height
Height after which each column scrolls (default 24rem).