Set the plugin as module

README.md

@@ -7,18 +7,21 @@
 [![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://www.chartjs.org/chartjs-plugin-annotation/index)
 <a href="https://github.com/chartjs/awesome"><img src="https://awesome.re/badge-flat2.svg" alt="Awesome"></a>
 
-An annotation plugin for Chart.js >= 3.7.0
+An annotation plugin for Chart.js >= 4.0.0
 
 ---
 > This plugin needs to be registered. It does not function as inline plugin.
 ---
 
+For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1)
+
 For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0)
+
 For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
 
 This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area.
 
-Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.
+Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have two or more axes, including pie, radar, and polar area charts.
 
 ![Example Screenshot](docs/guide/banner.png)
 

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: {
@@ -131,8 +134,15 @@ module.exports = {
             'types/polygon'
           ]
         },
-        'migrationV1',
-        'migrationV2'
+        {
+          title: 'Migration',
+          collapsable: true,
+          children: [
+            'migrationV3',
+            'migrationV2',
+            'migrationV1'
+          ]
+        },
       ],
       '/samples/': [
         'intro',
@@ -145,7 +155,7 @@ module.exports = {
             'box/canvas',
             'box/image',
             'box/initAnim',
-            'box/gradient',
+            'box/gradient'
           ]
         },
         {
@@ -154,7 +164,7 @@ module.exports = {
             'ellipse/basic',
             'ellipse/rotation',
             'ellipse/label',
-            'ellipse/image',
+            'ellipse/image'
           ]
         },
         {
@@ -187,7 +197,7 @@ module.exports = {
             'line/image',
             'line/datasetBars',
             'line/animation',
-            'line/hook',
+            'line/hook'
           ]
         },
         {
@@ -197,7 +207,7 @@ module.exports = {
             'point/combined',
             'point/outsideChartArea',
             'point/shadow',
-            'point/initAnim',
+            'point/initAnim'
           ]
         },
         {
@@ -206,14 +216,14 @@ module.exports = {
             'polygon/basic',
             'polygon/stop',
             'polygon/outsideChartArea',
-            'polygon/shadow',
+            'polygon/shadow'
             ]
         },
         {
           title: 'Charts',
           children: [
             'charts/bar',
-            'charts/line',
+            'charts/line'
           ],
         },
         {
@@ -222,11 +232,11 @@ module.exports = {
             'interaction/interaction',
             'interaction/dragging',
             'interaction/selection',
-            'interaction/cartesianplane',
+            'interaction/cartesianplane'
           ],
         },
-        'utils',
+        'utils'
       ]
     }
-  }
-};
+ } as DefaultThemeConfig
+});

docs/guide/index.md

@@ -6,7 +6,7 @@ This plugin needs to be registered. It does not function as inline plugin.
 
 :::
 
-An annotation plugin for Chart.js >= 3.0.0
+An annotation plugin for Chart.js >= 4.0.0
 
 This plugin draws lines, boxes, labels, points, polygons and ellipses on the chart area. Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts.
 
@@ -20,7 +20,12 @@ This plugin draws lines, boxes, labels, points, polygons and ellipses on the cha
 
 ::: tip Important Note
 
+For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1)
+
+For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0)
+
 For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
+
 Documentation for v0.5.7 can be found on [GitHub](https://github.com/chartjs/chartjs-plugin-annotation/blob/1ab782afce943456f958cac33f67edc5d6eab278/README.md).
 
 :::

docs/guide/integration.md

@@ -2,7 +2,7 @@
 title: Integration
 ---
 
-chartjs-plugin-annotation can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems.
+**`chartjs-plugin-annotation`** can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems.
 
 ## Script Tag
 

docs/guide/migrationV1.md

@@ -1,6 +1,6 @@
 # 1.x Migration Guide
 
-`chartjs-plugin-annotation` plugin version 1 introduces a number of breaking changes in order to compatible with Chart.js 3 and to align with Chart.js 3 options.
+**`chartjs-plugin-annotation`** plugin version 1 introduces a number of breaking changes in order to compatible with Chart.js 3 and to align with Chart.js 3 options.
 
 ## Setup and installation
 

docs/guide/migrationV2.md

@@ -1,6 +1,6 @@
-# 2.x Migration guide
+# 2.x Migration Guide
 
-`chartjs-plugin-annotation` plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
+**`chartjs-plugin-annotation`** plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
 
 ## Chart.js version
 

docs/guide/migrationV3.md

@@ -0,0 +1,8 @@
+# 3.x Migration Guide
+
+**`chartjs-plugin-annotation`** plugin version 3 becomes an [ESM-only package](https://nodejs.org/api/esm.html).
+The [UMD bundle](integration.md#script-tag) is still available.
+
+## Chart.js version
+
+The annotation plugin requires at least version 4.0.0 to work because of Chart.js becomes an ESM-only package.

docs/index.md

@@ -3,5 +3,5 @@ home: true
 heroImage: /hero.svg
 actionText: Get Started →
 actionLink: /guide/
-footer: MIT Licensed | Copyright © 2016-2021 chartjs-plugin-annotation contributors
+footer: MIT Licensed | Copyright © 2016-2023 chartjs-plugin-annotation contributors
 ---

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.2.1",
   "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",
@@ -79,6 +85,6 @@
     "vuepress-theme-chartjs": "^0.2.0"
   },
   "peerDependencies": {
-    "chart.js": ">=3.7.0"
+    "chart.js": ">=4.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,7 @@ module.exports = [
     },
     external
   },
+  // min.js
   {
     input,
     plugins: [
@@ -51,13 +55,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 +71,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"

src/annotation.js

@@ -17,7 +17,7 @@ export default {
   version,
 
   beforeRegister() {
-    requireVersion('chart.js', '3.7', Chart.version);
+    requireVersion('chart.js', '4.0', Chart.version);
   },
 
   afterRegister() {