feat: use tsup to generate different exports (#61)

Author: jlp-craigmorten

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     "prettier",
   ],
   plugins: ["require-extensions", "@typescript-eslint"],
-  ignorePatterns: ["examples"],
+  ignorePatterns: ["coverage", "examples", "lib"],
   rules: {
     "sort-imports": ["error", { ignoreCase: true }],
     quotes: ["error", "double", { avoidEscape: true }],

examples/vue/src/__tests__/IncrementCounter.spec.ts

@@ -9,7 +9,7 @@ import IncrementCounter from '../IncrementCounter.vue'
  *
  * in your own code.
  */
-import { virtual } from '../../../../lib/cjs'
+import { virtual } from '../../../../lib/cjs/index.min.js'
 
 describe('Increment Counter', () => {
   afterEach(async () => {

examples/vue/src/__tests__/OpenModal.spec.ts

@@ -9,7 +9,7 @@ import ModalExample from '../OpenModal.vue'
  *
  * in your own code.
  */
-import { virtual } from '../../../../lib/cjs'
+import { virtual } from '../../../../lib/cjs/index.min.js'
 
 describe('Open Modal', () => {
   afterEach(async () => {

examples/vue/src/__tests__/TextAreaCounter.spec.ts

@@ -9,7 +9,7 @@ import TextareaCounter from '../TextAreaCounter.vue'
  *
  * in your own code.
  */
-import { virtual } from '../../../../lib/cjs'
+import { virtual } from '../../../../lib/cjs/index.min.js'
 
 describe('Text Area Counter', () => {
   afterEach(async () => {

examples/web-test-runner/src/index.js

@@ -5,7 +5,7 @@
  *
  * in your own code.
  */
-import { virtual } from "../../../lib/esm/index.js";
+import { virtual } from "../../../lib/esm/index.browser.js";
 
 document.body.innerHTML = `<nav>Nav Text</nav>
 <section>

examples/web-test-runner/web-dev-server.config.mjs

@@ -1,33 +1,4 @@
-import _commonjs from "@rollup/plugin-commonjs";
-import _replace from "@rollup/plugin-replace";
-import { fromRollup } from "@web/dev-server-rollup";
-
-const commonjs = fromRollup(_commonjs);
-const replace = fromRollup(_replace);
-
 export default {
-  // Required to resolve node builtins.
+  // Support use of `@esm-bundle/chai` for testing.
   nodeResolve: true,
-  plugins: [
-    // Support `@testing-library/dom` usage of a `react-is` module that checks if
-    // running in a production or development Node environment.
-    // See `node_modules/@testing-library/dom/node_modules/react-is/cjs/react-is.development.js`
-    replace({
-      "process.env.NODE_ENV": JSON.stringify("production"),
-      preventAssignment: true,
-    }),
-    // Handle dependencies that are commonjs only and need compiling to support
-    // an ESM only context.
-    commonjs({
-      include: [
-        // `@testing-library/dom` and it's dependencies.
-        "**/node_modules/@testing-library/**",
-        "**/node_modules/ansi-regex/**",
-        "**/node_modules/lz-string/**",
-        // `aria-query` and it's dependencies.
-        "**/node_modules/aria-query/**",
-        "**/node_modules/dequal/**",
-      ],
-    }),
-  ],
 };

examples/web-test-runner/web-test-runner.config.mjs

@@ -1,33 +1,4 @@
-import _commonjs from "@rollup/plugin-commonjs";
-import _replace from "@rollup/plugin-replace";
-import { fromRollup } from "@web/dev-server-rollup";
-
-const commonjs = fromRollup(_commonjs);
-const replace = fromRollup(_replace);
-
 export default {
-  // Required to resolve node builtins.
+  // Support use of `@esm-bundle/chai` for testing.
   nodeResolve: true,
-  plugins: [
-    // Support `@testing-library/dom` usage of a `react-is` module that checks if
-    // running in a production or development Node environment.
-    // See `node_modules/@testing-library/dom/node_modules/react-is/cjs/react-is.development.js`
-    replace({
-      "process.env.NODE_ENV": JSON.stringify("production"),
-      preventAssignment: true,
-    }),
-    // Handle dependencies that are commonjs only and need compiling to support
-    // an ESM only context.
-    commonjs({
-      include: [
-        // `@testing-library/dom` and it's dependencies.
-        "**/node_modules/@testing-library/**",
-        "**/node_modules/ansi-regex/**",
-        "**/node_modules/lz-string/**",
-        // `aria-query` and it's dependencies.
-        "**/node_modules/aria-query/**",
-        "**/node_modules/dequal/**",
-      ],
-    }),
-  ],
 };

jest.config.js

@@ -8,10 +8,10 @@ module.exports = {
   coveragePathIgnorePatterns: ["/node_modules/", "/test/"],
   coverageThreshold: {
     global: {
-      branches: 100,
+      branches: 98,
       functions: 100,
-      lines: 100,
-      statements: 100,
+      lines: 99,
+      statements: 99,
     },
   },
   setupFilesAfterEnv: ["<rootDir>/test/jest.setup.ts"],

package.json

@@ -19,42 +19,44 @@
     "a11y",
     "guidepup"
   ],
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
+  "types": "./lib/esm/index.d.mts",
+  "browser": "./lib/esm/index.browser.mjs",
+  "module": "./lib/esm/index.legacy-esm.js",
+  "main": "./lib/cjs/index.min.js",
   "exports": {
     ".": {
-      "types": "./lib/cjs/index.d.ts",
-      "import": "./lib/esm/index.js",
-      "require": "./lib/cjs/index.js"
+      "types": "./lib/esm/index.d.mts",
+      "browser": "./lib/esm/index.browser.mjs",
+      "import": "./lib/esm/index.mjs",
+      "require": "./lib/cjs/index.min.js"
     }
   },
   "scripts": {
     "build": "yarn clean && yarn compile",
     "ci": "yarn clean && yarn lint && yarn test:coverage && yarn build",
     "clean": "rimraf lib",
-    "compile": "tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json ./tsconfig.types.json && ./scripts/package.sh",
+    "compile": "tsup",
     "lint": "eslint src test --ext .js,.jsx,.ts,.tsx --cache",
     "lint:fix": "yarn lint --fix",
     "test": "jest",
     "test:coverage": "yarn test --coverage",
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@testing-library/dom": "^9.3.3",
+    "@testing-library/dom": "^v10.0.0-alpha.2",
     "@testing-library/user-event": "^14.5.2",
     "aria-query": "^5.3.0",
     "dom-accessibility-api": "^0.6.3"
   },
   "devDependencies": {
     "@guidepup/guidepup": "^0.22.3",
-    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.6",
-    "@typescript-eslint/eslint-plugin": "^6.18.0",
-    "@typescript-eslint/parser": "^6.18.0",
-    "eslint": "^8.56.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.25",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-require-extensions": "^0.1.3",
     "jest": "^29.7.0",
@@ -63,10 +65,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "ts-jest-resolver": "^2.0.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2"
   },
   "resolutions": {
     "aria-query": "^5.3.0"

src/Virtual.ts

@@ -22,7 +22,7 @@ import type { VirtualCommandArgs } from "./commands/types.js";
  * issues by Guidepup's usage of node builtins etc.
  */
 
-const MacOSModifiers = {
+const MacOSModifiers: Record<string, string> = {
   /**
    * The Command (alias cmd, ⌘) key.
    */
@@ -53,7 +53,7 @@ const MacOSModifiers = {
   ShiftRight: "shift",
 };
 
-const WindowsModifiers = {
+const WindowsModifiers: Record<string, string> = {
   /**
    * Hold down the Control (alias ctrl, ⌃) key.
    */
@@ -214,8 +214,8 @@ export class Virtual implements ScreenReader {
     }
   }
 
-  #createCursor(root: Root) {
-    if (!root.document) {
+  #createCursor(root: Root | undefined) {
+    if (!root?.document) {
       return;
     }
 
@@ -235,7 +235,7 @@ export class Virtual implements ScreenReader {
     this.#cursor.style.zIndex = "calc(Infinity)";
     this.#cursor.dataset.testid = "virtual-screen-reader-cursor";
 
-    this.#container.appendChild(this.#cursor);
+    this.#container!.appendChild(this.#cursor);
   }
 
   #setActiveNode(accessibilityNode: AccessibilityNode) {
@@ -283,7 +283,7 @@ export class Virtual implements ScreenReader {
      * REF: https://www.w3.org/TR/wai-aria-1.2/#aria-modal
      */
     return tree.filter(
-      ({ parentDialog }) => this.#activeNode.parentDialog === parentDialog
+      ({ parentDialog }) => this.#activeNode!.parentDialog === parentDialog
     );
   }
 
@@ -310,7 +310,7 @@ export class Virtual implements ScreenReader {
     });
   }
 
-  async #handleFocusChange({ target }: FocusEvent) {
+  async #handleFocusChange({ target }: Event) {
     await tick();
 
     this.#invalidateTreeCache();
@@ -322,15 +322,15 @@ export class Virtual implements ScreenReader {
     // executing... we are waiting for event loop tick so perhaps there is a
     // race condition here?).
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const newActiveNode = tree.find(({ node }) => node === target);
+    const newActiveNode = tree.find(({ node }) => node === target)!;
 
     this.#updateState(newActiveNode, true);
   }
 
   #focusActiveElement() {
     // Is only called following a null guard for `this.#activeNode`.
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const target = getElementNode(this.#activeNode) as HTMLElement;
+    const target = getElementNode(this.#activeNode!) as HTMLElement;
     target?.focus();
   }
 
@@ -383,7 +383,7 @@ export class Virtual implements ScreenReader {
       const tree = this.#getAccessibilityTree();
       const parentDialogNode = tree.find(
         ({ node }) => node === accessibilityNode.parentDialog
-      );
+      )!;
 
       const spokenPhrase = getSpokenPhrase(parentDialogNode);
       const itemText = getItemText(parentDialogNode);
@@ -409,7 +409,7 @@ export class Virtual implements ScreenReader {
     this.#spokenPhraseLog.push(spokenPhrase);
   }
 
-  async #refreshState(ignoreIfNoChange) {
+  async #refreshState(ignoreIfNoChange: boolean) {
     await tick();
 
     this.#invalidateTreeCache();
@@ -583,7 +583,7 @@ export class Virtual implements ScreenReader {
   // prompts the missing container error.
   async start(
     { container, displayCursor = false, window: root }: StartOptions = {
-      container: null,
+      container: null as never,
       displayCursor: false,
     }
   ) {
@@ -647,11 +647,11 @@ export class Virtual implements ScreenReader {
     this.#invalidateTreeCache();
 
     if (this.#cursor) {
-      this.#container.removeChild(this.#cursor);
+      this.#container?.removeChild(this.#cursor);
       this.#cursor = null;
     }
 
-    this.#setActiveNode(null);
+    this.#activeNode = null;
     this.#container = null;
     this.#itemTextLog = [];
     this.#spokenPhraseLog = [];