happo for npm release notes

In version 3, we've moved happo over to be a tool purely written in JavaScript. Previously, the main happo execution was handled by Ruby. We believe that this will make it easier for JavaScript developers to adopt happo, because instead of having to install as a Ruby gem, it's as simple as

npm install happo

Along the conversion process, we've made a few smaller adjustments. We've done our best not to completely change the structure of the tool however, so commands should mostly be the same. There are some differences however:

• If you run happo without any argument, we won't default to run. You have to specify that specifically: happo run.
• happo upload_diffs is now happo upload to better reflect the fact that we're not only uploading the diffs. Also, snake_case doesn't rhyme with us anymore and we've added happo upload-test to help you test uploading and diagnose issues.
• We've dropped support for happo clean. Use rm -rf <pathToSnapshotsFolder> instead.
• The console output from running happo run has been made more compact.

Performance has been a focus throughout the transition. On our own projects, we've seen happo run a little bit faster, but it's probably not that significant. We have some exciting performance improvements coming up however, so stay tuned!

Changes:

• Happo will now wait for images to render before taking a snapshot. This should prevent spurious diffs where only half images are visible, or ones where the size of the snapshot diffs because an image wasn't loaded when calculating the bounding box.

• Disable animations via animation-play-state.

• Improved diffing performance.
• Improved browser compatibility of diffs page with Firefox and Safari.

Image diffing is now slightly more performant and stable. We've moved away from an external dependency and moved to a more streamlined lcs diffing algorithm.

Bugfixes:

• Fix incorrect escaping of uploaded files.

• Generate LCS diff image in browser instead of during Happo run.
• Change default view back to diffs.

• Improve screenshotting of components with sub-pixel dimensions.

Fixes the issue where all snapshots would start at the top left of the screen.

After making the change to include all DOM nodes in the snapshot (instead of using the returned node) led to it being a lot harder to control the width of the snapshot. If you use React, you probably use ReactDOM.render to render the happo example into the DOM. This usually involves creating an anonymous div that you append to the <body>. Without some clever css styling in order to make this anonymous div the right size, you'll end up with full-width snapshots. To fix that, we've added a getRootNodes function that you can use to control what nodes are used to compute the bounding rectangle.

Here's an example for React:

happo.getRootNodes = function() {
  return document.querySelectorAll('[data-reactroot]');
};

You can return a NodeList or an Array from this function.