Is there a way to remove the `======` separator that appears at the top of diffs?

[iryan2]

I'm using jsdiff with react-diff-view and am finding myself having to remove the =================================================================== line that appears at the top of the output diff, like so:

    if (lines.length > 0 && lines[0].startsWith("======")) {
        // Find the first --- line and start from there
        const headerStart = lines.findIndex((line) => line.startsWith("---"));
        if (headerStart >= 0) {
            return lines.slice(headerStart).join("\n");
        }
    }

The reason appears to be the same as is described in this issue, in that react-diff-view expects diffs to be in either git diff or unidiff format.

Can you please help me understand why it gets included in jsdiff output, and whether there's a way to prevent it? I'd love to avoid having to strip it myself.

Thanks!

[iryan2]

Closing since I discovered that react-diff-view is expected to be used with unidiff (a jsdiff wrapper), not jsdiff directly.

[ExplodingCabbage]

Hmm. There's some conceptual confusions here.

The patches jsdiff emits are in unified diff format (aka unidiff format). So too are the diffs that Git normally outputs. So when @otakustay says that react-diff-view supports two formats, Git's format and unidiff format, that's already a bit confusing/misleading.

Or at least, we say the patches jsdiff emits are in unified diff format. Unfortunately unified diff format does not have any rigorous written spec, so a notion of what constitutes a "correct" unified diff format patch has to be reverse-engineered from what existing tools do - especially the GNU diff -u and patch -u utils. But tools output different header information - see the writeup that the DiffX guys have at the start of their manual. Whether the line =================================================================== gets included after each Index line (and indeed whether Index lines even get included at all) is one such inconsistency; there are others.

I find the existence of the unidiff package a bit confusing. The README says it "adds support for creating unified diff format to jsdiff" but its initial commit is from June 2016, and jsdiff has had createPatch (which creates a unified diff format patch) since the first revision of the code committed to source control by Kevin in 2011. So, uh, what was unidiff trying to add that jsdiff didn't already have? Perhaps they (IMO wrongly) didn't consider the format with the Index lines and =================================================================== underline to be "unified diff format"? @mvoss9000, perhaps you can she some light on this?

Anyway, my thoughts on how the projects involved should proceed:

• adding options to jsdiff's createPatch et al functions to customise details of the output format - like whether to include Index lines or to underline those lines with equals signs - is a reasonable suggestion. There may well be tools besides react-diff-view which will insist on this.
• possibly that should even be made the default behaviour in the next major release? GNU diff -u does not output index lines, and I like the idea of matching GNU diff as closely as possible by default.
• react-diff-view should probably make its parser more liberal such that it accepts diffs of the kind that jsdiff currently outputs. (Depending on jsdiff and using its parsePatch function would be one way to do this.) I might take a look in due course and open a PR to do that.
• I'm a bit puzzled about the whole unidiff package since its raison d'être seems to be "adding" a feature that jsdiff - which it depends on - already ships with. If it has a good reason to exist that I'm not grasping from a glance at the README, its README should be updated to reflect that. If it doesn't, perhaps the whole package should be deprecated (especially if we first tweak jsdiff to allow omitting the Index and ===...=== lines)?

Thoughts from all @-ed would be welcome!

[iryan2]

Hey @ExplodingCabbage thanks for chiming in, appreciate the input. As you point out, I imagine the confusion relates to the multitude of difference unified diff formats. However, I can't simply use jsdiff instead of unidiff, because jsdiff's createPatch causes react-diff-view to throw errors like "TypeError: Cannot read properties of undefined (reading 'changes')", for the reasons I originally described.

It's not simply that @otakustay is saying that react-diff-view expects a unified diff format, he's specifically saying you need to use the unidiff library with react-diff-view.

Yes, in order to compute a diff between 2 pieces of text, unidiff is a required library
Source

Notice also that @otakustay is one of the few contributors to unidiff. I suspect he's not mistaken when he says they're intended to be used together.

So as much as I would love to not add a dependency on an reasonably unpopular lib that hasn't seen updates in years, it seems like, as long as I want to use react-diff-view, I really have no choice here (other than to write my own code to hack jsdiff's output into something react-diff-view will accept, which is also undesirable).

[ExplodingCabbage]

However, I can't simply use jsdiff instead of unidiff, because jsdiff's createPatch causes react-diff-view to throw errors

Yep, am well aware of this - that's why I propose that react-diff-view should use a more liberal parser so that unidiff ceases to be necessary. I haven't gotten round to opening a PR doing this liberalising, though.

[otakustay]

Hi, I'd like to see an example with both diff generated by jsdiff and unidiff, then I could decide if this is simple to compat in react-diff-view

[ExplodingCabbage]

@otakustay running console.log(diff.createPatch('myfile.txt', 'a quick\nbrown\nfox\njumped\nover\nthe\nlazy\ndog\n', 'a quick\nbrown\ncat\njumped\nat\nthe\nnot-so-lazy\nfox\n')) prints:

Index: myfile.txt
===================================================================
--- myfile.txt
+++ myfile.txt
@@ -1,8 +1,8 @@
 a quick
 brown
-fox
+cat
 jumped
-over
+at
 the
-lazy
-dog
+not-so-lazy
+fox

whereas running console.log(unidiff.diffAsText('a quick\nbrown\nfox\njumped\nover\nthe\nlazy\ndog\n', 'a quick\nbrown\ncat\njumped\nat\nthe\nnot-so-lazy\nfox\n')) prints:

--- a
+++ b
@@ -3 +3 @@
-fox
+cat
@@ -5 +5 @@
-over
+at
@@ -7,2 +7,2 @@
-lazy
-dog
+not-so-lazy
+fox

Differences:

• In a unidiff patch, the old and new file are always named a and b, whereas jsdiff lets (in fact requires) you to specify a filename or filenames
• jsdiff includes an Index: line and a ===================================================================, whereas unidiff omits them
• unidiff defaults to having zero context lines around changes (though this is configurable)