npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

prettydiff

v101.2.6

Published

A language aware diff tool.

Downloads

16,492

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

austincheneyaustincheney

Keywords

parserlexerframeworkuniversallanguageparsetable

Readme

Pretty Diff

A language aware diff, beautification, and minification tool.

Try it out - https://prettydiff.com/

Build Status

Build

Local install for development

git clone https://github.com/prettydiff/prettydiff.git
cd prettydiff

npm install typescript -g
npm install eslint -g
npm install
tsc --pretty

node js/services build

Global install with NPM

npm install prettydiff -g

Test it

Local install for development

node js/services test

or

npm test

Global install with NPM

The instructions for installing Pretty Diff globally via NPM do not indicate installing ESLint or Typescript, but the build and test commands will not work without them.

npm install -g typescript
npm install -g eslint
prettydiff test

Usage

The application runs on the terminal with Node.js and in a web browser.

Terminal

Executing in a terminal shell is powerful when you need access to additional tools, the local file system, or wish to integrate Pretty Diff output into other application tasks. The application comes with some additional utilities not available to the browser, such as: hashing, base64 encoding, file system tools, and other features.

  • To get started execute prettydiff commands (global) or node js/services commands (local) for a list of available commands.
  • For detailed documentation on a specific command supply the command's name: prettydiff commands base64 (global) or node js/services commands base64 (local)
  • To see execution details of a specific command specify the verbose flag: node js/services beautify source:myFile.js --verbose

Browser

Pretty Diff is written in TypeScript, and so once built runs directly in all modern web browsers.

To get started immediately simply navigate your browser to the project's index.xhtml file in the local filesystem. Browsers restrict some capabilities when executing web applications from the file scheme. The included index.xhtml has all supported options dynamically built-in with updated documentation.

To run the web tool in a browser with all capabilities launch a local web server with this command: prettydiff server (global) or node js/services server (local) and then in your web browser go to http://localhost:9001. This features a handy file system watcher and a web sockets service for users wanting to experiment with the code. Once the server is active and the page is open in a web browser any changes to the code will automatically rebuild the project and reload the page.

Integration

To run Pretty Diff as a utility in a third party application simply include either js/browser.js or js/prettydiff.js. Those two files are identical except for the very end where an object named prettydiff is assigned. Both files provide all options with default values assigned to an object named prettydiff.options.

Browser

js/browser.js - In this file an object named prettydiff is assigned to the browser's window object. To access Pretty Diff simply call window.prettydiff();. The options exist as window.prettydiff.options. See the browser demo for an example. This provides all the necessary code in a single file without any DOM bindings.

Node.js

js/prettydiff.js - In this file an object named prettydiff is assigned to Node's module.exports. To access Pretty Diff simply require the file: let prettydiff = require("prettydiff");. Default options are available as prettydiff.options. To execute simply call prettydiff();.

// integrate into the browser
let output     = "",
    prettydiff = window.prettydiff,
    options    = window.prettydiff.options;
options.source = "my code";
output         = prettydiff();
// You can include the Pretty Diff code in any way that is convenient,
// whether that is using an HTML script tag or concatenating the
// js/browser.js code with your other code.

// integrate into a Node.js app
let output     = "",
    prettydiff = require("prettydiff"),
    options    = prettydiff.options;
options.source = "my code";
output         = prettydiff();
// You should not have to point to the specific file.
// The js/prettydiff.js is defined as 'main' in the package.json.

Options

For supported option documentation you may read the documentation.xhtml file in a browser, options.md markdown file, or use these commands on the terminal:

  • Lists all available options: prettydiff options (global) or node js/services options (local)
  • For option specific details specify the option's name: prettydiff option mode (global) or node js/services options mode (local)
  • The option list supports filtering against the documentation headings and values: prettydiff options mode:diff api:node (global) or node js/services options mode:diff api:node (local)
  • All options, configuration, and documentation are located in the file api/optionsDef.ts file. All option related documentation, features, configurations, and defaults are built from this file for all supported environments.

Supported Languages

45 total languages