<basic-diff-view-element>

A minimal version of <diff-view-element>. It does not implement PrismJS for syntax highlighting.

Examples

RTL

A large example

RTL

Disabling line numbers

Line numbers can be disabled by adding the disable-line-numbers attribute.

RTL

Changing the starting line number

The starting line number can be changed by using the line-number-start attribute.

RTL

Slotting in content

Content can be slotted in using <script type="text/plain"> tags. Do note, it will only escape </script> and turn it in to </script>. It will not escape any HTML for you.

As for why a <script type="text/plain"> is preferred, check out the docs on “Why Script Tags”

Slotted content will have extra leading / trailing whitespace stripped, will be “dedented” for you.

RTL

Preserving whitespace

Whitespace can be preserved by using preserve-whitespace which will also preserve leading / trailing new lines as well as disable “dedenting” of the strings.

RTL

Future ideas

- “Unified view” where diffs are rendered inline instead of 2 different views
- Render functions for additional things like buttons
- Code folding
- File names
- Displaying number of diffs in a file
- Expose more types of diffs (words / sentences / json / css, etc)

Got an idea? I’d love to hear it!

https://github.com/KonnorRogers/diff-view-element/issues

API Reference

Imports

Script

HTML

<!-- Auto registers as <basic-diff-view-element> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/basic-diff-view-element/basic-diff-view-element-register.js"></script>

CDN

HTML

<script type="module">
  // Auto registers as <basic-diff-view-element>
  import "https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/basic-diff-view-element/basic-diff-view-element-register.js"

  // Manual Register
  import BasicDiffViewElement from "https://cdn.jsdelivr.net/npm/diff-view-element/cdn/exports/components/basic-diff-view-element/basic-diff-view-element.js"
  BasicDiffViewElement.define()
  // => Registers as <basic-diff-view-element>
</script>

Bundler

JavaScript

// Auto registers as <basic-diff-view-element>
import "diff-view-element/exports/components/basic-diff-view-element/basic-diff-view-element-register.js"

// Manual Register
import BasicDiffViewElement "diff-view-element/exports/components/basic-diff-view-element/basic-diff-view-element.js"
BasicDiffViewElement.define()
// => Registers as <basic-diff-view-element>

Functions

Name	Description	Parameters
`handleTablePointerUp()`	Remove the “active-side” from the table element	`e: PointerEvent`
`handleTablePointerDown()`	Handles “pointerdown” events on the table. This is used for determined what side is “active” so that you could only ever “select” one side of the diff.	`e: PointerEvent`
`handleSlottedValues()`	Turns slotted elements into strings to be consumed by oldValue / newValue.	`e: Event`
`renderDiff()`	The base entrypoint for rendering diffs. The return value of this will be inside of a `<tbody>`	`data: ReturnType<typeof computeLineInformation>`
`renderLine()`	Renders a line on 1 side of the diff in split view.	`diffInfo: DiffInformation`
`renderValue()`	Renders a value given a DiffInformation object	`obj: DiffInformation`
`toCharacterData()`	A helper for finding data for a particular diff. This is useful for passing data further down especially for character diffs.	`diffInfo: DiffInformation, diffInfoLine: DiffInformation, index: number`
`transformLineInformation()`	In charge of altering the diffs per-line information. This will get called just before rendering all of the `<tr>`s inside of `renderDiff`.	`lineInformation: LineInformation[]`
`getTextDirection()`	Gets directionality of the element	-

<diff-view-element>