Remove proposal and obsolete features (#7425)

babel.config.json

@@ -3,27 +3,9 @@
     "@babel/preset-env"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-object-assign"
   ],
   "env": {
-    "es6": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "targets": {
-              "esmodules": true
-            },
-            "modules": false,
-            "useBuiltIns": false
-          }
-        ]
-      ],
-      "plugins": [
-        "@babel/plugin-proposal-class-properties"
-      ]
-    },
     "test": {
       "plugins": [
         "istanbul"

docs/docs/developers/axes.md

@@ -5,9 +5,9 @@ title: New Axes
 Axes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not a mandatory requirement.
 
 ```javascript
-let MyScale = Chart.Scale.extend({
+class MyScale extends Chart.Scale{
     /* extensions ... */
-});
+}
 MyScale.id = 'myScale';
 MyScale.defaults = defaultConfigObject;
 

docs/docs/developers/charts.md

@@ -5,10 +5,11 @@ title: New Charts
 Chart.js 2.0 introduces the concept of controllers for each dataset. Like scales, new controllers can be written as needed.
 
 ```javascript
-Chart.controllers.MyType = Chart.DatasetController.extend({
+class MyType extends Chart.DatasetController {
 
-});
+}
 
+Chart.controllers.MyType = MyType;
 
 // Now we can create a new instance of our chart, using the Chart.js API
 new Chart(ctx, {
@@ -67,6 +68,7 @@ The following methods may optionally be overridden by derived dataset controller
 Extending or replacing an existing controller type is easy. Simply replace the constructor for one of the built in types with your own.
 
 The built in controller types are:
+
 * `Chart.controllers.line`
 * `Chart.controllers.bar`
 * `Chart.controllers.horizontalBar`
@@ -84,10 +86,10 @@ For example, to derive a new chart type that extends from a bubble chart, you wo
 Chart.defaults.derivedBubble = Chart.defaults.bubble;
 
 // I think the recommend using Chart.controllers.bubble.extend({ extensions here });
-var custom = Chart.controllers.bubble.extend({
-    draw: function(ease) {
+class Custom extends Chart.controllers.bubble {
+    draw() {
         // Call super method first
-        Chart.controllers.bubble.prototype.draw.call(this, ease);
+        super.draw(arguments);
 
         // Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
         var meta = this.getMeta();
@@ -105,7 +107,7 @@ var custom = Chart.controllers.bubble.extend({
 
 // Stores the controller so that the chart initialization routine can look it up with
 // Chart.controllers[type]
-Chart.controllers.derivedBubble = custom;
+Chart.controllers.derivedBubble = Custom;
 
 // Now we can create and use our new chart type
 new Chart(ctx, {

package-lock.json

@@ -92,20 +92,6 @@
         "semver": "^5.5.0"
       }
     },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.6.tgz",
-      "integrity": "sha512-6N9IeuyHvMBRyjNYOMJHrhwtu4WJMrYf8hVbEHD3pbbbmNOk1kmXSQs7bA4dYDUaIx4ZEzdnvo6NwC3WHd/Qow==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.9.5",
-        "@babel/helper-member-expression-to-functions": "^7.8.3",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.9.6",
-        "@babel/helper-split-export-declaration": "^7.8.3"
-      }
-    },
     "@babel/helper-create-regexp-features-plugin": {
       "version": "7.8.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz",
@@ -325,16 +311,6 @@
         "@babel/plugin-syntax-async-generators": "^7.8.0"
       }
     },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz",
-      "integrity": "sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
-      }
-    },
     "@babel/plugin-proposal-dynamic-import": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz",

package.json

@@ -34,7 +34,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.8.3",
     "@babel/preset-env": "^7.9.6",
     "@rollup/plugin-commonjs": "^11.1.0",

rollup.config.js

@@ -74,7 +74,6 @@ module.exports = [
 		plugins: [
 			json(),
 			resolve(),
-			babel({envName: 'es6'}),
 			cleanup({
 				sourcemap: true
 			})
@@ -92,7 +91,6 @@ module.exports = [
 		plugins: [
 			json(),
 			resolve(),
-			babel({envName: 'es6'}),
 			terser({
 				output: {
 					preamble: banner

src/core/core.controller.js

@@ -172,16 +172,7 @@ function getCanvas(item) {
 	return item;
 }
 
-export default class Chart {
-
-	static version = version;
-
-	/**
-	 * NOTE(SB) We actually don't use this container anymore but we need to keep it
-	 * for backward compatibility. Though, it can still be useful for plugins that
-	 * would need to work on multiple charts?!
-	 */
-	static instances = {};
+class Chart {
 
 	constructor(item, config) {
 		const me = this;
@@ -1128,3 +1119,14 @@ export default class Chart {
 		return changed;
 	}
 }
+
+Chart.version = version;
+
+/**
+ * NOTE(SB) We actually don't use this container anymore but we need to keep it
+ * for backward compatibility. Though, it can still be useful for plugins that
+ * would need to work on multiple charts?!
+ */
+Chart.instances = {};
+
+export default Chart;

src/core/core.datasetController.js

@@ -1,5 +1,5 @@
 import Animations from './core.animations';
-import {isObject, inherits, merge, _merger, isArray, valueOrDefault, mergeIf, arrayEquals} from '../helpers/helpers.core';
+import {isObject, merge, _merger, isArray, valueOrDefault, mergeIf, arrayEquals} from '../helpers/helpers.core';
 import {resolve} from '../helpers/helpers.options';
 import {getHoverColor} from '../helpers/helpers.color';
 import {sign} from '../helpers/helpers.math';
@@ -218,8 +218,6 @@ function getFirstScaleId(chart, axis) {
 
 export default class DatasetController {
 
-	static extend = inherits;
-
 	/**
 	 * @param {Chart} chart
 	 * @param {number} datasetIndex

src/core/core.element.js

@@ -1,10 +1,7 @@
-import {inherits} from '../helpers/helpers.core';
 import {isNumber} from '../helpers/helpers.math';
 
 export default class Element {
 
-	static extend = inherits;
-
 	constructor() {
 		this.x = undefined;
 		this.y = undefined;

src/elements/element.arc.js

@@ -84,9 +84,7 @@ function drawBorder(ctx, vm, arc) {
 	ctx.stroke();
 }
 
-export default class Arc extends Element {
-
-	static _type = 'arc';
+class Arc extends Element {
 
 	constructor(cfg) {
 		super();
@@ -197,3 +195,7 @@ export default class Arc extends Element {
 		ctx.restore();
 	}
 }
+
+Arc._type = 'arc';
+
+export default Arc;

src/elements/element.line.js

@@ -196,9 +196,7 @@ function _getInterpolationMethod(options) {
 	return _pointInLine;
 }
 
-export default class Line extends Element {
-
-	static _type = 'line';
+class Line extends Element {
 
 	constructor(cfg) {
 		super();
@@ -357,3 +355,7 @@ export default class Line extends Element {
 		ctx.restore();
 	}
 }
+
+Line._type = 'line';
+
+export default Line;

src/elements/element.point.js

@@ -17,9 +17,7 @@ defaults.set('elements', {
 	}
 });
 
-export default class Point extends Element {
-
-	static _type = 'point';
+class Point extends Element {
 
 	constructor(cfg) {
 		super();
@@ -86,3 +84,7 @@ export default class Point extends Element {
 		return options.radius + options.hitRadius;
 	}
 }
+
+Point._type = 'point';
+
+export default Point;

src/elements/element.rectangle.js

@@ -124,9 +124,7 @@ function inRange(bar, x, y, useFinalPosition) {
 		&& (skipY || y >= bounds.top && y <= bounds.bottom);
 }
 
-export default class Rectangle extends Element {
-
-	static _type = 'rectangle';
+class Rectangle extends Element {
 
 	constructor(cfg) {
 		super();
@@ -187,3 +185,7 @@ export default class Rectangle extends Element {
 		return axis === 'x' ? this.width / 2 : this.height / 2;
 	}
 }
+
+Rectangle._type = 'rectangle';
+
+export default Rectangle;

src/helpers/helpers.core.js

@@ -293,33 +293,6 @@ export function _mergerIf(key, target, source) {
 	}
 }
 
-/**
- * Basic javascript inheritance based on the model created in Backbone.js
- */
-export function inherits(extensions) {
-	// eslint-disable-next-line no-invalid-this
-	const me = this;
-	const ChartElement = (extensions && Object.prototype.hasOwnProperty.call(extensions, 'constructor')) ? extensions.constructor : function() {
-		// eslint-disable-next-line prefer-rest-params
-		return me.apply(this, arguments);
-	};
-
-	const Surrogate = function() {
-		this.constructor = ChartElement;
-	};
-
-	Surrogate.prototype = me.prototype;
-	ChartElement.prototype = new Surrogate();
-	ChartElement.extend = inherits;
-
-	if (extensions) {
-		Object.assign(ChartElement.prototype, extensions);
-	}
-
-	ChartElement.__super__ = me.prototype;
-	return ChartElement;
-}
-
 /**
  * @private
  */

src/scales/scale.category.js

@@ -3,11 +3,7 @@ import Scale from '../core/core.scale';
 const defaultConfig = {
 };
 
-export default class CategoryScale extends Scale {
-
-	static id = 'category';
-	// INTERNAL: static default options, registered in src/index.js
-	static defaults = defaultConfig;
+class CategoryScale extends Scale {
 
 	constructor(cfg) {
 		super(cfg);
@@ -109,3 +105,10 @@ export default class CategoryScale extends Scale {
 		return this.bottom;
 	}
 }
+
+CategoryScale.id = 'category';
+
+// INTERNAL: default options, registered in src/index.js
+CategoryScale.defaults = defaultConfig;
+
+export default CategoryScale;

src/scales/scale.linear.js

@@ -8,11 +8,7 @@ const defaultConfig = {
 	}
 };
 
-export default class LinearScale extends LinearScaleBase {
-
-	static id = 'linear';
-	// INTERNAL: static default options, registered in src/index.js
-	static defaults = defaultConfig;
+class LinearScale extends LinearScaleBase {
 
 	determineDataLimits() {
 		const me = this;
@@ -66,3 +62,10 @@ export default class LinearScale extends LinearScaleBase {
 		return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
 	}
 }
+
+LinearScale.id = 'linear';
+
+// INTERNAL: default options, registered in src/index.js
+LinearScale.defaults = defaultConfig;
+
+export default LinearScale;

src/scales/scale.logarithmic.js

@@ -57,11 +57,7 @@ const defaultConfig = {
 	}
 };
 
-export default class LogarithmicScale extends Scale {
-
-	static id = 'logarithmic';
-	// INTERNAL: static default options, registered in src/index.js
-	static defaults = defaultConfig;
+class LogarithmicScale extends Scale {
 
 	constructor(cfg) {
 		super(cfg);
@@ -187,3 +183,10 @@ export default class LogarithmicScale extends Scale {
 		return Math.pow(10, me._startValue + decimal * me._valueRange);
 	}
 }
+
+LogarithmicScale.id = 'logarithmic';
+
+// INTERNAL: default options, registered in src/index.js
+LogarithmicScale.defaults = defaultConfig;
+
+export default LogarithmicScale;

src/scales/scale.radialLinear.js

@@ -289,11 +289,7 @@ function numberOrZero(param) {
 	return isNumber(param) ? param : 0;
 }
 
-export default class RadialLinearScale extends LinearScaleBase {
-
-	static id = 'radialLinear';
-	// INTERNAL: static default options, registered in src/index.js
-	static defaults = defaultConfig;
+class RadialLinearScale extends LinearScaleBase {
 
 	constructor(cfg) {
 		super(cfg);
@@ -547,3 +543,10 @@ export default class RadialLinearScale extends LinearScaleBase {
 	 */
 	drawTitle() {}
 }
+
+RadialLinearScale.id = 'radialLinear';
+
+// INTERNAL: default options, registered in src/index.js
+RadialLinearScale.defaults = defaultConfig;
+
+export default RadialLinearScale;

src/scales/scale.time.js

@@ -542,11 +542,7 @@ const defaultConfig = {
 	}
 };
 
-export default class TimeScale extends Scale {
-
-	static id = 'time';
-	// INTERNAL: static default options, registered in src/index.js
-	static defaults = defaultConfig;
+class TimeScale extends Scale {
 
 	/**
 	 * @param {object} props
@@ -812,3 +808,10 @@ export default class TimeScale extends Scale {
 		return capacity > 0 ? capacity : 1;
 	}
 }
+
+TimeScale.id = 'time';
+
+// INTERNAL: default options, registered in src/index.js
+TimeScale.defaults = defaultConfig;
+
+export default TimeScale;

test/specs/core.scale.tests.js

@@ -454,15 +454,15 @@ describe('Core.scale', function() {
 		});
 
 		it('should default to one layer for custom scales', function() {
-			var customScale = Chart.Scale.extend({
-				draw: function() {},
-				convertTicksToLabels: function() {
+			class CustomScale extends Chart.Scale {
+				draw() {}
+				convertTicksToLabels() {
 					return ['tick'];
 				}
-			});
-			customScale.id = 'customScale';
-			customScale.defaults = {};
-			Chart.scaleService.registerScale(customScale);
+			}
+			CustomScale.id = 'customScale';
+			CustomScale.defaults = {};
+			Chart.scaleService.registerScale(CustomScale);
 
 			var chart = window.acquireChart({
 				type: 'line',

test/specs/helpers.core.tests.js

@@ -429,57 +429,4 @@ describe('Chart.helpers.core', function() {
 			expect(output.o.a).not.toBe(a1);
 		});
 	});
-
-	describe('extend', 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 = Object.assign(target, object);
-
-			expect(result).toBe(target);
-			expect(target).toEqual({a: 'abc', b: 0, c: [2, 5, 6]});
-		});
-		it('should merge multiple objects properties in target', function() {
-			var target = {a: 0, b: 1};
-			var o0 = {a: 2, c: 3, d: 4};
-			var o1 = {a: 5, c: 6};
-			var o2 = {a: 7, e: 8};
-
-			Object.assign(target, o0, o1, o2);
-
-			expect(target).toEqual({a: 7, b: 1, c: 6, d: 4, e: 8});
-		});
-		it('should not deeply merge object properties in target', function() {
-			var target = {a: {b: 0, c: 1}};
-			var object = {a: {b: 2, d: 3}};
-
-			Object.assign(target, object);
-
-			expect(target).toEqual({a: {b: 2, d: 3}});
-			expect(target.a).toBe(object.a);
-		});
-	});
-
-	describe('inherits', function() {
-		it('should return a derived class', function() {
-			var A = function() {};
-			A.prototype.p0 = 41;
-			A.prototype.p1 = function() {
-				return '42';
-			};
-
-			A.inherits = helpers.inherits;
-			var B = A.inherits({p0: 43, p2: [44]});
-			var C = A.inherits({p3: 45, p4: [46]});
-			var b = new B();
-
-			expect(b instanceof A).toBeTruthy();
-			expect(b instanceof B).toBeTruthy();
-			expect(b instanceof C).toBeFalsy();
-
-			expect(b.p0).toBe(43);
-			expect(b.p1()).toBe('42');
-			expect(b.p2).toEqual([44]);
-		});
-	});
 });