feat: move to tsup for transpiling to support ESM

Author: atomicpages

.eslintrc

@@ -1,6 +1,15 @@
 {
-  "extends": ["@djthoms/eslint-config", "@djthoms/eslint-config/typescript"],
+  "extends": [
+    "@djthoms/eslint-config",
+    "@djthoms/eslint-config/typescript",
+    "@djthoms/eslint-config/react",
+    "@djthoms/eslint-config/react-typescript",
+  ],
   "parserOptions": {
-    "project": "./tsconfig.json"
-  }
+    "project": "./tsconfig.json",
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-argument": "warn",
+  },
 }

.github/workflows/on_push.yml

@@ -9,12 +9,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: pnpm

.lintstagedrc

@@ -1,7 +1,7 @@
 {
-  "*.{ts,tsx,js,json}": [
+  "*.{ts,tsx,js,jsx}": [
     "prettier --write",
     "eslint --fix"
   ],
-  "*.{md,yml,yaml}": "prettier --write"
+  "*.{md,yml,yaml,json}": "prettier --write"
 }

.nvmrc

@@ -0,0 +1 @@
+lts

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "prettier.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "json",
+    "jsonc"
+  ],
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -13,26 +13,26 @@ npm i --save-dev docusaurus-plugin-react-docgen-typescript react-docgen-typescri
 
 ## Usage
 
-Inside your `docusaurus.config.js` add to the `plugins` field and configure with the `src` option
-with full glob support :+1:.
+Inside your `docusaurus.config.js` add to the `plugins` field and configure with
+the `src` option with full glob support :+1:.
 
 ```js
 module.exports = {
   // ...
   plugins: [
     [
-      'docusaurus-plugin-react-docgen-typescript',
+      "docusaurus-plugin-react-docgen-typescript",
       /** @type {import('docusaurus-plugin-react-docgen-typescript').Options} */
       {
         // pass in a single string or an array of strings
-        src: ['path/to/**/*.tsx', '!path/to/**/*test.*'],
+        src: ["path/to/**/*.tsx", "!path/to/**/*test.*"],
         parserOptions: {
           // pass parserOptions to react-docgen-typescript
           // here is a good starting point which filters out all
           // types from react
           propFilter: (prop, component) => {
             if (prop.parent) {
-              return !prop.parent.fileName.includes('@types/react');
+              return !prop.parent.fileName.includes("@types/react");
             }
 
             return true;
@@ -44,11 +44,11 @@ module.exports = {
 };
 ```
 
-Any pattern supported by [`fast-glob`](https://github.com/mrmlnc/fast-glob) is allowed here
-(including negations).
+Any pattern supported by [`fast-glob`](https://github.com/mrmlnc/fast-glob) is
+allowed here (including negations).
 
-`src` paths are relative to the location of your `docusaurus.config.js`. For example, if you
-had a directory structure like:
+`src` paths are relative to the location of your `docusaurus.config.js`. For
+example, if you had a directory structure like:
 
 ```
 .
@@ -69,24 +69,29 @@ had a directory structure like:
 └── yarn.lock
 ```
 
-Then to document all of your JSX components in your `src/` directory, you would use this path:
-`../src/**/*.jsx`.
+Then to document all of your JSX components in your `src/` directory, you would
+use this path: `../src/**/*.jsx`.
 
 ## Reading Annotations
 
-Using the default settings, annotations are stored inside of the `.docusaurus` directory. The
-`@docgen` alias is set to ensure stable access to these files.
+Using the default settings, annotations are stored inside of the `.docusaurus`
+directory. The `@docgen` alias is set to ensure stable access to these files.
 
 ### Build a Prop Table
 
-Most of the time props will want to be shown as API information to a particular component. For
-convenience, we can use a simple hook from this package to dynamically import `.json` files:
+Most of the time props will want to be shown as API information to a particular
+component. For convenience, we can use a simple hook from this package to
+dynamically import `.json` files:
 
 ```tsx
-import { useDynamicImport } from 'docusaurus-plugin-react-docgen-typescript/dist/esm/hooks';
+import { useDynamicImport } from "docusaurus-plugin-react-docgen-typescript/useDynamicImport";
+
+type MyProps = {
+  /* ... */
+};
 
 export const PropTable = ({ name }) => {
-  const props = useDynamicImport(name);
+  const props = useDynamicImport<MyProps>(name);
 
   if (!props) {
     return null;
@@ -104,7 +109,7 @@ export const PropTable = ({ name }) => {
         </tr>
       </thead>
       <tbody>
-        {Object.keys(props).map(key => {
+        {Object.keys(props).map((key) => {
           return (
             <tr key={key}>
               <td>
@@ -113,8 +118,12 @@ export const PropTable = ({ name }) => {
               <td>
                 <code>{props[key].type?.name}</code>
               </td>
-              <td>{props[key].defaultValue && <code>{props[key].defaultValue.value}</code>}</td>
-              <td>{props[key].required ? 'Yes' : 'No'}</td>
+              <td>
+                {props[key].defaultValue && (
+                  <code>{props[key].defaultValue.value}</code>
+                )}
+              </td>
+              <td>{props[key].required ? "Yes" : "No"}</td>
               <td>{props[key].description}</td>
             </tr>
           );
@@ -125,7 +134,8 @@ export const PropTable = ({ name }) => {
 };
 ```
 
-**N.b.** If you use `global: true`, then you must use the [`useGlobalData` hook](https://docusaurus.io/docs/docusaurus-core#useGlobalData)
+**N.b.** If you use `global: true`, then you must use the
+[`useGlobalData` hook](https://docusaurus.io/docs/docusaurus-core#useGlobalData)
 to access the docgen data. You cannot use `useDynamicImport`.
 
 ## Options

package.json

@@ -16,19 +16,29 @@
   },
   "license": "MIT",
   "author": "Dennis Thompson",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/esm/index.js"
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      }
     },
     "./useDynamicImport": {
-      "types": "./dist/types/useDynamicImport.d.ts",
-      "require": "./dist/cjs/useDynamicImport.js",
-      "import": "./dist/esm/useDynamicImport.js"
+      "require": {
+        "types": "./dist/cjs/hooks/useDynamicImport.d.ts",
+        "default": "./dist/cjs/hooks/useDynamicImport.js"
+      },
+      "import": {
+        "types": "./dist/esm/hooks/useDynamicImport.d.mts",
+        "default": "./dist/esm/hooks/useDynamicImport.mjs"
+      }
     }
   },
   "files": [
@@ -39,34 +49,34 @@
     "lint": "eslint src --ext=ts,tsx,js,jsx,json",
     "prebuild": "rm -rf dist",
     "build": "npm-run-all -p build:*",
-    "build:esm": "esbuild --sourcemap --format=esm --target=es2019 --outdir=dist/esm `./scripts/files.sh`",
-    "build:cjs": "esbuild --sourcemap --format=cjs --target=es2017 --outdir=dist/cjs `./scripts/files.sh`",
+    "build:esm": "tsup --sourcemap --format esm --target es2022 --dts -d dist/esm `./scripts/files.sh`",
+    "build:cjs": "tsup --sourcemap --format cjs --target es2020 --dts -d dist/cjs `./scripts/files.sh`",
     "build:types": "tsc -p .",
     "prepare": "is-ci || husky install"
   },
   "dependencies": {
-    "glob": "^8.1.0"
+    "glob": "^10.3.15"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.1",
-    "@commitlint/config-conventional": "^18.4.0",
-    "@djthoms/eslint-config": "^6.1.1",
-    "@djthoms/prettier-config": "^4.3.0",
-    "@docusaurus/types": "^3.0.0",
+    "@arethetypeswrong/cli": "^0.15.3",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@djthoms/eslint-config": "^6.4.2",
+    "@djthoms/prettier-config": "^4.4.1",
+    "@docusaurus/types": "^3.3.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@types/glob": "^8.1.0",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "esbuild": "^0.19.5",
-    "husky": "^8.0.3",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "husky": "^9.0.11",
     "is-ci": "^3.0.1",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
-    "semantic-release": "^22.0.7",
-    "typescript": "^5.2.2"
+    "semantic-release": "^23.1.1",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0",