Export plugin as an ESM compatible module (#222)

Author: santam85

docs/.vuepress/plugins/chart-editor/index.js

@@ -58,10 +58,6 @@ module.exports = ({imports}) => {
         resolve: {
           alias: {
             '@docs': resolve(__dirname, '../../../'),
-
-            // Don't use the Chart.js ESM build since it's not yet
-            // compatible with the current plugin implementation.
-            'chart.js': 'chart.js/dist/chart.js'
           }
         }
       });

docs/samples/register.js

@@ -1,4 +1,5 @@
-import {Chart} from 'chart.js';
+import {Chart, registerables} from 'chart.js';
 import plugin from '../../dist/chartjs-plugin-datalabels.js';
 
+Chart.register(...registerables);
 Chart.register(plugin);

docs/samples/utils.js

@@ -1,3 +1,5 @@
+import {color as Color} from 'chart.js/helpers';
+
 function fallback(/* values ... */) {
   var ilen = arguments.length;
   var i = 0;
@@ -11,10 +13,6 @@ function fallback(/* values ... */) {
   }
 }
 
-var Color = typeof window !== 'undefined' && window.Chart !== undefined ?
-  window.Chart.helpers.color :
-  function() {};
-
 export var COLORS = [
   '#FF3784',
   '#36A2EB',

package.json

@@ -5,6 +5,7 @@
   "version": "1.0.0-beta.1",
   "license": "MIT",
   "main": "dist/chartjs-plugin-datalabels.js",
+  "module": "dist/chartjs-plugin-datalabels.esm.js",
   "types": "types/index.d.ts",
   "repository": {
     "type": "git",

rollup.config.js

@@ -20,7 +20,8 @@ module.exports = [
         indent: false,
         plugins: [],
         globals: {
-          'chart.js': 'Chart'
+          'chart.js': 'Chart',
+          'chart.js/helpers': 'Chart.helpers'
         }
       };
 
@@ -37,7 +38,21 @@ module.exports = [
       return config;
     }),
     external: [
-      'chart.js'
+      'chart.js',
+      'chart.js/helpers',
     ]
-  }
+  },
+  {
+    input: 'src/plugin.js',
+    output: {
+      file: pkg.module,
+      banner: banner,
+      format: 'esm',
+      indent: false
+    },
+    external: [
+      'chart.js',
+      'chart.js/helpers',
+    ]
+  },
 ];

scripts/create-packages.js

@@ -9,6 +9,7 @@ const root = path.resolve(__dirname, '..');
 const inputs = [
   path.join(root, 'dist', `${pkg.name}.js`),
   path.join(root, 'dist', `${pkg.name}.min.js`),
+  path.join(root, 'dist', `${pkg.name}.esm.js`),
   path.join(root, 'LICENSE.md'),
   path.join(root, 'README.md'),
 ];

src/defaults.js

@@ -1,18 +1,16 @@
-import {Chart} from 'chart.js';
-
-var helpers = Chart.helpers;
+import {isNullOrUndef, isObject} from 'chart.js/helpers';
 
 var formatter = function(value) {
-  if (helpers.isNullOrUndef(value)) {
+  if (isNullOrUndef(value)) {
     return null;
   }
 
   var label = value;
   var keys, klen, k;
-  if (helpers.isObject(value)) {
-    if (!helpers.isNullOrUndef(value.label)) {
+  if (isObject(value)) {
+    if (!isNullOrUndef(value.label)) {
       label = value.label;
-    } else if (!helpers.isNullOrUndef(value.r)) {
+    } else if (!isNullOrUndef(value.r)) {
       label = value.r;
     } else {
       label = '';

src/hitbox.js

@@ -1,6 +1,4 @@
-import {Chart} from 'chart.js';
-
-var helpers = Chart.helpers;
+import {merge} from 'chart.js/helpers';
 
 var MIN_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991; // eslint-disable-line es/no-number-minsafeinteger
 var MAX_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;  // eslint-disable-line es/no-number-maxsafeinteger
@@ -61,7 +59,7 @@ var HitBox = function() {
   };
 };
 
-helpers.merge(HitBox.prototype, {
+merge(HitBox.prototype, {
   center: function() {
     var r = this._rect;
     return {

src/label.js

@@ -1,8 +1,17 @@
-import {Chart} from 'chart.js';
+import {ArcElement, BarElement, defaults, PointElement} from 'chart.js';
+import {
+  callback as callbackHelper,
+  isNullOrUndef,
+  merge,
+  resolve,
+  toFont,
+  toPadding,
+  valueOrDefault
+} from 'chart.js/helpers';
+
 import utils from './utils';
 import positioners from './positioners';
 
-var helpers = Chart.helpers;
 var rasterize = utils.rasterize;
 
 function boundingRects(model) {
@@ -47,13 +56,13 @@ function getScaleOrigin(el, context) {
 }
 
 function getPositioner(el) {
-  if (el instanceof Chart.elements.ArcElement) {
+  if (el instanceof ArcElement) {
     return positioners.arc;
   }
-  if (el instanceof Chart.elements.PointElement) {
+  if (el instanceof PointElement) {
     return positioners.point;
   }
-  if (el instanceof Chart.elements.BarElement) {
+  if (el instanceof BarElement) {
     return positioners.bar;
   }
   return positioners.fallback;
@@ -227,16 +236,15 @@ var Label = function(config, ctx, el, index) {
   me._el = el;
 };
 
-helpers.merge(Label.prototype, {
+merge(Label.prototype, {
   /**
    * @private
    */
   _modelize: function(display, lines, config, context) {
     var me = this;
     var index = me._index;
-    var resolve = helpers.resolve;
-    var font = helpers.toFont(resolve([config.font, {}], context, index));
-    var color = resolve([config.color, Chart.defaults.font.color], context, index);
+    var font = toFont(resolve([config.font, {}], context, index));
+    var color = resolve([config.color, defaults.color], context, index);
 
     return {
       align: resolve([config.align, 'center'], context, index),
@@ -255,7 +263,7 @@ helpers.merge(Label.prototype, {
       offset: resolve([config.offset, 0], context, index),
       opacity: resolve([config.opacity, 1], context, index),
       origin: getScaleOrigin(me._el, context),
-      padding: helpers.toPadding(resolve([config.padding, 0], context, index)),
+      padding: toPadding(resolve([config.padding, 0], context, index)),
       positioner: getPositioner(me._el),
       rotation: resolve([config.rotation, 0], context, index) * (Math.PI / 180),
       size: utils.textSize(me._ctx, lines, font),
@@ -277,12 +285,12 @@ helpers.merge(Label.prototype, {
 
     // We first resolve the display option (separately) to avoid computing
     // other options in case the label is hidden (i.e. display: false).
-    var display = helpers.resolve([config.display, true], context, index);
+    var display = resolve([config.display, true], context, index);
 
     if (display) {
       value = context.dataset.data[index];
-      label = helpers.valueOrDefault(helpers.callback(config.formatter, [value, context]), value);
-      lines = helpers.isNullOrUndef(label) ? [] : utils.toTextLines(label);
+      label = valueOrDefault(callbackHelper(config.formatter, [value, context]), value);
+      lines = isNullOrUndef(label) ? [] : utils.toTextLines(label);
 
       if (lines.length) {
         model = me._modelize(display, lines, config, context);

src/plugin.js

@@ -2,13 +2,13 @@
  * @see https://github.com/chartjs/Chart.js/issues/4176
  */
 
-import {Chart} from 'chart.js';
+import {callback as callbackHelper, each, merge} from 'chart.js/helpers';
+
 import Label from './label';
 import utils from './utils';
 import layout from './layout';
 import defaults from './defaults';
 
-var helpers = Chart.helpers;
 var EXPANDO_KEY = '$datalabels';
 var DEFAULT_KEY = '$default';
 
@@ -25,15 +25,15 @@ function configure(dataset, options) {
     override = {};
   }
 
-  options = helpers.merge({}, [options, override]);
+  options = merge({}, [options, override]);
   labels = options.labels || {};
   keys = Object.keys(labels);
   delete options.labels;
 
   if (keys.length) {
     keys.forEach(function(key) {
       if (labels[key]) {
-        configs.push(helpers.merge({}, [
+        configs.push(merge({}, [
           options,
           labels[key],
           {_key: key}
@@ -47,7 +47,7 @@ function configure(dataset, options) {
 
   // listeners: {<event-type>: {<label-key>: <fn>}}
   listeners = configs.reduce(function(target, config) {
-    helpers.each(config.listeners || {}, function(fn, event) {
+    each(config.listeners || {}, function(fn, event) {
       target[event] = target[event] || {};
       target[event][config._key || DEFAULT_KEY] = fn;
     });
@@ -80,7 +80,7 @@ function dispatchEvent(chart, listeners, label) {
     return;
   }
 
-  if (helpers.callback(callback, [context]) === true) {
+  if (callbackHelper(callback, [context]) === true) {
     // Users are allowed to tweak the given context by injecting values that can be
     // used in scriptable options to display labels differently based on the current
     // event (e.g. highlight an hovered label). That's why we update the label with
@@ -207,7 +207,7 @@ export default {
 
     // Store listeners at the chart level and per event type to optimize
     // cases where no listeners are registered for a specific event.
-    helpers.merge(expando._listeners, config.listeners, {
+    merge(expando._listeners, config.listeners, {
       merger: function(event, target, source) {
         target[event] = target[event] || {};
         target[event][args.index] = source[event];