Set the plugin as module

docs/.vuepress/config.js → docs/.vuepress/config.ts

@@ -1,8 +1,11 @@
-const path = require('path');
+import * as path from 'path';
+import markdownItInclude from 'markdown-it-include';
+import { DefaultThemeConfig, defineConfig, PluginTuple } from 'vuepress/config';
+
 const docsVersion = "VERSION";
 const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-annotation/master/' : `/chartjs-plugin-annotation/${docsVersion}/`;
 
-module.exports = {
+export default defineConfig({
   dest: 'dist/docs',
   title: 'chartjs-plugin-annotation',
   description: 'Annotations for Chart.js',
@@ -72,7 +75,7 @@ module.exports = {
         ]
       },
     }],
-  ],
+  ] as PluginTuple[],
   chainWebpack(config) {
     config.module
       .rule('chart.js')
@@ -86,7 +89,7 @@ module.exports = {
   },
   markdown: {
     extendMarkdown: md => {
-      md.use(require('markdown-it-include'), path.resolve(__dirname, '../'));
+      md.use(markdownItInclude, path.resolve(__dirname, '../'));
     }
   },
   themeConfig: {
@@ -145,7 +148,7 @@ module.exports = {
             'box/canvas',
             'box/image',
             'box/initAnim',
-            'box/gradient',
+            'box/gradient'
           ]
         },
         {
@@ -154,7 +157,7 @@ module.exports = {
             'ellipse/basic',
             'ellipse/rotation',
             'ellipse/label',
-            'ellipse/image',
+            'ellipse/image'
           ]
         },
         {
@@ -187,7 +190,7 @@ module.exports = {
             'line/image',
             'line/datasetBars',
             'line/animation',
-            'line/hook',
+            'line/hook'
           ]
         },
         {
@@ -197,7 +200,7 @@ module.exports = {
             'point/combined',
             'point/outsideChartArea',
             'point/shadow',
-            'point/initAnim',
+            'point/initAnim'
           ]
         },
         {
@@ -206,14 +209,14 @@ module.exports = {
             'polygon/basic',
             'polygon/stop',
             'polygon/outsideChartArea',
-            'polygon/shadow',
+            'polygon/shadow'
             ]
         },
         {
           title: 'Charts',
           children: [
             'charts/bar',
-            'charts/line',
+            'charts/line'
           ],
         },
         {
@@ -222,11 +225,11 @@ module.exports = {
             'interaction/interaction',
             'interaction/dragging',
             'interaction/selection',
-            'interaction/cartesianplane',
+            'interaction/cartesianplane'
           ],
         },
-        'utils',
+        'utils'
       ]
     }
-  }
-};
+ } as DefaultThemeConfig
+});

karma.conf.js → karma.conf.cjs

@@ -1,12 +1,10 @@
-const jasmineSeedReporter = require('./test/seed-reporter');
 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 yargs = require('yargs');
 const env = process.env.NODE_ENV;
 
-module.exports = function(karma) {
+module.exports = async function(karma) {
   const args = yargs
     .option('verbose', {default: false})
     .argv;
@@ -15,7 +13,9 @@ 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 ? /chartjs-plugin-annotation\.js$/ : /chartjs-plugin-annotation\.min\.js$/;
+  const builds = (await import('./rollup.config.js')).default;
+  const jasmineSeedReporter = (await import('./test/seed-reporter.js')).default;
+  const regex = karma.autoWatch ? /chartjs-plugin-annotation\.cjs$/ : /chartjs-plugin-annotation\.min\.js$/;
   const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0];
 
   if (env === 'test') {
@@ -67,7 +67,7 @@ module.exports = function(karma) {
       {pattern: 'test/fixtures/**/*.js', included: false},
       {pattern: 'test/fixtures/**/*.png', included: false},
       {pattern: 'node_modules/chart.js/dist/chart.umd.js'},
-      {pattern: 'src/index.js', watched: false},
+      {pattern: 'src/index.js', watched: false, type: 'js'},
       {pattern: 'test/index.js'},
       {pattern: 'test/specs/**/**.js'}
     ],

package.json

@@ -5,40 +5,46 @@
   "version": "2.1.2",
   "author": "Evert Timberg <evert.timberg@gmail.com>",
   "license": "MIT",
-  "main": "dist/chartjs-plugin-annotation.js",
+  "type": "module",
+  "main": "dist/chartjs-plugin-annotation.cjs",
   "module": "dist/chartjs-plugin-annotation.esm.js",
   "types": "types/index.d.ts",
   "jsdelivr": "dist/chartjs-plugin-annotation.min.js",
   "unpkg": "dist/chartjs-plugin-annotation.min.js",
   "exports": {
     "types": "./types/index.d.ts",
     "import": "./dist/chartjs-plugin-annotation.esm.js",
-    "require": "./dist/chartjs-plugin-annotation.min.js",
+    "require": "./dist/chartjs-plugin-annotation.cjs",
     "script": "./dist/chartjs-plugin-annotation.min.js"
   },
+  "sideEffects": [
+    "dist/chartjs-plugin-annotation.cjs",
+    "dist/chartjs-plugin-annotation.min.js"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/chartjs/chartjs-plugin-annotation.git"
   },
   "files": [
-    "dist/*.js",
+    "dist/*",
+    "!dist/docs/**",
     "types/*.d.ts"
   ],
   "scripts": {
     "build": "rollup -c",
-    "dev": "karma start --auto-watch --no-single-run --browsers chrome",
-    "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox",
+    "dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome",
+    "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox",
     "docs": "npm run build && vuepress build docs --no-cache",
     "docs:dev": "npm run build && vuepress dev docs --no-cache",
     "lint": "concurrently --group \"npm:lint-*\"",
     "lint-js": "eslint \"test/**/*.js\" \"src/**/*.js\"",
     "lint-md": "eslint \"**/*.md\"",
     "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
     "test": "cross-env NODE_ENV=test concurrently --group \"npm:test-*\"",
-    "test-karma": "karma start --auto-watch --single-run",
+    "test-karma": "karma start ./karma.conf.cjs --auto-watch --single-run",
     "test-lint": "npm run lint",
     "test-types": "tsc -p types/tests/",
-    "test-types-integration": "mocha --full-trace test/integration/*-test.js"
+    "test-integration": "mocha --full-trace test/integration/*-test.js"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.0.0",

rollup.config.js

@@ -1,13 +1,15 @@
-const json = require('@rollup/plugin-json');
-const resolve = require('@rollup/plugin-node-resolve').default;
-const terser = require('@rollup/plugin-terser').default;
-const {name, version, homepage, main, module: _module} = require('./package.json');
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import json from '@rollup/plugin-json';
+import {readFileSync} from 'fs';
+
+const {name, version, homepage, main, module, license, jsdelivr} = JSON.parse(readFileSync('./package.json'));
 
 const banner = `/*!
 * ${name} v${version}
 * ${homepage}
  * (c) ${(new Date(process.env.SOURCE_DATE_EPOCH ? (process.env.SOURCE_DATE_EPOCH * 1000) : new Date().getTime())).getFullYear()} chartjs-plugin-annotation Contributors
- * Released under the MIT License
+ * Released under the ${license} License
  */`;
 
 const input = 'src/index.js';
@@ -21,7 +23,8 @@ const globals = {
   'chart.js/helpers': 'Chart.helpers'
 };
 
-module.exports = [
+export default [
+  // cjs
   {
     input,
     plugins: [
@@ -38,6 +41,24 @@ module.exports = [
     },
     external
   },
+  // js
+  {
+    input,
+    plugins: [
+      json(),
+      resolve(),
+    ],
+    output: {
+      name,
+      file: main.replace('.cjs', '.js'),
+      banner,
+      format: 'umd',
+      indent: false,
+      globals
+    },
+    external
+  },
+  // min.js
   {
     input,
     plugins: [
@@ -51,13 +72,14 @@ module.exports = [
     ],
     output: {
       name,
-      file: main.replace('.js', '.min.js'),
+      file: jsdelivr,
       format: 'umd',
       indent: false,
       globals
     },
     external
   },
+  // ems.js
   {
     input: inputESM,
     plugins: [
@@ -66,7 +88,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: _module,
+      file: module,
       banner,
       format: 'esm',
       indent: false

scripts/docs-config.sh

@@ -27,4 +27,4 @@ MODE=$2
 
 TAG=$(tag_from_version "$VERSION" "$MODE")
 
-sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.js"
+sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.ts"

test/integration/integration-test.js

@@ -1,11 +1,12 @@
 'use strict';
 
-const os = require('os');
-const fs = require('fs-extra');
-const path = require('path');
-const childProcess = require('child_process');
+import os from 'os';
+import fs from 'fs-extra';
+import path from 'path';
+import childProcess from 'child_process';
+import process from 'process';
 
-const {describe, it} = require('mocha');
+import {describe, it} from 'mocha';
 
 function exec(command, options = {}) {
   const output = childProcess.execSync(command, {
@@ -28,7 +29,7 @@ describe('Integration Tests', () => {
   );
 
   function testOnNodeProject(projectName) {
-    const projectPath = path.join(__dirname, projectName);
+    const projectPath = path.join(process.cwd(), 'test', 'integration', projectName);
 
     const packageJSONPath = path.join(projectPath, 'package.json');
     const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, 'utf-8'));
@@ -41,6 +42,7 @@ describe('Integration Tests', () => {
       exec('npm --quiet test', {cwd, stdio: 'inherit'});
     }).timeout(5 * 60 * 1000);
   }
-
   testOnNodeProject('ts');
+  testOnNodeProject('node-module');
+  testOnNodeProject('node-commonjs');
 });

test/integration/node-commonjs/package.json

@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "description": "chartjs-plugin-annotation should work in Node, using commonjs",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.30",
+    "chart.js": "^4.2.1",
+    "chartjs-plugin-annotation": "file:../plugin.tgz"
+  }
+}

test/integration/node-commonjs/test.js

@@ -0,0 +1,32 @@
+const {createCanvas} = require('@napi-rs/canvas');
+const {Chart, BarController, BarElement, CategoryScale, LinearScale} = require('chart.js');
+const Annotation = require('chartjs-plugin-annotation');
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale);
+Chart.register(Annotation);
+
+const canvas = createCanvas(300, 320);
+const ctx = canvas.getContext('2d');
+
+// Chart.js assumes ctx contains the canvas
+ctx.canvas = canvas;
+
+module.export = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: [],
+    datasets: [{
+      data: []
+    }]
+  },
+  options: {
+    plugins: {
+      annotation: {
+        clip: false,
+        annotations: []
+      }
+    }
+  },
+  plugins: [Annotation]
+});
+

test/integration/node-module/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "description": "chartjs-plugin-annotation should work in Node, using module",
+  "type": "module",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.30",
+    "chart.js": "^4.2.1",
+    "chartjs-plugin-annotation": "file:../plugin.tgz"
+  }
+}