Add an ESM build (#414)

Author: joshkel

.gitignore

@@ -9,5 +9,3 @@ coverage/*
 
 nbproject/*
 dist/
-chartjs-plugin-zoom.js
-chartjs-plugin-zoom.min.js

gulpfile.js

@@ -10,7 +10,6 @@ var inquirer = require('inquirer');
 var semver = require('semver');
 var path = require('path');
 var fs = require('fs');
-var {exec} = require('child_process');
 var karma = require('karma');
 var merge = require('merge-stream');
 var yargs = require('yargs');
@@ -24,17 +23,6 @@ var srcDir = './src/';
 var srcFiles = srcDir + '**.js';
 var outDir = './dist/';
 
-function run(bin, args, done) {
-  var exe = '"' + process.execPath + '"';
-  var src = require.resolve(bin);
-  var ps = exec([exe, src].concat(args || []).join(' '));
-
-  ps.stdout.pipe(process.stdout);
-  ps.stderr.pipe(process.stderr);
-  ps.on('close', () => done());
-}
-
-gulp.task('build', gulp.series(rollupTask, copyDistFilesTask));
 gulp.task('package', packageTask);
 gulp.task('bump', bumpTask);
 gulp.task('lint-html', lintHtmlTask);
@@ -43,32 +31,23 @@ gulp.task('lint', gulp.parallel('lint-html', 'lint-js'));
 gulp.task('unittest', unittestTask);
 gulp.task('test', gulp.parallel('lint', 'unittest'));
 gulp.task('watch', watchTask);
-gulp.task('default', gulp.parallel('lint', 'build', 'watch'));
-
-function rollupTask(done) {
-  run('rollup/dist/bin/rollup', ['-c'], done);
-}
+gulp.task('default', gulp.parallel('lint', 'watch'));
 
-/**
- * Copy the files from `/dist` to the root directory.
- * @todo remove at version 1.0
+/*
+ * Create a zip file for distribution from the project's GitHub Releases page
  */
-function copyDistFilesTask() {
-  return gulp.src(outDir + '*.js')
-    .pipe(gulp.dest('./'));
-}
-
 function packageTask() {
   return merge(
-    // gather "regular" files landing in the package root
+    // Gather "regular" files from dist. We don't pass a `base` prop, so gulp will
+    // put these in the top level of the zip archive.
     gulp.src([outDir + '*.js', 'LICENSE.md']),
 
-    // since we moved the dist files one folder up (package root), we need to rewrite
+    // Since we move the dist files one folder up in the archive, we need to rewrite
     // samples src="../dist/ to src="../ and then copy them in the /samples directory.
     gulp.src('./samples/**/*', {base: '.'})
       .pipe(streamify(replace(/src="((?:\.\.\/)+)dist\//g, 'src="$1')))
   )
-  // finally, create the zip archive
+  // Finally, create the zip archive.
   .pipe(zip(pkg.name + '.zip'))
   .pipe(gulp.dest(outDir));
 }
@@ -151,5 +130,5 @@ function unittestTask(done) {
 }
 
 function watchTask() {
-  return gulp.watch(srcFiles, gulp.parallel('lint', 'build'));
+  return gulp.watch(srcFiles, gulp.parallel('lint'));
 }

karma.conf.js

@@ -49,14 +49,14 @@ module.exports = function(karma) {
 //			{pattern: 'test/fixtures/**/*.png', included: false},
 			'node_modules/chart.js/dist/chart.js',
 			'test/index.js',
-			'src/plugin.js'
+			'src/index.js'
 		].concat(args.inputs),
 
 		preprocessors: {
 //			'test/fixtures/**/*.js': ['fixtures'],
 			'test/specs/**/*.js': ['rollup'],
 			'test/index.js': ['rollup'],
-			'src/plugin.js': ['sources']
+			'src/index.js': ['sources']
 		},
 
 		rollupPreprocessor: {

package.json

@@ -6,12 +6,13 @@
   "jsdelivr": "dist/chartjs-plugin-zoom.min.js",
   "unpkg": "dist/chartjs-plugin-zoom.min.js",
   "main": "dist/chartjs-plugin-zoom.js",
+  "module": "dist/chartjs-plugin-zoom.esm.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/chartjs/chartjs-plugin-zoom.git"
   },
   "scripts": {
-    "build": "gulp build",
+    "build": "rollup -c",
     "test": "gulp test"
   },
   "devDependencies": {

rollup.config.js

@@ -1,10 +1,11 @@
 const commonjs = require('rollup-plugin-commonjs');
 const nodeResolve = require('rollup-plugin-node-resolve');
 const terser = require('rollup-plugin-terser').terser;
+
 const pkg = require('./package.json');
-const dependencies = Object.keys(pkg.dependencies)
-const peerDependencies = Object.keys(pkg.peerDependencies)
-const allDependencies = dependencies.concat(peerDependencies)
+const dependencies = Object.keys(pkg.dependencies);
+const peerDependencies = Object.keys(pkg.peerDependencies);
+const allDependencies = dependencies.concat(peerDependencies);
 
 const banner = `/*!
  * @license
@@ -17,19 +18,24 @@ const banner = `/*!
  * https://github.com/chartjs/${pkg.name}/blob/master/LICENSE.md
  */`;
 
+const name = 'ChartZoom';
+const globals = {
+	'chart.js': 'Chart',
+	'chart.js/helpers': 'Chart.helpers',
+	hammerjs: 'Hammer'
+};
+allDependencies.push('chart.js/helpers');
+
 module.exports = [
 	{
-		input: 'src/plugin.js',
+		input: 'src/index.js',
 		output: {
-			name: 'ChartZoom',
+			name,
 			file: `dist/${pkg.name}.js`,
-			banner: banner,
+			banner,
 			format: 'umd',
 			indent: false,
-			globals: {
-				'chart.js': 'Chart',
-				hammerjs: 'Hammer'
-			}
+			globals
 		},
 		plugins: [
 			commonjs({
@@ -40,17 +46,14 @@ module.exports = [
 		external: allDependencies
 	},
 	{
-		input: 'src/plugin.js',
+		input: 'src/index.js',
 		output: {
-			name: 'ChartZoom',
+			name,
 			file: `dist/${pkg.name}.min.js`,
-			banner: banner,
+			banner,
 			format: 'umd',
 			indent: false,
-			globals: {
-				'chart.js': 'Chart',
-				hammerjs: 'Hammer'
-			}
+			globals
 		},
 		plugins: [
 			commonjs({
@@ -60,5 +63,19 @@ module.exports = [
 			terser({output: {comments: 'some'}})
 		],
 		external: allDependencies
-	}
+	},
+	{
+		input: 'src/index.esm.js',
+		plugins: [
+			nodeResolve()
+		],
+		output: {
+			name,
+			file: `dist/${pkg.name}.esm.js`,
+			banner,
+			format: 'esm',
+			indent: false
+		},
+		external: allDependencies
+	},
 ];

src/index.esm.js

@@ -0,0 +1 @@
+export {default as Zoom} from './plugin';

src/index.js

@@ -0,0 +1,6 @@
+import {Chart} from 'chart.js';
+import Zoom from './plugin';
+
+Chart.register(Zoom);
+
+export default Zoom;

src/plugin.js

@@ -1,12 +1,10 @@
 'use strict';
 
-import Chart from 'chart.js';
+import {clone, each, isNullOrUndef, merge} from 'chart.js/helpers';
 import Hammer from 'hammerjs';
 
-var helpers = Chart.helpers;
-
-// Take the zoom namespace of Chart
-var zoomNS = Chart.Zoom = Chart.Zoom || {};
+// Zoom namespace (kept under Chart prior to Chart.js 3)
+var zoomNS = {};
 
 // Where we store functions to handle different scale types
 var zoomFunctions = zoomNS.zoomFunctions = zoomNS.zoomFunctions || {};
@@ -21,7 +19,7 @@ function resolveOptions(chart, options) {
 		deprecatedOptions.zoom = chart.options.zoom;
 	}
 	var props = chart.$zoom;
-	options = props._options = helpers.merge({}, [options, deprecatedOptions]);
+	options = props._options = merge({}, [options, deprecatedOptions]);
 
 	// Install listeners. Do this dynamically based on options so that we can turn zoom on and off
 	// We also want to make sure listeners aren't always on. E.g. if you're scrolling down a page
@@ -46,12 +44,12 @@ function resolveOptions(chart, options) {
 
 function storeOriginalOptions(chart) {
 	var originalOptions = chart.$zoom._originalOptions;
-	helpers.each(chart.scales, function(scale) {
+	each(chart.scales, function(scale) {
 		if (!originalOptions[scale.id]) {
-			originalOptions[scale.id] = helpers.clone(scale.options);
+			originalOptions[scale.id] = clone(scale.options);
 		}
 	});
-	helpers.each(originalOptions, function(opt, key) {
+	each(originalOptions, function(opt, key) {
 		if (!chart.scales[key]) {
 			delete originalOptions[key];
 		}
@@ -77,7 +75,7 @@ function directionEnabled(mode, dir, chart) {
 
 function rangeMaxLimiter(zoomPanOptions, newMax) {
 	if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&
-			!helpers.isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
+			!isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
 		var rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];
 		if (newMax > rangeMax) {
 			newMax = rangeMax;
@@ -88,7 +86,7 @@ function rangeMaxLimiter(zoomPanOptions, newMax) {
 
 function rangeMinLimiter(zoomPanOptions, newMin) {
 	if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMin &&
-			!helpers.isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {
+			!isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {
 		var rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];
 		if (newMin < rangeMin) {
 			newMin = rangeMin;
@@ -183,7 +181,7 @@ function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animat
 		// Do the zoom here
 		var zoomMode = typeof zoomOptions.mode === 'function' ? zoomOptions.mode({chart: chart}) : zoomOptions.mode;
 
-		// Which axe should be modified when figers were used.
+		// Which axes should be modified when fingers were used.
 		var _whichAxes;
 		if (zoomMode === 'xy' && whichAxes !== undefined) {
 			// based on fingers positions
@@ -193,7 +191,7 @@ function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animat
 			_whichAxes = 'xy';
 		}
 
-		helpers.each(chart.scales, function(scale) {
+		each(chart.scales, function(scale) {
 			if (scale.isHorizontal() && directionEnabled(zoomMode, 'x', chart) && directionEnabled(_whichAxes, 'x', chart)) {
 				zoomOptions.scaleAxes = 'x';
 				zoomScale(scale, percentZoomX, focalPoint, zoomOptions);
@@ -254,11 +252,11 @@ function panNumericalScale(scale, delta, panOptions) {
 	var diff;
 
 	if (panOptions.scaleAxes && panOptions.rangeMin &&
-			!helpers.isNullOrUndef(panOptions.rangeMin[panOptions.scaleAxes])) {
+			!isNullOrUndef(panOptions.rangeMin[panOptions.scaleAxes])) {
 		rangeMin = panOptions.rangeMin[panOptions.scaleAxes];
 	}
 	if (panOptions.scaleAxes && panOptions.rangeMax &&
-			!helpers.isNullOrUndef(panOptions.rangeMax[panOptions.scaleAxes])) {
+			!isNullOrUndef(panOptions.rangeMax[panOptions.scaleAxes])) {
 		rangeMax = panOptions.rangeMax[panOptions.scaleAxes];
 	}
 
@@ -289,7 +287,7 @@ function doPan(chartInstance, deltaX, deltaY) {
 	if (panOptions.enabled) {
 		var panMode = typeof panOptions.mode === 'function' ? panOptions.mode({chart: chartInstance}) : panOptions.mode;
 
-		helpers.each(chartInstance.scales, function(scale) {
+		each(chartInstance.scales, function(scale) {
 			if (scale.isHorizontal() && directionEnabled(panMode, 'x', chartInstance) && deltaX !== 0) {
 				panOptions.scaleAxes = 'x';
 				panScale(scale, deltaX, panOptions);
@@ -580,7 +578,7 @@ var zoomPlugin = {
 		chartInstance.resetZoom = function() {
 			storeOriginalOptions(chartInstance);
 			var originalOptions = chartInstance.$zoom._originalOptions;
-			helpers.each(chartInstance.scales, function(scale) {
+			each(chartInstance.scales, function(scale) {
 
 				var scaleOptions = scale.options;
 				if (originalOptions[scale.id]) {
@@ -671,5 +669,4 @@ var zoomPlugin = {
 	}
 };
 
-Chart.register(zoomPlugin);
 export default zoomPlugin;