scottgonzalez / pretty-diff Goto Github PK

colorized HTML diffs

License: MIT License

JavaScript 85.54% HTML 14.46%

pretty-diff's Introduction

Pretty Diff

Pretty diff generates colorized HTML diffs similar to the diff/commit views on GitHub. Simply use pretty-diff the same way you use git diff and you'll get pretty diffs. If you want to share the diff, you can use gist-diff and you'll get a new gist.

Installation

Simply install globally via npm:

npm install -g pretty-diff

Usage

pretty-diff

pretty-diff has no settings of its own. Simply provide whatever settings you want to pass to git diff.

For example, to see what changed in the last commit:

pretty-diff HEAD^

gist-diff

gist-diff has one setting: --public. By default gist-diff will generate a private gist. If --public is provided, the gist will be public. This setting can be specified anywhere (before or after the git diff settings).

gist-diff will attempt to create the gist using your GitHub account. In order to create the gist with your account, you will be prompted for your password. If you enter no password, then an anonymous gist will be generated. However, if you enter an incorrect password, then no gist will be generated.

Authentication

If you set your GitHub username in your git config, you will only be prompted for your password.

git config --global github.user "Your Username"

To avoid being prompted for your password, you can create a personal access token and store it in your git config. You don't need to set github.user if you're using a token.

git config --global gist-diff.token "Your token"

License

pretty-diff's People

Contributors

Stargazers

Watchers

pretty-diff's Issues

Temp Directory Error on Windows

/tmp or C:\tmp does not exist by default on Windows, so this error is thrown

fs.js:584
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'C:\tmp\diff.html'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.writeFileSync (fs.js:1224:33)
    at generatePrettyDiff (C:\Users\kylepollich\AppData\Roaming\npm\node_modules\pretty-diff\pretty-diff.js:39:5)
    at C:\Users\kylepollich\AppData\Roaming\npm\node_modules\pretty-diff\pretty-diff.js:25:2
    at ChildProcess.<anonymous> (C:\Users\kylepollich\AppData\Roaming\npm\node_modules\pretty-diff\diff.js:30:4)
    at emitTwo (events.js:100:13)
    at ChildProcess.emit (events.js:185:7)
    at maybeClose (internal/child_process.js:827:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

Fails when merge conflict is on deleted file

My git status looks like this:

# You are currently rebasing branch 'pr/443' on '6bfd76e'.
#   (fix conflicts and then run "git rebase --continue")
#   (use "git rebase --skip" to skip this patch)
#   (use "git rebase --abort" to check out the original branch)
#
# Unmerged paths:
#   (use "git reset HEAD <file>..." to unstage)
#   (use "git add/rm <file>..." as appropriate to mark resolution)
#
#   deleted by us:      qunit/qunit.js
#

Running pretty-diff in that context exits with error code 8 and this stack trace:

/usr/local/share/npm/lib/node_modules/pretty-diff/diff.js:38
        files[ filename ].push( line );
                          ^
TypeError: Cannot call method 'push' of undefined
    at /usr/local/share/npm/lib/node_modules/pretty-diff/diff.js:38:21
    at Array.forEach (native)
    at splitByFile (/usr/local/share/npm/lib/node_modules/pretty-diff/diff.js:32:21)
    at ChildProcess.<anonymous> (/usr/local/share/npm/lib/node_modules/pretty-diff/diff.js:23:14)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:735:16)
    at Socket.<anonymous> (child_process.js:948:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

Might be annoying to debug, but maybe the stack trace makes the issue obvious enough.

Implement autocomplete

Whatever git does...

gist-diff on lf v1.0.5 breaks

Improper handling of certain characters

A diff of e3e5a9ffa647937d2dd458114e27e04f56bd47d0^..e3e5a9ffa647937d2dd458114e27e04f56bd47d0 on jquery-ui shows \\{{diff}}amp; in the diff (inside the regex).

Word diffs

There's already a branch for this, but I can't figure out good logic for determining what a "word" is. Looking into the logic used for git instaweb might provide some insight.

Does not work upon comparing files that are not versioned (non git folders)

So, git diff works pretty much without any trouble when you pass it local files that are from in non git versioned folders. Trying to get the same result with pretty-diff is a total fail.

Here is the git diff commands I'm using on a non git folder (working and giving the same result, which is expected)

git diff --word-diff file1.html file2.html
git diff --color-words --word-diff file1.html file2.html
git diff --no-index --color-words --word-diff file1.html file2.html
git diff --no-index --color-words --word-diff -- file1.html file2.html

All of these commands perfectly produces a colored word-diff, and works on non git initialized folders:

I get absolutely no result when trying the same thing with pretty-diff. Is there any configuration option I'm missing somewhere? I thought pretty-diff just "carried out" the args to git diff and expected to work out-of-the-box from what the README states "Simply use pretty-diff the same way you use git diff". Here is a screenshot:

I also tried inserting "diff" between pretty-diff and the rest of the args but it returns "error: not a git repository".

gist-diff error - tty.setRawMode: Use `process.stdin.setRawMode()` instead.

~/dev/my_project (master)> g gd e43bec3 4324b98
GitHub password for benwoodward: tty.setRawMode: Use `process.stdin.setRawMode()` instead.


/Users/benwoodward/dev/pretty-diff/diff.js:4
    var childArgs = args ? [ "diff" ].concat( args.split( /\s/ ) ) : [ "diff" ],
                                                   ^
TypeError: Object e43bec3,4324b98 has no method 'split'
    at module.exports (/Users/benwoodward/dev/pretty-diff/diff.js:4:49)
    at /Users/benwoodward/dev/pretty-diff/gist-diff.js:16:2
    at /Users/benwoodward/dev/pretty-diff/gist-diff.js:96:4
    at ReadStream.<anonymous> (/Users/benwoodward/dev/pretty-diff/gist-diff.js:86:4)
    at ReadStream.EventEmitter.emit (events.js:96:17)
    at TTY.onread (net.js:391:31)

Include line numbers

Currently pretty/gist diffs don't include actual line numbers, while the gist-diff is numbers, but those aren't useful to reference the original lines.

Show "not a git repository" when run on non git folders

I ran pretty-diff in an incorrect folder, which wasn't a git repo, and I got an error saying invalid data, whilst it is totally okay to show this error, it would have been nicer to say invalid git repo.

Does not work with -C option?

Hey,

I'm not sure if you're still working on this thing but I found it and could really use it for a project of mine.
The problem is, that i need to call the script from another directory just like in
git -C diff master

This probably does not work with your script, do you have any Idea or a workaround?

Issues with producing gists

I love that this is an NPM package now!

Lately, we've been getting an issue whenever we try to create a gist-diff:

$ gist-diff master
GitHub username: nhunzaker
GitHub password for nhunzaker:

events.js:71
        throw arguments[1]; // Unhandled 'error' event
                       ^
Error: socket hang up
    at createHangUpError (http.js:1264:15)
    at CleartextStream.socketCloseListener (http.js:1315:23)
    at CleartextStream.EventEmitter.emit (events.js:126:20)
    at SecurePair.destroy (tls.js:938:22)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

Any thoughts on this?

Support split view

Like the new one GitHub has.

Soft-wrap prose documents

Perhaps also increase font size like GitHub does.

gist-diff fails on certain content

Cannot generate a gist from jquery/api.jqueryui.com@e6424a7

Sub-line higlights for changes

I'm not sure how to call this, maybe its actually what the word-diff issue is about. Anyway, I'd like to have a diff like this from pretty-diff: https://github.com/jquery/infrastructure/commit/ab9a2c03d683e8d409800ee0f5a65b6d3373411b

The extra highlights within each line makes it much easier to spot the actual changes.

Got an Error: Problems parsing JSON error when doing gist-diff

I did

gist-diff HEAD^

and was prompted for my password, as expected. But after entering it I got
[Error: Problems parsing JSON]

Any ideas?

Suggestion: modularize into core and multiple reporter modules

My use case requires different HTML markup than pretty-diff produces, so I will need to fork pretty-diff in order to support my needs. Obviously this is not an optimal solution, but I have some ideas on how the pretty-diff architecture could be changed to make it much more flexible to support my and other's needs.

I would suggest modularizing pretty-diff into a core NPM module (perhaps pretty-diff-core), various reporter NPM modules (pretty-diff-reporter-default and pretty-diff-reporter-split), and a CLI module (pretty-diff). The core module would generate an internal structured data model that describes the output of the diff. It would not generate any HTML, its purpose is to perform diffs and return a JSON data model that represents the diff output.

The purpose of a reporter module is to consume a structured JSON data model produced by core and output HTML. The pretty-diff project would provide multiple "official" reporter modules out of the box for default and split views, but anyone else could write their own reporter module that consumes the core data model.

There are features that all reporters should support, such as word-diff and soft-wrap, so a shared implementation of those features could be available as another NPM module (maybe pretty-diff-reporting-utils). Your reporters would depend on it, and others writing reporters could choose to depend on it or could override with their own implementation.

Lastly, the pretty-diff module would simply provide a CLI that can be installed globally as it currently is today. This module would depend on the core and all of the "official" reporters. Git options would be passed to pretty-diff-core from pretty-diff and the JSON output would be sent to a reporter to generate HTML. The CLI could also open the HTML into a browser as it does today. The CLI would provide a way for users to specify which reporter to use with any reporter available as long as the user has npm installed it. Perhaps usage would look like this:

# These use pretty-diff-reporter-default
pretty-diff
pretty-diff --reporter=default
pretty-diff --reporter=pretty-diff-reporter-default
# These use pretty-diff-reporter-split
pretty-diff --reporter=split
pretty-diff --reporter=pretty-diff-reporter-split
# These uses a properly named non-official custom user reporter
pretty-diff --reporter=supercool
pretty-diff --reporter=pretty-diff-reporter-supercool
# These use improperly named non-official custom user reporters
pretty-diff --reporter=tauren-pretty-diff-reporter-kindacool
pretty-diff --reporter=tauren-kindacool-prettydiff-reporter

I'm envisioning a dependency tree like this:

pretty-diff (CLI)
- pretty-diff-core
- pretty-diff-reporter-default
  - pretty-diff-reporting-utils
- pretty-diff-reporter-split
  - pretty-diff-reporting-utils
pretty-diff-reporter-supercool
- pretty-diff-reporting-utils

I considered suggesting a reporter plugin architecture, similar to the way test frameworks support various reporters and plugins (such as Jasmine or Karma). But I think that complicates things more than necessary.

Any thoughts?

Cannot read property 'push' of undefined

Here's what I get while running pretty-diff on master.

$ pretty-diff
/Users/paulirish/.homebrew/lib/node_modules/pretty-diff/diff.js:48
        files[ filename ].push( line );
                         ^
TypeError: Cannot read property 'push' of undefined
    at /Users/paulirish/.homebrew/lib/node_modules/pretty-diff/diff.js:48:20
    at Array.forEach (native)
    at splitByFile (/Users/paulirish/.homebrew/lib/node_modules/pretty-diff/diff.js:35:21)
    at ChildProcess.<anonymous> (/Users/paulirish/.homebrew/lib/node_modules/pretty-diff/diff.js:25:14)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1015:16)
    at Socket.<anonymous> (child_process.js:1183:11)
    at Socket.emit (events.js:107:17)
    at Pipe.close (net.js:485:12)

Syntax highlighting

Like GitHub: https://github.com/blog/1932-syntax-highlighted-diffs