Add npm and minified builds

.npmignore

@@ -1,10 +1,14 @@
-tests/
+build/
 examples/
-Gruntfile.js
+scripts/
-bower.json
 src/
+tests/
 *.iml
+.babelrc
 .idea/
 .npmignore
 .jshintrc
 .travis.yml
+karma.js
+karma.config.js
+webpack.config.js

package.json

@@ -2,7 +2,7 @@
   "title": "html2canvas",
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
-  "main": "dist/html2canvas.js",
+  "main": "dist/npm/index.js",
   "version": "1.0.0-alpha.1",
   "author": {
     "name": "Niklas von Hertzen",
@@ -24,6 +24,8 @@
     "babel-core": "6.25.0",
     "babel-eslint": "7.2.3",
     "babel-loader": "7.1.1",
+    "babel-plugin-dev-expression": "0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-flow": "6.23.0",
@@ -52,22 +54,26 @@
     "platform": "1.3.4",
     "prettier": "1.5.3",
     "promise-polyfill": "6.0.2",
+    "replace-in-file": "^3.0.0",
     "rimraf": "2.6.1",
     "serve-index": "1.9.0",
     "slash": "1.0.0",
+    "uglifyjs-webpack-plugin": "^1.1.2",
     "webpack": "3.4.1"
   },
   "scripts": {
     "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
-    "build:npm": "babel src/ -d dist/npm/",
+    "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '$npm_package_version' dist/npm/index.js",
     "build:browser": "webpack",
     "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,tests,scripts}/**/*.js\"",
     "flow": "flow",
     "lint": "eslint src/**",
-    "test": "npm run flow && npm run lint && npm run karma",
+    "test": "npm run flow && npm run lint && npm run test:node && npm run karma",
+    "test:node": "mocha tests/node/*.js",
     "karma": "node karma",
     "watch": "webpack --progress --colors --watch",
-    "start": "node tests/server"
+    "start": "node tests/server",
+    "ss": "node $npm_package_version"
   },
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",

src/index.js

@@ -40,6 +40,9 @@ const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
     const logger = new Logger();
 
     const ownerDocument = element.ownerDocument;
+    if (!ownerDocument) {
+        return Promise.reject(`Provided element is not within a Document`)
+    }
     const defaultView = ownerDocument.defaultView;
 
     const scrollX = defaultView.pageXOffset;

tests/node/color.js

@@ -1,110 +1,110 @@
-var Color = require('../../src/color');
+const Color = require('../../dist/npm/Color').default;
-var assert = require('assert');
+const assert = require('assert');
 
-describe('Colors', function() {
+describe('Colors', () => {
-    describe('named colors', function() {
+    describe('named colors', () => {
-        it('bisque', function() {
+        it('bisque', () => {
-            var c = new Color('bisque');
+            const c = new Color('bisque');
             assertColor(c, 255, 228, 196, null);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('BLUE', function() {
+        it('BLUE', () => {
-            var c = new Color('BLUE');
+            const c = new Color('BLUE');
             assertColor(c, 0, 0, 255, null);
             assert.equal(c.isTransparent(), false);
         });
     });
 
-    describe('rgb()', function() {
+    describe('rgb()', () => {
-        it('rgb(1,3,5)', function() {
+        it('rgb(1,3,5)', () => {
-            var c = new Color('rgb(1,3,5)');
+            const c = new Color('rgb(1,3,5)');
             assertColor(c, 1, 3, 5, null);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('rgb(222, 111, 50)', function() {
+        it('rgb(222, 111, 50)', () => {
-            var c = new Color('rgb(222, 111, 50)');
+            const c = new Color('rgb(222, 111, 50)');
             assertColor(c, 222, 111, 50, null);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('rgb( 222, 111 , 50)', function() {
+        it('rgb( 222, 111 , 50)', () => {
-            var c = new Color('rgb(222 , 111 , 50)');
+            const c = new Color('rgb(222 , 111 , 50)');
             assertColor(c, 222, 111, 50, null);
             assert.equal(c.isTransparent(), false);
         });
     });
 
-    describe('rgba()', function() {
+    describe('rgba()', () => {
-        it('rgba(200,3,5,1)', function() {
+        it('rgba(200,3,5,1)', () => {
-            var c = new Color('rgba(200,3,5,1)');
+            const c = new Color('rgba(200,3,5,1)');
             assertColor(c, 200, 3, 5, 1);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('rgba(222, 111, 50, 0.22)', function() {
+        it('rgba(222, 111, 50, 0.22)', () => {
-            var c = new Color('rgba(222, 111, 50, 0.22)');
+            const c = new Color('rgba(222, 111, 50, 0.22)');
             assertColor(c, 222, 111, 50, 0.22);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('rgba( 222, 111 , 50, 0.123 )', function() {
+        it('rgba( 222, 111 , 50, 0.123 )', () => {
-            var c = new Color('rgba(222 , 111 , 50, 0.123)');
+            const c = new Color('rgba(222 , 111 , 50, 0.123)');
             assertColor(c, 222, 111, 50, 0.123);
             assert.equal(c.isTransparent(), false);
         });
     });
 
-    describe('hex', function() {
+    describe('hex', () => {
-        it('#7FFFD4', function() {
+        it('#7FFFD4', () => {
-            var c = new Color('#7FFFD4');
+            const c = new Color('#7FFFD4');
             assertColor(c, 127, 255, 212, null);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('#f0ffff', function() {
+        it('#f0ffff', () => {
-            var c = new Color('#f0ffff');
+            const c = new Color('#f0ffff');
             assertColor(c, 240, 255, 255, null);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('#fff', function() {
+        it('#fff', () => {
-            var c = new Color('#fff');
+            const c = new Color('#fff');
             assertColor(c, 255, 255, 255, null);
             assert.equal(c.isTransparent(), false);
         });
     });
 
-    describe('from array', function() {
+    describe('from array', () => {
-        it('[1,2,3]', function() {
+        it('[1,2,3]', () => {
-            var c = new Color([1, 2, 3]);
+            const c = new Color([1, 2, 3]);
             assertColor(c, 1, 2, 3, null);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('[5,6,7,1]', function() {
+        it('[5,6,7,1]', () => {
-            var c = new Color([5, 6, 7, 1]);
+            const c = new Color([5, 6, 7, 1]);
             assertColor(c, 5, 6, 7, 1);
             assert.equal(c.isTransparent(), false);
         });
 
-        it('[5,6,7,0]', function() {
+        it('[5,6,7,0]', () => {
-            var c = new Color([5, 6, 7, 0]);
+            const c = new Color([5, 6, 7, 0]);
             assertColor(c, 5, 6, 7, 0);
             assert.equal(c.isTransparent(), true);
         });
     });
 
-    describe('transparency', function() {
+    describe('transparency', () => {
-        it('transparent', function() {
+        it('transparent', () => {
-            var c = new Color('transparent');
+            const c = new Color('transparent');
             assertColor(c, 0, 0, 0, 0);
             assert.equal(c.isTransparent(), true);
         });
 
-        it('rgba(255,255,255,0)', function() {
+        it('rgba(255,255,255,0)', () => {
-            var c = new Color('rgba(255,255,255,0)');
+            const c = new Color('rgba(255,255,255,0)');
             assertColor(c, 255, 255, 255, 0);
             assert.equal(c.isTransparent(), true);
         });

tests/node/package.js

@@ -1,24 +1,15 @@
-var assert = require('assert');
+const assert = require('assert');
-var path = require('path');
+const html2canvas = require('../../');
-var html2canvas = require('../../');
 
-describe('Package', function() {
+describe('Package', () => {
-    it('should have html2canvas defined', function() {
+    it('should have html2canvas defined', () => {
         assert.equal(typeof html2canvas, 'function');
     });
-});
 
-describe.only('requirejs', function() {
+    it('should have html2canvas defined', done => {
-    var requirejs = require('requirejs');
+        html2canvas('').catch((err) => {
-
+            assert.equal(err, 'Provided element is not within a Document');
-    requirejs.config({
-        baseUrl: path.resolve(__dirname, '../../dist')
-    });
-
-    it('should have html2canvas defined', function(done) {
-        requirejs(['html2canvas'], function(h2c) {
-            assert.equal(typeof h2c, 'function');
             done();
-        });
+        })
     });
 });

webpack.config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const fs = require('fs');
 const path = require('path');
-
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json')));
 
 const banner =
@@ -36,6 +36,16 @@ module.exports = [
         module: modules,
         plugins
     },
+    {
+        entry: './src/index.js',
+        output: {
+            filename: './dist/html2canvas.min.js',
+            library: 'html2canvas',
+            libraryTarget: 'umd'
+        },
+        module: modules,
+        plugins: plugins.concat([new UglifyJSPlugin(), new webpack.BannerPlugin(banner)])
+    },
     {
         entry: './src/renderer/RefTestRenderer.js',
         output: {