Allow ESM files to be used in Node.js (#10479)

Allow ESM files to be used in Node.js

auto/auto.esm.js

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

auto/auto.mjs

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

auto/package.json

@@ -3,6 +3,6 @@
     "private": true,
     "description": "auto registering package",
     "main": "auto.js",
-    "module": "auto.esm.js",
-    "types": "auto.esm.d.ts"
+    "module": "auto.mjs",
+    "types": "auto.mts"
 }

docs/.vuepress/config.js

@@ -94,7 +94,7 @@ module.exports = {
     config.merge({
       resolve: {
         alias: {
-          'chart.js': path.resolve(__dirname, '../../dist/chart.esm.js'),
+          'chart.js': path.resolve(__dirname, '../../dist/chart.mjs'),
         }
       }
     })

docs/scripts/components.js

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

docs/scripts/helpers.js

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

docs/scripts/register.js

@@ -1,4 +1,4 @@
-import {Chart, registerables} from '../../dist/chart.esm';
+import {Chart, registerables} from '../../dist/chart.mjs';
 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.esm';
+import {valueOrDefault} from '../../dist/helpers.mjs';
 
 // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
 var _seed = Date.now();

helpers/package.json

@@ -3,6 +3,6 @@
     "private": true,
     "description": "helper package",
     "main": "helpers.js",
-    "module": "helpers.esm.js",
-    "types": "helpers.esm.d.ts"
+    "module": "helpers.mjs",
+    "types": "helpers.mts"
 }

package.json

@@ -7,7 +7,7 @@
     "jsdelivr": "dist/chart.min.js",
     "unpkg": "dist/chart.min.js",
     "main": "dist/chart.js",
-    "module": "dist/chart.esm.js",
+    "module": "dist/chart.mjs",
     "types": "types/index.esm.d.ts",
     "keywords": [
         "canvas",
@@ -25,16 +25,10 @@
         "url": "https://github.com/chartjs/Chart.js/issues"
     },
     "files": [
-        "auto/package.json",
-        "auto/**/*.js",
-        "auto/**/*.d.ts",
-        "dist/*.js",
-        "dist/chunks/*.js",
-        "types/*.d.ts",
-        "types/helpers/*.d.ts",
-        "helpers/package.json",
-        "helpers/**/*.js",
-        "helpers/**/*.d.ts"
+        "auto/**",
+        "dist/**",
+        "types/**",
+        "helpers/**"
     ],
     "scripts": {
         "autobuild": "rollup -c -w",

rollup.config.js

@@ -6,10 +6,6 @@ const terser = require('rollup-plugin-terser').terser;
 const pkg = require('./package.json');
 
 const input = 'src/index.js';
-const inputESM = {
-  'dist/chart.esm': 'src/index.esm.js',
-  'dist/helpers.esm': 'src/helpers/index.js'
-};
 
 const banner = `/*!
  * Chart.js v${pkg.version}
@@ -60,10 +56,38 @@ module.exports = [
   },
 
   // ES6 builds
+  // dist/chart.mjs
+  // helpers/*.js
+  {
+    input: {
+      'dist/chart': 'src/index.esm.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: inputESM,
+    input: {
+      'dist/chart.esm': 'src/index.esm.js',
+      'dist/helpers.esm': 'src/helpers/index.js'
+    },
     plugins: [
       json(),
       resolve(),