From: Dan Onoshko Date: Sat, 6 Aug 2022 12:45:41 +0000 (+0400) Subject: feat: sideEffects false (#10526) X-Git-Tag: v4.0.0~65 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cdb17d6eebf35d865e75df5d7c483fc88a6082fe;p=thirdparty%2FChart.js.git feat: sideEffects false (#10526) * feat: sideEffects false * refactor: apply defaults by pure way --- diff --git a/package.json b/package.json index be63cae91..fe209a27b 100644 --- a/package.json +++ b/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", diff --git a/src/core/core.animations.defaults.js b/src/core/core.animations.defaults.js new file mode 100644 index 000000000..43501aba2 --- /dev/null +++ b/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 + }, + } + } + }); +} diff --git a/src/core/core.animations.js b/src/core/core.animations.js index fc1cd54e0..ad35720ee 100644 --- a/src/core/core.animations.js +++ b/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 => { diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js index 05de7e9ac..85d876048 100644 --- a/src/core/core.defaults.js +++ b/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]); diff --git a/src/core/core.layouts.defaults.js b/src/core/core.layouts.defaults.js new file mode 100644 index 000000000..cac2a7bca --- /dev/null +++ b/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 + } + }); +} diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js index 5154e1285..d69ea06e8 100644 --- a/src/core/core.layouts.js +++ b/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 diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index c067b3e5c..d73ae84ef 100644 --- a/src/core/core.scale.defaults.js +++ b/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, +export function applyScaleDefaults(defaults) { + 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', + /** + * 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, + /** + * Addition grace added to max and reduced from min data value. + * @since 3.0.0 + */ + grace: 0, - // 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 - }, + // 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, + // scale title + title: { + // display property + display: false, - // actual label - text: '', + // actual label + text: '', - // top/bottom padding - padding: { - top: 4, - bottom: 4 - } - }, + // 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', + // 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, - } -}); + showLabelBackdrop: false, + backdropColor: 'rgba(255, 255, 255, 0.75)', + backdropPadding: 2, + } + }); -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.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('scale', { - _fallback: false, - _scriptable: (name) => !name.startsWith('before') && !name.startsWith('after') && name !== 'callback' && name !== 'parser', - _indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash', -}); + 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('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', + }); +} diff --git a/src/core/core.scale.js b/src/core/core.scale.js index dcc2bc75f..5d20d8216 100644 --- a/src/core/core.scale.js +++ b/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; diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js index a3940472a..cbd230d0d 100644 --- a/src/scales/scale.time.js +++ b/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