build: replace webpack with Vite and ship a real ESM/CJS package

.github/workflows/ci.yml

@@ -56,10 +56,56 @@ jobs:
         run: pnpm --filter react-xarrows-examples run build
 
       # Catches the case where `files` or the build output drift apart and the
-      # published tarball silently loses the entry point or its type definitions.
+      # published tarball silently loses an entry point or its type definitions.
       - name: Verify package contents
         run: |
           pnpm pack --pack-destination /tmp
           tar tzf /tmp/react-xarrows-*.tgz | sort
-          tar tzf /tmp/react-xarrows-*.tgz | grep -q 'package/lib/index.js'
-          tar tzf /tmp/react-xarrows-*.tgz | grep -q 'package/lib/index.d.ts'
+          for f in index.mjs index.cjs index.umd.js index.d.ts; do
+            tar tzf /tmp/react-xarrows-*.tgz | grep -q "package/lib/$f"
+          done
+
+      # Catches exports-map and declaration mismatches, such as an ESM entry
+      # whose types still resolve as CommonJS.
+      - name: Verify type resolution
+        run: pnpm exec attw --pack . --format table
+
+      # Listing a file is not the same as it working. The ESM and CJS entry
+      # points are actually loaded here, because a bundler misconfiguration can
+      # emit a file that only throws once imported.
+      - name: Verify entry points load
+        run: |
+          mkdir -p /tmp/consumer && cd /tmp/consumer
+          tar xzf /tmp/react-xarrows-*.tgz
+          npm init -y >/dev/null
+          npm install ./package react@18 react-dom@18 >/dev/null
+          node --input-type=module -e "
+            import Xarrow, { Xwrapper, useXarrow } from 'react-xarrows';
+            if (typeof Xarrow !== 'function') throw new Error('ESM default export is not a component');
+            if (typeof Xwrapper !== 'function' || typeof useXarrow !== 'function') throw new Error('ESM named exports missing');
+            console.log('ESM entry point OK');
+          "
+          node -e "
+            const m = require('react-xarrows');
+            if (typeof m.default !== 'function') throw new Error('CJS default export is not a component');
+            if (typeof m.Xwrapper !== 'function' || typeof m.useXarrow !== 'function') throw new Error('CJS named exports missing');
+            console.log('CJS entry point OK');
+          "
+
+      # The UMD bundle is the one output nothing else exercises, and its only
+      # contract is the set of global names it reads. Getting one wrong produces
+      # a bundle that loads and then fails on first use, so it is loaded here
+      # against real globals.
+      - name: Verify UMD bundle
+        run: |
+          cd /tmp/consumer
+          node -e "
+            const vm = require('node:vm'), fs = require('node:fs');
+            const sandbox = { React: require('react'), _: require('lodash'), PropTypes: require('prop-types'), console };
+            vm.createContext(sandbox);
+            vm.runInContext(fs.readFileSync('node_modules/react-xarrows/lib/index.umd.js', 'utf8'), sandbox);
+            const umd = sandbox.reactXarrow;
+            if (!umd || typeof umd.default !== 'function') throw new Error('UMD global reactXarrow missing or malformed');
+            if (typeof umd.Xwrapper !== 'function' || typeof umd.useXarrow !== 'function') throw new Error('UMD named exports missing');
+            console.log('UMD bundle OK');
+          "

package.json

@@ -3,16 +3,29 @@
   "version": "2.0.2",
   "author": "Eliav Louski",
   "description": "Draw arrows (or lines) between components in React!",
-  "main": "./lib/index.js",
-  "module": "./lib/index.js",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",
+  "unpkg": "./lib/index.umd.js",
+  "jsdelivr": "./lib/index.umd.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./lib/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.cts",
+        "default": "./lib/index.cjs"
+      },
+      "default": "./lib/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "clean": "rimraf lib",
-    "build:js": "webpack --mode production --config-name lib",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build": "pnpm run clean && pnpm run build:js && pnpm run build:types",
-    "build:dev": "webpack --mode development --config-name lib",
-    "watch": "webpack --watch --progress --mode development --config-name lib",
+    "build": "pnpm run clean && vite build",
+    "build:watch": "vite build --watch",
     "type-check": "tsc --noEmit",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -46,36 +59,28 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.2",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
+    "@arethetypeswrong/cli": "^0.18.5",
     "@eslint/js": "^9.39.5",
+    "@microsoft/api-extractor": "^7.58.12",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@types/lodash": "^4.14.168",
     "@types/node": "^26.1.2",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
     "@vitest/coverage-v8": "^3.2.7",
-    "babel-loader": "^8.2.2",
     "eslint": "^9.39.5",
-    "file-loader": "^6.2.0",
     "globals": "^17.9.0",
     "jsdom": "^30.0.1",
     "prettier": "^3.9.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.1.3",
-    "ts-loader": "^9.2.3",
-    "ts-node": "^9.1.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.66.0",
-    "vitest": "^3.2.7",
-    "webpack": "^5.44.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-node-externals": "^3.0.0"
+    "vite": "^8.2.1",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^3.2.7"
   },
   "browserslist": [
     ">0.2%",
@@ -86,6 +91,7 @@
   "license": "MIT",
   "files": [
     "lib",
+    "src",
     "package.json",
     "README.md",
     "CHANGELOG.md"