Update packaging to match main chart.js library

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,13 @@
-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 builds = (await import('./rollup.config.js')).default;
+  const jasmineSeedReporter = (await import('./test/seed-reporter.js')).default;
+
   const args = yargs
     .option('verbose', {default: false})
     .argv;

package.json

@@ -5,8 +5,15 @@
   "version": "2.1.0",
   "author": "Evert Timberg <[email protected]>",
   "license": "MIT",
-  "main": "dist/chartjs-plugin-annotation.js",
-  "module": "dist/chartjs-plugin-annotation.esm.js",
+  "type": "module",
+  "main": "dist/chartjs-plugin-annotation.esm.js",
+  "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"
+  },
   "types": "types/index.d.ts",
   "repository": {
     "type": "git",
@@ -18,30 +25,27 @@
   ],
   "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"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-json": "^5.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",
     "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "babel-loader": "^8.3.0",
     "chart.js": "^4.0.1",
     "chartjs-plugin-autocolors": "^0.0.5",
     "chartjs-test-utils": "^0.5.0",
@@ -53,10 +57,10 @@
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-markdown": "^2.0.1",
     "fs-extra": "^10.0.0",
-    "karma": "^6.3.2",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.3",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma": "^6.4.1",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-coverage": "^2.2.0",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-rollup-preprocessor": "^7.0.7",
@@ -72,8 +76,7 @@
     "vuepress-plugin-flexsearch": "^0.3.0",
     "vuepress-plugin-redirect": "^1.2.5",
     "vuepress-plugin-typedoc": "^0.10.0",
-    "vuepress-theme-chartjs": "^0.2.0",
-    "webpack": "^4.46.0"
+    "vuepress-theme-chartjs": "^0.2.0"
   },
   "peerDependencies": {
     "chart.js": ">=3.7.0"

rollup.config.js

@@ -1,7 +1,9 @@
-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 {readFileSync} from 'fs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+
+const {name, version, homepage, license} = JSON.parse(readFileSync('./package.json'));
 
 const banner = `/*!
 * ${name} v${version}
@@ -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: 'dist/chartjs-plugin-annotation.js',
       banner,
       format: 'umd',
       indent: false,
@@ -51,7 +53,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: main.replace('.js', '.min.js'),
+      file: 'dist/chartjs-plugin-annotation.min.js',
       format: 'umd',
       indent: false,
       globals
@@ -66,7 +68,7 @@ module.exports = [
     ],
     output: {
       name,
-      file: _module,
+      file: 'dist/chartjs-plugin-annotation.esm.js',
       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]
 };