feat: dual publish CJS and ESM versions of lib (#52)

* feat: dual publish cjs and esm versions of lib
* feat: add types export field
* refactor: import named export
* fix: add extensions for ESM support
* fix: allow jest to resolve extensions correctly

---------

Co-authored-by: cmorten <[email protected]>
Co-authored-by: Craig Morten <[email protected]>

Author: jlp-craigmorten

.eslintrc.js

@@ -1,11 +1,12 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:require-extensions/recommended",
     "prettier",
   ],
+  plugins: ["@typescript-eslint", "require-extensions"],
   rules: { "sort-imports": ["error", { ignoreCase: true }] },
 };

.vscode/settings.json

@@ -11,5 +11,8 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

jest.config.js

@@ -1,8 +1,9 @@
 // eslint-disable-next-line no-undef
 module.exports = {
   preset: "ts-jest",
+  resolver: "ts-jest-resolver",
   testEnvironment: "jsdom",
-  roots: ["src"],
+  roots: ["test"],
   collectCoverageFrom: ["**/*.ts", "**/*.tsx"],
   coveragePathIgnorePatterns: [],
   coverageThreshold: {
@@ -13,5 +14,8 @@ module.exports = {
       statements: 98,
     },
   },
-  setupFilesAfterEnv: ["<rootDir>/src/test/jest.setup.ts"],
+  setupFilesAfterEnv: ["./test/jest.setup.ts"],
+  transform: {
+    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "./tsconfig.test.json" }],
+  },
 };

package.json

@@ -2,7 +2,6 @@
   "name": "@guidepup/virtual-screen-reader",
   "version": "0.17.1",
   "description": "Virtual Screen Reader driver for unit test automation.",
-  "main": "lib/index.js",
   "author": "Craig Morten <[email protected]>",
   "license": "MIT",
   "repository": {
@@ -20,12 +19,22 @@
     "a11y",
     "guidepup"
   ],
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/cjs/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    }
+  },
   "scripts": {
     "build": "yarn clean && yarn compile",
     "ci": "yarn clean && yarn lint && yarn test:coverage && yarn build",
     "clean": "rimraf lib",
-    "compile": "tsc",
-    "lint": "eslint src --ext .ts,.tsx --cache",
+    "compile": "tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json ./tsconfig.types.json && ./scripts/package.sh",
+    "lint": "eslint src test --ext .js,.jsx,.ts,.tsx --cache",
     "lint:fix": "yarn lint --fix",
     "test": "jest",
     "test:coverage": "yarn test --coverage",
@@ -47,12 +56,14 @@
     "@typescript-eslint/parser": "^6.18.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
+    "ts-jest-resolver": "^2.0.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   }

scripts/package.sh

@@ -0,0 +1,11 @@
+cat >lib/cjs/package.json <<!EOF
+{
+  "type": "commonjs"
+}
+!EOF
+
+cat >lib/esm/package.json <<!EOF
+{
+  "type": "module"
+}
+!EOF

src/Virtual.ts

@@ -1,26 +1,26 @@
 import {
   AccessibilityNode,
   createAccessibilityTree,
-} from "./createAccessibilityTree";
+} from './createAccessibilityTree.js';
 import {
   CommandOptions,
   MacOSModifiers,
   ScreenReader,
   WindowsModifiers,
 } from "@guidepup/guidepup";
-import { commands, VirtualCommands } from "./commands";
+import { commands, VirtualCommands } from './commands/index.js';
 import {
   ERR_VIRTUAL_MISSING_CONTAINER,
   ERR_VIRTUAL_NOT_STARTED,
-} from "./errors";
-import { getLiveSpokenPhrase, Live } from "./getLiveSpokenPhrase";
-import { getElementFromNode } from "./getElementFromNode";
-import { getItemText } from "./getItemText";
-import { getSpokenPhrase } from "./getSpokenPhrase";
-import { observeDOM } from "./observeDOM";
-import { tick } from "./tick";
-import userEvent from "@testing-library/user-event";
-import { VirtualCommandArgs } from "./commands/types";
+} from './errors.js';
+import { getLiveSpokenPhrase, Live } from './getLiveSpokenPhrase.js';
+import { getElementFromNode } from './getElementFromNode.js';
+import { getItemText } from './getItemText.js';
+import { getSpokenPhrase } from './getSpokenPhrase.js';
+import { observeDOM } from './observeDOM.js';
+import { tick } from './tick.js';
+import { userEvent } from "@testing-library/user-event";
+import { VirtualCommandArgs } from './commands/types.js';
 
 export interface StartOptions extends CommandOptions {
   /**

src/commands/getElementNode.ts

@@ -1,5 +1,5 @@
-import { AccessibilityNode } from "../createAccessibilityTree";
-import { getElementFromNode } from "../getElementFromNode";
+import { AccessibilityNode } from '../createAccessibilityTree.js';
+import { getElementFromNode } from '../getElementFromNode.js';
 
 export function getElementNode(accessibilityNode: AccessibilityNode): Element {
   const { node } = accessibilityNode;

src/commands/getIndexByRoleAndAttributes.ts

@@ -1,9 +1,9 @@
 import {
   AccessibilityNode,
   END_OF_ROLE_PREFIX,
-} from "../createAccessibilityTree";
-import { matchesAccessibleAttributes, matchesRoles } from "./nodeMatchers";
-import type { AriaAttributes } from "./types";
+} from '../createAccessibilityTree.js';
+import { matchesAccessibleAttributes, matchesRoles } from './nodeMatchers.js';
+import type { AriaAttributes } from './types.js';
 
 export interface GetIndexFilters {
   /** Matches a node only if the node has any of these roles */

src/commands/getNextIndexByIdRefsAttribute.ts

@@ -1,8 +1,8 @@
-import { getElementNode } from "./getElementNode";
-import { getIdRefsByAttribute } from "../getIdRefsByAttribute";
-import { getNodeByIdRef } from "../getNodeByIdRef";
-import { isElement } from "../isElement";
-import { VirtualCommandArgs } from "./types";
+import { getElementNode } from './getElementNode.js';
+import { getIdRefsByAttribute } from '../getIdRefsByAttribute.js';
+import { getNodeByIdRef } from '../getNodeByIdRef.js';
+import { isElement } from '../isElement.js';
+import { VirtualCommandArgs } from './types.js';
 
 export interface GetNextIndexByIdRefsAttributeArgs extends VirtualCommandArgs {
   attributeName: string;

src/commands/getNextIndexByRoleAndAttributes.ts

@@ -1,8 +1,8 @@
 import {
   getIndexByRoleAndAttributes,
   type GetIndexFilters,
-} from "./getIndexByRoleAndAttributes";
-import type { VirtualCommandArgs } from "./types";
+} from './getIndexByRoleAndAttributes.js';
+import type { VirtualCommandArgs } from './types.js';
 
 export type GetNextIndexArgs = Omit<VirtualCommandArgs, "container">;