feat!: update deps and add export map (#188)

BREAKING CHANGE: Add export map and full ESM support

Author: kyletsang

.babelrc

@@ -0,0 +1,13 @@
+module.exports = (api) => {
+  return {
+    presets: [
+      '@react-bootstrap',
+      [
+        '@babel/typescript',
+        {
+          rewriteImportExtensions: api.env() !== 'development',
+        },
+      ],
+    ],
+  };
+};

.babelrc.js

@@ -67,3 +67,6 @@ $RECYCLE.BIN/
 *.msi
 *.msm
 *.msp
+
+esm
+cjs

.gitignore

@@ -1,7 +1,7 @@
-'use strict'
+'use strict';
 
-module.exports = config => {
-  const { env } = process
+module.exports = (config) => {
+  const { env } = process;
 
   config.set({
     basePath: '',
@@ -55,5 +55,5 @@ module.exports = config => {
     webpackServer: {
       noInfo: true,
     },
-  })
-}
+  });
+};

.size-snapshot.json

@@ -11,9 +11,36 @@
     "url": "git+https://github.com/react-bootstrap/dom-helpers.git"
   },
   "license": "MIT",
-  "main": "lib/cjs/index.js",
-  "types": "lib/cjs/index.d.ts",
-  "module": "lib/esm/index.js",
+  "files": [
+    "cjs",
+    "esm"
+  ],
+  "main": "cjs/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      }
+    },
+    "./*": {
+      "require": {
+        "types": "./cjs/*.d.ts",
+        "default": "./cjs/*.js"
+      },
+      "import": {
+        "types": "./esm/*.d.ts",
+        "default": "./esm/*.js"
+      }
+    }
+  },
   "keywords": [
     "dom-helpers",
     "react-component",
@@ -32,68 +59,63 @@
   "scripts": {
     "test": "karma start --single-run",
     "tdd": "karma start",
-    "check:size": "rollup -c",
-    "build:pick": "cherry-pick --name=dom-helpers --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
-    "build": "rimraf lib && node_modules/.bin/build src && yarn build:pick",
+    "build": "yarn build:cjs && yarn build:esm",
+    "build:cjs": "rimraf cjs && babel src --out-dir cjs --delete-dir-on-start --env-name cjs --extensions .ts && yarn build:cjs:types && echo '{\"type\": \"commonjs\"}' > cjs/package.json",
+    "build:esm": "rimraf esm && babel src --out-dir esm --delete-dir-on-start --env-name esm --extensions .ts && yarn build:esm:types && echo '{\"type\": \"module\"}' > esm/package.json",
+    "build:cjs:types": "tsc --emitDeclarationOnly --module commonjs --outDir cjs",
+    "build:esm:types": "tsc --emitDeclarationOnly --module esnext --outDir esm",
     "prepublishOnly": "yarn build",
     "lint": "tsc -p ./ --noEmit && eslint src test",
     "release": "rollout"
   },
-  "publishConfig": {
-    "directory": "lib"
-  },
   "release": {
     "conventionalCommits": true
   },
   "dependencies": {
-    "@babel/runtime": "^7.8.7",
-    "csstype": "^3.0.2"
+    "@babel/runtime": "^7.27.1",
+    "csstype": "^3.1.3"
   },
   "devDependencies": {
-    "@4c/build": "^2.3.1",
-    "@4c/rollout": "^2.2.1",
-    "@4c/tsconfig": "^0.3.1",
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
-    "@babel/preset-typescript": "^7.13.0",
-    "@react-bootstrap/babel-preset": "^1.2.0",
+    "@4c/rollout": "^4.0.2",
+    "@4c/tsconfig": "^0.4.1",
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@react-bootstrap/babel-preset": "^2.3.0",
     "@react-bootstrap/eslint-config": "^1.3.2",
     "@react-bootstrap/eslint-config-typescript": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "cherry-pick": "^0.5.0",
+    "babel-loader": "^10.0.0",
     "eslint": "^7.25.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-mocha": "^8.1.0",
     "eslint-plugin-react": "^7.23.2",
     "expect.js": "^0.3.1",
-    "jquery": "^3.6.0",
-    "karma": "^6.3.2",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^2.1.0",
+    "jquery": "^3.7.1",
+    "karma": "^6.4.4",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-html2js-preprocessor": "^1.1.0",
     "karma-mocha": "~2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sinon": "^1.0.5",
-    "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.2",
-    "mocha": "^8.4.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.47.0",
-    "rollup-plugin-size-snapshot": "^0.12.0",
-    "rollup-plugin-typescript": "^1.0.1",
+    "karma-sourcemap-loader": "^0.4.0",
+    "karma-webpack": "^5.0.1",
+    "mocha": "^11.5.0",
+    "rimraf": "^6.0.1",
     "simulant": "^0.2.2",
-    "sinon": "^9.2.4",
-    "typescript": "^4.2.4",
-    "webpack": "^4.46.0"
+    "sinon": "^20.0.0",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.9"
   },
   "bugs": {
     "url": "https://github.com/react-bootstrap/dom-helpers/issues"
   },
   "readme": "ERROR: No README data found!",
   "homepage": "https://github.com/react-bootstrap/dom-helpers#readme",
-  "_id": "[email protected]"
+  "_id": "[email protected]",
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

karma.conf.js

@@ -1,4 +1,4 @@
-import ownerDocument from './ownerDocument'
+import ownerDocument from './ownerDocument.ts';
 
 /**
  * Returns the actively focused element safely.
@@ -9,13 +9,13 @@ export default function activeElement(doc = ownerDocument()) {
   // Support: IE 9 only
   // IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
   try {
-    const active = doc.activeElement
+    const active = doc.activeElement;
     // IE11 returns a seemingly empty object in some cases when accessing
     // document.activeElement from an <iframe>
-    if (!active || !active.nodeName) return null
-    return active
+    if (!active || !active.nodeName) return null;
+    return active;
   } catch (e) {
     /* ie throws if no active element */
-    return doc.body
+    return doc.body;
   }
 }

package.json

@@ -1,22 +1,19 @@
-import hasClass from './hasClass'
+import hasClass from './hasClass.ts';
 
 /**
  * Adds a CSS class to a given element.
- * 
+ *
  * @param element the element
  * @param className the CSS class name
  */
-export default function addClass(
-  element: Element | SVGElement,
-  className: string
-) {
-  if (element.classList) element.classList.add(className)
+export default function addClass(element: Element | SVGElement, className: string) {
+  if (element.classList) element.classList.add(className);
   else if (!hasClass(element, className))
     if (typeof element.className === 'string')
-      (element as Element).className = `${element.className} ${className}`
+      (element as Element).className = `${element.className} ${className}`;
     else
       element.setAttribute(
         'class',
         `${(element.className && element.className.baseVal) || ''} ${className}`
-      )
+      );
 }

rollup.config.js

@@ -1,22 +1,22 @@
 /* eslint-disable no-return-assign */
-import canUseDOM from './canUseDOM'
+import canUseDOM from './canUseDOM.ts';
 
-export let optionsSupported = false
-export let onceSupported = false
+export let optionsSupported = false;
+export let onceSupported = false;
 
 try {
   const options = {
     get passive() {
-      return (optionsSupported = true)
+      return (optionsSupported = true);
     },
     get once() {
       // eslint-disable-next-line no-multi-assign
-      return (onceSupported = optionsSupported = true)
+      return (onceSupported = optionsSupported = true);
     },
-  }
+  };
   if (canUseDOM) {
-    window.addEventListener('test', options as any, options)
-    window.removeEventListener('test', options as any, true)
+    window.addEventListener('test', options as any, options);
+    window.removeEventListener('test', options as any, true);
   }
 } catch (e) {
   /* */
@@ -25,15 +25,15 @@ try {
 export type EventHandler<K extends keyof HTMLElementEventMap> = (
   this: HTMLElement,
   event: HTMLElementEventMap[K]
-) => any
+) => any;
 
-export type TaggedEventHandler<
-  K extends keyof HTMLElementEventMap
-> = EventHandler<K> & { __once?: EventHandler<K> }
+export type TaggedEventHandler<K extends keyof HTMLElementEventMap> = EventHandler<K> & {
+  __once?: EventHandler<K>;
+};
 
 /**
  * An `addEventListener` ponyfill, supports the `once` option
- * 
+ *
  * @param node the element
  * @param eventName the event name
  * @param handle the handler
@@ -46,26 +46,22 @@ function addEventListener<K extends keyof HTMLElementEventMap>(
   options?: boolean | AddEventListenerOptions
 ) {
   if (options && typeof options !== 'boolean' && !onceSupported) {
-    const { once, capture } = options
-    let wrappedHandler = handler
+    const { once, capture } = options;
+    let wrappedHandler = handler;
     if (!onceSupported && once) {
       wrappedHandler =
         handler.__once ||
         function onceHandler(event) {
-          this.removeEventListener(eventName, onceHandler, capture)
-          handler.call(this, event)
-        }
-      handler.__once = wrappedHandler
+          this.removeEventListener(eventName, onceHandler, capture);
+          handler.call(this, event);
+        };
+      handler.__once = wrappedHandler;
     }
 
-    node.addEventListener(
-      eventName,
-      wrappedHandler,
-      optionsSupported ? options : capture
-    )
+    node.addEventListener(eventName, wrappedHandler, optionsSupported ? options : capture);
   }
 
-  node.addEventListener(eventName, handler, options)
+  node.addEventListener(eventName, handler, options);
 }
 
-export default addEventListener
+export default addEventListener;