Upgrade to ESM and add full support for ESM

jakezatecky · jakezatecky · commit 4c24406a60fe · 2025-09-10T23:01:00.000-04:00
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,6 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-env"
+    ["@babel/preset-env", { "modules": false }]
   ]
 }
diff --git a/.eslintrc b/.eslintrc
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['14', '16', '18']
+        node: [20, 22, 24]
     steps:
       -
         uses: actions/checkout@v3
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 /examples/dist
 /lib
 /node_modules
+/test-compiled
 package-lock.json
 yarn.lock
-pnpm-lock.yaml
+pnpm-lock.yaml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,10 @@
 * Hide the pseudo-checkbox from the accessibility tree
 * Change the clickable label from `role="link"` to `role="button"`
 
+### Added
+
+* Add full support for ESM environments
+
 ## [v1.8.0](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.3...v1.8.0) (2022-09-06)
 
 ### Other
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,55 @@
+import takiyonConfig from 'eslint-config-takiyon-react';
+import globals from 'globals';
+
+import webpackConfig from './webpack.config.examples.js';
+
+export default [
+    ...takiyonConfig,
+    {
+        files: [
+            '**/*.{js,jsx}',
+        ],
+        ignores: ['./node_modules/**/*'],
+        settings: {
+            // Account for webpack.resolve.module imports
+            'import/resolver': {
+                webpack: {
+                    config: webpackConfig,
+                },
+            },
+        },
+    },
+    {
+        // Front-end files
+        files: [
+            'examples/**/*.{js,jsx}',
+            'src/**/*.{js,jsx}',
+        ],
+        languageOptions: {
+            globals: {
+                APP_NAME: 'readonly',
+                ...globals.browser,
+            },
+        },
+    },
+    {
+        // Test files
+        files: ['test/**/*.{js,jsx}'],
+        languageOptions: {
+            globals: {
+                APP_NAME: 'readonly',
+                ...globals.browser,
+                ...globals.mocha,
+            },
+        },
+    },
+    {
+        // Build files
+        files: ['*.{js,jsx}'],
+        languageOptions: {
+            globals: {
+                ...globals.node,
+            },
+        },
+    },
+];
diff --git a/examples/.eslintrc b/examples/.eslintrc
diff --git a/examples/src/index.jsx b/examples/src/index.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import BasicExample from './js/BasicExample';
-import CustomIconsExample from './js/CustomIconsExample';
-import ClickableLabelsExample from './js/ClickableLabelsExample';
-import DisabledExample from './js/DisabledExample';
-import ExpandAllExample from './js/ExpandAllExample';
-import HiddenCheckboxesExample from './js/HiddenCheckboxesExample';
-import NoCascadeExample from './js/NoCascadeExample';
-import LargeDataExample from './js/LargeDataExample';
-import PessimisticToggleExample from './js/PessimisticToggleExample';
-import FilterExample from './js/FilterExample';
+import BasicExample from './js/BasicExample.jsx';
+import CustomIconsExample from './js/CustomIconsExample.jsx';
+import ClickableLabelsExample from './js/ClickableLabelsExample.jsx';
+import DisabledExample from './js/DisabledExample.jsx';
+import ExpandAllExample from './js/ExpandAllExample.jsx';
+import HiddenCheckboxesExample from './js/HiddenCheckboxesExample.jsx';
+import NoCascadeExample from './js/NoCascadeExample.jsx';
+import LargeDataExample from './js/LargeDataExample.jsx';
+import PessimisticToggleExample from './js/PessimisticToggleExample.jsx';
+import FilterExample from './js/FilterExample.jsx';
 
 createRoot(document.getElementById('basic-example')).render(<BasicExample />);
 createRoot(document.getElementById('custom-icons-example')).render(<CustomIconsExample />);
diff --git a/examples/src/js/BasicExample.jsx b/examples/src/js/BasicExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 function BasicExample() {
     const [checked, setChecked] = useState([
diff --git a/examples/src/js/ClickableLabelsExample.jsx b/examples/src/js/ClickableLabelsExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 function ClickExample() {
     const [checked, setChecked] = useState([
diff --git a/examples/src/js/DisabledExample.jsx b/examples/src/js/DisabledExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 function DisabledExample() {
     const [checked, setChecked] = useState([
diff --git a/examples/src/js/ExpandAllExample.jsx b/examples/src/js/ExpandAllExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 function ExpandAllExample() {
     const [checked, setChecked] = useState([
diff --git a/examples/src/js/FilterExample.jsx b/examples/src/js/FilterExample.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 class FilterExample extends Component {
     state = {
diff --git a/examples/src/js/HiddenCheckboxesExample.jsx b/examples/src/js/HiddenCheckboxesExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { empires as nodes } from './common';
+import { empires as nodes } from './common.js';
 
 function HiddenCheckboxesExample() {
     const [checked, setChecked] = useState([
diff --git a/examples/src/js/NoCascadeExample.jsx b/examples/src/js/NoCascadeExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 function NoCascadeExample() {
     const [checked, setChecked] = useState([
diff --git a/examples/src/js/PessimisticToggleExample.jsx b/examples/src/js/PessimisticToggleExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as nodes } from './common.js';
 
 function PessimisticToggleExample() {
     const [checked, setChecked] = useState([
diff --git a/package.json b/package.json
@@ -17,23 +17,36 @@
   "homepage": "https://jakezatecky.github.io/react-checkbox-tree",
   "bugs": "https://github.com/jakezatecky/react-checkbox-tree/issues",
   "main": "lib/index.js",
-  "browser": "lib/index.browser.js",
+  "module": "lib/index.esm.js",
+  "browser": "lib/index.js",
+  "type": "module",
+  "imports": {
+    "#js/*": "./src/js/*",
+    "#src/*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib/index.esm.js",
+      "require": "./lib/index.js"
+    },
+    "./*": "./*"
+  },
   "scripts": {
     "build-less": "lessc src/less/react-checkbox-tree.less .css-compare/less.css",
-    "build-script": "npm run build-script-node && npm run build-script-web",
-    "build-script-node": "webpack --env=target=node",
-    "build-script-web": "webpack --env=target=web",
+    "build:script": "npm run build:script-umd && npm run build:script-esm",
+    "build:script-umd": "webpack --env=target=umd",
+    "build:script-esm": "webpack --env=target=esm",
     "build-sass": "sass src/scss/react-checkbox-tree.scss lib/react-checkbox-tree.css && cp lib/react-checkbox-tree.css .css-compare/scss.css",
     "build-style": "npm run build-less && npm run build-sass && npm run build-style-autoprefix",
     "build-style-autoprefix": "postcss lib/react-checkbox-tree.css --use autoprefixer --output lib/react-checkbox-tree.css",
     "build": "npm run build-script && npm run build-style",
-    "examples": "webpack serve --config=webpack.config.test.js",
-    "gh-build": "webpack --config=webpack.config.test.js --mode=production",
+    "examples": "webpack serve --config=webpack.config.examples.js",
+    "gh-build": "webpack --config=webpack.config.examples.js --mode=production",
     "gh-deploy": "npm run gh-build && bash ./gh-deploy.sh",
     "prepublishOnly": "npm run release",
     "release": "npm run test && npm run build && npm run test-style-equivalence",
     "test": "npm run test-script && npm run test-style",
-    "test-script": "npm run test-script-format && npm run test-script-mocha",
+    "test-script": "webpack --config=webpack.config.test.js && mocha test-compiled/index.js --exit",
     "test-script-format": "eslint src/**/*.{js,jsx} examples/src/**/*.{js,jsx} test/**/*.{js,jsx} *.{js,jsx}",
     "test-script-mocha": "cross-env NODE_PATH=./src mocha test/**/*.{js,jsx} --exit",
     "test-style": "stylelint src/scss/**/*.scss examples/src/scss/**/*.scss",
@@ -55,18 +68,19 @@
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.0.0",
     "browser-sync": "^2.18.6",
-    "chai": "^4.0.0",
+    "chai": "^6.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.3",
     "cssnano": "^6.0.0",
     "eslint": "^8.23.0",
-    "eslint-config-takiyon-react": "^3.0.0",
+    "eslint-config-takiyon-react": "^6.0.0",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "global-jsdom": "^26.0.0",
+    "globals": "^16.4.0",
     "html-bundler-webpack-plugin": "^2.14.0",
     "jsdom": "^26.1.0",
     "less": "^4.1.3",
@@ -80,8 +94,8 @@
     "stylelint": "^15.1.0",
     "stylelint-config-takiyon": "^2.0.4",
     "webpack": "^5.3.2",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import CheckboxTree from './js/CheckboxTree';
+import CheckboxTree from './js/CheckboxTree.jsx';
 
 export default CheckboxTree;
-export * from './js/utils';
+export * from './js/utils.js';
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
@@ -5,14 +5,14 @@ import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from './Button';
-import { CHECK_MODEL } from './constants';
-import NodeModel from './NodeModel';
-import TreeNode from './TreeNode';
-import iconsShape from './shapes/iconsShape';
-import languageShape from './shapes/languageShape';
-import listShape from './shapes/listShape';
-import nodeShape from './shapes/nodeShape';
+import Button from '#js/Button.jsx';
+import { CHECK_MODEL } from '#js/constants.js';
+import NodeModel from '#js/NodeModel.js';
+import TreeNode from '#js/TreeNode.jsx';
+import iconsShape from '#js/shapes/iconsShape.js';
+import languageShape from '#js/shapes/languageShape.js';
+import listShape from '#js/shapes/listShape.js';
+import nodeShape from '#js/shapes/nodeShape.js';
 
 class CheckboxTree extends React.Component {
     static propTypes = {
diff --git a/src/js/NodeModel.js b/src/js/NodeModel.js
@@ -1,5 +1,5 @@
-import CheckboxTreeError from './CheckboxTreeError';
-import { CHECK_MODEL } from './constants';
+import CheckboxTreeError from '#js/CheckboxTreeError.js';
+import { CHECK_MODEL } from '#js/constants.js';
 
 class NodeModel {
     constructor(props, nodes = {}) {
diff --git a/src/js/TreeNode.jsx b/src/js/TreeNode.jsx
@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from './Button';
-import NativeCheckbox from './NativeCheckbox';
-import iconsShape from './shapes/iconsShape';
-import languageShape from './shapes/languageShape';
+import Button from '#js/Button.jsx';
+import NativeCheckbox from '#js/NativeCheckbox.jsx';
+import iconsShape from '#js/shapes/iconsShape.js';
+import languageShape from '#js/shapes/languageShape.js';
 
 class TreeNode extends React.PureComponent {
     static propTypes = {
diff --git a/test/.eslintrc b/test/.eslintrc
diff --git a/test/components/Button.jsx b/test/components/Button.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { render, screen } from '@testing-library/react';
 
-import Button from '../src/js/Button';
+import Button from '#js/Button.jsx';
 
 describe('<Button />', () => {
     describe('title', () => {
diff --git a/test/components/CheckboxTree.jsx b/test/components/CheckboxTree.jsx
@@ -4,8 +4,8 @@ import { render, screen } from '@testing-library/react';
 import { configure } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 
-import CheckboxTree from '../src/js/CheckboxTree';
-import CheckboxTreeError from '../src/js/CheckboxTreeError';
+import CheckboxTree from '#js/CheckboxTree.jsx';
+import CheckboxTreeError from '#js/CheckboxTreeError.js';
 
 const consoleError = console.error;
 
diff --git a/test/components/NativeCheckbox.jsx b/test/components/NativeCheckbox.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { render, screen } from '@testing-library/react';
 
-import NativeCheckbox from '../src/js/NativeCheckbox';
+import NativeCheckbox from '#js/NativeCheckbox.jsx';
 
 describe('<NativeCheckbox />', () => {
     describe('indeterminate', () => {
diff --git a/test/components/TreeNode.jsx b/test/components/TreeNode.jsx
@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import TreeNode from '../src/js/TreeNode';
+import TreeNode from '#js/TreeNode.jsx';
 
 const baseProps = {
     checked: 0,
diff --git a/test/index.js b/test/index.js
diff --git a/test/utils.js b/test/utils.js
diff --git a/webpack.config.examples.js b/webpack.config.examples.js
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/webpack.config.test.js b/webpack.config.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"presets": [`
`3`	`3`	`"@babel/preset-react",`
`4`		`- "@babel/preset-env"`
	`4`	`+ ["@babel/preset-env", { "modules": false }]`
`5`	`5`	`]`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ jobs:`
`7`	`7`	`runs-on: ubuntu-latest`
`8`	`8`	`strategy:`
`9`	`9`	`matrix:`
`10`		`- node: ['14', '16', '18']`
	`10`	`+ node: [20, 22, 24]`
`11`	`11`	`steps:`
`12`	`12`	`-`
`13`	`13`	`uses: actions/checkout@v3`