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: {
@@ -220,5 +223,5 @@ module.exports = {
         '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,6 +13,8 @@ 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 builds = (await import('./rollup.config.js')).default;
+  const jasmineSeedReporter = (await import('./test/seed-reporter.js')).default;
   const regex = karma.autoWatch ? /chartjs-plugin-annotation\.js$/ : /chartjs-plugin-annotation\.min\.js$/;
   const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0];
 

package.json

@@ -5,8 +5,8 @@
   "version": "2.1.2",
   "author": "Evert Timberg <evert.timberg@gmail.com>",
   "license": "MIT",
-  "main": "dist/chartjs-plugin-annotation.js",
-  "module": "dist/chartjs-plugin-annotation.esm.js",
+  "type": "module",
+  "main": "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",
@@ -26,16 +26,16 @@
   ],
   "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"

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, 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,7 @@ const globals = {
   'chart.js/helpers': 'Chart.helpers'
 };
 
-module.exports = [
+export default [
   {
     input,
     plugins: [
@@ -30,7 +32,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: main,
+      file: main.replace('.esm.js', '.js'),
       banner,
       format: 'umd',
       indent: false,
@@ -51,7 +53,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: main.replace('.js', '.min.js'),
+      file: jsdelivr,
       format: 'umd',
       indent: false,
       globals
@@ -66,7 +68,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: _module,
+      file: main,
       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'));

test/seed-reporter.js

@@ -8,6 +8,6 @@ const SeedReporter = function(baseReporterDecorator) {
   };
 };
 
-module.exports = {
+export default {
   'reporter:jasmine-seed': ['type', SeedReporter]
 };