scottgonzalez / pretty-diff Goto Github PK
View Code? Open in Web Editor NEWcolorized HTML diffs
License: MIT License
colorized HTML diffs
License: MIT License
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?
Like the new one GitHub has.
Whatever git does...
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
.
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)
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?
Cannot generate a gist from jquery/api.jqueryui.com@e6424a7
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.
A diff of e3e5a9ffa647937d2dd458114e27e04f56bd47d0^..e3e5a9ffa647937d2dd458114e27e04f56bd47d0
on jquery-ui shows \\{{diff}}amp;
in the diff (inside the regex).
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.
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?
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.
/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)
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 install
ed 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:
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?
~/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)
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.
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".
Perhaps also increase font size like GitHub does.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.