Add native ESM support

Author: wojtekmaj

package.json

@@ -2,14 +2,20 @@
   "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"
+  },
   "scripts": {
     "build": "yarn build-esm && yarn build-cjs",
     "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": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs && echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "postinstall": "husky install",

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import AsyncButton from '@wojtekmaj/react-async-button/src';
+import AsyncButton from '@wojtekmaj/react-async-button/src/index.js';
 
 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>