Add native ESM support (#130)

Author: wojtekmaj

package.json

@@ -2,14 +2,24 @@
   "name": "@wojtekmaj/react-async-button",
   "version": "1.4.0",
   "description": "A button that handles Promises for your React app.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "source": "src/index.ts",
-  "types": "dist/cjs/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./src": "./src/index.ts"
+  },
   "scripts": {
-    "build": "yarn build-esm && yarn build-cjs",
+    "build": "yarn build-esm && yarn build-cjs && yarn build-cjs-package",
     "build-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
     "build-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+    "build-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "postinstall": "husky install",
@@ -18,7 +28,7 @@
     "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
     "tsc": "tsc --noEmit",
     "unit": "vitest",
-    "watch": "yarn build-esm --watch & yarn build-cjs --watch"
+    "watch": "yarn build-esm --watch & yarn build-cjs --watch & yarn build-cjs-package"
   },
   "keywords": [
     "react",

src/AsyncButton.spec.tsx

@@ -3,7 +3,7 @@ import React, { createRef } from 'react';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import AsyncButton from './index';
+import AsyncButton from './index.js';
 
 vi.useFakeTimers();
 

src/index.ts

@@ -1,6 +1,6 @@
-import AsyncButton from './AsyncButton';
+import AsyncButton from './AsyncButton.js';
 
-export type { AsyncButtonProps } from './AsyncButton';
+export type { AsyncButtonProps } from './AsyncButton.js';
 
 export { AsyncButton };
 

test/Test.tsx

@@ -3,7 +3,7 @@ import AsyncButton from '@wojtekmaj/react-async-button/src';
 
 import './Test.css';
 
-import { Button } from './button.styles';
+import { Button } from './button.styles.js';
 
 const pendingConfig = {
   children: 'Loading…',

test/index.tsx

@@ -1,7 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Test from './Test';
+import Test from './Test.js';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(
   <StrictMode>