Pretty Diff - Documentation

Explore some samples. For any questions, comments, requests, or feedback please join the Pretty Diff mailing list or chat on Gitter. Find Pretty Diff on GitHub.

About This Application

Introduction

This tool was originally created to compare minified code by attaching a beautifier and minifier to a file comparison tool. Over the years it has grown

License

@source http://prettydiff.com/prettydiff.js

@documentation - English http://prettydiff.com/documentation.php

@licstart The following is the entire license notice for Pretty Diff.

This code may not be used or redistributed unless the following conditions are

If each and all these conditions are met use, extension, alteration, and

@licend The above is the entire license notice for Pretty Diff.

Informational Guides

  1. Using jsscope to understand scope, inheritance, and scope chains in JavaScript
  2. Ignoring specified tags from markup beautification
  3. So its kind of like recursive command line diff, but in JavaScript
  4. Processing the JSX format from Facebook's React
  5. Saving colorful JavaScript code samples
  6. Conforming to popular style guides with the styleguide option
  7. What Pretty Diff can do to auto-correct some sloppiness in JavaScript.
  8. Brief overview of the prettydiff.js code architecture

Unrelated Guides

  1. The DOM Explained, Quick and Simple
  2. A/B Testing for the Web
  3. Explaining Closure To A Child
  4. Becoming a JavaScript Rock Star (In the Real World)

Known Issues

  1. Webkit browsers, such as Google Chrome and Apple Safari, do not support beautification of white space characters or layout in textarea elements. As a result the web interface offers a slightly degraded experience for these 51168 and 90739.
  2. Markup beautification will output flawed data if less than characters, "<", are included into sections of content and not escaped or wrapped in script/style

Execution

Web Tool URI Parameters

  1. c - This parameter receives the name of a supported color scheme.
  2. d - This parameter receives a URI as a value that points a difference code source. If the value of this URI contains ampersand characters, &, or question mark
  3. jscorrect - This presence of this parameter sets the jscorrect parameter to boolean "true". No value is required.
  4. jsscope - This parameter forcefully applies the jsscope feature of the JSPretty library
  5. l - This parameter receives a value of markup, html, auto, javascript, js, css, csv, or text. This bypasses all other language settings and determinations thereby forcefully applying the language against the supplied value to this parameter. The value of "html" is identical to the value "markup" except that it forces the
  6. m - This parameter receives a value of beautify, minify, or diff. This parameter sets the mode of the tool.
  7. s - This parameter receives a URI as a value that points a code source. If the value of this URI contains ampersand characters, &, or question mark characters, ?, please escape the ampersands characters to "%26" and the question mark characters to %3F. The tool executes this code automatically on page load d parameter.
  8. codemirror - If this parameter is present with a value of false the CodeMirror application library will be discarded in favor of HTML textarea

The parameters are optional and are provided soley for portability. The

  1. http://prettydiff.com/?l=html&s=http://google.com/&m=beautify

Pretty Diff Function

Overview

Pretty Diff is an application written entirely in JavaScript and expressed as a single function named 'prettydiff()'. This application was originally written as a means to algorithmically difference between two similar pieces of code regardless of minification and other white space differences. The result is a

While the Pretty Diff application is expressed as a single function it contains a few libraries. These libraries are a diff engine and a few language parsers lib directory.

The Pretty Diff application is completely environment agnostic. It can run on the command line, web browser, or any other environment. All that is required is API directory.

There is one exception in the Pretty Diff application to complete environmental charDecoder.js code is entirely reliant upon DOM access. This library transforms character entity references into literal characters and vise versa. Pretty Diff does not

The Pretty Diff function receives input from a single argument. This argument is Pretty Diff API section of this document.

Pretty Diff API (Options)

  1. api

    • Description
      Used internally to decide if some small JavaScript functions need to be included
  2. braceline

    • Description
      In JavaScript a new line is inserted after opening curly braces and before
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Brace Lines, JavaScript Only
  3. bracepadding

    • Description
      Inserts a space after the start of a contain and before the end of the container
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Brace Padding, JavaScript Only
  4. braces

    • Description
      Sets the style of indentation during JavaScript beautification. The default "knr" sets a JSLint compliant beautification scheme and the other value "allman" puts opening curly braces on their own line.
    • Type
      string
    • Accepts
      knr, allman
    • Default
      knr
    • As labeled in the HTML tool
      Style of Indent, JavaScript Only
  5. color (node-local.js only)

    • Description
      Specifies which color scheme to apply to the output file.
    • Type
      string
    • Default
      white
    • Accepted values
      canvas, default, shadow, white
  6. comments

    • Description
      Determines whether comments should be indented. This property is only used in
    • Type
      string
    • Accepted values
      indent, noindent
    • Default
      indent
    • As labeled in the HTML tool
      Indent Comments
  7. conditional

    • Description
      Retain Internet Explorer conditional HTML comments during minification of HTML.
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      IE Comments, HTML Only
  8. content

    • Description
      Determines if string literals in JavaScript and content in markup should be text prior to a diff operation. This property is only used if mode is set to diff.
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Ignore Content, Markup / JavaScript
  9. context

    • Description
      In the diff mode a numeric value sets the number of matching (equivalent) lines
    • Type
      string or number
    • Default
      no value (empty string)
    • As labeled in the HTML tool
      Context size
  10. correct

    • Description
      A limited attempt to automatically correct certain stylistic code problems that JSLint complains about and missing closing list item tags in HTML. This option will insert missing semicolons, insert missing curly braces, convert some
    • Type
      boolean
    • Default
      false
    • Informational Guide
      jscorrect option
    • As labeled in the HTML tool
      Fix Sloppy Code, JavaScript Only
  11. cssinsertlines

    • Description
      Forces new line characters between blocks of CSS code. This option will override preserve.
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Insert Extra Lines, CSS
  12. csvchar

    • Description
      Stores the string value used as a data separator for the "csv" language. Any string is accepted, but if value of lang property is not set to "csv" this property is ignored.
    • Type
      string
    • Default
      , (comma)
    • As labeled in the HTML tool
      Character separator
  13. diff

    • Description
      Code sample to compare the source code sample against. This property is required
    • Type
      string
    • Default
      none
    • As labeled in the HTML tool
      New Text
  14. diffcli

    • Description
      An option only available from the node-local.js API file for Node.js. This output option is not specified the node-local.js will convert the diffcli option to a value of true. If the value of diffcli is true and the context option is omitted diffcli guide.
    • Type
      boolean
    • Default
      false
    • Informational Guide
      Using diffcli
    • As labeled in the HTML tool
      not in the HTML tool
  15. diffcomments

    • Description
      Retain code comments so that code and comments can be compared by the diff
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Code Comments
  16. difflabel

    • Description
      Sets a label describing the value of diff code sample.
    • Type
      string
    • Default
      new
    • As labeled in the HTML tool
      New label (optional)
  17. diffview

    • Description
      Determines if the diff report should be expressed is a side-by-side comparison
    • Type
      string
    • Accepted values
      sidebyside, inline
    • Default
      sidebyside
    • As labeled in the HTML tool
      Diff View Type
  18. elseline

    • Description
      If the "else" keyword should be pushed onto a new line in JavaScript
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Else on New Line, JavaScript Only
  19. force_indent

    • Description
      Allows every piece of code and content in a markup language to be indented
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Force Indentation, Markup Only
  20. help (node-local.js only)

    • Description
      Displays documenation to the command line or console.
  21. html

    • Description
      Forces markup code to be interpreted as HTML. HTML mode identifies certain tags as singletons by tag name even if they are no closed with "/>" syntax. It also ignores beautification on "<pre>" elements and tolerates "<li>" elements that do not a closing "</li>" tag. This option will be
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Presume HTML, Markup Only
  22. inchar

    • Description
      Stores the character literal used for an indentation. A single indentation is
    • Type
      string
    • Default
      (a single space)
    • As labeled in the HTML tool
      Indentation character
  23. inlevel

    • Pads JavaScript and markup beautification with additional indentation. Useful in
    • Type
      number
    • Default
      0
    • As labeled in the HTML tool
      Code padding, Markup / JavaScript
  24. insize

    • Description
      Stores the number of times the inchar value must repeat to comprise a single
    • Type
      number
    • Default
      4
    • As labeled in the HTML tool
      Indentation size
  25. jsscope

    • Description
      Produce HTML output for JavaScript beautification that colors variables based upon their scope of declaration. Using colors this feature highlights inheritance, scope depth, and closure. The value "none" turns this feature off. The value "html" creates a formatted HTML code sample for displaying HTML code jsscope guide and the jshtml guide.
    • Type
      string
    • Accepted values
      none, html, report
    • Default
      none
    • Informational Guide
      jsscope features and saving colorful code as HTML
    • As labeled in the HTML tool
      Scope Analysis, JavaScript Only
  26. lang

    • Description
      Tells the diff program which language it is receiving. The value "auto" allows the application to determine between CSS, JavaScript, and Markup without human effort. If the auto value cannot determine the language it will default to a
    • Type
      string
    • Accepted values
      auto, css, csv, javascript, markup, text
    • Default
      auto
    • As labeled in the HTML tool
      Code type
  27. langdefault

    • Description
      If the lang option is set to a value of "auto" the value of langdefault determines what the
    • Type
      string
    • Accepted values
      css, csv, javascript, markup, text
    • Default
      javascript (dom.js - HTML tool), text (node-local.js and prettydiff.wsf)
    • As labeled in the HTML tool
      Auto detect default
  28. mode

    • Description
      The operation to be performed.
    • Type
      string
    • Accepted values
      beautify, diff, minify, parse
    • Default
      diff
    • As labeled in the HTML tool
      Function
  29. obfuscate

    • Description
      A converts reference names into smaller names during JavaScript minification.
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Obfuscation, JavaScript
  30. objsort

    • Description
      Sorts properties of objects in JavaScript and/or CSS. The accepted values
    • Type
      string
    • Accepted values
      all, css, js, none
    • Default
      js
    • As labeled in the HTML tool
      Property Sorting, CSS / JavaScript
  31. output (node-local.js only)

    • Description
      Determines the location of where files should be saved.
    • Type
      string
  32. preserve

    • Description
      Retain empty lines in the code. Consecutive empty lines are not preserved.
    • Type
      string
    • Accepted values
      all, css, js, none
    • Default
      js
    • As labeled in the HTML tool
      Empty Lines
  33. quote

    • Description
      Diff only language independent option to normalize single quote characters to
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Diff Quotes
  34. quoteconvert

    • Description
      Convert the quote characters delimiting strings from either double or single
    • Type
      string
    • Accepted values
      double, single, none
    • Default
      none
    • As labeled in the HTML tool
      Quotes, Markup / JavaScript
  35. readmethod (node-local.js only)

    • Description
      Determines how input should be received. The value auto changes to directory, file, or screen depending on the source type. The value directory will read all files from a single directory. The value file reads the contents of a single file. The value filescreen reads the contents of a file but outputs the result to the console. The value screen will look to the console for code input and outputs to the console. The value subdirectory will recursively read files in subdirectories.
    • Type
      string
    • Default
      screen
    • Accepted values
      auto, directory, file, filescreen, screen, subdirectory
  36. report (node-local.js only)

    • Description
      Determines if a meta data report should be generated.
    • Type
      boolean
    • Default
      true
  37. semicolon

    • Descriptiong
      If semicolon characters at the end of a line should be removed prior to a diff
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Trailing Semicolons
  38. source

    • Description
      A code sample to operate upon.
    • Type
      string
    • Default
      none
    • As labeled in the HTML tool
      Base Text (diff), Beautification input (beauty), Minification input (minify)
  39. sourcelabel

    • Descriptiong
      Sets a label describing the value of source property in the diff report.
    • Type
      string
    • Default
      Base
    • As labeled in the HTML tool
      Base label (optional)
  40. space

    • Description
      Inserts a space following a function keyword for anonymous functions in
    • Type
      boolean
    • Default
      true
    • As labeled in the HTML tool
      Function Space, JavaScript Only
  41. style

    • Description
      Whether CSS and JavaScript code should be indented according to the surrounding
    • Type
      boolean
    • Default
      true
    • As labeled in the HTML tool
      Indent Style/Script, Markup Only
  42. styleguide

    • Description
      Provides a packaged set of option configurations for JavaScript interpretation to more closely conform to popular style guides. In the face of a conflict between something configured to the value of a styleguide option setting and a styleguide guide.
    • Type
      string
    • Accepted values
      airbnb, crockford, google, grunt, jquery, mediawiki, yandex, none
    • Default
      none
    • Informational Guide
      styleguide definitions
    • As labeled in the HTML tool
      Style Guide, JavaScript Only
  43. tagmerge

    • Description
      Combines adjacent start and end tags of the same name into a single self-closing tag, for example: <a href="homepage.html"></a> into <a href="homepage.html"/>.
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Merge Empty Tag Sets Into A Single Self-Closing Tag, Markup Only
  44. titanium

    • Description
      If the JavaScript parser should parse Titanium Style Sheets instead of lang option is "tss".
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      not in the HTML tool
  45. topcoms

    • Description
      If minification should include into the output all comments at the top of
    • Type
      boolean
    • Default
      false
    • As labeled in the HTML tool
      Top Comments, CSS / JavaScript
  46. varword

    • Description
      If a single var should be used to declare a list of variables or if a var keyword should be used each will convert comma separated variable lists into separate statements each list will convert consecutive variable statements to a comma separated list. The none omits this option.
    • Type
      string
    • Accepted values
      each, list, none
    • Default
      none
    • As labeled in the HTML tool
      Variable Lists, JavaScript
  47. vertical

    • Description
      If lists of assignments or properties should be vertically aligned for faster
    • Type
      boolean
    • Accepted values
      all, css, js, none
    • Default
      js
    • As labeled in the HTML tool
      Vertically Align, CSS / JavaScript
  48. wrap

    • Description
      In a markup document this option sets how many columns wide text content may be + separated fragments. The value 0 disables text wrapping. A negative value + separated string literals into a single string.
    • Type
      number
    • Default
      80
    • As labeled in the HTML tool
      Wrap text, JavaScript / Markup

Practices of Pretty Diff

Pretty Diff hopes to encourage conventions of efficiency, but not at cost to recursion, regression testing, or altered functionality. For example consider the situation of minifying markup. In a typical scenario the practice of code minifcation is to remove all code comments and all white space characters not absolutely necessary for syntax interpretation. If the most impactful form of

  1. <p>This is a paragraph with a text field. <input
  2. <p>This is a paragraph with a text field.<input

The difference between the two examples above is the difference of a single space character between the period and the input tag. In markup white space characters are tokenized when the code is parsed to output by default, and rarely is this default challenged. Tokenized white space means sequential white space characters are converted to a single space character and then sequential space characters are converted to a single space character. This means the presence of some white space characters are completely trivial, while others are not. A single space character separating words of content is not trivial if it is an isolated space. In the above sample the difference of a space separating

If markup code were fully minified then all white space characters outside of syntax containers, such as tags, would be removed, thereby making the content illegible. Markup can still be correctly minified, but only when rendering of tokenized white space is fully considered. The opposite of this problem is

  1. <p>This is a statement with a <a
  2. <p>     This is a statement with a         <a href="#">         </a>     . </p>

The differences between the two prior examples is that the second example introduces white space tokens where they do not exist in the first example. In the first example there are no characters between the opening <p> tag and the text or the opening <a> and the text while this is not true of the second example. Therefore these two statements are not similar enough for a logical comparison. A well crafted beautifier, or pretty printer, will take these differences into account so far as to alter the entirety of a code base

Code must never be minified if it cannot be automatically recovered into an easily readable form and must never be beautified if such beautification changes how the code is parsed. This is the importance of regression. The most extreme form of minification is referred to as obfuscation. Obfuscation removes all code comments and all white space characters not absolutely required for syntax compliance, but goes one step further and changes all variable and command names to the fewest available character length. Pretty Diff considers the practice of obfuscation to be harmful as its practice eliminates the possibility of

An instantiation of a pattern where the pattern's presence is available in the given instance without regard for multiplication is said to be idempotent. A recursive practice is the ability replicate an action where the replication does not harm the potential of further replication, or the idempotent nature of a pattern, upon or resulting from that action. In the case of Pretty Diff code that begins unminified should be capable of being minified, beautified, minified again, and so on without harm or difference to the functional integrity of the

Comments are the regression exception. There is no way to efficiently reduce strongly recommends that documentation be separated from production code into either a

There is one extremely limited exception to functional interference observed by Pretty Diff. The Cascading Style Sheets language provides a syntax and vocabulary that are limited and fully known. Therefore functional changes can, and are, supplied to CSS code during minification because in this one narrow instance there is no harm to regression. Superior minification can be performed

Option Comment

The Pretty Diff option comment is similar in convention to the JSLint option comment. In the case where multiple Pretty Diff option comments are present in a document only the first will be processed. If in diff mode and an option comment is present in the diff code but not the source code then this option comment /*prettydiff.com and end with */. The options are listed in this comment separated by commas as a colon separated name value pair. The options match the exact value definition for the Pretty Diff application properties above and options that allow abstract values must have their values enclosed in either single or double quotes. The options can be listed in any order. The option comment should be separated from other

Input and Output

The function outputs an array of two indexes. The first array index is always the processed data and the second array index contains some metadata. In the case of the "beautify" and "minify" operations the first index of the output array is the processed source code as text and the second array index is the code report, as seen generated on the client side tool, formatted as HTML. The output from the diff operation returns an HTML table of the actual diff output as the first array index and a some minor metadata about the number of errors in the second array index with both indexes formatted as HTML and neither comprising a complete HTML document. To form the diff output of the prettydiff api directory:

  1. output = prettydiff(...);
  2. heading = '<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Pretty Diff</title><link rel="canonical" href="http://prettydiff.com/" type="application/xhtml+xml"/><meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8"/><meta name="robots" content="index, follow"/><meta name="DC.title" content="Pretty Diff - The difference tool"/><link rel="icon" type="image/x-icon" href="http://prettydiff.com/images/favicon.ico"/><link rel="meta" href="http://prettydiff.com/labels.rdf" type="application/rdf+xml" title="ICRA labels"/><meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://prettydiff.com" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1) gen true for "http://www.prettydiff.com" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))'/><meta name="author" content="Austin Cheney"/><meta name="description" content="Pretty Diff tool can minify, beautify, or diff between minified and beautified code.This tool can even beautify and minify HTML."/><meta name="distribution" content="Global"/><meta http-equiv="Page-Enter" content="blendTrans(Duration=0)"/><meta http-equiv="Page-Exit" content="blendTrans(Duration=0)"/><meta http-equiv="content-style-type" content="text/css"/><meta http-equiv="content-script-type" content="text/javascript"/><meta name="google-site-verification" content="qL8AV9yjL2-ZFGV9ey6wU3t7pTZdpD4lIetUSiNen7E"/><link rel="stylesheet" type="text/css" href="http://prettydiff.com/diffview.css" media="all"/></head><body><h1>Pretty Diff - The difference
  3. return heading + output[1] + "</div>" + output[0] +

Executing with Node.js

Node.js is a command line run time. Node.js execution could be the result of a one-time execution or part of a scripted automation process. To execute the prettydiff function with Node.js the following code needs to be added after the

if(typeof exports!=="string"){exports.api=function(x){"use strict";return

Some Node.js API files are supplied as part of the Pretty Diff project. An api/node-local.js.

Executing with Windows Script Host (WSH)

Windows Script Host allows for a JavaScript run time in Windows environments from a command line with output directly returned to the command line or in a debugger window. To execute JavaScript with WSH a file is needed to supply the

An actively maintained API is provided at api/prettydiff.wsf. A WSF file follows basic XML syntax and may allow multiple operations of job tag. The named elements in the example file are used to intercept arguments supplied via

The example file would be operated for HTML compatibility using the following cscript prettydiff.wsf /source:"my_source_file.js" /html:true /mode:"beautify"

Writing the output of a WSH task into a file would require an additional ActiveX

Beautification

JavaScript

JavaScript beautification uses the jspretty library. JavaScript is beautified in a manner that conforms to the rules of new keyword in its report summary, which is any use except immediately preceeding

"ActiveXObject", "ArrayBuffer", "AudioContext", "Canvas", "CustomAnimation", "DOMParser", "DataView", "Date", "Error", "EvalError", "FadeAnimation", "FileReader", "Flash", "Float32Array", "Float64Array", "FormField", "Frame", "Generator", "HotKey", "Image", "Iterator", "Intl", "Int16Array", "Int32Array", "Int8Array", "InternalError", "Loader", "Map", "MenuItem", "MoveAnimation", "Notification", "ParallelArray", "Point", "Promise", "Proxy", "RangeError", "Rectangle", "ReferenceError", "Reflect", "RegExp", "ResizeAnimation", "RotateAnimation", "Set", "SQLite", "ScrollBar", "Set", "Shadow", "StopIteration", "Symbol", "SyntaxError", "Text", "TextArea", "Timer", "TypeError", "URL", "Uint16Array", "Uint32Array", "Uint8Array",

Summary

An unassigned anonymous function creates the summary report and assigns its summary. Variable summary is not declared within jspretty. It is used as a closure from a higher scope so

CSS

CSS beautification uses csspretty library. A minimalist parser that is capable of quick extension and deep

CSV

CSV typically stands for comma separated values, but in this tool it stands for character separated values. The csvbeauty library takes a sequence of characters and splits the input upon that supplied { }. Unquote line breaks are converted into two simultaneous line breaks. If the {|} so that csvmin will know a character sequence must exist at the extreme end of input. Escaped double quote characters, escaped using the formal CSV method by

CSV beautification uses charDecoder to decode Unicode character entities. The charDecode library accepts any combination of HTML decimal Unicode entities and Unicode hexidecimal entities. HTML decimal entities must begin with an ampersand and pound character '&#',

The Unicode hexidecimal entities must begin with a lowercase u and plus character 'u+', be immediately followed by a four or five digit hexidecimal value, and be immediately terminated by a plus character. Hexidecimal values

Please be aware that charDecode is reliant upon the interpreting application's HTML character rendering engine to map entity values to character maps, which means if the browser does not support the entity supplied the browser will return a generic character marker instead of the intended character. The content will then be separated in accordance to the rendered sequence value, which means a generic character marker will be used in the separation instead of the character referrenced by the supplied entity. In summary, if your browser has

Markup

Markup beautification uses the markuppretty library. The code is formally parsed. The parsed code is then analyzed for indentation. The beautify mode of markuppretty also provides a summary and

Markup Summary

The markup_beauty function contains, at its end, an unassigned anonymous summary. Variable summary is not provided a scope by markup_beauty, because it is meant to be supplied as a closure to markup_beauty. This summary variable must be provided a scope by

The markup_summary creates a report of the number of parts comprising the markup, the weight of each of those parts, and a score using a math formula to compute a performance rating that reenforces reliance upon structure and

Minification

JavaScript

The custom built csspretty library is used to analyze and minify JavaScript code. It is also capable of

CSS

The custom built csspretty library is used to analyze and minify CSS code.

CSV

CSV typically stands for comma separated values, but in this tool it stands for character separated values. The csvmin library reverts all changes inflicted by the csvbeauty library.

CSV beautification uses charDecoder to decode Unicode character entities. The charDecode library accepts any combination of HTML decimal Unicode entities and Unicode hexidecimal entities. HTML decimal entities must begin with an ampersand and pound character '&#',

The Unicode hexidecimal entities must begin with a lowercase u and plus character 'u+', be immediately followed by a four or five digit hexidecimal value, and be immediately terminated by a plus character. Hexidecimal values

Please be aware that charDecoder is reliant upon the interpreting application's HTML character rendering engine to map entity values to character maps, which means if the browser does not support the entity supplied the browser will return a generic character marker instead of the intended character. The content will then be separated in accordance to the rendered sequence value, which means a generic character marker will be used in the separation instead of the character referrenced by the supplied entity. In summary, if your browser has limited support for Unicode characters you must expect equally limited results

Markup

Markup is minified using markuppretty. This library fully parses the code and returns the same code without comments

Pretty Diff

Diff Code

The diff engine uses diffview. Originally by Snowtide Informatics Systems. diffview is almost entirely rewritten from scratch so that JavaScript arrays are used to store the dynamic output instead of DOM objects. This change has result in a faster and more

Diff Process

JavaScript code is beautified with the jspretty library and then compared. CSV is first minified with csvmin and then beautified with csvbeauty. CSS is beautified with the csspretty library and then compared. Markup is beautified using the markup-beautify library. Plain text is compared without any minification or beautification. If

Parsing

Overview of Parsing

Most parsers generate an Abstract Syntax Tree, instead the libraries used in Pretty Diff generate parallel arrays. This means

The parse data is exposed if the mode option has a value of parse. The language CSV is not currently supported in parse mode.

The parse data is always returned as object with two or three properties. This is handy if Pretty Diff is embedded directly in some application and the parse JSON.stringify method.

JavaScript Parsing

For JavaScript and similar languages, such as React JSX, the jspretty library returns an object containing two arrays associated with the property names: token and types. The token array contains the actual parsed code into atomic

The jspretty creates some tokens that are not present in the code source. In the case of missing semicolons and missing curly braces the jspretty library will correct option is used the pseudo tokens are converted to actual code tokens. When the mode option is not "parse".

Here are the supported types:

CSS Parsing

The csspretty library parses CSS and similar languages, such as: SCSS (Sass) and

The types generated by csspretty are:

Markup Parsing

All markup type languages are parsed with the markuppretty library and returns

The HTML5 specification allows for list item elements to contain text content without an end tag. A start tag without a matching end tag would disrupt correct is true the pseudo tags are instantly supplied as </li> tags otherwise the

Types available in types array:

Checklist - Adding New Options

  1. Define the option in this documentation file.
  2. Add the new option to Prettydiff's core function.
    1. Define the options default with a variable at the top of core.
    2. Add the new option, and its values, to the pdcomment child function.
    3. Add the new option to each appropriate library reference for each appropriate mode.
  3. Add the new option to the appropriate library files.
    1. Write a brief description of the new option in the libraries' top comments.
    2. Define the option's default using a variable at the top of the library.
    3. Add the appropriate functionality to the library for the option to do its job.
  4. Add the new option to node-local.js and prettydiff.wsf.
    1. Add the new option to the help/error documentation.
    2. Add the new option to the default option list.
    3. Define the new option's default by using an assignment to a property on the object passed into Prettydiff.
  5. Add the new option to dom.js.
    1. Add the new object to the appropriate modes in the recycle function to be passed to Prettydiff.
    2. Add the new object to the options function to build out the option string that displays in the web tool.
  6. Add the new option to the HTML (prettydiff.com.xhtml) for each mode as appropriate.
  7. Test the new option.
    1. Verify the option works as intended for each point of interaction added to the HTML.
    2. Verify the option is added to the option string.
    3. Verify the change of interaction on the HTML is saved by clearing cache and refreshing the page.
  8. Add the appropriate description of the option to the API documentation.
  9. If necessary write a guide to more fully describe the benefit and impact of the new feature.

Components Files

A list of code components, author information, and dates of revision.
Component Author(s) Summary Revised
charDecoder.js Austin Cheney The function that decodes Unicode character entities for csvbeauty.js and csvmin.js.
ace Ace Code Editor Ace Code Editor.
csspretty.js Austin Cheney CSS parser.
csvbeauty.js Austin Cheney The function that beautifies character sequence values.
csvmin.js Austin Cheney The function that minifies character sequence values.
diffview.css Austin Cheney The CSS that powers everything to do with the form, diff output, and this documentation.
diffview.js Chas Emerick - Original Austin Cheney - Major Revision Builds the HTML diff output.
documentation.xhtml Austin Cheney This documentation page.
dom.js Austin Cheney A supplemental JavaScript file providing DOM access and interaction with the web tool.
jspretty.js Austin Cheney Harry Whitfield - QA support Beautifies JavaScript code.
markuppretty.js Austin Cheney Parses markup code.
node-local.js Austin Cheney An API for processing the local command line JavaScript with Node.js
prettydiff.com.xhtml Austin Cheney Actual Pretty Diff tool HTML file.
prettydiff.js Austin Cheney Actual Pretty Diff application code.
prettydiff.wsf Austin Cheney Pretty Diff API for Windows Script Host.

Please send comments, feedback, and requests to info@prettydiff.com.