diff --git a/.npmignore b/.npmignore index cca70c4..9d35537 100644 --- a/.npmignore +++ b/.npmignore @@ -1,10 +1,14 @@ -tests/ +build/ examples/ -Gruntfile.js -bower.json +scripts/ src/ +tests/ *.iml +.babelrc .idea/ .npmignore .jshintrc .travis.yml +karma.js +karma.config.js +webpack.config.js diff --git a/package.json b/package.json index 494b823..76c8fe9 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index 582b3f7..707e192 100644 --- a/src/index.js +++ b/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; diff --git a/tests/node/color.js b/tests/node/color.js index 609b55c..fef20e5 100644 --- a/tests/node/color.js +++ b/tests/node/color.js @@ -1,110 +1,110 @@ -var Color = require('../../src/color'); -var assert = require('assert'); +const Color = require('../../dist/npm/Color').default; +const assert = require('assert'); -describe('Colors', function() { - describe('named colors', function() { - it('bisque', function() { - var c = new Color('bisque'); +describe('Colors', () => { + describe('named colors', () => { + it('bisque', () => { + const c = new Color('bisque'); assertColor(c, 255, 228, 196, null); assert.equal(c.isTransparent(), false); }); - it('BLUE', function() { - var c = new Color('BLUE'); + it('BLUE', () => { + const c = new Color('BLUE'); assertColor(c, 0, 0, 255, null); assert.equal(c.isTransparent(), false); }); }); - describe('rgb()', function() { - it('rgb(1,3,5)', function() { - var c = new Color('rgb(1,3,5)'); + describe('rgb()', () => { + it('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() { - var c = new Color('rgb(222, 111, 50)'); + it('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() { - var c = new Color('rgb(222 , 111 , 50)'); + it('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() { - it('rgba(200,3,5,1)', function() { - var c = new Color('rgba(200,3,5,1)'); + describe('rgba()', () => { + it('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() { - var c = new Color('rgba(222, 111, 50, 0.22)'); + it('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() { - var c = new Color('rgba(222 , 111 , 50, 0.123)'); + it('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() { - it('#7FFFD4', function() { - var c = new Color('#7FFFD4'); + describe('hex', () => { + it('#7FFFD4', () => { + const c = new Color('#7FFFD4'); assertColor(c, 127, 255, 212, null); assert.equal(c.isTransparent(), false); }); - it('#f0ffff', function() { - var c = new Color('#f0ffff'); + it('#f0ffff', () => { + const c = new Color('#f0ffff'); assertColor(c, 240, 255, 255, null); assert.equal(c.isTransparent(), false); }); - it('#fff', function() { - var c = new Color('#fff'); + it('#fff', () => { + const c = new Color('#fff'); assertColor(c, 255, 255, 255, null); assert.equal(c.isTransparent(), false); }); }); - describe('from array', function() { - it('[1,2,3]', function() { - var c = new Color([1, 2, 3]); + describe('from array', () => { + it('[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() { - var c = new Color([5, 6, 7, 1]); + it('[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() { - var c = new Color([5, 6, 7, 0]); + it('[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() { - it('transparent', function() { - var c = new Color('transparent'); + describe('transparency', () => { + it('transparent', () => { + const c = new Color('transparent'); assertColor(c, 0, 0, 0, 0); assert.equal(c.isTransparent(), true); }); - it('rgba(255,255,255,0)', function() { - var c = new Color('rgba(255,255,255,0)'); + it('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); }); diff --git a/tests/node/package.js b/tests/node/package.js index e0e7b4e..133e77a 100644 --- a/tests/node/package.js +++ b/tests/node/package.js @@ -1,24 +1,15 @@ -var assert = require('assert'); -var path = require('path'); -var html2canvas = require('../../'); +const assert = require('assert'); +const html2canvas = require('../../'); -describe('Package', function() { - it('should have html2canvas defined', function() { +describe('Package', () => { + it('should have html2canvas defined', () => { assert.equal(typeof html2canvas, 'function'); }); -}); -describe.only('requirejs', function() { - var requirejs = require('requirejs'); - - requirejs.config({ - baseUrl: path.resolve(__dirname, '../../dist') - }); - - it('should have html2canvas defined', function(done) { - requirejs(['html2canvas'], function(h2c) { - assert.equal(typeof h2c, 'function'); + it('should have html2canvas defined', done => { + html2canvas('').catch((err) => { + assert.equal(err, 'Provided element is not within a Document'); done(); - }); + }) }); }); diff --git a/webpack.config.js b/webpack.config.js index 6bac381..f971c25 100644 --- a/webpack.config.js +++ b/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: {