Adding commonjs configurations

Author: microbit-grace

package.json

@@ -17,17 +17,31 @@
   },
   "exports": {
     "./vanilla": {
-      "import": "./dist/vanilla/index.js",
-      "types": "./dist/vanilla/index.d.ts"
+      "import": {
+        "types": "./dist/esm/vanilla/index.d.js",
+        "default": "./dist/esm/vanilla/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/vanilla/index.d.js",
+        "default": "./dist/cjs/vanilla/index.js"
+      }
     },
     "./react": {
-      "import": "./dist/react/index.js",
-      "types": "./dist/react/index.d.ts"
+      "import": {
+        "types": "./dist/esm/react/index.d.js",
+        "default": "./dist/esm/react/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/react/index.d.js",
+        "default": "./dist/cjs/react/index.js"
+      }
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc",
+    "build:esm": "tsc -p tsconfig.json && echo '{\"type\": \"module\"}' > dist/esm/react/package.json && echo '{\"type\": \"module\"}' > dist/esm/vanilla/package.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/react/package.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/vanilla/package.json",
+    "build": "npm run build:esm && npm run build:cjs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "ci": "npm run lint && npm run build && npm run build:storybook",
     "storybook": "storybook dev -p 6006",

tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "outDir": "./dist/cjs"
+  }
+}

tsconfig.json

@@ -7,11 +7,10 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "outDir": "dist",
+    "outDir": "dist/esm",
     "sourceMap": true,
     "declaration": true,
     "jsx": "react-jsx",
@@ -23,5 +22,5 @@
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["./src"]
 }