feat: add ESM support (#10525)

* feat: add ESM support

* build: rename UMD bundle

* chore: edit supbackages description

* style: disable es/no-import-meta linter rule

* test: dynamic import in cjs module

* docs: edit integrations page

* docs: review fixes

* chore: remove useless regex in webpack config

* ci: test size-limit only for ESM bundle

.eslintignore

@@ -1 +1 @@
-dist/*.js
+dist/*

.eslintrc.yml

@@ -28,6 +28,7 @@ rules:
   no-empty-function: "off"
   no-use-before-define: ["error", { "functions": false }]
   # disable everything, except Rest/Spread Properties in ES2018
+  es/no-import-meta: "off"
   es/no-async-iteration: "error"
   es/no-malformed-template-literals: "error"
   es/no-regexp-lookbehind-assertions: "error"

.gitignore

@@ -13,6 +13,7 @@ npm-debug.log*
 build/
 # generated typedocs
 docs/api
+docs/.vuepress/dist
 
 # Development
 .DS_Store

.size-limit.cjs

@@ -7,46 +7,40 @@ function modifyWebpackConfig(config) {
 module.exports = [
   {
     path: 'dist/chart.js',
-    limit: '94.8 KB',
-    webpack: false,
-    running: false
-  },
-  {
-    path: 'dist/chart.esm.js',
     limit: '75 KB',
     webpack: false,
     running: false
   },
   {
-    path: 'dist/chart.esm.js',
+    path: 'dist/chart.js',
     limit: '34 KB',
     import: '{ Chart }',
     running: false,
     modifyWebpackConfig
   },
   {
-    path: 'dist/chart.esm.js',
+    path: 'dist/chart.js',
     limit: '19.5 KB',
     import: '{ BarController, BubbleController, DoughnutController, LineController, PolarAreaController, PieController, RadarController, ScatterController }',
     running: false,
     modifyWebpackConfig
   },
   {
-    path: 'dist/chart.esm.js',
+    path: 'dist/chart.js',
     limit: '14 KB',
     import: '{ ArcElement, LineElement, PointElement, BarElement }',
     running: false,
     modifyWebpackConfig
   },
   {
-    path: 'dist/chart.esm.js',
+    path: 'dist/chart.js',
     limit: '27 KB',
     import: '{ Decimation, Filler, Legend, SubTitle, Title, Tooltip }',
     running: false,
     modifyWebpackConfig
   },
   {
-    path: 'dist/chart.esm.js',
+    path: 'dist/chart.js',
     limit: '22 KB',
     import: '{ CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale }',
     running: false,

auto/auto.d.ts

@@ -0,0 +1,4 @@
+import {Chart} from '../types';
+
+export * from '../types';
+export default Chart;

auto/auto.js

@@ -1 +1,6 @@
-module.exports = require('../dist/chart');
+import {Chart, registerables} from '../dist/chart.js';
+
+Chart.register(...registerables);
+
+export * from '../dist/chart.js';
+export default Chart;

auto/auto.mjs

@@ -1,5 +0,0 @@
-import {Chart, registerables} from '../dist/chart.mjs';
-
-Chart.register(...registerables);
-
-export default Chart;

auto/auto.mts

@@ -1,4 +0,0 @@
-import { Chart } from '../types/index.esm';
-
-export * from '../types/index.esm';
-export default Chart;

auto/package.json

@@ -1,8 +1,9 @@
 {
     "name": "chart.js-auto",
     "private": true,
-    "description": "auto registering package",
+    "description": "Auto registering package. Exists to support bundlers without exports support such as webpack 4.",
+    "type": "module",
     "main": "auto.js",
-    "module": "auto.mjs",
-    "types": "auto.mts"
+    "exports": "./auto.js",
+    "types": "auto.d.ts"
 }

docs/.vuepress/config.cjs

@@ -33,7 +33,7 @@ module.exports = {
     [
       'vuepress-plugin-typedoc',
       {
-        entryPoints: ['../../types/index.esm.d.ts'],
+        entryPoints: ['../../types/index.d.ts'],
         hideInPageTOC: true,
         tsconfig: 'tsconfig.json',
         sidebar: {
@@ -94,12 +94,10 @@ module.exports = {
     config.merge({
       resolve: {
         alias: {
-          'chart.js': path.resolve(__dirname, '../../dist/chart.mjs'),
+          'chart.js': path.resolve(__dirname, '../../dist/chart.js'),
         }
       }
     })
-
-    config.module.rule('js').test(/\.m?jsx?$/)
   },
   markdown: {
     extendMarkdown: md => {

docs/getting-started/integration.md

@@ -5,19 +5,12 @@ Chart.js can be integrated with plain JavaScript or with different module loader
 ## Script Tag
 
 ```html
-<script src="path/to/chartjs/dist/chart.js"></script>
+<script src="path/to/chartjs/dist/chart.umd.js"></script>
 <script>
     const myChart = new Chart(ctx, {...});
 </script>
 ```
 
-## Common JS
-
-```javascript
-const Chart = require('chart.js');
-const myChart = new Chart(ctx, {...});
-```
-
 ## Bundlers (Webpack, Rollup, etc.)
 
 Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.
@@ -96,6 +89,14 @@ And finally there is a separate path to do just the above for you, in one line:
 import Chart from 'chart.js/auto';
 ```
 
+## CommonJS
+
+Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic `import`:
+
+```javascript
+const { Chart } = await import('chart.js');
+```
+
 ### Helper functions
 
 If you want to use the helper functions, you will need to import these separately from the helpers package and use them as stand-alone functions.
@@ -123,10 +124,10 @@ const chart = new Chart(ctx, {
 
 ## Require JS
 
-**Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds instead (i.e. `dist/chart.js`, `dist/chart.min.js`, etc.).
+**Important:** RequireJS can load only [AMD modules](https://requirejs.org/docs/whyamd.html), so be sure to require one of the UMD builds instead (i.e. `dist/chart.umd.js`).
 
 ```javascript
-require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
+require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
     const myChart = new Chart(ctx, {...});
 });
 ```

docs/scripts/components.js

@@ -1,3 +1,3 @@
 // Add Chart components needed in samples here.
 // Usable through `components[name]`.
-export {Tooltip} from '../../dist/chart.mjs';
+export {Tooltip} from '../../dist/chart.js';

docs/scripts/helpers.js

@@ -1,3 +1,3 @@
 // Add helpers needed in samples here.
 // Usable through `helpers[name]`.
-export {color, getHoverColor, easingEffects} from '../../dist/helpers.mjs';
+export {color, getHoverColor, easingEffects} from '../../dist/helpers.js';

docs/scripts/register.js

@@ -1,4 +1,4 @@
-import {Chart, registerables} from '../../dist/chart.mjs';
+import {Chart, registerables} from '../../dist/chart.js';
 import Log2Axis from './log2';
 import './derived-bubble';
 import analyzer from './analyzer';

docs/scripts/utils.js

@@ -1,7 +1,7 @@
 import colorLib from '@kurkle/color';
 import {DateTime} from 'luxon';
 import 'chartjs-adapter-luxon';
-import {valueOrDefault} from '../../dist/helpers.mjs';
+import {valueOrDefault} from '../../dist/helpers.js';
 
 // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
 var _seed = Date.now();

helpers/helpers.js

@@ -1 +1 @@
-module.exports = require('..').helpers;
+export * from '../dist/helpers.js';

helpers/helpers.mjs

@@ -1 +0,0 @@
-export * from '../dist/helpers.esm';

helpers/package.json

@@ -1,8 +1,9 @@
 {
     "name": "chart.js-helpers",
     "private": true,
-    "description": "helper package",
+    "description": "Helpers package. Exists to support bundlers without exports support such as webpack 4.",
+    "type": "module",
     "main": "helpers.js",
-    "module": "helpers.mjs",
-    "types": "helpers.mts"
-}
+    "exports": "./helpers.js",
+    "types": "helpers.d.ts"
+}

karma.conf.cjs

@@ -1,9 +1,9 @@
-const jasmineSeedReporter = require('./test/seed-reporter');
+const jasmineSeedReporter = require('./test/seed-reporter.cjs');
 const commonjs = require('@rollup/plugin-commonjs');
 const istanbul = require('rollup-plugin-istanbul');
 const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve').default;
-const builds = require('./rollup.config');
+const builds = require('./rollup.config.cjs');
 const yargs = require('yargs');
 
 module.exports = function(karma) {
@@ -18,9 +18,13 @@ module.exports = function(karma) {
   // we will prefer the unminified build which is easier to browse and works
   // better with source mapping. In other cases, pick the minified build to
   // make sure that the minification process (terser) doesn't break anything.
-  const regex = karma.autoWatch ? /chart\.js$/ : /chart\.min\.js$/;
+  const regex = /chart\.umd\.js$/;
   const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0];
 
+  if (karma.autoWatch) {
+    build.plugins.pop();
+  }
+
   if (args.coverage) {
     build.plugins = [
       json(),
@@ -87,14 +91,14 @@ module.exports = function(karma) {
       'node_modules/moment-timezone/builds/moment-timezone-with-data.min.js',
       {pattern: 'test/index.js', watched: false},
       {pattern: 'test/BasicChartWebWorker.js', included: false},
-      {pattern: 'src/index.js', watched: false},
+      {pattern: 'src/index.umd.js', watched: false},
       'node_modules/chartjs-adapter-moment/dist/chartjs-adapter-moment.js',
       {pattern: specPattern}
     ],
 
     preprocessors: {
       'test/index.js': ['rollup'],
-      'src/index.js': ['sources']
+      'src/index.umd.js': ['sources']
     },
 
     rollupPreprocessor: {

package-lock.json

@@ -54,7 +54,6 @@
                 "moment-timezone": "^0.5.34",
                 "pixelmatch": "^5.2.1",
                 "rollup": "^2.44.0",
-                "rollup-plugin-analyzer": "^4.0.0",
                 "rollup-plugin-cleanup": "^3.2.1",
                 "rollup-plugin-istanbul": "^3.0.0",
                 "rollup-plugin-terser": "^7.0.2",
@@ -15700,15 +15699,6 @@
                 "fsevents": "~2.3.2"
             }
         },
-        "node_modules/rollup-plugin-analyzer": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/rollup-plugin-analyzer/-/rollup-plugin-analyzer-4.0.0.tgz",
-            "integrity": "sha512-LL9GEt3bkXp6Wa19SNR5MWcvHNMvuTFYg+eYBZN2OIFhSWN+pEJUQXEKu5BsOeABob3x9PDaLKW7w5iOJnsESQ==",
-            "dev": true,
-            "engines": {
-                "node": ">=8.0.0"
-            }
-        },
         "node_modules/rollup-plugin-cleanup": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/rollup-plugin-cleanup/-/rollup-plugin-cleanup-3.2.1.tgz",
@@ -32864,12 +32854,6 @@
                 "fsevents": "~2.3.2"
             }
         },
-        "rollup-plugin-analyzer": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/rollup-plugin-analyzer/-/rollup-plugin-analyzer-4.0.0.tgz",
-            "integrity": "sha512-LL9GEt3bkXp6Wa19SNR5MWcvHNMvuTFYg+eYBZN2OIFhSWN+pEJUQXEKu5BsOeABob3x9PDaLKW7w5iOJnsESQ==",
-            "dev": true
-        },
         "rollup-plugin-cleanup": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/rollup-plugin-cleanup/-/rollup-plugin-cleanup-3.2.1.tgz",

package.json

@@ -4,11 +4,16 @@
     "description": "Simple HTML5 charts using the canvas element.",
     "version": "3.9.0",
     "license": "MIT",
-    "jsdelivr": "dist/chart.min.js",
-    "unpkg": "dist/chart.min.js",
+    "type": "module",
+    "jsdelivr": "dist/chart.umd.js",
+    "unpkg": "dist/chart.umd.js",
     "main": "dist/chart.js",
-    "module": "dist/chart.mjs",
-    "types": "types/index.esm.d.ts",
+    "exports": {
+        ".": "./dist/chart.js",
+        "./auto": "./auto/auto.js",
+        "./helpers": "./helpers/helpers.js"
+    },
+    "types": "types/index.d.ts",
     "keywords": [
         "canvas",
         "charts",
@@ -33,20 +38,20 @@
     "scripts": {
         "autobuild": "rollup -c -w",
         "build": "rollup -c",
-        "dev": "karma start --auto-watch --no-single-run --browsers chrome --grep",
-        "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox --grep",
+        "dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome --grep",
+        "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox --grep",
         "docs": "npm run build && vuepress build docs --no-cache",
         "docs:dev": "npm run build && vuepress dev docs --no-cache",
         "lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\" \"docs/**/*.js\"",
         "lint-md": "eslint \"**/*.md\"",
         "lint-tsc": "tsc",
-        "lint-types": "eslint \"types/**/*.ts\" && node -r esm types/tests/autogen.js && tsc -p types/tests/",
+        "lint-types": "eslint \"types/**/*.ts\" && npm run build && node types/tests/autogen.js && tsc -p types/tests/",
         "lint": "concurrently \"npm:lint-*\"",
         "test-size": "size-limit",
         "test": "npm run lint && npm run test-ci",
         "test-ci": "concurrently \"npm:test-ci-*\"",
-        "test-ci-karma": "cross-env NODE_ENV=test karma start --auto-watch --single-run --coverage --grep",
-        "test-ci-integration": "mocha --full-trace test/integration/*-test.js"
+        "test-ci-karma": "cross-env NODE_ENV=test karma start ./karma.conf.cjs --auto-watch --single-run --coverage --grep",
+        "test-ci-integration": "mocha --full-trace test/integration/*-test.cjs"
     },
     "devDependencies": {
         "@kurkle/color": "^0.2.1",
@@ -94,7 +99,6 @@
         "moment-timezone": "^0.5.34",
         "pixelmatch": "^5.2.1",
         "rollup": "^2.44.0",
-        "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-cleanup": "^3.2.1",
         "rollup-plugin-istanbul": "^3.0.0",
         "rollup-plugin-terser": "^7.0.2",

rollup.config.cjs

@@ -1,12 +1,9 @@
-const analyze = require('rollup-plugin-analyzer');
 const cleanup = require('rollup-plugin-cleanup');
 const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve').default;
 const terser = require('rollup-plugin-terser').terser;
 const pkg = require('./package.json');
 
-const input = 'src/index.js';
-
 const banner = `/*!
  * Chart.js v${pkg.version}
  * ${pkg.homepage}
@@ -15,30 +12,10 @@ const banner = `/*!
  */`;
 
 module.exports = [
-  // UMD builds
-  // dist/chart.min.js
-  // dist/chart.js
+  // UMD build
+  // dist/chart.umd.js
   {
-    input,
-    plugins: [
-      json(),
-      resolve(),
-      cleanup({
-        comments: ['some', /__PURE__/],
-        sourcemap: true
-      }),
-      analyze({summaryOnly: true})
-    ],
-    output: {
-      name: 'Chart',
-      file: 'dist/chart.js',
-      banner,
-      format: 'umd',
-      indent: false,
-    },
-  },
-  {
-    input,
+    input: 'src/index.umd.js',
     plugins: [
       json(),
       resolve(),
@@ -50,45 +27,20 @@ module.exports = [
     ],
     output: {
       name: 'Chart',
-      file: 'dist/chart.min.js',
+      file: 'dist/chart.umd.js',
       format: 'umd',
       indent: false,
     },
   },
 
   // ES6 builds
-  // dist/chart.mjs
+  // dist/chart.js
   // helpers/*.js
   {
     input: {
-      'dist/chart': 'src/index.esm.js',
+      'dist/chart': 'src/index.js',
       'dist/helpers': 'src/helpers/index.js'
     },
-    plugins: [
-      json(),
-      resolve(),
-      cleanup({
-        sourcemap: true
-      }),
-    ],
-    output: {
-      dir: './',
-      chunkFileNames: 'dist/chunks/[name].mjs',
-      entryFileNames: '[name].mjs',
-      banner,
-      format: 'esm',
-      indent: false,
-    },
-  },
-
-  // Legacy ES6 builds for backwards compatibility. Remove for Chart.js 4.0
-  // dist/chart.esm.js
-  // helpers/*.js
-  {
-    input: {
-      'dist/chart.esm': 'src/index.esm.js',
-      'dist/helpers.esm': 'src/helpers/index.js'
-    },
     plugins: [
       json(),
       resolve(),
@@ -100,9 +52,10 @@ module.exports = [
     output: {
       dir: './',
       chunkFileNames: 'dist/chunks/[name].js',
+      entryFileNames: '[name].js',
       banner,
       format: 'esm',
       indent: false,
     },
-  },
+  }
 ];

src/core/core.adapters.js

@@ -5,7 +5,7 @@
  */
 
 /**
- * @typedef { import("../../types/index.esm").ChartOptions } ChartOptions
+ * @typedef { import("../../types").ChartOptions } ChartOptions
  */
 
 /**

src/core/core.controller.js

@@ -14,8 +14,8 @@ import {version} from '../../package.json';
 import {debounce} from '../helpers/helpers.extras';
 
 /**
- * @typedef { import('../../types/index.esm').ChartEvent } ChartEvent
- * @typedef { import("../../types/index.esm").Point } Point
+ * @typedef { import('../../types').ChartEvent } ChartEvent
+ * @typedef { import("../../types").Point } Point
  */
 
 const KNOWN_POSITIONS = ['top', 'bottom', 'left', 'right', 'chartArea'];
@@ -1240,10 +1240,10 @@ class Chart {
 
   /**
    * @param {ChartEvent} e - The event
-   * @param {import('../../types/index.esm').ActiveElement[]} lastActive - Previously active elements
+   * @param {import('../../types').ActiveElement[]} lastActive - Previously active elements
    * @param {boolean} inChartArea - Is the envent inside chartArea
    * @param {boolean} useFinalPosition - Should the evaluation be done with current or final (after animation) element positions
-   * @returns {import('../../types/index.esm').ActiveElement[]} - The active elements
+   * @returns {import('../../types').ActiveElement[]} - The active elements
    * @pravate
    */
   _getActiveElements(e, lastActive, inChartArea, useFinalPosition) {

src/core/core.interaction.js

@@ -5,10 +5,10 @@ import {_isPointInArea} from '../helpers';
 
 /**
  * @typedef { import("./core.controller").default } Chart
- * @typedef { import("../../types/index.esm").ChartEvent } ChartEvent
+ * @typedef { import("../../types").ChartEvent } ChartEvent
  * @typedef {{axis?: string, intersect?: boolean, includeInvisible?: boolean}} InteractionOptions
  * @typedef {{datasetIndex: number, index: number, element: import("./core.element").default}} InteractionItem
- * @typedef { import("../../types/index.esm").Point } Point
+ * @typedef { import("../../types").Point } Point
  */
 
 /**

src/core/core.plugins.js

@@ -3,7 +3,7 @@ import {callback as callCallback, isNullOrUndef, valueOrDefault} from '../helper
 
 /**
  * @typedef { import("./core.controller").default } Chart
- * @typedef { import("../../types/index.esm").ChartEvent } ChartEvent
+ * @typedef { import("../../types").ChartEvent } ChartEvent
  * @typedef { import("../plugins/plugin.tooltip").default } Tooltip
  */
 

src/helpers/helpers.canvas.js

@@ -6,7 +6,7 @@ import {PI, TAU, HALF_PI, QUARTER_PI, TWO_THIRDS_PI, RAD_PER_DEG} from './helper
  * necessary to avoid duplicates with `export * from './helpers`; see
  * https://github.com/microsoft/TypeScript/issues/46011
  * @typedef { import("../core/core.controller").default } canvas.Chart
- * @typedef { import("../../types/index.esm").Point } Point
+ * @typedef { import("../../types").Point } Point
  */
 
 /**

src/helpers/helpers.core.js

@@ -369,7 +369,7 @@ export const setsEqual = (a, b) => {
 };
 
 /**
- * @param {import('../../types/index.esm').ChartEvent} e - The event
+ * @param {import('../../types').ChartEvent} e - The event
  * @returns {boolean}
  * @private
  */

src/helpers/helpers.dom.js

@@ -5,7 +5,7 @@ import {INFINITY} from './helpers.math';
  * necessary to avoid duplicates with `export * from './helpers`; see
  * https://github.com/microsoft/TypeScript/issues/46011
  * @typedef { import("../core/core.controller").default } dom.Chart
- * @typedef { import('../../types/index.esm').ChartEvent } ChartEvent
+ * @typedef { import('../../types').ChartEvent } ChartEvent
  */
 
 /**

src/index.esm.js

@@ -1,25 +0,0 @@
-export * from './controllers';
-export * from './core';
-export * from './elements';
-export * from './platform';
-export * from './plugins';
-export * from './scales';
-
-import * as controllers from './controllers';
-import * as elements from './elements';
-import * as plugins from './plugins';
-import * as scales from './scales';
-
-export {
-  controllers,
-  elements,
-  plugins,
-  scales,
-};
-
-export const registerables = [
-  controllers,
-  elements,
-  plugins,
-  scales,
-];

src/index.js

@@ -1,52 +1,25 @@
-// @ts-nocheck
+export * from './controllers';
+export * from './core';
+export * from './elements';
+export * from './platform';
+export * from './plugins';
+export * from './scales';
 
-/**
- * @namespace Chart
- */
-import Chart from './core/core.controller';
-
-import * as helpers from './helpers/index';
-import _adapters from './core/core.adapters';
-import Animation from './core/core.animation';
-import animator from './core/core.animator';
-import Animations from './core/core.animations';
 import * as controllers from './controllers';
-import DatasetController from './core/core.datasetController';
-import Element from './core/core.element';
-import * as elements from './elements/index';
-import Interaction from './core/core.interaction';
-import layouts from './core/core.layouts';
-import * as platforms from './platform/index';
+import * as elements from './elements';
 import * as plugins from './plugins';
-import registry from './core/core.registry';
-import Scale from './core/core.scale';
 import * as scales from './scales';
-import Ticks from './core/core.ticks';
 
-// Register built-ins
-Chart.register(controllers, scales, elements, plugins);
+export {
+  controllers,
+  elements,
+  plugins,
+  scales,
+};
 
-Chart.helpers = {...helpers};
-Chart._adapters = _adapters;
-Chart.Animation = Animation;
-Chart.Animations = Animations;
-Chart.animator = animator;
-Chart.controllers = registry.controllers.items;
-Chart.DatasetController = DatasetController;
-Chart.Element = Element;
-Chart.elements = elements;
-Chart.Interaction = Interaction;
-Chart.layouts = layouts;
-Chart.platforms = platforms;
-Chart.Scale = Scale;
-Chart.Ticks = Ticks;
-
-// Compatibility with ESM extensions
-Object.assign(Chart, controllers, scales, elements, plugins, platforms);
-Chart.Chart = Chart;
-
-if (typeof window !== 'undefined') {
-  window.Chart = Chart;
-}
-
-export default Chart;
+export const registerables = [
+  controllers,
+  elements,
+  plugins,
+  scales,
+];

src/index.umd.js

@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+/**
+ * @namespace Chart
+ */
+import Chart from './core/core.controller';
+
+import * as helpers from './helpers/index';
+import _adapters from './core/core.adapters';
+import Animation from './core/core.animation';
+import animator from './core/core.animator';
+import Animations from './core/core.animations';
+import * as controllers from './controllers';
+import DatasetController from './core/core.datasetController';
+import Element from './core/core.element';
+import * as elements from './elements/index';
+import Interaction from './core/core.interaction';
+import layouts from './core/core.layouts';
+import * as platforms from './platform/index';
+import * as plugins from './plugins';
+import registry from './core/core.registry';
+import Scale from './core/core.scale';
+import * as scales from './scales';
+import Ticks from './core/core.ticks';
+
+// Register built-ins
+Chart.register(controllers, scales, elements, plugins);
+
+Chart.helpers = {...helpers};
+Chart._adapters = _adapters;
+Chart.Animation = Animation;
+Chart.Animations = Animations;
+Chart.animator = animator;
+Chart.controllers = registry.controllers.items;
+Chart.DatasetController = DatasetController;
+Chart.Element = Element;
+Chart.elements = elements;
+Chart.Interaction = Interaction;
+Chart.layouts = layouts;
+Chart.platforms = platforms;
+Chart.Scale = Scale;
+Chart.Ticks = Ticks;
+
+// Compatibility with ESM extensions
+Object.assign(Chart, controllers, scales, elements, plugins, platforms);
+Chart.Chart = Chart;
+
+if (typeof window !== 'undefined') {
+  window.Chart = Chart;
+}
+
+export default Chart;

src/plugins/plugin.filler/filler.options.js

@@ -3,8 +3,8 @@ import {isObject, isFinite, valueOrDefault} from '../../helpers/helpers.core';
 /**
  * @typedef { import('../../core/core.scale').default } Scale
  * @typedef { import('../../elements/element.line').default } LineElement
- * @typedef { import('../../../types/index.esm').FillTarget } FillTarget
- * @typedef { import('../../../types/index.esm').ComplexFillTarget } ComplexFillTarget
+ * @typedef { import('../../../types').FillTarget } FillTarget
+ * @typedef { import('../../../types').ComplexFillTarget } ComplexFillTarget
  */
 
 export function _resolveTarget(sources, index, propagate) {

src/plugins/plugin.legend.js

@@ -10,7 +10,7 @@ import {
 import {_toLeftRightCenter, _alignStartEnd, _textX} from '../helpers/helpers.extras';
 import {toTRBLCorners} from '../helpers/helpers.options';
 /**
- * @typedef { import("../../types/index.esm").ChartEvent } ChartEvent
+ * @typedef { import("../../types").ChartEvent } ChartEvent
  */
 
 const getBoxSize = (labelOpts, fontSize) => {

src/plugins/plugin.tooltip.js

@@ -9,8 +9,8 @@ import {createContext, drawPoint} from '../helpers';
 
 /**
  * @typedef { import("../platform/platform.base").Chart } Chart
- * @typedef { import("../../types/index.esm").ChartEvent } ChartEvent
- * @typedef { import("../../types/index.esm").ActiveElement } ActiveElement
+ * @typedef { import("../../types").ChartEvent } ChartEvent
+ * @typedef { import("../../types").ActiveElement } ActiveElement
  */
 
 const positioners = {

test/BasicChartWebWorker.js

@@ -6,7 +6,7 @@
 // Sends messages with data of types: { type: 'success' } | { type: 'error', errorMessage: string }
 
 // eslint-disable-next-line no-undef
-importScripts('../src/chart.js');
+importScripts('../src/chart.umd.js');
 
 onmessage = function(event) {
   try {

test/integration/node/package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
   "description": "chart.js should work in Node",
+  "type": "module",
   "scripts": {
-    "test": "npm run test-cjs",
-    "test-cjs": "node test.cjs",
-    "test-mjs": "node test.mjs",
-    "TODO": "test-mjs should be enambled for chart.js v4"
+    "test": "npm run test-mjs && npm run test-cjs",
+    "test-mjs": "node test.js",
+    "test-cjs": "node test.cjs"
   },
   "dependencies": {
     "chart.js": "file:../package.tgz"

test/integration/node/test.cjs

@@ -1,7 +1,10 @@
-const Chart = require('chart.js');
-const valueOrDefault = Chart.helpers.valueOrDefault;
-
-Chart.register({
-  id: 'TEST_PLUGIN',
-  dummyValue: valueOrDefault(0, 1)
+/* eslint-disable es/no-dynamic-import */
+Promise.all([
+  import('chart.js'),
+  import('chart.js/helpers')
+]).then(([{Chart}, {valueOrDefault}]) => {
+  Chart.register({
+    id: 'TEST_PLUGIN',
+    dummyValue: valueOrDefault(0, 1)
+  });
 });

tsconfig.json

@@ -14,7 +14,7 @@
   },
   "typedocOptions": {
     "name": "Chart.js",
-    "entryPoints": ["types/index.esm.d.ts"],
+    "entryPoints": ["types/index.d.ts"],
     "readme": "none",
     "excludeExternals": true,
     "includeVersion": true,

types/adapters.d.ts

@@ -1,4 +1,4 @@
-import type { ChartOptions } from './index.esm';
+import type { ChartOptions } from '.';
 
 export type TimeUnit = 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
 

types/animation.d.ts

@@ -1,4 +1,4 @@
-import { Chart } from './index.esm';
+import { Chart } from '.';
 import { AnyObject } from './basic';
 
 export class Animation {

types/helpers/helpers.canvas.d.ts

@@ -1,4 +1,4 @@
-import { PointStyle } from '../index.esm';
+import { PointStyle } from '..';
 import { Color } from '../color';
 import { ChartArea, RoundedRect } from '../geometric';
 import { CanvasFontSpec } from './helpers.options';

types/helpers/helpers.dom.d.ts

@@ -1,4 +1,4 @@
-import { ChartEvent } from '../index.esm';
+import { ChartEvent } from '..';
 
 export function getMaximumSize(node: HTMLElement, width?: number, height?: number, aspectRatio?: number): { width: number, height: number };
 export function getRelativePosition(

types/helpers/helpers.easing.d.ts

@@ -1,4 +1,4 @@
-import { EasingFunction } from '../index.esm';
+import { EasingFunction } from '..';
 
 export type EasingFunctionSignature = (t: number) => number;
 

types/helpers/helpers.options.d.ts

@@ -1,5 +1,5 @@
 import { TRBL, TRBLCorners } from '../geometric';
-import { FontSpec } from '../index.esm';
+import { FontSpec } from '..';
 
 export interface CanvasFontSpec extends FontSpec {
   string: string;

types/tests/animation.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 const chart = new Chart('id', {
   type: 'bar',

types/tests/autogen.js

@@ -1,6 +1,9 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import * as helpers from '../../src/helpers/index.js';
+import { fileURLToPath } from 'url';
+import * as helpers from '../../dist/helpers.js';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 let fd;
 

types/tests/chart_types.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 const chart = new Chart('chart', {
   type: 'bar',

types/tests/controllers/bubble_chart_options.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartOptions } from '../../index.esm';
+import { Chart, ChartOptions } from '../..';
 
 const chart = new Chart('test', {
   type: 'bubble',

types/tests/controllers/doughnut_meta_total.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartMeta, Element } from '../../index.esm';
+import { Chart, ChartMeta, Element } from '../..';
 
 const chart = new Chart('id', {
   type: 'doughnut',

types/tests/controllers/doughnut_offset.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartMeta, Element } from '../../index.esm';
+import { Chart, ChartMeta, Element } from '../..';
 
 const chart = new Chart('id', {
   type: 'doughnut',

types/tests/controllers/doughnut_outer_radius.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'doughnut',

types/tests/controllers/line_scriptable_parsed_data.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/controllers/line_segments.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/controllers/line_span_gaps.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/controllers/line_styling_array.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/controllers/radar_dataset_indexable_options.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartOptions } from '../../index.esm';
+import { Chart, ChartOptions } from '../..';
 
 const chart = new Chart('test', {
   type: 'radar',

types/tests/data_types.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 const chart = new Chart('chart', {
   type: 'bar',

types/tests/dataset_null_data.ts

@@ -1,4 +1,4 @@
-import { ChartDataset } from '../index.esm';
+import { ChartDataset } from '..';
 
 const dataset: ChartDataset = {
   data: [10, null, 20],

types/tests/defaults.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 Chart.defaults.scales.time.time.minUnit = 'day';
 

types/tests/elements/scriptable_element_options.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/extensions/plugin.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 Chart.register({
   id: 'my-plugin',

types/tests/extensions/scale.ts

@@ -1,5 +1,5 @@
 import { AnyObject } from '../../basic';
-import { CartesianScaleOptions, Chart, Scale } from '../../index.esm';
+import { CartesianScaleOptions, Chart, Scale } from '../..';
 
 export type TestScaleOptions = CartesianScaleOptions & {
   testOption?: boolean
@@ -17,7 +17,7 @@ export class TestScale<O extends TestScaleOptions = TestScaleOptions> extends Sc
   }
 }
 
-declare module '../../index.esm' {
+declare module '../..' {
   interface CartesianScaleTypeRegistry {
     test: {
       options: TestScaleOptions

types/tests/interaction.ts

@@ -1,6 +1,6 @@
 import {
   Chart, ChartData, ChartConfiguration, Element
-} from '../index.esm';
+} from '..';
 
 const data: ChartData<'line'> = { datasets: [] };
 const chartItem = 'item';

types/tests/layout/position.ts

@@ -1,4 +1,4 @@
-import { LayoutPosition } from '../../index.esm';
+import { LayoutPosition } from '../..';
 
 const left: LayoutPosition = 'left';
 const right: LayoutPosition = 'right';

types/tests/options.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 const chart = new Chart('test', {
   type: 'bar',

types/tests/overrides.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 Chart.overrides.bar.scales.x.type = 'time';
 

types/tests/parsed.data.type.ts

@@ -1,4 +1,4 @@
-import { ParsedDataType } from '../index.esm';
+import { ParsedDataType } from '..';
 
 interface test {
   pie: ParsedDataType<'pie'>,

types/tests/plugins/defaults.ts

@@ -1,4 +1,4 @@
-import { defaults } from '../../index.esm';
+import { defaults } from '../..';
 
 // https://github.com/chartjs/Chart.js/issues/8711
 const original = defaults.plugins.legend.labels.generateLabels;

types/tests/plugins/plugin.decimation/decimation_algorithm.ts

@@ -1,4 +1,4 @@
-import { Chart, DecimationAlgorithm } from '../../../index.esm';
+import { Chart, DecimationAlgorithm } from '../../..';
 
 const chart = new Chart('id', {
   type: 'bubble',

types/tests/plugins/plugin.filler/fill_target_true.ts

@@ -1,4 +1,4 @@
-import { ChartDataset } from '../../../index.esm';
+import { ChartDataset } from '../../..';
 
 const dataset: ChartDataset = {
   data: [],

types/tests/plugins/plugin.tooltip/chart.tooltip.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../../index.esm';
+import { Chart } from '../../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/plugins/plugin.tooltip/tooltip_dataset_type.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../../index.esm';
+import { Chart } from '../../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/plugins/plugin.tooltip/tooltip_parsed_data.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../../index.esm';
+import { Chart } from '../../..';
 
 const chart = new Chart('id', {
   type: 'bar',

types/tests/plugins/plugin.tooltip/tooltip_parsed_data_chart_defaults.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../../index.esm';
+import { Chart } from '../../..';
 
 Chart.overrides.bubble.plugins.tooltip.callbacks.label = (item) => {
   const { x, y, _custom: r } = item.parsed;

types/tests/plugins/plugin.tooltip/tooltip_scriptable_background_color.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../../index.esm';
+import { Chart } from '../../..';
 
 const chart = new Chart('id', {
   type: 'bar',

types/tests/register.ts

@@ -24,7 +24,7 @@ import {
   Title,
   SubTitle,
   Tooltip
-} from '../index.esm';
+} from '..';
 
 Chart.register(
   ArcElement,

types/tests/scales/chart_options.ts

@@ -1,4 +1,4 @@
-import { ChartOptions } from '../../index.esm';
+import { ChartOptions } from '../..';
 
 const chartOptions: ChartOptions<'line'> = {
   scales: {

types/tests/scales/options.ts

@@ -1,4 +1,4 @@
-import { Chart, ScaleOptions } from '../../index.esm';
+import { Chart, ScaleOptions } from '../..';
 
 const chart = new Chart('test', {
   type: 'bar',

types/tests/scales/time_string_max.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../../index.esm';
+import { Chart } from '../..';
 
 const chart = new Chart('id', {
   type: 'line',

types/tests/scriptable.ts

@@ -1,4 +1,4 @@
-import { ChartType, Scriptable, ScriptableContext } from '../index.esm';
+import { ChartType, Scriptable, ScriptableContext } from '..';
 
 interface test {
   pie?: Scriptable<number, ScriptableContext<'pie'>>,

types/tests/scriptable_core_chart_options.ts

@@ -1,4 +1,4 @@
-import { ChartConfiguration } from '../index.esm';
+import { ChartConfiguration } from '..';
 
 const getConfig = (): ChartConfiguration<'bar'> => {
   return {

types/tests/test_instance_assignment.ts

@@ -1,4 +1,4 @@
-import { Chart } from '../index.esm';
+import { Chart } from '..';
 
 const chart = new Chart('id', {
   type: 'scatter',

types/tests/tsconfig.json

@@ -8,6 +8,6 @@
   },
   "include": [
     "./**/*.ts",
-    "../index.esm.d.ts"
+    "../index.d.ts"
   ]
 }