ESM (#27)

* Update imports

* Update out dir

* Add resolver

* Update configs

* Update resolutions

* Add changeset

* Update dep

* Fix types

* Prettier

* Use `isomorphic-resolve`

.changeset/hungry-apples-cross.md

@@ -0,0 +1,5 @@
+---
+'expect-axe-playwright': major
+---
+
+Update to ESM-first. CommonJS is still supported.

.eslintignore

@@ -1 +1 @@
-lib/
+dist/

.github/workflows/build.yml

@@ -9,11 +9,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -28,12 +28,12 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.ref == 'refs/heads/main' }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: yarn
       - run: yarn install --immutable
       - name: Create release pull request or publish to npm

.gitignore

@@ -1,5 +1,5 @@
 .vscode/
-lib/
+dist/
 test-results/
 
 # Yarn

.npmignore

@@ -1,2 +1,2 @@
-lib/config/
+dist/config/
 *.spec.js

.prettierignore

@@ -6,5 +6,5 @@
 CHANGELOG.md
 
 # Misc
-lib/
+dist/
 test-results/

package.json

@@ -6,7 +6,7 @@
   "license": "ISC",
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   },
   "repository": "github:Widen/expect-axe-playwright",
   "homepage": "https://github.com/Widen/expect-axe-playwright#readme",
@@ -19,32 +19,48 @@
     "axe-core",
     "playwright-test"
   ],
-  "main": "./lib/index.js",
-  "types": "global.d.ts",
-  "files": [
-    "lib",
-    "global.d.ts"
-  ],
   "scripts": {
     "lint": "eslint .",
+    "format": "prettier --write .",
+    "build": "tsup ./src/index.ts --format cjs,esm",
     "release": "./scripts/release.sh",
     "test": "playwright test",
     "ts": "tsc"
   },
+  "type": "module",
+  "exports": {
+    "types": "./global.d.ts",
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "files": [
+    "dist",
+    "global.d.ts"
+  ],
+  "peerDependencies": {
+    "@playwright/test": ">=1.20.0"
+  },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "axe-core": "^4.4.2",
-    "axe-reporter-html": "^0.1.2",
+    "axe-core": "^4.6.3",
+    "axe-reporter-html": "^1.0.0",
+    "isomorphic-resolve": "^1.0.0",
     "merge-deep": "^3.0.3"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.23.0",
-    "@playwright/test": "^1.23.1",
+    "@changesets/cli": "^2.26.0",
+    "@playwright/test": "^1.30.0",
     "@types/merge-deep": "^3.0.0",
-    "@types/node": "^18.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "eslint": "^8.19.0",
-    "prettier": "^2.7.1",
-    "typescript": "^4.7.4"
+    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "eslint": "^8.33.0",
+    "prettier": "^2.8.3",
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.4"
   }
 }

playwright.config.ts

@@ -1,6 +1,7 @@
 import { expect, PlaywrightTestConfig } from '@playwright/test'
 import { RunOptions } from 'axe-core'
-import matchers from './src'
+import { fileURLToPath } from 'node:url'
+import matchers from './src/index.js'
 
 expect.extend(matchers)
 
@@ -12,8 +13,10 @@ declare module '@playwright/test' {
 
 const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
-  globalSetup: require.resolve('./src/config/globalSetup'),
-  testDir: 'src',
+  globalSetup: fileURLToPath(
+    new URL('./src/config/globalSetup.ts', import.meta.url)
+  ),
+  testDir: './src',
   use: {
     axeOptions: {
       rules: { 'empty-heading': { enabled: false } },

scripts/release.sh

@@ -2,9 +2,9 @@
 set -eo pipefail
 
 if [[ -z "${CI}" ]]; then
-  echo "Releasing is only allowed from CI."
-  exit 1
+	echo "Releasing is only allowed from CI."
+	exit 1
 fi
 
-yarn tsc
+yarn build
 yarn changeset publish

src/config/globalSetup.ts

@@ -1,6 +1,6 @@
 import http from 'http'
 import type { AddressInfo } from 'net'
-import { readFile } from '../utils/file'
+import { readFile } from '../utils/file.js'
 
 function listener(req: http.IncomingMessage, res: http.ServerResponse) {
   const file = req.url!.replace('/', '')

src/index.ts

@@ -1,3 +1,4 @@
-import matchers from './matchers'
-export { waitForAxeResults } from './waitForAxeResults'
+import matchers from './matchers/index.js'
+
+export { waitForAxeResults } from './waitForAxeResults.js'
 export default matchers

src/matchers/index.ts

@@ -1,4 +1,4 @@
-import { toPassAxe } from './toPassAxe'
+import { toPassAxe } from './toPassAxe/index.js'
 
 export default {
   toPassAxe,

src/matchers/toPassAxe/index.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
-import { attachmentExists } from '../../utils/attachments'
-import { readFile } from '../../utils/file'
+import { attachmentExists } from '../../utils/attachments.js'
+import { readFile } from '../../utils/file.js'
 
 test.describe.parallel('toPassAxe', () => {
   test.describe('page', () => {

src/matchers/toPassAxe/index.ts

@@ -1,12 +1,11 @@
-import test from '@playwright/test'
-import type { MatcherState } from '@playwright/test/types/expect-types'
+import { test, expect } from '@playwright/test'
 import type { AxeResults, Result } from 'axe-core'
-import type { MatcherOptions } from '../../types'
-import type { Handle } from '../../utils/locator'
-import { getOptions } from '../../utils/options'
+import type { MatcherOptions } from '../../types/index.js'
+import type { Handle } from '../../utils/locator.js'
+import { getOptions } from '../../utils/options.js'
 import createHTMLReport from 'axe-reporter-html'
-import { attach } from '../../utils/attachments'
-import { waitForAxeResults } from '../../waitForAxeResults'
+import { attach } from '../../utils/attachments.js'
+import { waitForAxeResults } from '../../waitForAxeResults.js'
 
 const summarize = (violations: Result[]) =>
   violations
@@ -26,7 +25,7 @@ async function getResults(obj: Handle | AxeResults, options: MatcherOptions) {
 }
 
 export async function toPassAxe(
-  this: MatcherState,
+  this: ReturnType<(typeof expect)['getState']>,
   obj: Handle | AxeResults,
   options: MatcherOptions = {}
 ) {

src/utils/attachments.ts

@@ -1,5 +1,5 @@
-import path from 'path'
-import fs from 'fs/promises'
+import path from 'node:path'
+import fs from 'node:fs/promises'
 import { test, TestInfo } from '@playwright/test'
 
 export async function attach(info: TestInfo, name: string, data: string) {

src/utils/axe.ts

@@ -1,6 +1,7 @@
 import type { Locator } from '@playwright/test'
 import type { AxePlugin, AxeResults, RunOptions } from 'axe-core'
-import fs from 'fs'
+import fs from 'node:fs'
+import resolve from 'isomorphic-resolve'
 
 declare global {
   interface Window {
@@ -19,7 +20,7 @@ export async function injectAxe(locator: Locator) {
   }
 
   // Read the source code from the axe-core library
-  const filePath = require.resolve('axe-core/axe.min.js')
+  const filePath = resolve('axe-core/axe.min.js')
   const axe = await fs.promises.readFile(filePath, 'utf-8')
 
   // Inject the script into the page

src/utils/file.ts

@@ -1,7 +1,6 @@
-import path from 'path'
-import fs from 'fs'
+import fs from 'node:fs/promises'
 
 export async function readFile(filename: string) {
-  const filePath = path.join(__dirname, '../config/templates', filename)
-  return fs.promises.readFile(filePath, { encoding: 'utf-8' })
+  const fileURL = new URL(`../config/templates/${filename}`, import.meta.url)
+  return fs.readFile(fileURL, { encoding: 'utf-8' })
 }

src/utils/locator.ts

@@ -1,4 +1,4 @@
-import type { Frame, FrameLocator, Locator, Page } from 'playwright-core'
+import type { Frame, FrameLocator, Locator, Page } from '@playwright/test'
 
 export type Handle = Page | Frame | FrameLocator | Locator
 

src/utils/options.ts

@@ -1,5 +1,5 @@
-import type { MatcherOptions } from '../types'
-import test from '@playwright/test'
+import type { MatcherOptions } from '../types/index.js'
+import { test } from '@playwright/test'
 import merge from 'merge-deep'
 
 /**

src/utils/poll.ts

@@ -1,4 +1,4 @@
-import test, { Locator } from '@playwright/test'
+import { Locator, test } from '@playwright/test'
 
 interface TestInfo {
   _expect?: { timeout?: number }

src/waitForAxeResults.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
-import { readFile } from './utils/file'
-import { waitForAxeResults } from './waitForAxeResults'
+import { readFile } from './utils/file.js'
+import { waitForAxeResults } from './waitForAxeResults.js'
 
 test.describe('waitForAxeResults', () => {
   test('should be ok for page with no axe violations', async ({ page }) => {

src/waitForAxeResults.ts

@@ -1,8 +1,8 @@
 import type { RunOptions } from 'axe-core'
-import { Handle, resolveLocator } from './utils/locator'
-import { poll } from './utils/poll'
-import { injectAxe, runAxe } from './utils/axe'
-import { getOptions } from './utils/options'
+import { Handle, resolveLocator } from './utils/locator.js'
+import { poll } from './utils/poll.js'
+import { injectAxe, runAxe } from './utils/axe.js'
+import { getOptions } from './utils/options.js'
 
 /**
  * Injects axe onto page, waits for the page to be ready, then runs axe against

tsconfig.json

@@ -1,12 +1,11 @@
 {
   "compilerOptions": {
-    "module": "CommonJS",
-    "target": "ES2019",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
+    "module": "nodenext",
+    "target": "esnext",
+    "moduleResolution": "nodenext",
     "strict": true,
     "skipLibCheck": true,
-    "outDir": "lib"
+    "noEmit": true
   },
   "files": ["global.d.ts"],
   "include": ["src"]