improving esm support

.github/workflows/validate.yml → .github/workflows/check.yml

@@ -33,5 +33,5 @@ jobs:
         run: yarn install
 
       # Validates project
-      - name: Typescript, prettier checks
-        run: yarn validate
+      - name: Typescript, prettier, dist checks
+        run: yarn check

jest.config.js

@@ -1,15 +1,19 @@
-module.exports = {
-  preset: 'ts-jest',
+/** @type {import('jest').Config} */
+const config = {
+  // preset: 'ts-jest',
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: './test/tsconfig.json',
+      },
+    ],
+  },
   testEnvironment: 'jsdom',
   // setupFiles: ['./test/env-setup.ts'],
   setupFilesAfterEnv: ['./test/test-setup.ts'],
   // node_modules is default.
   // testPathIgnorePatterns: ['/node_modules/', '/cypress/'],
   modulePathIgnorePatterns: ['/dist/'],
-
-  globals: {
-    'ts-jest': {
-      diagnostics: false,
-    },
-  },
 };
+export default config;

package.json

@@ -2,61 +2,79 @@
   "name": "bind-event-listener",
   "version": "3.0.0",
   "private": false,
-  "description": "Making binding and unbinding DOM events easier",
+  "description": "Safe DOM Event binding and unbinding",
   "author": "Alex Reardon <[email protected]>",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/alexreardon/bind-event-listener.git"
-  },
   "keywords": [
+    "event listener",
+    "event handler",
+    "dom events",
     "dom",
     "ui",
-    "event listener",
-    "event handler"
+    "bind"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alexreardon/bind-event-listener.git"
+  },
   "sideEffects": false,
+  "type": "module",
+  "exports": {
+    "types": {
+      "import": "./dist/index.d.js",
+      "require": "./dist/index.d.cjs"
+    },
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
   "config": {
-    "prettier_target": "src/**/*.{ts,js,jsx,md,json} test/**/*.{ts,js,jsx,md,json}"
+    "prettier_target": "src/**/*.ts test/**/*.ts"
   },
   "files": [
     "/dist",
     "/src"
   ],
   "size-limit": [
     {
-      "path": "dist/index.js",
-      "limit": "549B"
+      "path": "./dist/bind.js",
+      "limit": "95B"
+    },
+    {
+      "path": "./dist/bind-all.js",
+      "limit": "211B"
     }
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
-    "typescript:check": "tsc --noEmit && tsc --noEmit --project ./test/tsconfig.json",
-    "typescript:watch": "tsc --watch",
-    "typescript:build": "tsc",
-    "prettier:check": "prettier --debug-check $npm_package_config_prettier_target",
+    "build": "yarn build:clean && yarn build:dist",
+    "build:clean": "rimraf dist",
+    "build:dist": "tsup",
+    "check": "yarn check:typescript && yarn check:prettier && yarn check:dist",
+    "check:prettier": "prettier --debug-check $npm_package_config_prettier_target",
+    "check:typescript": "tsc --noEmit && tsc --noEmit --project ./test/tsconfig.json",
+    "check:dist": "attw --pack . --ignore-rules no-resolution",
     "prettier:write": "prettier --write $npm_package_config_prettier_target",
-    "validate": "yarn typescript:check && yarn prettier:check",
     "test": "yarn jest",
-    "size:check": "size-limit",
-    "build:clean": "rimraf dist",
-    "build": "yarn build:clean && yarn typescript:build",
+    "test:size": "size-limit",
     "prepublishOnly": "yarn build"
   },
+  "dependencies": {},
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.15.3",
     "@size-limit/preset-small-lib": "^8.2.4",
     "@types/jest": "^29.5.1",
     "@types/node": "^18.16.0",
     "expect-type": "^0.15.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.0",
     "size-limit": "^8.2.4",
     "ts-expect": "^1.3.0",
     "ts-jest": "^29.1.0",
+    "tsup": "^8.0.2",
     "typescript": "^5.0.4"
-  },
-  "dependencies": {}
+  }
 }

src/bind-all.ts

@@ -1,4 +1,4 @@
-import { Binding, InferEventType, Listener, UnbindFn } from './types';
+import type { Binding, InferEventType, Listener, UnbindFn } from './types';
 import { bind } from './bind';
 
 function toOptions(value?: boolean | AddEventListenerOptions): AddEventListenerOptions | undefined {
@@ -54,7 +54,7 @@ export function bindAll<
         listener: Listener<TTarget, TTypes[K] & string>;
         options?: boolean | AddEventListenerOptions;
       };
-    }
+    },
   ],
   sharedOptions?: boolean | AddEventListenerOptions,
 ): UnbindFn {

src/bind.ts

@@ -1,4 +1,4 @@
-import { UnbindFn, InferEventType, Binding } from './types';
+import type { UnbindFn, InferEventType, Binding } from './types';
 
 export function bind<
   TTarget extends EventTarget,

src/index.ts

@@ -1,3 +1,3 @@
 export { bind } from './bind';
 export { bindAll } from './bind-all';
-export { Binding, Listener, UnbindFn } from './types';
+export type { Binding, Listener, UnbindFn } from './types';

test/bind-event-listener/bind-all.spec.ts

@@ -1,4 +1,4 @@
-import { bindAll, UnbindFn } from '../../src';
+import { bindAll, type UnbindFn } from '../../src';
 
 it('should allow for multiple bindings of different types', () => {
   const button: HTMLElement = document.createElement('button');

test/bind-event-listener/bind.spec.ts

@@ -1,4 +1,4 @@
-import { UnbindFn } from '../../src/types';
+import type { UnbindFn } from '../../src/types';
 import { bind } from '../../src';
 
 it('should bind a listener', () => {

test/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "target": "ES2022",
+    "moduleResolution": "node",
+    "verbatimModuleSyntax": false,
   },
-  "include": ["**/*"]
-}
+  "include": [
+    "**/*"
+  ]
+}

test/type-tests/public-types-function-listener-test.ts

@@ -1,6 +1,6 @@
 import { expectTypeOf } from 'expect-type';
-import { Binding, Listener } from '../../src';
-import { expectType, TypeOf } from 'ts-expect';
+import type { Binding, Listener } from '../../src';
+import { expectType, type TypeOf } from 'ts-expect';
 
 // This is how you can 'teach' TS about your custom event
 declare global {

test/type-tests/public-types-object-listener-test.ts

@@ -1,6 +1,6 @@
 import { expectTypeOf } from 'expect-type';
-import { Binding, Listener } from '../../src';
-import { expectType, TypeOf } from 'ts-expect';
+import type { Binding, Listener } from '../../src';
+import { expectType, type TypeOf } from 'ts-expect';
 
 // extracting event type
 {

tsconfig.json

@@ -1,16 +1,29 @@
 {
-  "compileOnSave": true,
   "compilerOptions": {
-    "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "declaration": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "removeComments": true,
+    /* Base Options: */
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    /* If transpiling with TypeScript: */
+    "module": "es2022",
+    /* AND if you're building for a library: */
+    "declaration": true,
+    /* If your code runs in the DOM: */
+    "lib": [
+      "es2022",
+      "dom",
+      "dom.iterable"
+    ],
   },
-  "include": ["src/**/*"]
-}
+  "include": [
+    "src/**/*"
+  ]
+}

tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/*'],
+  bundle: false,
+  clean: true,
+  format: ['cjs', 'esm'],
+  dts: true,
+  tsconfig: './tsconfig.json',
+});