Merge pull request #250 from thefrontside/dl/update-typescript-5.4

Update TypeScript to v5.4

.changeset/poor-meals-accept.md

@@ -0,0 +1,10 @@
+---
+"@interactors/core": patch
+"@interactors/globals": patch
+"@interactors/html": patch
+"@interactors/keyboard": patch
+"@interactors/material-ui": patch
+"@interactors/with-cypress": patch
+---
+
+Update TypeScript to v5.4

.eslintrc.json

@@ -1,6 +1,12 @@
 {
-  "extends": "@frontside",
+  "extends": "plugin:@typescript-eslint/recommended",
+  "plugins": ["prefer-let"],
   "rules": {
+    "prefer-const": "off",
+    "prefer-let/prefer-let": "error",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": "error",
     "eol-last": "off",
     "@typescript-eslint/no-extra-semi": "off",
     "no-multi-spaces": "off",

.gitignore

@@ -9,3 +9,11 @@ yarn-error.log
 .netlify
 
 .vscode
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+__generated__
+.parcel-cache

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -18,38 +18,37 @@
   },
   "scripts": {
     "clean": "find . \\( -name node_modules -o -name dist -o -name '*.tsbuildinfo' \\) -exec rm -rf {} +",
-    "clean:tsc": "find . \\(  -path node_modules -prune -name dist -o -name '*.tsbuildinfo' \\) -exec rm -rf {} +",
+    "clean:tsc": "find . \\( -path node_modules -prune -name dist -o -name '*.tsbuildinfo' \\) -exec rm -rf {} +",
     "clean:tsbuild": "find . -path -o -name '*.tsbuildinfo' -delete",
     "prepack:tsc": "tsc --build ./tsconfig.monorepo.json",
-    "prepack": "yarn workspaces run prepack",
-    "test": "yarn workspaces run test",
-    "lint": "yarn workspaces run lint",
+    "prepack": "yarn workspaces foreach --all run prepack",
+    "test": "yarn workspaces foreach --all run test",
+    "lint": "yarn workspaces foreach --all run lint",
     "watch": "yarn prepack:tsc && yarn tsc -b ./tsconfig.monorepo.json --watch",
     "prepack:all": "yarn prepack",
     "postinstall": "patch-package",
     "docs:html": "yarn workspace @interactors/html run docs:netlify",
     "docs:mui": "yarn workspace @interactors/material-ui run docs:netlify"
   },
   "volta": {
-    "node": "21.7.0",
-    "yarn": "1.22.11"
+    "node": "20.12.2",
+    "yarn": "4.1.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.8.0",
-    "@frontside/eslint-config": "^2.1.0",
-    "@frontside/typescript": "^1.1.1",
+    "@frontside/eslint-config": "^3.1.1-dl-update-eslint.0",
     "@types/node": "^14.17.5",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/experimental-utils": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "eslint": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
+    "@typescript-eslint/utils": "^7.7.1",
+    "eslint": "^8.56.0",
+    "node-gyp": "^10.1.0",
     "patch-package": "^6.4.7"
   },
   "resolutions": {
     "@definitelytyped/typescript-versions": "^0.0.40",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "chromedriver": "122.0.0",
-    "typescript": "^4.1.3",
+    "chromedriver": "123.0.4",
+    "typescript": "^5.4.5",
     "yargs-parser": "^13.1.2"
   }
 }

packages/core/package.json

@@ -24,8 +24,8 @@
     "clean": "rm -rf dist *.tsbuildinfo",
     "lint": "eslint \"{src,test}/**/*.ts\"",
     "check:types": "tsc --noEmit",
-    "test:unit": "tsx --test --no-deprecation",
-    "test:types": "dtslint types --localTs ../../node_modules/typescript/lib --expectOnly",
+    "test:unit": "tsx --test --test-reporter spec --no-deprecation test/**/*.test.ts",
+    "test:types": "tsd -f ./types/*.test-d.ts",
     "test": "yarn test:unit && yarn test:types",
     "docs": "rm -rf docs && yarn typedoc --options typedoc.json",
     "prepack": "tsc --build ./tsconfig.build.json && yarn prepack:es2015 && yarn prepack:commonjs",
@@ -48,14 +48,13 @@
     "@types/jsdom": "^16.2.3",
     "@types/lodash.isequal": "^4.5.5",
     "@types/node": "^20.11.25",
-    "tsx": "^4.7.1",
-    "dtslint": "^4.0.5",
     "expect": "^24.9.0",
     "express": "^4.17.1",
     "jsdom": "^24.0.0",
-
-    "typedoc": "^0.22.7",
-    "typescript": "~4.4.4"
+    "tsd": "^0.31.0",
+    "tsx": "^4.7.1",
+    "typedoc": "^0.25.13",
+    "typescript": "~5.4.5"
   },
   "volta": {
     "extends": "../../package.json"

packages/core/types/builder.ts → packages/core/types/create-interactor.test-d.ts

@@ -1,4 +1,5 @@
-import { createInteractor } from '../src/index';
+import { expectType, expectError } from 'tsd';
+import { createInteractor, ActionInteraction } from '../src/index';
 
 let Link = createInteractor<HTMLLinkElement>('link')
   .selector('a')
@@ -19,20 +20,16 @@ let Link = createInteractor<HTMLLinkElement>('link')
 const Div = createInteractor('div')
   .locator((element) => element.id || "")
 
-Link('foo').click();
+expectType<ActionInteraction<HTMLLinkElement, void>>(Link('foo').click());
 
-Link('foo').setHref('blah');
+expectType<ActionInteraction<HTMLLinkElement, void>>(Link('foo').setHref('blah'));
 
 // cannot use wrong type of argument on action
-// $ExpectError
-Link('foo').setHref(123);
+expectError(Link('foo').setHref(123));
 
 // cannot use action which is not defined
-// $ExpectError
-Div('foo').click();
+expectError(Div('foo').click());
 
-// $ExpectError
-Link('foo').blah();
+expectError(Link('foo').blah());
 
-// $ExpectError
-Div('foo').blah();
+expectError(Div('foo').blah());

packages/core/types/dsl.ts → packages/core/types/dsl.test-d.ts

@@ -1,4 +1,5 @@
-import { test } from '@bigtest/suite';
+import { expectType, expectError } from 'tsd';
+import { test, TestBuilder } from '@bigtest/suite';
 import { createInteractor } from '../src/index';
 
 const TextField = createInteractor<HTMLInputElement>('text field')
@@ -15,12 +16,15 @@ const TextField = createInteractor<HTMLInputElement>('text field')
     fillIn: ({ perform }, value: string) => perform((element) => { element.value = value })
   });
 
-test("using interactors")
-  .step(TextField("username").fillIn("cowboyd"))
-  .step(TextField("password").fillIn("secret"))
-  .assertion(TextField("username").exists())
+expectType<TestBuilder<Record<string, unknown>>>(
+  test("using interactors")
+    .step(TextField("username").fillIn("cowboyd"))
+    .step(TextField("password").fillIn("secret"))
+    .assertion(TextField("username").exists())
+)
 
-test("bad interactor usage")
+expectError(
+  test("bad interactor usage")
   // cannot use side-effect interactions in an assertion
-  // $ExpectError
   .assertion(TextField("username").fillIn('cowboyd'))
+)

packages/core/types/extend.ts → packages/core/types/extend.test-d.ts

@@ -1,4 +1,5 @@
-import { createInteractor } from '../src/index';
+import { expectType, expectAssignable, expectError } from 'tsd';
+import { createInteractor, Interactor, ActionInteraction } from '../src/index';
 
 const HTML = createInteractor<HTMLElement>('html')
   .filters({
@@ -9,19 +10,16 @@ const HTML = createInteractor<HTMLElement>('html')
   });
 
 // cannot pass supertype
-// $ExpectError
-HTML.extend<Element>('foo');
+expectError(HTML.extend<Element>('foo'));
 
 // cannot pass other random type
-// $ExpectError
-HTML.extend<number>('div')
+expectError(HTML.extend<number>('div'))
 
 // without type parameter
 HTML.extend('div')
   .filters({
     id: (element) => {
-      // $ExpectType HTMLElement
-      element;
+      expectType<HTMLElement>(element);
       return element.id;
     }
   });
@@ -30,15 +28,13 @@ HTML.extend('div')
 HTML.extend<HTMLLinkElement>('link')
   .filters({
     href: (element) => {
-      // $ExpectType HTMLLinkElement
-      element;
+      expectType<HTMLLinkElement>(element);
       return element.href;
     }
   })
   .actions({
     setHref: (interactor, value: string) => interactor.perform((element) => {
-      // $ExpectType HTMLLinkElement
-      element;
+      expectType<HTMLLinkElement>(element);
       element.href = value;
     })
   });
@@ -57,15 +53,13 @@ const Thing = HTML.extend('thing')
   })
 
 // uses overridden type for filter
-Thing('thing', { id: 4 });
+expectAssignable<Interactor<HTMLElement, Record<string, unknown>>>(Thing('thing', { id: 4 }));
 
 // cannot use original type for filter
-// $ExpectError
-Thing('thing', { id: 'thing' });
+expectError(Thing('thing', { id: 'thing' }));
 
 // uses overridden type for action
-Thing('thing').click(5);
+expectType<(value: number) => ActionInteraction<HTMLElement, void>>(Thing('thing').click);
 
 // cannot use original type for action
-// $ExpectError
-Thing('thing').click();
+expectError(Thing('thing').click());

packages/core/types/filters.test-d.ts

@@ -0,0 +1,62 @@
+import { expectType, expectAssignable, expectError } from 'tsd';
+import { createInteractor, Interactor, AssertionInteraction } from '../src/index';
+
+const TextField = createInteractor<HTMLInputElement>('text field')
+  .selector('input')
+  .locator((element) => element.id)
+  .filters({
+    enabled: {
+      apply: (element) => !element.disabled,
+      default: true
+    },
+    value: (element) => element.value
+  })
+  .actions({
+    fillIn: ({ perform }, value: string) => perform((element) => { element.value = value })
+  });
+
+const Div = createInteractor('div')
+  .locator((element) => element.id || "");
+
+expectAssignable<Interactor<HTMLInputElement, Record<string, unknown>>>(TextField('foo', { enabled: true, value: 'thing' }));
+
+expectAssignable<Interactor<HTMLInputElement, Record<string, unknown>>>(TextField('foo', { enabled: false }));
+
+expectType<AssertionInteraction<HTMLInputElement, void>>(TextField('foo').has({ value: 'thing' }));
+expectType<AssertionInteraction<HTMLInputElement, void>>(TextField('foo').is({ enabled: true }));
+
+// cannot use wrong type of filter
+
+expectError(TextField('foo', { enabled: 'thing' }));
+expectError(TextField('foo', { value: true }));
+expectError(TextField('foo', { value: 123 }));
+
+// cannot use filter which doesn't exist
+
+expectError(TextField('foo', { blah: 'thing' }));
+
+expectError(TextField({ blah: 'thing' }));
+
+// cannot use wrong type of filter with is
+
+expectError(TextField('foo').is({ enabled: 'thing' }));
+expectError(TextField('foo').is({ value: true }));
+expectError(TextField('foo').is({ value: 123 }));
+
+// cannot use filter which doesn't exist with is
+
+expectError(TextField('foo').is({ blah: 'thing' }));
+
+// cannot use wrong type of filter with has
+
+expectError(TextField('foo').has({ enabled: 'thing' }));
+expectError(TextField('foo').has({ value: true }));
+expectError(TextField('foo').has({ value: 123 }));
+
+// cannot use filter which doesn't exist with has
+
+expectError(TextField('foo').has({ blah: 'thing' }));
+
+// cannot use filter on interactor which has no filters
+// TODO: this should fail!
+// expectError(Div('foo').has({ blah: 'thing' }));