feat: build tweaks to support legacy TS setups (#80)

examples/README.md

@@ -4,11 +4,15 @@ This directory contains a series of self-contained examples that you can use as
 starting points for your setup, or as snippets to pull into your existing
 projects:
 
-| Example                              | Description                                                                                                               |
-| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| [Cypress](./cypress)                 | A basic example combining [Cypress](https://www.cypress.io/) and Virtual Screen Reader.                                   |
-| [Puppeteer](./puppeteer)             | A basic example combining [Puppeteer](https://pptr.dev/) and Virtual Screen Reader.                                       |
-| [Playwright](./playwright)           | A basic example combining [Playwright](https://playwright.dev) and Virtual Screen Reader.                                 |
-| [Storybook](./storybook)             | A basic example combining [Storybook](https://storybook.js.org/) and Virtual Screen Reader.                               |
-| [Vue](./vue)                         | A basic example combining Vue, Vitest, Vue Testing Library, and Virtual Screen Reader.                                    |
-| [Web Test Runner](./web-test-runner) | A basic example combining [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and Virtual Screen Reader. |
+| Example                                      | Description                                                                                                               |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| [CommonJS](./commonjs)                       | A basic example using the Virtual Screen Reader in a CommonJS application.                                                |
+| [Cypress](./cypress)                         | A basic example combining [Cypress](https://www.cypress.io/) and Virtual Screen Reader.                                   |
+| [Puppeteer](./puppeteer)                     | A basic example combining [Puppeteer](https://pptr.dev/) and Virtual Screen Reader.                                       |
+| [Playwright](./playwright)                   | A basic example combining [Playwright](https://playwright.dev) and Virtual Screen Reader.                                 |
+| [Storybook](./storybook)                     | A basic example combining [Storybook](https://storybook.js.org/) and Virtual Screen Reader.                               |
+| [TypeScript Bundler](./typescript-bundler)   | A basic example where Virtual Screen Reader is used for an application using a bundler.                                   |
+| [TypeScript Legacy](./typescript-legacy)     | A basic example where Virtual Screen Reader is used for a legacy TypeScript CommonJS application.                         |
+| [TypeScript NodeNext](./typescript-nodenext) | A basic example where Virtual Screen Reader is used for a Node.js application or library.                                 |
+| [Vue](./vue)                                 | A basic example combining Vue, Vitest, Vue Testing Library, and Virtual Screen Reader.                                    |
+| [Web Test Runner](./web-test-runner)         | A basic example combining [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and Virtual Screen Reader. |

examples/commonjs/README.md

@@ -0,0 +1,20 @@
+# CommonJS Example
+
+A basic example using the Virtual Screen Reader in a CommonJS application.
+
+Run this example with:
+
+```bash
+# Install and build core package
+yarn install --frozen-lockfile
+
+# Navigate to example, install, and test
+cd examples/commonjs
+yarn install --frozen-lockfile
+yarn test
+```
+
+> [!IMPORTANT]
+> This example serves to demonstrate how you can use the Virtual Screen Reader. The components themselves may not be using best accessibility practices.
+>
+> Always evaluate your own components for accessibility and test with real users.

examples/commonjs/jest.config.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  testEnvironment: "jsdom",
+  roots: ["src"],
+  collectCoverageFrom: ["**/*.js"],
+  coveragePathIgnorePatterns: [],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+};

examples/commonjs/jest.setup.js

@@ -0,0 +1 @@
+jest.setTimeout(10000);

examples/commonjs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@guidepup/virtual-screen-reader-commonjs-example",
+  "version": "1.0.0",
+  "author": "Craig Morten <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "preinstall": "yarn --cwd=../.. build",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  }
+}

examples/commonjs/src/__snapshots__/vsr.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matchers virtual screen reader tests navigating headings 1`] = `
+[
+  "document",
+  "heading, First Section Heading, level 1",
+  "heading, Article Header Heading, level 1",
+  "heading, Second Section Heading, level 1",
+  "heading, First Section Heading, level 1",
+]
+`;

examples/commonjs/src/vsr.test.js

@@ -0,0 +1,56 @@
+const { virtual } = require("../../../lib/cjs/index.js");
+// In your code, replace with:
+// const { virtual } = require("@guidepup/virtual-screen-reader");
+
+function setupBasicPage() {
+  document.body.innerHTML = `
+  <nav>Nav Text</nav>
+  <section>
+    <h1>First Section Heading</h1>
+    <p>First Section Text</p>
+    <article>
+      <header>
+        <h1>Article Header Heading</h1>
+        <p>Article Header Text</p>
+      </header>
+      <p>Article Text</p>
+    </article> 
+  </section>
+  <section>
+    <h1>Second Section Heading</h1>
+    <p>Second Section Text</p>
+  </section>
+  <section aria-hidden="true">
+    <h1>Hidden Section Heading</h1>
+    <p>Hidden Section Text</p>
+  </section>
+  <footer>Footer</footer>
+  `;
+}
+
+describe("matchers", () => {
+  beforeEach(() => {
+    setupBasicPage();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = ``;
+  });
+
+  describe("virtual screen reader tests", () => {
+    test("navigating headings", async () => {
+      await virtual.start({ container: document.body });
+
+      await virtual.perform(virtual.commands.moveToNextHeading);
+      const firstHeadingPhrase = await virtual.lastSpokenPhrase();
+
+      do {
+        await virtual.perform(virtual.commands.moveToNextHeading);
+      } while ((await virtual.lastSpokenPhrase()) !== firstHeadingPhrase);
+
+      expect(await virtual.spokenPhraseLog()).toMatchSnapshot();
+
+      await virtual.stop();
+    });
+  });
+});