feat: sideEffects false (#10526)

* feat: sideEffects false
* refactor: apply defaults by pure way

package.json

@@ -5,6 +5,10 @@
     "version": "4.0.0-dev",
     "license": "MIT",
     "type": "module",
+    "sideEffects": [
+        "./auto/auto.js",
+        "./dist/chart.umd.js"
+    ],
     "jsdelivr": "dist/chart.umd.js",
     "unpkg": "dist/chart.umd.js",
     "main": "dist/chart.js",

src/core/core.animations.defaults.js

@@ -0,0 +1,72 @@
+const numbers = ['x', 'y', 'borderWidth', 'radius', 'tension'];
+const colors = ['color', 'borderColor', 'backgroundColor'];
+
+export function applyAnimationsDefaults(defaults) {
+  defaults.set('animation', {
+    delay: undefined,
+    duration: 1000,
+    easing: 'easeOutQuart',
+    fn: undefined,
+    from: undefined,
+    loop: undefined,
+    to: undefined,
+    type: undefined,
+  });
+
+  defaults.describe('animation', {
+    _fallback: false,
+    _indexable: false,
+    _scriptable: (name) => name !== 'onProgress' && name !== 'onComplete' && name !== 'fn',
+  });
+
+  defaults.set('animations', {
+    colors: {
+      type: 'color',
+      properties: colors
+    },
+    numbers: {
+      type: 'number',
+      properties: numbers
+    },
+  });
+
+  defaults.describe('animations', {
+    _fallback: 'animation',
+  });
+
+  defaults.set('transitions', {
+    active: {
+      animation: {
+        duration: 400
+      }
+    },
+    resize: {
+      animation: {
+        duration: 0
+      }
+    },
+    show: {
+      animations: {
+        colors: {
+          from: 'transparent'
+        },
+        visible: {
+          type: 'boolean',
+          duration: 0 // show immediately
+        },
+      }
+    },
+    hide: {
+      animations: {
+        colors: {
+          to: 'transparent'
+        },
+        visible: {
+          type: 'boolean',
+          easing: 'linear',
+          fn: v => v | 0 // for keeping the dataset visible all the way through the animation
+        },
+      }
+    }
+  });
+}

src/core/core.animations.js

@@ -3,79 +3,6 @@ import Animation from './core.animation';
 import defaults from './core.defaults';
 import {isArray, isObject} from '../helpers/helpers.core';
 
-const numbers = ['x', 'y', 'borderWidth', 'radius', 'tension'];
-const colors = ['color', 'borderColor', 'backgroundColor'];
-
-defaults.set('animation', {
-  delay: undefined,
-  duration: 1000,
-  easing: 'easeOutQuart',
-  fn: undefined,
-  from: undefined,
-  loop: undefined,
-  to: undefined,
-  type: undefined,
-});
-
-const animationOptions = Object.keys(defaults.animation);
-
-defaults.describe('animation', {
-  _fallback: false,
-  _indexable: false,
-  _scriptable: (name) => name !== 'onProgress' && name !== 'onComplete' && name !== 'fn',
-});
-
-defaults.set('animations', {
-  colors: {
-    type: 'color',
-    properties: colors
-  },
-  numbers: {
-    type: 'number',
-    properties: numbers
-  },
-});
-
-defaults.describe('animations', {
-  _fallback: 'animation',
-});
-
-defaults.set('transitions', {
-  active: {
-    animation: {
-      duration: 400
-    }
-  },
-  resize: {
-    animation: {
-      duration: 0
-    }
-  },
-  show: {
-    animations: {
-      colors: {
-        from: 'transparent'
-      },
-      visible: {
-        type: 'boolean',
-        duration: 0 // show immediately
-      },
-    }
-  },
-  hide: {
-    animations: {
-      colors: {
-        to: 'transparent'
-      },
-      visible: {
-        type: 'boolean',
-        easing: 'linear',
-        fn: v => v | 0 // for keeping the dataset visible all the way through the animation
-      },
-    }
-  }
-});
-
 export default class Animations {
   constructor(chart, config) {
     this._chart = chart;
@@ -88,6 +15,7 @@ export default class Animations {
       return;
     }
 
+    const animationOptions = Object.keys(defaults.animation);
     const animatedProps = this._properties;
 
     Object.getOwnPropertyNames(config).forEach(key => {

src/core/core.defaults.js

@@ -1,5 +1,8 @@
 import {getHoverColor} from '../helpers/helpers.color';
 import {isObject, merge, valueOrDefault} from '../helpers/helpers.core';
+import {applyAnimationsDefaults} from './core.animations.defaults';
+import {applyLayoutsDefaults} from './core.layouts.defaults';
+import {applyScaleDefaults} from './core.scale.defaults';
 
 export const overrides = Object.create(null);
 export const descriptors = Object.create(null);
@@ -33,7 +36,7 @@ function set(root, scope, values) {
  * Note: class is exported for typedoc
  */
 export class Defaults {
-  constructor(_descriptors) {
+  constructor(_descriptors, _appliers) {
     this.animation = undefined;
     this.backgroundColor = 'rgba(0,0,0,0.1)';
     this.borderColor = 'rgba(0,0,0,0.1)';
@@ -77,6 +80,7 @@ export class Defaults {
     this.drawActiveElementsOnTop = true;
 
     this.describe(_descriptors);
+    this.apply(_appliers);
   }
 
   /**
@@ -151,6 +155,10 @@ export class Defaults {
       }
     });
   }
+
+  apply(appliers) {
+    appliers.forEach((apply) => apply(this));
+  }
 }
 
 // singleton instance
@@ -164,4 +172,4 @@ export default /* #__PURE__ */ new Defaults({
     _scriptable: false,
     _indexable: false,
   }
-});
+}, [applyAnimationsDefaults, applyLayoutsDefaults, applyScaleDefaults]);

src/core/core.layouts.defaults.js

@@ -0,0 +1,11 @@
+export function applyLayoutsDefaults(defaults) {
+  defaults.set('layout', {
+    autoPadding: true,
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  });
+}

src/core/core.layouts.js

@@ -1,4 +1,3 @@
-import defaults from './core.defaults';
 import {defined, each, isObject} from '../helpers/helpers.core';
 import {toPadding} from '../helpers/helpers.options';
 
@@ -259,16 +258,6 @@ function placeBoxes(boxes, chartArea, params, stacks) {
   chartArea.y = y;
 }
 
-defaults.set('layout', {
-  autoPadding: true,
-  padding: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  }
-});
-
 /**
  * @interface LayoutItem
  * @typedef {object} LayoutItem

src/core/core.scale.defaults.js

@@ -1,99 +1,100 @@
-import defaults from './core.defaults';
 import Ticks from './core.ticks';
 
-defaults.set('scale', {
-  display: true,
-  offset: false,
-  reverse: false,
-  beginAtZero: false,
-
-  /**
-	 * Scale boundary strategy (bypassed by min/max time options)
-	 * - `data`: make sure data are fully visible, ticks outside are removed
-	 * - `ticks`: make sure ticks are fully visible, data outside are truncated
-	 * @see https://github.com/chartjs/Chart.js/pull/4556
-	 * @since 3.0.0
-	 */
-  bounds: 'ticks',
-
-  /**
-   * Addition grace added to max and reduced from min data value.
-   * @since 3.0.0
-   */
-  grace: 0,
-
-  // grid line settings
-  grid: {
+export function applyScaleDefaults(defaults) {
+  defaults.set('scale', {
     display: true,
-    lineWidth: 1,
-    drawBorder: true,
-    drawOnChartArea: true,
-    drawTicks: true,
-    tickLength: 8,
-    tickWidth: (_ctx, options) => options.lineWidth,
-    tickColor: (_ctx, options) => options.color,
     offset: false,
-    borderDash: [],
-    borderDashOffset: 0.0,
-    borderWidth: 1
-  },
+    reverse: false,
+    beginAtZero: false,
 
-  // scale title
-  title: {
-    // display property
-    display: false,
+    /**
+     * Scale boundary strategy (bypassed by min/max time options)
+     * - `data`: make sure data are fully visible, ticks outside are removed
+     * - `ticks`: make sure ticks are fully visible, data outside are truncated
+     * @see https://github.com/chartjs/Chart.js/pull/4556
+     * @since 3.0.0
+     */
+    bounds: 'ticks',
 
-    // actual label
-    text: '',
+    /**
+     * Addition grace added to max and reduced from min data value.
+     * @since 3.0.0
+     */
+    grace: 0,
 
-    // top/bottom padding
-    padding: {
-      top: 4,
-      bottom: 4
+    // grid line settings
+    grid: {
+      display: true,
+      lineWidth: 1,
+      drawBorder: true,
+      drawOnChartArea: true,
+      drawTicks: true,
+      tickLength: 8,
+      tickWidth: (_ctx, options) => options.lineWidth,
+      tickColor: (_ctx, options) => options.color,
+      offset: false,
+      borderDash: [],
+      borderDashOffset: 0.0,
+      borderWidth: 1
+    },
+
+    // scale title
+    title: {
+      // display property
+      display: false,
+
+      // actual label
+      text: '',
+
+      // top/bottom padding
+      padding: {
+        top: 4,
+        bottom: 4
+      }
+    },
+
+    // label settings
+    ticks: {
+      minRotation: 0,
+      maxRotation: 50,
+      mirror: false,
+      textStrokeWidth: 0,
+      textStrokeColor: '',
+      padding: 3,
+      display: true,
+      autoSkip: true,
+      autoSkipPadding: 3,
+      labelOffset: 0,
+      // We pass through arrays to be rendered as multiline labels, we convert Others to strings here.
+      callback: Ticks.formatters.values,
+      minor: {},
+      major: {},
+      align: 'center',
+      crossAlign: 'near',
+
+      showLabelBackdrop: false,
+      backdropColor: 'rgba(255, 255, 255, 0.75)',
+      backdropPadding: 2,
     }
-  },
+  });
 
-  // label settings
-  ticks: {
-    minRotation: 0,
-    maxRotation: 50,
-    mirror: false,
-    textStrokeWidth: 0,
-    textStrokeColor: '',
-    padding: 3,
-    display: true,
-    autoSkip: true,
-    autoSkipPadding: 3,
-    labelOffset: 0,
-    // We pass through arrays to be rendered as multiline labels, we convert Others to strings here.
-    callback: Ticks.formatters.values,
-    minor: {},
-    major: {},
-    align: 'center',
-    crossAlign: 'near',
+  defaults.route('scale.ticks', 'color', '', 'color');
+  defaults.route('scale.grid', 'color', '', 'borderColor');
+  defaults.route('scale.grid', 'borderColor', '', 'borderColor');
+  defaults.route('scale.title', 'color', '', 'color');
 
-    showLabelBackdrop: false,
-    backdropColor: 'rgba(255, 255, 255, 0.75)',
-    backdropPadding: 2,
-  }
-});
+  defaults.describe('scale', {
+    _fallback: false,
+    _scriptable: (name) => !name.startsWith('before') && !name.startsWith('after') && name !== 'callback' && name !== 'parser',
+    _indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash',
+  });
 
-defaults.route('scale.ticks', 'color', '', 'color');
-defaults.route('scale.grid', 'color', '', 'borderColor');
-defaults.route('scale.grid', 'borderColor', '', 'borderColor');
-defaults.route('scale.title', 'color', '', 'color');
+  defaults.describe('scales', {
+    _fallback: 'scale',
+  });
 
-defaults.describe('scale', {
-  _fallback: false,
-  _scriptable: (name) => !name.startsWith('before') && !name.startsWith('after') && name !== 'callback' && name !== 'parser',
-  _indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash',
-});
-
-defaults.describe('scales', {
-  _fallback: 'scale',
-});
-
-defaults.describe('scale.ticks', {
-  _scriptable: (name) => name !== 'backdropPadding' && name !== 'callback',
-  _indexable: (name) => name !== 'backdropPadding',
-});
+  defaults.describe('scale.ticks', {
+    _scriptable: (name) => name !== 'backdropPadding' && name !== 'callback',
+    _indexable: (name) => name !== 'backdropPadding',
+  });
+}

src/core/core.scale.js

@@ -4,13 +4,8 @@ import {callback as call, each, finiteOrDefault, isArray, isFinite, isNullOrUnde
 import {toDegrees, toRadians, _int16Range, _limitValue, HALF_PI} from '../helpers/helpers.math';
 import {_alignStartEnd, _toLeftRightCenter} from '../helpers/helpers.extras';
 import {createContext, toFont, toPadding, _addGrace} from '../helpers/helpers.options';
-
-import './core.scale.defaults';
-
-
 import {autoSkip} from './core.scale.autoskip';
 
-
 const reverseAlign = (align) => align === 'left' ? 'right' : align === 'right' ? 'left' : align;
 const offsetFromEdge = (scale, edge, offset) => edge === 'top' || edge === 'left' ? scale[edge] + offset : scale[edge] - offset;
 

src/scales/scale.time.js

@@ -27,7 +27,7 @@ const INTERVALS = {
 /**
  * @type {Unit[]}
  */
-const UNITS = /** @type Unit[] */(Object.keys(INTERVALS));
+const UNITS = /** @type Unit[] */ /* #__PURE__ */ (Object.keys(INTERVALS));
 
 /**
  * @param {number} a