Switching to Commonjs module, how to include in README

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,7 +9,6 @@
 ## Checklist
 
 - [ ] Test your changes
-- [ ] Sqaushed commits
 - [ ] Followed the build steps
 
 

README.md

@@ -1,20 +1,22 @@
 # CountUp.js
 CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way.
 
-Despite its name, CountUp can count in either direction, depending on the start value and end value that you pass.
+Despite its name, CountUp can count in either direction, depending on the start and end values that you pass.
 
 CountUp.js supports all browsers. MIT license.
 
 ## [Try the demo](http://inorganik.github.io/countUp.js)
 
-## New in 2.0.0
+## New in 2.0
 
 - Completely rewritten in **Typescript**! The distributed code is still Javascript.
 - **New** cleaner [method signature](#example).
 - Tests with **Jest**. As much code coverage as possible mocking requestAnimationFrame.
 - **Smart easing**: CountUp intelligently defers easing until it gets close enough to the end value for easing to be visually noticeable. Configureable in the [options](#options).
 - **Separate bundles** for with and without the requestAnimationFrame polyfill. Choose `countUp.min.js` for modern browsers or `countUp.withPolyfill.min.js` for IE9 and older, and Opera mini.
 
+CountUp is now distributed as a `commonjs` module - [see below](#including) for how to include it in your project.
+
 ## See Also
 
 - **[CountUp.js Angular ^2 Module](https://github.com/inorganik/countUp.js-angular2)**
@@ -100,10 +102,44 @@ Update the end value and animate:
 countUp.update(989);
 ```
 
+## Including CountUp <a name="including"></a>
+
+CountUp v2 is distributed as a `commonjs` module which means you need to include CountUp in your project using a build tool such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/).
+
+**Example using Browserify**
+
+Install browserify and countup
+```
+npm i countup.js
+npm i -g browserify
+```
+
+main.js:
+```js
+var countUpModule = require('countup.js');
+
+window.onload = function() {
+  var countUp = countUpModule.CountUp('target', 2000);
+  countUp.start();
+}
+```
+
+Build your bundle
+```
+browserify main.js -o bundle.js
+```
+
+Include in your html:
+```
+<script src="bundle.js"></script>
+```
+🎉 Done!
+
 ## Contributing <a name="contributing"></a>
 
 Before you make a pull request, please be sure to follow these instructions:
 
 1. Do your work on `src/countUp.ts`
-1. Test your work. Do manual tests on the demo in the browser and run `npm t`
+1. Run tests: `npm t`
 1. Run `npm run build`, which copies and minifies the .js files to the `dist` folder.
+1. Test the demo: run `npm run build:demo` then open index.html in a browser and make sure it works.

demo.js

@@ -0,0 +1,227 @@
+var countUpModule = require('./dist/countUp.js');
+
+window.onload = function () {
+  var input = function (id) {
+    return document.getElementById(id);
+  };
+  var code, stars, endVal, options;
+  var demo = new countUpModule.CountUp('myTargetElement', 100);
+  var codeVisualizer = document.getElementById('codeVisualizer');
+  var errorSection = document.getElementById('errorSection');
+  document.getElementById('version').innerHTML = demo.version;
+  // HANDLERS
+  input('startVal').onchange = updateCodeVisualizer;
+  input('endVal').onchange = updateCodeVisualizer;
+  input('decimalPlaces').onchange = updateCodeVisualizer;
+  input('duration').onchange = updateCodeVisualizer;
+  input('separator').onchange = updateCodeVisualizer;
+  input('decimal').onchange = updateCodeVisualizer;
+  input('prefix').onchange = updateCodeVisualizer;
+  input('suffix').onchange = updateCodeVisualizer;
+  input('useEasing').onclick = updateCodeVisualizer;
+  input('useGrouping').onclick = updateCodeVisualizer;
+  input('useOnComplete').onclick = updateCodeVisualizer;
+  input('easingFnsDropdown').onchange = updateCodeVisualizer;
+  input('numeralsDropdown').onchange = updateCodeVisualizer;
+  document.getElementById('swapValues').onclick = function () {
+    var oldStartVal = input('startVal').value;
+    var oldEndVal = input('endVal').value;
+    input('startVal').value = oldEndVal;
+    input('endVal').value = oldStartVal;
+    updateCodeVisualizer();
+  };
+  document.getElementById('start').onclick = createCountUp;
+  document.getElementById('apply').onclick = createCountUp;
+  document.getElementById('pauseResume').onclick = function () {
+    code += '<br>demo.pauseResume();';
+    codeVisualizer.innerHTML = code;
+    demo.pauseResume();
+  };
+  document.getElementById('reset').onclick = function () {
+    code += '<br>demo.reset();';
+    codeVisualizer.innerHTML = code;
+    demo.reset();
+  };
+  document.getElementById('update').onclick = function () {
+    var updateVal = input('updateVal').value;
+    var num = updateVal ? updateVal : 0;
+    code += "<br>demo.update(" + num + ");";
+    codeVisualizer.innerHTML = code;
+    demo.update(num);
+  };
+  input('updateVal').onchange = function () {
+    var updateVal = input('updateVal').value;
+    var num = updateVal ? updateVal : 0;
+    code += '<br>demo.update(' + num + ');';
+    codeVisualizer.innerHTML = code;
+  };
+  // OPTION VALUES
+  var easingFunctions = {
+    easeOutExpo: function (t, b, c, d) {
+      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+    },
+    outQuintic: function (t, b, c, d) {
+      var ts = (t /= d) * t;
+      var tc = ts * t;
+      return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
+    },
+    outCubic: function (t, b, c, d) {
+      var ts = (t /= d) * t;
+      var tc = ts * t;
+      return b + c * (tc + -3 * ts + 3 * t);
+    }
+  };
+  function getEasingFn() {
+    var fn = input('easingFnsDropdown').value;
+    if (fn === 'easeOutExpo') {
+      return null;
+    }
+    if (typeof easingFunctions[fn] === 'undefined') {
+      return undefined;
+    }
+    return easingFunctions[fn];
+  }
+  function getEasingFnBody(fn) {
+    fn = typeof fn === 'undefined' ? getEasingFn() : fn;
+    if (typeof fn === 'undefined') {
+      return 'undefined function';
+    }
+    if (fn !== null) {
+      return fn.toString().replace(/^ {8}/gm, '');
+    }
+    return '';
+  }
+  function getNumerals() {
+    var numeralsCode = input('numeralsDropdown').value;
+    // optionally provide alternates for 0-9
+    switch (numeralsCode) {
+      case 'ea': // Eastern Arabic
+        return ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+      case 'fa': // Farsi
+        return ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+      default:
+        return null;
+    }
+  }
+  var stringifyArray = function (arr) { return '[\'' + arr.join('\', \'') + '\']'; };
+  // COUNTUP AND CODE VISUALIZER
+  function createCountUp() {
+    establishOptionsFromInputs();
+    demo = new countUpModule.CountUp('myTargetElement', endVal, options);
+    if (!demo.error) {
+      errorSection.style.display = 'none';
+      if (input('useOnComplete').checked) {
+        demo.start(methodToCallOnComplete);
+      }
+      else {
+        demo.start();
+      }
+      updateCodeVisualizer();
+    }
+    else {
+      errorSection.style.display = 'block';
+      document.getElementById('error').innerHTML = demo.error;
+      console.error(demo.error);
+    }
+  }
+  function methodToCallOnComplete() {
+    console.log('COMPLETE!');
+    alert('COMPLETE!');
+  }
+  function establishOptionsFromInputs() {
+    endVal = Number(input('endVal').value);
+    options = {
+      startVal: input('startVal').value,
+      decimalPlaces: input('decimalPlaces').value,
+      duration: Number(input('duration').value),
+      useEasing: input('useEasing').checked,
+      useGrouping: input('useGrouping').checked,
+      easingFn: typeof getEasingFn() === 'undefined' ? null : getEasingFn(),
+      separator: input('separator').value,
+      decimal: input('decimal').value,
+      prefix: input('prefix').value,
+      suffix: input('suffix').value,
+      numerals: getNumerals()
+    };
+    // unset null values so they don't overwrite defaults
+    for (var key in options) {
+      if (options.hasOwnProperty(key)) {
+        if (options[key] === null) {
+          delete options[key];
+        }
+      }
+    }
+  }
+  function updateCodeVisualizer() {
+    establishOptionsFromInputs();
+    code = '';
+    if (options.useEasing && options.easingFn) {
+      code += 'const easingFn = ';
+      var split = getEasingFnBody(options.easingFn).split('\n');
+      for (var line in split) {
+        if (split.hasOwnProperty(line)) {
+          code += split[line].replace(' ', '&nbsp;') + '<br>';
+        }
+      }
+    }
+    function indentedLine(keyPair, singleLine) {
+      if (singleLine === void 0) { singleLine = false; }
+      var delimeter = (singleLine) ? ';' : ',';
+      return "&emsp;&emsp;" + keyPair + delimeter + "<br>";
+    }
+    var opts = '';
+    opts += (options.startVal !== '0') ? indentedLine("startVal: " + options.startVal) : '';
+    opts += (options.decimalPlaces !== '0') ? indentedLine("decimalPlaces: " + options.decimalPlaces) : '';
+    opts += (options.duration !== 2) ? indentedLine("duration: " + options.duration) : '';
+    opts += (options.useEasing) ? '' : indentedLine("useEasing: " + options.useEasing);
+    opts += (options.useEasing && options.easingFn) ? indentedLine("easingFn") : '';
+    opts += (options.useGrouping) ? '' : indentedLine("useGrouping: " + options.useGrouping);
+    opts += (options.separator !== ',') ? indentedLine("separator: '" + options.separator + "'") : '';
+    opts += (options.decimal !== '.') ? indentedLine("decimal: '" + options.decimal + "'") : '';
+    opts += (options.prefix.length) ? indentedLine("prefix: '" + options.prefix + "'") : '';
+    opts += (options.suffix.length) ? indentedLine("suffix: '" + options.suffix + "'") : '';
+    opts += (options.numerals && options.numerals.length) ?
+      indentedLine("numerals: '" + stringifyArray(options.numerals) + "'") : '';
+    if (opts.length) {
+      code += "const options = {<br>" + opts + "};<br>";
+      code += "let demo = new CountUp('myTargetElement', " + endVal + ", options);<br>";
+    }
+    else {
+      code += "let demo = new CountUp('myTargetElement', " + endVal + ");<br>";
+    }
+    code += 'if (!demo.error) {<br>';
+    code += (input('useOnComplete').checked) ?
+      indentedLine('demo.start(methodToCallOnComplete)', true) : indentedLine('demo.start()', true);
+    code += '} else {<br>';
+    code += indentedLine('console.error(demo.error)', true);
+    code += '}';
+    codeVisualizer.innerHTML = code;
+  }
+  // get current star count
+  var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
+  var getStars = new XMLHttpRequest();
+  getStars.open('GET', repoInfoUrl, true);
+  getStars.timeout = 5000;
+  getStars.onreadystatechange = function () {
+    // 2: received headers,  3: loading, 4: done
+    if (getStars.readyState === 4) {
+      if (getStars.status === 200) {
+        if (getStars.responseText !== 'undefined') {
+          if (getStars.responseText.length > 0) {
+            var data = JSON.parse(getStars.responseText);
+            stars = data.stargazers_count;
+            // change input values
+            input('endVal').value = stars;
+            createCountUp();
+          }
+        }
+      }
+    }
+  };
+  getStars.onerror = function () {
+    console.error('error getting stars:', getStars.status);
+    stars = getStars.status;
+    demo.start();
+  };
+  getStars.send();
+}