build: upgrade dependencies and config to support es modules

BREAKING CHANGE: using new es module config will render any old versions incompatible

.eslintignore → .prettierignore

@@ -2,8 +2,8 @@
 .DS_Store
 
 # Auto-generated directories.
-**/node_modules/*
-**/dist/*
+node_modules
+dist
 
 # Lock files.
 package-lock.json

.versionrc.js → .versionrc.cjs

@@ -64,7 +64,7 @@ config.bumpFiles = [
   ...config.packageFiles,
   {
     filename: "README.md",
-    updater: "./updater-readme.js",
+    updater: "./updater-readme.cjs",
   },
 ];
 

.commitlintrc.js → commitlint.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+export default {
   extends: ["@commitlint/config-conventional"],
 };

.eslintrc.js → eslint.config.js

@@ -1,14 +1,20 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    es2021: true,
+import jsdoc from "eslint-plugin-jsdoc";
+import globals from "globals";
+import js from "@eslint/js";
+import prettier from "eslint-config-prettier";
+
+const files = ["*.js", "*.mjs", "*.cjs"];
+const ignores = ["dist/", "!.*.js", "!.*.mjs", "!.*.cjs"];
+
+const config = {
+  plugins: {
+    jsdoc,
   },
-  extends: ["standard", "plugin:jsdoc/recommended", "prettier"],
-  plugins: ["jsdoc"],
-  parser: "@babel/eslint-parser",
-  parserOptions: {
-    sourceType: "module",
+  languageOptions: {
+    globals: {
+      ...globals.browser,
+      ...globals.es2021,
+    },
   },
   rules: {
     "no-console": [
@@ -45,3 +51,16 @@ module.exports = {
     },
   },
 };
+
+export default [
+  js.configs.recommended,
+  prettier,
+  jsdoc.configs["flat/recommended"],
+  config,
+  {
+    files,
+  },
+  {
+    ignores,
+  },
+];

jsconfig.json

@@ -1,6 +1,7 @@
 {
   "include": [
-    "src/*.js"
+    "src/*.js",
+    "index.js"
   ],
   "exclude": [
     "node_modules"

jsdoc.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  source: {
+    include: ["src", "README.md"],
+    includePattern: ".js$",
+    excludePattern: "(node_modules/|docs)",
+  },
+  plugins: ["node_modules/jsdoc-typeof-plugin"],
+};

lint-staged.config.js

@@ -0,0 +1,3 @@
+export default {
+  "*.{js,cjs,mjs}": ["eslint --fix", "prettier --write"],
+};

package.json

@@ -2,6 +2,10 @@
   "name": "accessible-menu",
   "version": "4.0.0-beta.5",
   "description": "A JavaScript library to help you generate WCAG accessible menus in the DOM.",
+  "type": "module",
+  "sponsor": {
+    "url": "https://github.com/nickdjm/accessible-menu?sponsor=1"
+  },
   "jsdelivr": "dist/accessible-menu.iife.js",
   "unpkg": "dist/accessible-menu.iife.js",
   "browser": "dist/accessible-menu.iife.js",
@@ -38,13 +42,12 @@
     "prepare": "husky install",
     "commit": "git-cz",
     "lint": "npm run eslint -- --fix && npm run prettier -- --write",
-    "eslint": "eslint --ext .js .",
-    "prettier": "prettier '**/*.js' --ignore-path .eslintignore",
+    "eslint": "eslint .",
+    "prettier": "prettier **/*.{js,cjs,mjs}",
     "prerelease": "npm run lint && npm run build && npm run test:run",
     "release": "git add dist/. && standard-version -a",
-    "prebuild": "npm run build:docs",
     "build": "npm run build:default; npm run build:disclosure-menu; npm run build:menubar; npm run build:top-link-disclosure-menu; npm run build:treeview",
-    "build:docs": "jsdoc -c jsdoc.config.js",
+    "build:docs": "jsdoc -c jsdoc.config.cjs",
     "build:default": "BUILD_TYPE=default vite build",
     "build:disclosure-menu": "BUILD_TYPE=DisclosureMenu vite build",
     "build:menubar": "BUILD_TYPE=Menubar vite build",
@@ -84,20 +87,22 @@
     "@babel/preset-env": "^7.22.5",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
-    "@vitest/ui": "^0.32.2",
+    "@eslint/js": "^8.50.0",
+    "@vitest/ui": "^0.34.5",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "docdash": "^2.0.1",
     "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-jsdoc": "^46.2.6",
+    "globals": "^13.22.0",
     "husky": "^8.0.3",
     "jsdoc": "^4.0.2",
     "jsdoc-typeof-plugin": "^1.0.0",
     "jsdom": "^22.1.0",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
     "sass": "^1.63.6",
     "standard-version": "^9.5.0",
     "vite": "^4.3.9",

.prettierrc.js → prettier.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import("prettier").Config} */
+const config = {
   tabWidth: 2,
   useTabs: false,
   semi: true,
@@ -11,3 +12,5 @@ module.exports = {
   endOfLine: "lf",
   printWidth: 80,
 };
+
+export default config;

tests/menus/Menubar/aria.test.js

@@ -133,7 +133,7 @@ describe("Menubar", () => {
         index,
         item,
       }))
-    )("Submenu item $index", ({ index, item }) => {
+    )("Submenu item $index", ({ item }) => {
       // Test the submenu item's role attribute.
       it("should set the submenu item's role attribute", () => {
         expect(item.dom.item.getAttribute("role")).toBe("none");

tests/menus/Treeview/aria.test.js

@@ -133,7 +133,7 @@ describe("Treeview", () => {
         index,
         item,
       }))
-    )("Submenu item $index", ({ index, item }) => {
+    )("Submenu item $index", ({ item }) => {
       // Test the submenu item's role attribute.
       it("should set the submenu item's role attribute", () => {
         expect(item.dom.item.getAttribute("role")).toBe("none");

tests/menus/helpers.js

@@ -2,7 +2,8 @@
  * Helper functions for testing menus.
  */
 
-import BaseMenu from "../../src/_baseMenu.js";
+// eslint-disable-next-line no-unused-vars
+/* global BaseMenu */
 
 /**
  * Extends jsdom MouseEvent class as PointerEvent class

vite.config.js

@@ -1,8 +1,14 @@
 import { resolve } from "path";
 import { defineConfig } from "vite";
 import BrowserSync from "vite-plugin-browser-sync";
+import { fileURLToPath, URL } from "url";
+import process from "process";
 
-// The type of menu to build.
+// Get the current directory path.
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+// The type of menu to build from the BUILD_TYPE environment variable.
+// If BUILD_TYPE is not set, the default build is used
 const buildType = process.env.BUILD_TYPE ?? "default";
 
 // Supported build types.
@@ -42,6 +48,7 @@ const lib = {
   },
 };
 
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [BrowserSync()],
   build: {