Tesserae - Code Diff

Code Diff

Description

A rendered unified diff, line-by-line or side-by-side

CodeDiff renders unified-diff text (the output of git diff, for example) using the diff2html library. The slim UI bundle and its CSS ship with Tesserae, so there is no preload step.

OutputFormat picks between Format.LineByLine (additions and deletions one after the other, in a single column) and Format.SideBySide (the original on the left, the new file on the right). DrawFileList adds a summary list of the files in the diff above it, and LineMatching controls how diff2html pairs lines between the two sides (None, Lines or Words).

HighlightCode asks diff2html to syntax-highlight the result. That relies on a globally available hljs (highlight.js); it is a no-op when highlight.js is not loaded.

Samples

Line by line

code-diff-line-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var diff = "--- a/greeting.cs\n" +
                       "+++ b/greeting.cs\n" +
                       "@@ -1,3 +1,3 @@\n" +
                       " public static string Greet(string name)\n" +
                       "-    => \"Hello \" + name;\n" +
                       "+    => $\"Hello, {name}!\";\n";

            var component = CodeDiff(diff);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

Side by side, with a file list

code-diff-side-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var diff = "--- a/config.json\n" +
                       "+++ b/config.json\n" +
                       "@@ -1,4 +1,4 @@\n" +
                       " {\n" +
                       "-  \"retries\": 3,\n" +
                       "+  \"retries\": 5,\n" +
                       "   \"timeout\": 30\n" +
                       " }\n";

            var component = CodeDiff(diff, CodeDiff.Format.SideBySide);
            component.DrawFileList = true;

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

API reference

class

CodeDiff

public class CodeDiff : ComponentBase<CodeDiff, HTMLElement>

A component that renders a unified diff using the diff2html library. The slim UI bundle and its CSS are bundled with Tesserae and always available - no preload step is required.

Namespace: Tesserae
Inheritance: ComponentBase<CodeDiff, HTMLElement> → CodeDiff

Constructors

Name	Description
CodeDiff	Initializes a new `CodeDiff` for the given unified diff text.

Constructor

CodeDiff

public CodeDiff(string diff = "", Format format = Format.LineByLine)

Initializes a new CodeDiff for the given unified diff text.

Parameters

diff: Diff text in unified-diff format (e.g. the output of git diff).
format: Whether to render line-by-line or side-by-side.

Properties

Name	Description
DiffText	Gets or sets the unified diff text to render.
OutputFormat	Gets or sets the output layout (line-by-line or side-by-side).
DrawFileList	When `true`, a summary list of files in the diff is rendered above the diff.
HighlightCode	When `true`, asks diff2html to call `highlightCode()` after drawing. This relies on a globally-available `hljs` (highlight.js); it is a no-op if highlight.js is not loaded.
LineMatching	Controls how diff2html matches lines between the two sides.

Property

CodeDiff.DiffText

public string DiffText { get ; set ; }

Gets or sets the unified diff text to render.

Property

CodeDiff.OutputFormat

public Format OutputFormat { get ; set ; }

Gets or sets the output layout (line-by-line or side-by-side).

Property

CodeDiff.DrawFileList

public bool DrawFileList { get ; set ; }

When true, a summary list of files in the diff is rendered above the diff.

Property

CodeDiff.HighlightCode

public bool HighlightCode { get ; set ; }

When true, asks diff2html to call highlightCode() after drawing. This relies on a globally-available hljs (highlight.js); it is a no-op if highlight.js is not loaded.

Property

CodeDiff.LineMatching

public Matching LineMatching { get ; set ; }

Controls how diff2html matches lines between the two sides.

Methods

Name	Description
Render	Renders the component.

Method

CodeDiff.Render

public override HTMLElement Render()

Renders the component.

Code Diff

Description

Samples

Line by line

Side by side, with a file list

API reference

Constructors

CodeDiff

Parameters

Properties

CodeDiff.DiffText

CodeDiff.OutputFormat

CodeDiff.DrawFileList

CodeDiff.HighlightCode

CodeDiff.LineMatching

Methods

CodeDiff.Render

See also