prettydiff / prettydiff Goto Github PK

View Code? Open in Web Editor NEW

1.7K 48.0 144.0 24.19 MB

Beautifier and language aware code comparison tool for many languages. It also minifies and a few other things.

Home Page: http://prettydiff.com/

License: Other

JavaScript 0.05% PHP 0.05% TypeScript 85.86% CSS 2.98% HTML 11.06%

beautifier languages diff html javascript java typescript csharp css less

prettydiff's Introduction

Austin Cheney

About Me

If you need a JavaScript/TypeScript developer that enjoys solving new and challenging problems email me at info at prettydiff.com.

Focus

I am currently working on https://github.com/prettydiff/share-file-systems

In this personal project I am trying to solve the problem of decentralization with a focus on privacy, permissions, performance, and automation. Decentralization is likely not what you think it is. For an excellent and mature example of decentralization see the architecture of WebRTC. My current project approaches the application considerations of decentralization far more aggressively than the media considerations defined by WebRTC.

How I Code

My prefered code style is imperative functional, such that code should be portable and not littered with unnecessary decoration or extranous execution steps. This follows a mental model of explicit brevity and expresses a say what you mean, not what you meant to say line of thinking. If you are a prospective employer and want to see how I code please see my homework assignment.

prettydiff's People

Contributors

Stargazers

Watchers

Forkers

hansek cloudappsetup thevolary rtincar dineshkummarc thedustinsmith jesuscript mauricionobrega roablep sasanj hfyiyue tazle udoit leonardothibes zld406504302 nidzix csirvole drecon serus rosshinkley kanitaoru ivansorokin jpdrake banditsmile point-line-surface-body feyyaz-ertugrul steveggoyette cody0755 bitwiseman erezfz astralpeople hengbo12345 ashang guillaume-d areksredzki jschwehn vicykie rnby-mike noscripter histronger joshholl mtco jxav nrkkalyan bloopletech felicienfrancois crypticgator jiushiliu rlugojr hdytsgt zfq308 tidyhuang donovanhiland kriash jamiebuilds mikaelbr neven7 ricegrains tangyiyong theshadow27 hope-onely poioit mobileappvault freakishmr hbcbh1999 gbrault nicholas-b-carter bhainesva robertpd sonalshah9 zhbyak insinger ashishgore therecluse26 aboluo cyw3 jqk6 fossabot nicetester intellectart jcrom ekas donaldjohn red63 fengweijp danielfenghk zhengbao karthikga martinandersen3d camlan1 hardcte bryanjamesmiller wolfargon boragocode ybbxk nguyenchilong systemsplanet-zz laszlokiraly gofullthrottle tinainti

prettydiff's Issues

Extra line space added to SCSS

This sort of code:

.ttl {
  margin-bottom: 10px !important;
  .foo {
      color: red;
     }
}

beautifies to this:

.ttl {
  margin-bottom: 10px !important;
  .foo {
      color: red;
     }

}

There is an empty line before the closing bracket. I would rather that not be there or, if anything, add the empty line AFTER the last bracket.

I logged this first with Atom-Beautify and was told to log it here.

Atom 168.0, Atom Beautify 0.21.2, OS 10.10.1

Error beautifying Mixin comma-separated parameters in LESS

See related issue: Glavin001/atom-beautify#61
/cc @SebKade (the one who originally found this error)

The following LESS code fails for beautification:

// Breaks
// Uses a comma separator, which is valid
//.mixin(@variable, @anotherVariable) {
//}

// No longer breaks
// Use a semicolon instead of comma
.mixin(@variable; @anotherVariable) {
}

// Ok
.mixin(@variable) {
}

Syntax error: unexpected token.

ode_modules/prettydiff/prettydiff.js:7275
.push("</ol><ol class='data'>");
^

I've just comment the specific commit at a5de7be#commitcomment-2799711

Merge mistake?

Breaks interpolated text variables in SCSS files

See attached animated GIF:

This block breaks the code if beautified. The #{$name} must not be broken onto lines.

@mixin text-emphasis-variant($parent, $color) {
  #{$parent} {
    color: $color;
  }
  a#{$parent}:hover {
    color: darken($color, 10%);
  }
}

bower install fails

It can't seem to find the package "insight"

bower insight#*                                               ENOTFOUND Package insight not found

Github Application

Create a Github application so that Pretty Diff execution can be integrated into user repos and automatically extract raw code and issue pull requests once beautified.

Can this be used in a non-Modular javascript application

I'm building an client-side IDE (and node.js is not a choice nor is any CommonJS/AMD library), so my question is, whether it's possible to use pretty-diff without "requiring" the library or not.

Underscore templates

Add support for underscore templates

Exclude tags or pattern from HTML minification

Austin,

There are times when we may need to exclude tags from HTML minification.
One such example is the use of the <pre/> tag which accepts pre-formatted text. Minifying this content affects the output.

example 1:

<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

There are other times outside of the <pre/> tag when one may wish to exclude from minification.

example 2 (Syntax Highlighting):

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

In the above example, the expectation is that the contents within a script block of type "syntaxhighlighter" will be pre-formatted and should not be minified.

Perhaps there's an opportunity to introduce a configuration to exclude tags and/or patterns from minification.

var options = {
  exclude: [
    // pre tag
    '<pre\b[^>]*>(.*?)</pre>',
    // syntaxhighlighter code block
    '<script(?=[^>]*type="syntaxhighlighter")[^>]*>(.*?)</script>'
  ]
};

Thoughts?

Thanks much,
Cary

IE conditional comments

I'm not sure if Pretty-Diff has this feature or not, but I IE conditional comments are removed when minifying HTML.

For example:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

Is there a way to exclude this type of comment from being removed?

Thank you very much!

npm module?

Any plans on converting this into a full-blown npm module? Adding a proper package.json and npm publishing it?

Error in atom when called from "beautify" package

The maintainer of that package asked me to forward this issue to you:

Tried to run "beautify" on a fairly simple SCSS file: http://cl.ly/code/4201472J3l2F/kendoui.scss

and got this error:

Compatibility with jQuery

Hi,

I'm trying to test your plugin but because you use the function name "$" (dollar) your plugin interferes with jQuery. I think it's a pity to make it harder to incorporate your plugin in applications that use jQuery.

Would you, please, consider changing the name to any other name?

Regards,
Martin

PS:

https://github.com/austincheney/Pretty-Diff/blob/master/pd.js - the dollar function is created here

[request] Brackets extension

Your project is very interesting and I'd love to have it as an extension of Brackets and Adobe Edge Code, the open source editor developed completely using Node.js techs, developed by Adobe.

Could be possible to have an extension based on your project?

http://brackets.io

Is there a way to indent with tabs with node-local

I tried using inchar:"\t" and inchar:"an actual tab char here" with insize:"1" but it didn't output tabs, it used spaces.
When I put an x in front of the actual tab in inchar then I get x [tab] x[tab] ... for indenting so something funny going on. might be the shell

I worked around it with perl for the moment:
nodejs $PRETTYDIFF readmethod:"filescreen" mode:"beautify" inchar:"\t" insize:"1" source:"$FILE" | perl -pne 's{\A ((\t)+)}{"\t" x (length($1) / 2)}xmsge'

New node-local.js

I have written a new node-local.js file almost completely from scratch. It is almost entirely asynchronous is every logic decision (file system interaction is completely asynchronous) and this new file is capable of walking entire directory trees provided an option of "readmethod" with new values "auto" or "subdirectory".

Please test it out. It should do more, do it faster, and do it with less code that is easier to read than the older file.

https://gist.github.com/austincheney/8bec07083026952e3723

Bug: Off by one with inline block comments in CSS

This snippet gets modified during beautification:

#frag_header {width: 0px; /* width of ad */height: 0px; /* height of ad */left: 0px;}

gets chopped into

#frag_header {
    width: 0px;
    /* width of ad */
    eight: 0px;
    /* height of ad */
    eft: 0px;
}

Thanks for the great program!

Sort property keys in object literals (and JSON)

Add feature to sort property names of objects.

Comment Card / Feedback system

Create a comment card directly integrated into the dom.js (browser API).

Prettydiff can now perform a git diff like operation directly to the console

I am putting out my latest enhancement for testing. If using the node-local.js file with Node.js and either omitting the "readmethod" option or including the new "diffcli" option with a value of "true" the application does this:

Outputs modifications to the command line.
Modifications will be padded with lines of context. The number of context lines is configurable with the "context" option, but defaults to 2.
Per character changes are bold.
The changes are colored.
After the modifications the files deleted and inserted are listed.

I have also completely rewritten the fuzzy string algorithm for more precise accuracy with far less code.

To play around with this enhancement get the code at:

An example execution from the command line:

> node api/node-local.js source:"../gulp" diff:"../gulpa"

Disable Alphabetic Ordering for LESS/SASS properties

Option for disabling alpha ordering for LESS/SASS as although it improves readability, it affects css application rules:

.example(){
   .base-apple(); // Sets base apple color to red
   .apple-color(@color-green); // Sets apple color to green
}

Becomes:

.example(){
   .apple-color(@color-green); // Sets apple color to green
   .base-apple(); // Overrides apple color to red
}

Sublime Text 2 plugin?

Hello,

I was wondering if you were considering making a prettydiff plugin for Sublime Text 2?

I would use it every day.

Wrapping long lines in diff mode

Very nice output, but for diffing Wikipedia articles, it'd be most useful for very long lines to be wrapped. Otherwise, there's a lot of horizontal scrolling..

SCSS syntax disappear

This is a forward of @gagna 's issue on Atom Beautify.
See Glavin001/atom-beautify#77

When i beautify SCSS my code change from this:

#cta {
  .container {
    .cta--primary {
      &:visited {
           //whatever
      }
      &::before {
           //whatever
      }
    }
  }
}

To:

#cta {
  .container {
    .cta--primary {
      &::before {
        //whatever
      }
    }
  }
}

Scss files indentation

Are Scss files indent incorrectly?

If this is the expected behaviour, is there a setting to prevent indentation alignment?

Code to test:

body {
  background-color: $lightgray-light;
  color: $darkgray-dark;
  font-family: $font-fam1;
  font-size: 14px;
  line-height: 1.43;
  padding-top: 95px;

  &.noscroll {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

incorrect js format

      if (this._hasPushState) {
        $(window).bind('popstate', this.checkUrl);
      } else if ('onhashchange' in window && !oldIE) {
        $(window).bind('hashchange', this.checkUrl);
      } else {
        setInterval(this.checkUrl, this.interval);
      }

$ is replaced with :

JS vars in React JSX tags not color coded in jsscope feature

This is a low priority nice to have.

Adding CodeMirror to Pretty Diff

I am working on adding CodeMirror and could really use some feedback.
http://prettydiff.com/testlocation/

Current Status:
At this time only the "shadow" and "white" color themes are supported and the others will be completed soon. I am horrible at picking colors and any feedback or criticism is certainly appreciated. Aside from colors CodeMirror is fully functionally integrated to the front end. Any functional problems or strange behaviors are errors and should be reported as such.

I have integrated CodeMirror in purely a bolt on fashion, which means it can be instantly removed without harm. This can occur by one of two means:

Simply remove the request for codemirror.js file
Supply "codemirror=false" as a parameter to the page address

I hope this effort is helpful. If this is harmful please let me know as early as possible.

Unexpected Identifier when running under nodejs.

$> node $HOME/source/Pretty-Diff/api/node-local.js source:"$1" readmethod:"filescreen" diff:"$2"

Pretty-Diff/api/node-local.js:215 sdefault: "html .default,body.default{background:url("images/bod ^^^^^^ SyntaxError: Unexpected identifier at Module._compile (module.js:439:25) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Function.Module.runMain (module.js:497:10) at startup (node.js:119:16) at node.js:901:3

Acutally there was another error for an Undefined Variable. but since I first encounter this error, I filed issue like this.

Brackets.io extension

Create an extension for full integration of Pretty Diff into Brackets.io with support for Pretty Diff options.

Here is something to get started: https://github.com/austincheney/prettydiff-brackets

http://brackets.io/

WSH: The end tag does not match the start tag : job

I am trying to run prettydiff.wsf using Windows Script Host.

cscript prettydiff.wsf help

I get the following error:

prettydiff.wsf(337, 41) Windows Script Host: The end tag does not match the start tag : job.

Add support for ES6 template strings

Documentation discrepancy: force_indentation doesn't work, force_indent works

The documentation says:

force_indentation
Allows every piece of code and content in a markup language to be indented without regard for the creation of white space tokens or code semantics.

However, I think the actual API option is "force_indent".

Here's the command I am using:
/usr/bin/node /usr/lib/node_modules/prettydiff/api/node-local.js source:"/tmp/prettydiff1aVuu7Z" mode:"beautify" readmethod:"file" html:"true" insize:"2" force_indent:"true" output:"/tmp/prettydiff2jKU4CO""

Update codemirror to latest version

More specific fuzzy string comparison

The fuzzy string comparison is absolutely desirable for string data, but produces false positives when additional code tokens are added to a given set of code.

New process:

Identify code language to diffview library
If not plain text: in the charcomp component of diffview library reference the appropriate parser
Modify parsers to output a token list and type list if in diff mode
If not plain text: compare strings literally by token and then use fuzzy string comparison only literals or words tokens if the prior and previous tokens match
If plain text compare entire strings in charcomp using existing fuzzy string logic

"Undifined" appeared in the output of diffview

When a line begin is empty,the output of result will contains "Undefined"。
Something is wrong with line 622-623 in the diffview.js
These two lines should be:
ax[i] = "" + (ax[i] || "");
bx[i] = "" + (bx[i] || "");

React v0.12 breaks JSX support in Pretty Diff

JSX in React v0.12 no longer requires the pragma comment. This completely breaks JSX interpretation in Pretty Diff.

Create JSCS like style guide support

Allow users to select from a list of style guides where a value from this list automatically configures the options to conform to certain settings.

could the node-local version output to console if there is no output destination provided?

This is a great tool for tidying up html in the project but could use with the standard console output when running node-local.js

Raw output

Hi, can your tool produce raw output like in the form of Git?
I need to store deltas in the database and your output is rather verbose.
If not, would you be please so kind and point me towards the possible tool?
I need output like:

... changed
changed

Thanks!

Architectural documentation

This project needs formal code/architecture/engineering documentation.

Atom.io extension

Add an extension to Atom.io so as to provide full integration of Prettydiff into the IDE with support for PrettyDiff options.

https://atom.io/

Issue with HTML beautifier and not closing tags and void elements

If I beautify this code:

<a href="#"><img src="#" alt="#"></a>

It becomes:

<a href="#">
    <img src="#" alt="#"></a>

Instead of:

<a href="#">
    <img src="#" alt="#">
</a>

HTML5 do allows tags without the self closing /> tags but just with > so the beautifier should allow us to write in this way as well.

Even, HTML5 do allows us to write this:

<ul><li>one<li>two</ul>

The beautifier formats it in:

<ul>
    <li>one
        <li>two
</ul>

But it should be:

<ul>
    <li>one
    <li>two
</ul>

I think the most important problem is the first one, because HTML5 sets the not-closing tags as prefered.

Thank you

Wrong jsdifflib URL

The link (in prettydiff.js file):

http://snowtide.com/jsdifflib

is obsolete. I believe the correct URL is now:

https://github.com/cemerick/jsdifflib

beautify css adds bad space in less-css syntax: &:extend(.class)

I saw it while using Atom with the Atom Beautify package, and then tested also in prettydiff.com.

Here is the input:

.animal {
    color: red;
}
.dog {
    &:extend(.animal);
    &:hover {
        color: green;
    }
}

And prettydiff generates a space in "&: extend(..." which makes the output an illegal less-css:

.animal {
    color: red;
}
.dog {
    &: extend(.animal);
    &:hover {
        color: green;
    }
}

Can I help to make a quick fix?
Thanks!

Option to keep new line between selectors in SASS

Hi,

I just want to know if there is an option to keep new line between selectors in sass/css/less files.
Like below:

.a {
  color: #fff;

  .b {
    color: #999;
  }
}

not

.a {
  color: #fff;
  .b {
    color: #999;
  }
}

cc @Glavin001