Proposal setup to make the TypeScript migration easier

README.md

@@ -267,6 +267,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

package.json

@@ -24,14 +24,16 @@
     "node": ">=10"
   },
   "scripts": {
-    "build": "kcd-scripts build --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --bundle --no-clean",
+    "build": "npm run build:bundles ; npm run build:types",
+    "build:bundles": "kcd-scripts build --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --bundle --no-clean",
+    "build:types": "tsc --build tsconfig.build.json",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest --watch --runInBand",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
-    "typecheck": "dtslint ./types/"
+    "typecheck-DISABLED": "dtslint ./types/"
   },
   "files": [
     "dist",
@@ -41,16 +43,18 @@
     "@babel/runtime": "^7.10.2",
     "aria-query": "^4.0.2",
     "dom-accessibility-api": "^0.4.5",
+    "eslint-import-resolver-typescript": "^2.0.0",
     "pretty-format": "^25.5.0"
   },
   "devDependencies": {
-    "dtslint": "^3.6.9",
     "@testing-library/jest-dom": "^5.9.0",
+    "dtslint": "^3.6.11",
     "jest-in-case": "^1.0.2",
     "jest-serializer-ansi": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.2",
-    "kcd-scripts": "^6.2.0"
+    "kcd-scripts": "^6.2.3",
+    "typescript": "^3.9.5"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",
@@ -59,6 +63,11 @@
       "import/no-unassigned-import": "off",
       "import/no-useless-path-segments": "off",
       "no-console": "off"
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {}
+      }
     }
   },
   "eslintIgnore": [

src/__tests__/events.js

@@ -140,17 +140,21 @@ const eventTypes = [
 
 const allEvents = Object.keys(eventMap)
 
-const bubblingEvents = allEvents
-  .filter(eventName => eventMap[eventName].defaultInit.bubbles)
+const bubblingEvents = allEvents.filter(
+  eventName => eventMap[eventName].defaultInit.bubbles,
+)
 
-const composedEvents = allEvents
-  .filter(eventName => eventMap[eventName].defaultInit.composed)
+const composedEvents = allEvents.filter(
+  eventName => eventMap[eventName].defaultInit.composed,
+)
 
-const nonBubblingEvents = allEvents
-  .filter(eventName => !bubblingEvents.includes(eventName))
+const nonBubblingEvents = allEvents.filter(
+  eventName => !bubblingEvents.includes(eventName),
+)
 
-const nonComposedEvents = allEvents
-  .filter(eventName => !composedEvents.includes(eventName))
+const nonComposedEvents = allEvents.filter(
+  eventName => !composedEvents.includes(eventName),
+)
 
 eventTypes.forEach(({type, events, elementType}) => {
   describe(`${type} Events`, () => {
@@ -203,7 +207,7 @@ describe(`Composed Events`, () => {
       const spy = jest.fn()
       node.addEventListener(event.toLowerCase(), spy)
 
-      const shadowRoot = node.attachShadow({ mode: 'closed' })
+      const shadowRoot = node.attachShadow({mode: 'closed'})
       const innerNode = document.createElement('div')
       shadowRoot.appendChild(innerNode)
 
@@ -218,7 +222,7 @@ describe(`Composed Events`, () => {
       const spy = jest.fn()
       node.addEventListener(event.toLowerCase(), spy)
 
-      const shadowRoot = node.attachShadow({ mode: 'closed' })
+      const shadowRoot = node.attachShadow({mode: 'closed'})
       const innerNode = document.createElement('div')
       shadowRoot.appendChild(innerNode)
 
@@ -234,7 +238,7 @@ describe(`Aliased Events`, () => {
       const node = document.createElement('div')
       const spy = jest.fn()
       node.addEventListener(eventAliasMap[eventAlias].toLowerCase(), spy)
-      
+
       fireEvent[eventAlias](node)
       expect(spy).toHaveBeenCalledTimes(1)
     })

src/__tests__/role.js

@@ -346,7 +346,9 @@ Here are the accessible roles:
 test('has no useful error message in findBy', async () => {
   const {findByRole} = render(`<li />`)
 
-  await expect(findByRole('option', {timeout: 1})).rejects.toThrow('Unable to find role="option"')
+  await expect(findByRole('option', {timeout: 1})).rejects.toThrow(
+    'Unable to find role="option"',
+  )
 })
 
 test('explicit role is most specific', () => {

src/config.js → src/config.ts

@@ -1,9 +1,24 @@
 import {prettyDOM} from './pretty-dom'
 
+export interface Config {
+  testIdAttribute: string
+  asyncWrapper(cb: (...args: any[]) => any): Promise<any>
+  eventWrapper(cb: (...args: any[]) => any): void
+  getElementError: (message: string, container: Element) => Error
+  asyncUtilTimeout: number
+  defaultHidden: boolean
+  showOriginalStackTrace: boolean
+  throwSuggestions: boolean
+}
+
+interface InternalConfig {
+  _disableExpensiveErrorDiagnostics: boolean
+}
+
 // It would be cleaner for this to live inside './queries', but
 // other parts of the code assume that all exports from
 // './queries' are query functions.
-let config = {
+let config: Config & InternalConfig = {
   testIdAttribute: 'data-testid',
   asyncUtilTimeout: 1000,
   // this is to support React's async `act` function.
@@ -44,7 +59,11 @@ export function runWithExpensiveErrorDiagnosticsDisabled(callback) {
   }
 }
 
-export function configure(newConfig) {
+export interface ConfigFn {
+  (existingConfig: Config): Partial<Config>
+}
+
+export function configure(newConfig: Partial<Config> | ConfigFn): void {
   if (typeof newConfig === 'function') {
     // Pass the existing config out to the provided function
     // and accept a delta in return