ESM (#5)

* Update to ESM

* Finish update

* Update Yarn and deps

* Update tests

* Ignore

* Add changeset

.changeset/clean-mails-beg.md

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

.eslintignore

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

.eslintrc

@@ -3,7 +3,7 @@
   "overrides": [
     {
       "files": ["test/**/*"],
-      "extends": "plugin:playwright/playwright-test"
+      "extends": "widen/playwright"
     }
   ]
 }

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
     steps:
       - uses: mskelton/setup-yarn@v1
         with:
@@ -40,7 +40,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         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,11 +1,10 @@
 # Yarn
+node_modules/
 .yarn/*
 !.yarn/releases
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
 
-.vscode/
-node_modules/
-lib/
+dist/
 test-results/

.prettierignore

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

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "proseWrap": "always"
 }

.yarnrc.yml

@@ -1,3 +1,7 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
+    spec: "https://mskelton.dev/yarn-outdated/v3"
+
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

CONTRIBUTING.md

@@ -28,7 +28,7 @@ package.json files.
 When making a change that requires a release, run the `yarn changeset` command
 and follow the prompts to specify the semver bump and the change notes.
 
-```sh
+```bash
 yarn changeset
 ```
 

LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2022, Widen Enterprises, Inc.
+Copyright (c) 2023, Widen Enterprises, Inc.
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

README.md

@@ -4,27 +4,29 @@
 [![npm version](https://img.shields.io/npm/v/axe-reporter-html)](https://www.npmjs.com/package/axe-reporter-html)
 [![changesets](https://img.shields.io/badge/maintained%20with-changesets-blue)](https://github.com/atlassian/changesets)
 
-Creates an HTML report from Axe results listing violations, passes, incomplete and incompatible results.
+Creates an HTML report from Axe results listing violations, passes, incomplete
+and incompatible results.
 
 ## Installation
 
 ### npm
 
-```sh
+```bash
 npm install axe-reporter-html
 ```
 
 ### Yarn
 
-```sh
+```bash
 yarn add axe-reporter-html
 ```
 
 ## Usage
 
-This package exports a single function that you can use to create an HTML report from an `AxeResults` object.
+This package exports a single function that you can use to create an HTML report
+from an `AxeResults` object.
 
-```js
+```javascript
 import createHTMLReport from 'axe-reporter-html'
 
 const html = await createHTMLReport(results)

package.json

@@ -4,7 +4,7 @@
   "description": "Creates an HTML report from Axe results listing violations, passes, incomplete and incompatible results.",
   "author": "Widen",
   "license": "ISC",
-  "packageManager": "yarn@3.2.0",
+  "packageManager": "yarn@3.3.1",
   "repository": "github:Widen/axe-reporter-html",
   "homepage": "https://github.com/Widen/axe-reporter-html#readme",
   "bugs": {
@@ -16,41 +16,46 @@
     "axe-reporter"
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
+  },
+  "type": "module",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
   },
-  "exports": "./lib/index.js",
-  "types": "lib/index.d.ts",
   "files": [
-    "src",
-    "lib",
+    "dist",
     "template.ejs"
   ],
   "scripts": {
     "lint": "eslint .",
     "test": "playwright test",
     "ts": "tsc",
     "format": "prettier --write .",
-    "release": "yarn tsc -p tsconfig.build.json && yarn changeset publish"
+    "build": "tsup ./src/index.ts --format cjs,esm --dts --shims",
+    "release": "yarn build && yarn changeset publish"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.7",
-    "@babel/eslint-parser": "^7.17.0",
-    "@changesets/cli": "^2.21.1",
-    "@playwright/test": "^1.20.0",
-    "@types/node": "^17.0.21",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
-    "eslint": "^8.11.0",
-    "eslint-config-widen": "^0.5.0",
-    "eslint-plugin-playwright": "^0.8.0",
+    "@babel/core": "^7.20.12",
+    "@babel/eslint-parser": "^7.19.1",
+    "@changesets/cli": "^2.26.0",
+    "@playwright/test": "^1.30.0",
+    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "eslint": "^8.33.0",
+    "eslint-config-widen": "^1.1.0",
+    "eslint-plugin-playwright": "^0.12.0",
     "eslint-plugin-sort": "^2.4.0",
-    "eslint-plugin-widen": "^0.1.1",
-    "prettier": "^2.6.0",
-    "typescript": "^4.6.2"
+    "eslint-plugin-widen": "^1.0.0",
+    "prettier": "^2.8.3",
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@types/ejs": "^3.1.0",
-    "axe-core": "^4.4.1",
-    "ejs": "^3.1.6"
+    "@types/ejs": "^3.1.1",
+    "axe-core": "^4.6.3",
+    "ejs": "^3.1.8"
   }
 }

src/index.ts

@@ -1,8 +1,7 @@
 import { AxeResults } from 'axe-core'
 import ejs from 'ejs'
-import fs from 'fs/promises'
-import path from 'path'
-import { getWCAGTags, icons, plural } from './utils'
+import fs from 'node:fs/promises'
+import { getWCAGTags, icons, plural } from './utils.js'
 
 function prepareResults({ inapplicable, passes, violations }: AxeResults) {
   return {
@@ -25,8 +24,8 @@ function prepareResults({ inapplicable, passes, violations }: AxeResults) {
 }
 
 export default async function createHTMLReport(results: AxeResults) {
-  const templatePath = path.join(__dirname, '../template.ejs')
-  const template = await fs.readFile(templatePath, 'utf8')
+  const templateURL = new URL('../template.ejs', import.meta.url)
+  const template = await fs.readFile(templateURL, 'utf8')
 
   return ejs.render(template, prepareResults(results))
 }

test/fixtures/axe.ts

@@ -1,7 +1,10 @@
 import { test as base } from '@playwright/test'
 import { AxePlugin } from 'axe-core'
-import fs from 'fs/promises'
-import createHTMLReport from '../../src'
+import fs from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import createHTMLReport from '../../src/index.js'
+
+const require = createRequire(import.meta.url)
 
 declare global {
   interface Window {

test/fixtures/index.ts

@@ -1,2 +1,2 @@
 export { expect } from '@playwright/test'
-export { test } from './axe'
+export { test } from './axe.js'

test/spec/reporter.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '../fixtures'
+import { expect, test } from '../fixtures/index.js'
 
 const pass = `
   <!DOCTYPE html>
@@ -18,12 +18,12 @@ test.describe('HTML reporter', () => {
   test('without errors', async ({ page, run }) => {
     await run(pass)
     await page.locator('summary').first().click()
-    expect(await page.screenshot()).toMatchSnapshot({ maxDiffPixelRatio: 0.5 })
+    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.5 })
   })
 
   test('with errors', async ({ page, run }) => {
     await run('<div>hello</div>')
     await page.locator('summary').first().click()
-    expect(await page.screenshot()).toMatchSnapshot({ maxDiffPixelRatio: 0.5 })
+    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.5 })
   })
 })

tsconfig.json

@@ -1,13 +1,11 @@
 {
   "compilerOptions": {
-    "module": "CommonJS",
-    "target": "ES2019",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
+    "module": "nodenext",
+    "target": "esnext",
+    "moduleResolution": "nodenext",
     "noEmit": true,
     "strict": true,
-    "skipLibCheck": true,
-    "outDir": "lib"
+    "skipLibCheck": true
   },
   "include": ["src", "test"]
 }