build: use package exports for esm/cjs files (#114)

* lint updates

* build and bump

Author: jquense

.babelrc.js

@@ -1,6 +1,6 @@
 module.exports = (api) => ({
   presets: [
-    ['env-modules', { modules: api.env() === 'esm' ? false : 'commonjs' }],
+    ['env-modules', { modules: api.env() === 'cjs' ? 'commonjs' : false }],
     ['@babel/react', { runtime: 'automatic' }],
     '@babel/preset-typescript',
   ],

.eslintrc

@@ -1,4 +1,5 @@
 lib/
+cjs/
 .cache/
 www/public
 

.gitignore

@@ -0,0 +1 @@
+20

.nvmrc

@@ -0,0 +1,88 @@
+import eslint from '@eslint/js';
+import globals from 'globals';
+import prettierPlugin from 'eslint-plugin-prettier/recommended';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+
+  prettierPlugin,
+  react.configs.flat.recommended,
+  react.configs.flat['jsx-runtime'],
+
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.mts'],
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: {
+          jsx: true,
+        },
+        warnOnUnsupportedTypeScriptVersion: false,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          caughtErrors: 'none',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: false,
+        },
+      ],
+    },
+  },
+  {
+    ignores: ['**/node_modules/**', '**/lib/**', '**/www/**'],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+        ...globals.node,
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+  },
+  {
+    files: ['**/test/**/*'],
+    rules: {
+      'no-script-url': 'off',
+      'no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      'padded-blocks': 'off',
+      'react/no-multi-comp': 'off',
+      'react/prop-types': 'off',
+    },
+  },
+);

eslint.config.mjs

@@ -11,26 +11,44 @@
     "url": "git+https://github.com/react-restart/ui.git"
   },
   "license": "MIT",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/esm/index.d.ts",
+  "main": "cjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "types": "./esm/index.d.ts",
-      "node": "./cjs/index.js",
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "node": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      }
     },
     "./*": {
-      "types": "./esm/*.d.ts",
-      "node": "./cjs/*.js",
-      "import": "./esm/*.js",
-      "require": "./cjs/*.js"
+      "node": {
+        "types": "./cjs/*.d.ts",
+        "default": "./cjs/*.js"
+      },
+      "require": {
+        "types": "./cjs/*.d.ts",
+        "default": "./cjs/*.js"
+      },
+      "import": {
+        "types": "./lib/*.d.ts",
+        "default": "./lib/*.js"
+      }
     }
   },
   "sideEffects": false,
   "files": [
-    "lib"
+    "lib",
+    "cjs"
   ],
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -48,11 +66,15 @@
   ],
   "scripts": {
     "bootstrap": "yarn --network-timeout 100000 && yarn --cwd www --network-timeout 100000",
-    "build": "rimraf lib && 4c build src && yarn build:popper && yarn build:pick",
+    "build": "rimraf lib && yarn build:esm && yarn build:cjs && yarn build:popper",
+    "build:esm": "babel src --out-dir lib --delete-dir-on-start --extensions '.ts,.tsx' --ignore='**/*.d.ts' && yarn build:esm:types",
+    "build:cjs": "babel src --out-dir cjs --env-name cjs --delete-dir-on-start --extensions '.ts,.tsx'  --ignore='**/*.d.ts' && yarn build:cjs:types && echo '{\"type\": \"commonjs\"}' > cjs/package.json",
+    "build:esm:types": "tsc -p . --emitDeclarationOnly --declaration --outDir lib",
+    "build:cjs:types": "tsc -p . --emitDeclarationOnly --declaration --outDir cjs",
     "build:pick": "cherry-pick --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
-    "build:popper": "rollup src/popper.ts --file lib/cjs/popper.js --format cjs --name popper --plugin @rollup/plugin-node-resolve",
+    "build:popper": "rollup src/popper.ts --file cjs/popper.js --format cjs --name popper --plugin @rollup/plugin-node-resolve && rollup src/popper.ts --file lib/popper.js --format esm --name popper --plugin @rollup/plugin-node-resolve",
     "deploy-docs": "yarn --cwd www deploy",
-    "lint": "eslint www/*.js www/src src test *.ts  --ext .js,.ts,.tsx",
+    "lint": "eslint src test",
     "prepublishOnly": "yarn build",
     "release": "rollout",
     "start": "yarn --cwd www start",
@@ -61,7 +83,7 @@
     "testonly": "vitest --run"
   },
   "lint-staged": {
-    "*.js,*.tsx": "eslint --fix --ext .js,.ts,.tsx"
+    "*.js,*.tsx": "eslint --fix"
   },
   "prettier": {
     "singleQuote": true,
@@ -75,14 +97,15 @@
     "conventionalCommits": true
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/runtime": "^7.26.0",
     "@popperjs/core": "^2.11.8",
     "@react-aria/ssr": "^3.5.0",
-    "@restart/hooks": "^0.5.0",
+    "@restart/hooks": "^0.6.2",
     "@types/warning": "^3.0.3",
     "dequal": "^2.0.3",
     "dom-helpers": "^5.2.0",
-    "uncontrollable": "^8.0.4",
+    "uncontrollable": "^9.0.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -93,10 +116,11 @@
     "@4c/cli": "^4.0.4",
     "@4c/rollout": "^4.0.2",
     "@4c/tsconfig": "^0.4.1",
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@eslint/js": "^9.17.0",
     "@react-bootstrap/eslint-config": "^2.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@testing-library/dom": "^10.3.1",
@@ -106,8 +130,8 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.4",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
     "@vitejs/plugin-react": "^4.3.2",
     "@vitest/browser": "^2.1.3",
     "@vitest/coverage-istanbul": "2.1.3",
@@ -116,25 +140,27 @@
     "babel-preset-env-modules": "^1.0.1",
     "cherry-pick": "^0.5.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.24.0",
-    "eslint-config-4catalyzer-typescript": "^3.2.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.17.0",
+    "eslint-config-4catalyzer-typescript": "^3.3.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "gh-pages": "^3.1.0",
+    "globals": "^15.14.0",
     "hookem": "^1.0.9",
     "lint-staged": "^10.5.4",
     "playwright": "^1.48.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.1",
     "rimraf": "^3.0.2",
     "rollup": "^4.18.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.19.1",
     "vitest": "^2.1.3"
   },
   "bugs": {

package.json

@@ -1,9 +1,6 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/anchor-has-content */
-
 import * as React from 'react';
 
-import { useEventCallback } from '@restart/hooks';
+import useEventCallback from '@restart/hooks/useEventCallback';
 import { useButtonProps } from './Button';
 
 export function isTrivialHref(href?: string) {

src/Anchor.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import type { Placement } from './usePopper';
 
 export type DropdownContextValue = {
-  toggle: (nextShow: boolean, event?: React.SyntheticEvent | Event) => void;
+  toggle: (
+    nextShow: boolean,
+    event?: React.SyntheticEvent | KeyboardEvent | MouseEvent,
+  ) => void;
   menuElement: HTMLElement | null;
   toggleElement: HTMLElement | null;
   setMenu: (ref: HTMLElement | null) => void;

src/DropdownContext.ts

@@ -126,7 +126,7 @@ export function useDropdownMenu(options: UseDropdownMenuOptions = {}) {
   }
 
   const handleClose = (e: React.SyntheticEvent | Event) => {
-    context?.toggle(false, e);
+    context?.toggle(false, e as any);
   };
 
   const { placement, setMenu, menuElement, toggleElement } = context || {};

src/DropdownMenu.tsx

@@ -40,7 +40,7 @@ export function useDropdownToggle(): [
   } = useContext(DropdownContext) || {};
   const handleClick = useCallback(
     (e: Event | React.SyntheticEvent<Element, Event>) => {
-      toggle(!show, e);
+      toggle(!show, e as any);
     },
     [show, toggle],
   );

src/DropdownToggle.tsx

@@ -1,7 +1,7 @@
 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import useEventCallback from '@restart/hooks/useEventCallback';
 import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
-import React, { useRef, cloneElement, useState } from 'react';
+import { useRef, cloneElement, useState } from 'react';
 import { TransitionComponent, TransitionProps } from './types';
 import NoopTransition from './NoopTransition';
 import RTGTransition from './RTGTransition';
@@ -62,11 +62,8 @@ export function useTransition({
 
 export interface ImperativeTransitionProps extends TransitionProps {
   transition: TransitionHandler;
-  // eslint-disable-next-line react/no-unused-prop-types
   appear: true;
-  // eslint-disable-next-line react/no-unused-prop-types
   mountOnEnter: true;
-  // eslint-disable-next-line react/no-unused-prop-types
   unmountOnExit: true;
 }