From: Jukka Kurkela Date: Fri, 14 Feb 2020 17:29:33 +0000 (+0200) Subject: Babel @kurkle/color for IE support (#7099) X-Git-Tag: v3.0.0-alpha~52 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7c1fb37c6135e91b64faa97dc24c4eaf45ada4d3;p=thirdparty%2FChart.js.git Babel @kurkle/color for IE support (#7099) Babel @kurkle/color for IE support --- diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 1320b9a32..000000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["@babel/preset-env"] -} diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 000000000..016cf26d5 --- /dev/null +++ b/babel.config.json @@ -0,0 +1,4 @@ +{ + "presets": ["@babel/preset-env"], + "plugins": ["@babel/plugin-transform-object-assign"] +} diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md index 631413c8a..c8d239d02 100644 --- a/docs/getting-started/v3-migration.md +++ b/docs/getting-started/v3-migration.md @@ -103,6 +103,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now * `helpers.findIndex` * `helpers.findNextWhere` * `helpers.findPreviousWhere` +* `helpers.extend`. Use `Object.assign` instead * `helpers.indexOf` * `helpers.lineTo` * `helpers.longestText` was moved to the `helpers.canvas` namespace and made private diff --git a/package-lock.json b/package-lock.json index 46cad3fa8..6b20e9930 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1846,6 +1846,15 @@ "@babel/helper-plugin-utils": "^7.8.3" } }, + "@babel/plugin-transform-object-assign": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.8.3.tgz", + "integrity": "sha512-i3LuN8tPDqUCRFu3dkzF2r1Nx0jp4scxtm7JxtIqI9he9Vk20YD+/zshdzR9JLsoBMlJlNR82a62vQExNEVx/Q==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3" + } + }, "@babel/plugin-transform-object-super": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz", diff --git a/package.json b/package.json index edcd63255..22ab9883e 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ ], "devDependencies": { "@babel/core": "^7.8.4", + "@babel/plugin-transform-object-assign": "^7.8.3", "@babel/preset-env": "^7.8.4", "babel-preset-es2015-rollup": "^3.0.0", "clean-css": "^4.2.3", diff --git a/rollup.config.js b/rollup.config.js index 3cbfe0b5c..276b8738e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-commonjs */ /* eslint-env es6 */ const commonjs = require('rollup-plugin-commonjs'); @@ -9,6 +10,7 @@ const stylesheet = require('./rollup.plugins').stylesheet; const pkg = require('./package.json'); const input = 'src/index.js'; + const banner = `/*! * Chart.js v${pkg.version} * ${pkg.homepage} @@ -17,26 +19,27 @@ const banner = `/*! */`; module.exports = [ - // ES6 builds - // dist/Chart.esm.min.js - // dist/Chart.esm.js + // UMD builds + // dist/Chart.min.js + // dist/Chart.js { - input: input, + input, plugins: [ resolve(), commonjs(), - babel({ - exclude: 'node_modules/**' - }), + babel(), stylesheet({ extract: true }), + optional({ + include: ['moment'] + }) ], output: { name: 'Chart', - file: 'dist/Chart.esm.js', - banner: banner, - format: 'esm', + file: 'dist/Chart.js', + banner, + format: 'umd', indent: false, globals: { moment: 'moment' @@ -47,12 +50,13 @@ module.exports = [ ] }, { - input: input, + input, plugins: [ resolve(), commonjs(), - babel({ - exclude: 'node_modules/**' + babel(), + optional({ + include: ['moment'] }), stylesheet({ extract: true, @@ -66,8 +70,8 @@ module.exports = [ ], output: { name: 'Chart', - file: 'dist/Chart.esm.min.js', - format: 'esm', + file: 'dist/Chart.min.js', + format: 'umd', indent: false, globals: { moment: 'moment' @@ -77,29 +81,25 @@ module.exports = [ 'moment' ] }, - // UMD builds - // dist/Chart.min.js - // dist/Chart.js + + // ES6 builds + // dist/Chart.esm.min.js + // dist/Chart.esm.js { - input: input, + input, plugins: [ resolve(), commonjs(), - babel({ - exclude: 'node_modules/**' - }), + babel(), stylesheet({ extract: true }), - optional({ - include: ['moment'] - }) ], output: { name: 'Chart', - file: 'dist/Chart.js', - banner: banner, - format: 'umd', + file: 'dist/Chart.esm.js', + banner, + format: 'esm', indent: false, globals: { moment: 'moment' @@ -110,16 +110,11 @@ module.exports = [ ] }, { - input: input, + input, plugins: [ resolve(), commonjs(), - babel({ - exclude: 'node_modules/**' - }), - optional({ - include: ['moment'] - }), + babel(), stylesheet({ extract: true, minify: true @@ -132,8 +127,8 @@ module.exports = [ ], output: { name: 'Chart', - file: 'dist/Chart.min.js', - format: 'umd', + file: 'dist/Chart.esm.min.js', + format: 'esm', indent: false, globals: { moment: 'moment' @@ -142,5 +137,5 @@ module.exports = [ external: [ 'moment' ] - } + }, ]; diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 0ebf5b81e..2739c4000 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -1,7 +1,6 @@ import DatasetController from '../core/core.datasetController'; import defaults from '../core/core.defaults'; import Point from '../elements/element.point'; -import {extend} from '../helpers/helpers.core'; import {resolve} from '../helpers/helpers.options'; defaults.set('bubble', { @@ -152,7 +151,7 @@ class BubbleController extends DatasetController { // In case values were cached (and thus frozen), we need to clone the values if (values.$shared) { - values = extend({}, values, {$shared: false}); + values = Object.assign({}, values, {$shared: false}); } diff --git a/src/core/core.adapters.js b/src/core/core.adapters.js index 85e929ed1..ea26870fd 100644 --- a/src/core/core.adapters.js +++ b/src/core/core.adapters.js @@ -4,8 +4,6 @@ * @private */ -import {extend} from '../helpers/helpers.core'; - /** * @return {*} */ @@ -108,7 +106,7 @@ class DateAdapter { } DateAdapter.override = function(members) { - extend(DateAdapter.prototype, members); + Object.assign(DateAdapter.prototype, members); }; export default { diff --git a/src/core/core.animations.js b/src/core/core.animations.js index 8ed966e0a..427eb6154 100644 --- a/src/core/core.animations.js +++ b/src/core/core.animations.js @@ -1,7 +1,7 @@ import Animator from './core.animator'; import Animation from './core.animation'; import defaults from '../core/core.defaults'; -import {noop, extend, isObject} from '../helpers/helpers.core'; +import {noop, isObject} from '../helpers/helpers.core'; const numbers = ['x', 'y', 'borderWidth', 'radius', 'tension']; const colors = ['borderColor', 'backgroundColor']; @@ -61,9 +61,9 @@ function copyOptions(target, values) { return; } if (oldOpts.$shared) { - target.options = extend({}, oldOpts, newOpts, {$shared: false}); + target.options = Object.assign({}, oldOpts, newOpts, {$shared: false}); } else { - extend(oldOpts, newOpts); + Object.assign(oldOpts, newOpts); } delete values.options; } @@ -102,10 +102,10 @@ export default class Animations { (cfg.properties || [key]).forEach((prop) => { // Can have only one config per animation. if (!animatedProps.has(prop)) { - animatedProps.set(prop, extend({}, animDefaults, cfg)); + animatedProps.set(prop, Object.assign({}, animDefaults, cfg)); } else if (prop === key) { // Single property targetting config wins over multi-targetting. - animatedProps.set(prop, extend({}, animatedProps.get(prop), cfg)); + animatedProps.set(prop, Object.assign({}, animatedProps.get(prop), cfg)); } }); }); @@ -130,7 +130,7 @@ export default class Animations { if (options.$shared) { // If the current / old options are $shared, meaning other elements are // using the same options, we need to clone to become unique. - target.options = options = extend({}, options, {$shared: false, $animations: {}}); + target.options = options = Object.assign({}, options, {$shared: false, $animations: {}}); } animations = this._createAnimations(options, newOptions); } else { @@ -192,7 +192,7 @@ export default class Animations { copyOptions(target, values); // copyOptions removes the `options` from `values`, // unless it can be directly assigned. - extend(target, values); + Object.assign(target, values); return; } diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js index dc8e16f52..08bb7ea95 100644 --- a/src/core/core.datasetController.js +++ b/src/core/core.datasetController.js @@ -932,7 +932,7 @@ class DatasetController { let config = helpers.mergeIf({}, [datasetAnim, chartAnim]); if (config[mode]) { - config = helpers.extend({}, config, config[mode]); + config = Object.assign({}, config, config[mode]); } const animations = new Animations(chart, config); @@ -975,7 +975,7 @@ class DatasetController { */ _updateElement(element, index, properties, mode) { if (mode === 'reset' || mode === 'none') { - helpers.extend(element, properties); + Object.assign(element, properties); } else { this._resolveAnimations(index, mode).update(element, properties); } diff --git a/src/core/core.element.js b/src/core/core.element.js index 02a4bb2ae..77cbc8ccb 100644 --- a/src/core/core.element.js +++ b/src/core/core.element.js @@ -1,4 +1,4 @@ -import {extend, inherits} from '../helpers/helpers.core'; +import {inherits} from '../helpers/helpers.core'; import {isNumber} from '../helpers/helpers.math'; class Element { @@ -12,7 +12,7 @@ class Element { this.hidden = undefined; if (cfg) { - extend(this, cfg); + Object.assign(this, cfg); } } diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js index 9bb0ab335..0bf54834d 100644 --- a/src/core/core.layouts.js +++ b/src/core/core.layouts.js @@ -1,5 +1,5 @@ import defaults from './core.defaults'; -import {each, extend} from '../helpers/helpers.core'; +import {each} from '../helpers/helpers.core'; import {toPadding} from '../helpers/helpers.options'; /** @@ -348,8 +348,8 @@ export default { vBoxMaxWidth: availableWidth / 2 / verticalBoxes.length, hBoxMaxHeight: availableHeight / 2 }); - const chartArea = extend({ - maxPadding: extend({}, padding), + const chartArea = Object.assign({ + maxPadding: Object.assign({}, padding), w: availableWidth, h: availableHeight, x: padding.left, @@ -390,7 +390,7 @@ export default { // Finally update boxes in chartArea (radial scale for example) each(boxes.chartArea, (layout) => { const box = layout.box; - extend(box, chart.chartArea); + Object.assign(box, chart.chartArea); box.update(chartArea.w, chartArea.h); }); } diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 0a4ac9cb6..9f28ac4ed 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1,7 +1,7 @@ import defaults from './core.defaults'; import Element from './core.element'; import {_alignPixel, _measureText} from '../helpers/helpers.canvas'; -import {callback as call, each, extend, isArray, isFinite, isNullOrUndef, isObject, valueOrDefault} from '../helpers/helpers.core'; +import {callback as call, each, isArray, isFinite, isNullOrUndef, isObject, valueOrDefault} from '../helpers/helpers.core'; import {_factorize, toDegrees, toRadians} from '../helpers/helpers.math'; import {_parseFont, resolve, toPadding} from '../helpers/helpers.options'; import Ticks from './core.ticks'; @@ -436,7 +436,7 @@ class Scale extends Element { // Absorb the master measurements me.maxWidth = maxWidth; me.maxHeight = maxHeight; - me.margins = extend({ + me.margins = Object.assign({ left: 0, right: 0, top: 0, @@ -1555,7 +1555,7 @@ class Scale extends Element { tick: me.ticks[index], index }; - return extend(_parseFont({ + return Object.assign(_parseFont({ fontFamily: resolve([options.fontFamily], context), fontSize: resolve([options.fontSize], context), fontStyle: resolve([options.fontStyle], context), diff --git a/src/core/core.scaleService.js b/src/core/core.scaleService.js index 01713ce03..6e83448a7 100644 --- a/src/core/core.scaleService.js +++ b/src/core/core.scaleService.js @@ -1,5 +1,5 @@ import defaults from './core.defaults'; -import {clone, each, extend, merge} from '../helpers/helpers.core'; +import {clone, each, merge} from '../helpers/helpers.core'; import layouts from './core.layouts'; export default { @@ -25,7 +25,7 @@ export default { updateScaleDefaults(type, additions) { const me = this; if (Object.prototype.hasOwnProperty.call(me.defaults, type)) { - me.defaults[type] = extend(me.defaults[type], additions); + me.defaults[type] = Object.assign(me.defaults[type], additions); } }, addScalesToLayout(chart) { diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js index 984310890..5860216f1 100644 --- a/src/elements/element.arc.js +++ b/src/elements/element.arc.js @@ -1,6 +1,5 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; -import {extend} from '../helpers/helpers.core'; import {_angleBetween, getAngleFromPoint} from '../helpers/helpers.math'; const TAU = Math.PI * 2; @@ -98,7 +97,7 @@ class Arc extends Element { this.outerRadius = undefined; if (cfg) { - extend(this, cfg); + Object.assign(this, cfg); } } diff --git a/src/elements/element.line.js b/src/elements/element.line.js index 84582438e..a5913cf38 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -1,6 +1,5 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; -import {extend} from '../helpers/helpers.core'; import {_bezierInterpolation, _pointInLine, _steppedInterpolation} from '../helpers/helpers.interpolation'; import {_computeSegments, _boundSegments} from '../helpers/helpers.segment'; import {_steppedLineTo, _bezierCurveTo} from '../helpers/helpers.canvas'; @@ -210,7 +209,7 @@ class Line extends Element { this._segments = undefined; if (cfg) { - extend(this, cfg); + Object.assign(this, cfg); } } diff --git a/src/elements/element.point.js b/src/elements/element.point.js index 82a8089bd..e3c7c4e8e 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -1,7 +1,6 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; import {_isPointInArea, drawPoint} from '../helpers/helpers.canvas'; -import {extend} from '../helpers/helpers.core'; const defaultColor = defaults.color; @@ -29,7 +28,7 @@ class Point extends Element { this.stop = undefined; if (cfg) { - extend(this, cfg); + Object.assign(this, cfg); } } diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index b4ca3fa8a..b9bab5ac8 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -1,6 +1,6 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; -import {extend, isObject} from '../helpers/helpers.core'; +import {isObject} from '../helpers/helpers.core'; const defaultColor = defaults.color; @@ -138,7 +138,7 @@ class Rectangle extends Element { this.height = undefined; if (cfg) { - extend(this, cfg); + Object.assign(this, cfg); } } diff --git a/src/helpers/helpers.core.js b/src/helpers/helpers.core.js index be5a1cd41..ffcc0eae3 100644 --- a/src/helpers/helpers.core.js +++ b/src/helpers/helpers.core.js @@ -293,21 +293,6 @@ export function _mergerIf(key, target, source) { } } -/** - * Applies the contents of two or more objects together into the first object. - * @param {object} target - The target object in which all objects are merged into. - * @param {object} arg1 - Object containing additional properties to merge in target. - * @param {object} argN - Additional objects containing properties to merge in target. - * @returns {object} The `target` object. - */ -export const extend = Object.assign || function(target, ...args) { - return merge(target, args, { - merger(key, dst, src) { - dst[key] = src[key]; - } - }); -}; - /** * Basic javascript inheritance based on the model created in Backbone.js */ @@ -328,7 +313,7 @@ export function inherits(extensions) { ChartElement.extend = inherits; if (extensions) { - extend(ChartElement.prototype, extensions); + Object.assign(ChartElement.prototype, extensions); } ChartElement.__super__ = me.prototype; diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 76cc6599d..f947d108a 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -2,7 +2,7 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; import layouts from '../core/core.layouts'; import {drawPoint} from '../helpers/helpers.canvas'; -import {callback as call, extend, mergeIf, valueOrDefault} from '../helpers/helpers.core'; +import {callback as call, mergeIf, valueOrDefault} from '../helpers/helpers.core'; import {_parseFont, toPadding} from '../helpers/helpers.options'; import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl'; @@ -103,7 +103,7 @@ class Legend extends Element { constructor(config) { super(); - extend(this, config); + Object.assign(this, config); // Contains hit boxes for each dataset (in dataset order) this.legendHitBoxes = []; diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index e12c15723..505d492d7 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -21,7 +21,7 @@ class Title extends Element { constructor(config) { super(); - helpers.extend(this, config); + Object.assign(this, config); this.chart = config.chart; this.options = config.options; diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index a38f0923c..85664e721 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -236,7 +236,7 @@ function createTooltipItem(chart, item) { */ function resolveOptions(options) { - options = helpers.extend({}, defaults.tooltips, options); + options = Object.assign({}, defaults.tooltips, options); options.bodyFontFamily = valueOrDefault(options.bodyFontFamily, defaults.fontFamily); options.bodyFontStyle = valueOrDefault(options.bodyFontStyle, defaults.fontStyle); @@ -636,7 +636,7 @@ class Tooltip extends Element { me.footer = me.getFooter(tooltipItems, data); const size = me._size = getTooltipSize(me); - const positionAndSize = helpers.extend({}, position, size); + const positionAndSize = Object.assign({}, position, size); const alignment = determineAlignment(me._chart, options, positionAndSize); const backgroundPoint = getBackgroundPoint(options, positionAndSize, alignment, me._chart); @@ -917,7 +917,7 @@ class Tooltip extends Element { if (!position) { return; } - const positionAndSize = helpers.extend({}, position, me._size); + const positionAndSize = Object.assign({}, position, me._size); const alignment = determineAlignment(chart, options, positionAndSize); const point = getBackgroundPoint(options, positionAndSize, alignment, chart); if (animX._to !== point.x || animY._to !== point.y) { diff --git a/test/specs/helpers.core.tests.js b/test/specs/helpers.core.tests.js index de3892a83..869e9dfd1 100644 --- a/test/specs/helpers.core.tests.js +++ b/test/specs/helpers.core.tests.js @@ -413,7 +413,7 @@ describe('Chart.helpers.core', function() { it('should merge object properties in target and return target', function() { var target = {a: 'abc', b: 56}; var object = {b: 0, c: [2, 5, 6]}; - var result = helpers.extend(target, object); + var result = Object.assign(target, object); expect(result).toBe(target); expect(target).toEqual({a: 'abc', b: 0, c: [2, 5, 6]}); @@ -424,7 +424,7 @@ describe('Chart.helpers.core', function() { var o1 = {a: 5, c: 6}; var o2 = {a: 7, e: 8}; - helpers.extend(target, o0, o1, o2); + Object.assign(target, o0, o1, o2); expect(target).toEqual({a: 7, b: 1, c: 6, d: 4, e: 8}); }); @@ -432,7 +432,7 @@ describe('Chart.helpers.core', function() { var target = {a: {b: 0, c: 1}}; var object = {a: {b: 2, d: 3}}; - helpers.extend(target, object); + Object.assign(target, object); expect(target).toEqual({a: {b: 2, d: 3}}); expect(target.a).toBe(object.a); diff --git a/test/specs/helpers.options.tests.js b/test/specs/helpers.options.tests.js index 268e9a9f6..41aaa8f3c 100644 --- a/test/specs/helpers.options.tests.js +++ b/test/specs/helpers.options.tests.js @@ -75,7 +75,7 @@ describe('Chart.helpers.options', function() { const fontStyle = Chart.defaults.fontStyle; const lineHeight = Chart.defaults.lineHeight; - Chart.helpers.extend(Chart.defaults, { + Object.assign(Chart.defaults, { fontFamily: 'foobar', fontSize: 42, fontStyle: 'xxxyyy', @@ -91,7 +91,7 @@ describe('Chart.helpers.options', function() { weight: null }); - Chart.helpers.extend(Chart.defaults, { + Object.assign(Chart.defaults, { fontFamily, fontSize, fontStyle, diff --git a/test/specs/scale.logarithmic.tests.js b/test/specs/scale.logarithmic.tests.js index 15c3065f0..323084a9e 100644 --- a/test/specs/scale.logarithmic.tests.js +++ b/test/specs/scale.logarithmic.tests.js @@ -842,7 +842,7 @@ describe('Logarithmic Scale tests', function() { scaleConfig[setup.axis] = { type: 'logarithmic' }; - Chart.helpers.extend(scaleConfig, setup.scale); + Object.assign(scaleConfig, setup.scale); scaleConfig[setup.axis].type = 'logarithmic'; var description = 'dataset has stack option and ' + setup.describe @@ -987,9 +987,9 @@ describe('Logarithmic Scale tests', function() { data: setup.dataset }], }; - Chart.helpers.extend(xConfig, setup.scale); - Chart.helpers.extend(yConfig, setup.scale); - Chart.helpers.extend(data, setup.data || {}); + Object.assign(xConfig, setup.scale); + Object.assign(yConfig, setup.scale); + Object.assign(data, setup.data || {}); this.chart = window.acquireChart({ type: 'line', data: data, @@ -1109,9 +1109,9 @@ describe('Logarithmic Scale tests', function() { data: setup.dataset }], }; - Chart.helpers.extend(xConfig, setup.scale); - Chart.helpers.extend(yConfig, setup.scale); - Chart.helpers.extend(data, setup.data || {}); + Object.assign(xConfig, setup.scale); + Object.assign(yConfig, setup.scale); + Object.assign(data, setup.data || {}); this.chart = window.acquireChart({ type: 'line', data: data,