chore(typescript): support typescript@v4.4.2

mlaursen · Sep 8, 2021 · 5a9dd72 · 5a9dd72 · vercel · Sep 8, 2021
1 parent 1b6d0dc
commit 5a9dd72
Show file tree

Hide file tree

Showing 15 changed files with 390 additions and 431 deletions.
diff --git a/package.json b/package.json
@@ -50,16 +50,16 @@
   },
   "homepage": "https://react-md.dev",
   "devDependencies": {
-    "@babel/plugin-transform-typescript": "^7.15.0",
-    "@mlaursen/eslint-config": "^1.1.4",
+    "@babel/plugin-transform-typescript": "^7.15.4",
+    "@mlaursen/eslint-config": "^1.1.5",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "13.2.1",
     "@types/fs-extra": "^9.0.12",
     "@types/glob": "^7.1.4",
-    "@types/jest": "^27.0.0",
+    "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.172",
     "@types/node": "^15.14.7",
     "@types/prettier": "^2.3.2",
@@ -86,8 +86,8 @@
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.2",
     "sass-lint": "^1.13.1",
-    "ts-jest": "^27.0.4",
-    "typescript": "^4.3.5"
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.4.2"
   },
   "lint-staged": {
     "**/*.{ts,tsx,scss,js,jsx,md,yml,json}": [

diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
@@ -15,7 +15,7 @@
     "watch": "npm-run-all -p \"compile -w\" watcher"
   },
   "dependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.15.5",
     "@octokit/core": "^3.5.1",
     "chokidar": "^3.5.2",
     "commander": "^8.1.0",
@@ -40,10 +40,10 @@
     "rimraf": "^3.0.2",
     "sass": "^1.37.5",
     "sassdoc": "^2.7.2",
-    "ts-morph": "^11.0.3",
-    "typedoc": "^0.21.5",
+    "ts-morph": "^12.0.0",
+    "typedoc": "^0.21.9",
     "typedoc-plugin-sourcefile-url": "^1.0.6",
-    "typescript": "^4.3.5"
+    "typescript": "^4.4.2"
   },
   "devDependencies": {
     "@types/cssnano": "^4.0.1",

diff --git a/packages/dev-utils/src/sassdoc.ts b/packages/dev-utils/src/sassdoc.ts
@@ -130,7 +130,9 @@ ${data}`;
     log.error(`path: ${path}`);
     log.error(`name: ${name}`);
     log.error();
-    log.error(e.message);
+    if (e instanceof Error) {
+      log.error(e.message);
+    }
     process.exit(1);
   }
 }

diff --git a/packages/dev-utils/src/utils/styles/variable.ts b/packages/dev-utils/src/utils/styles/variable.ts
@@ -208,7 +208,9 @@ ${getEverythingScss()}
     log.error(`value: ${originalValue}`);
     log.error("");
 
-    log.error(e.message);
+    if (e instanceof Error) {
+      log.error(e.message);
+    }
     process.exit(1);
   }
 
@@ -232,7 +234,7 @@ ${getEverythingScss()}
         log.error(`Unable to parse the map: ${name}`);
         log.error(`index is: "${index}"`);
         log.error(compiledValue);
-        if ("message" in e) {
+        if (e instanceof Error) {
           log.error(e.message);
         }
         process.exit(1);

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -44,7 +44,7 @@
     "sass": "^1.37.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.15.5",
     "@react-md/dev-utils": "^3.0.0",
     "@types/formidable": "^1.2.3",
     "@types/gtag.js": "^0.0.7",
@@ -59,7 +59,7 @@
     "eslint-config-next": "^11.1.0",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.2",
     "webpack": "^5.50.0"
   },
   "browerlist": [

diff --git a/packages/documentation/src/utils/tests.tsx b/packages/documentation/src/utils/tests.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/export */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import React, { ReactElement, ReactNode } from "react";
 import { RouterContext } from "next/dist/shared/lib/router-context";

diff --git a/packages/form/src/file-input/useFileUpload.ts b/packages/form/src/file-input/useFileUpload.ts
@@ -390,7 +390,9 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>({
         dispatch({
           type: "queue",
           files: [],
-          errors: [new FileAccessError(e)],
+          errors: [
+            new FileAccessError(e instanceof Error ? e.message : undefined),
+          ],
         });
       }
     },
@@ -410,7 +412,9 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>({
         dispatch({
           type: "queue",
           files: [],
-          errors: [new FileAccessError(e)],
+          errors: [
+            new FileAccessError(e instanceof Error ? e.message : undefined),
+          ],
         });
       }
     },

diff --git a/packages/utils/src/events/touches.ts b/packages/utils/src/events/touches.ts
@@ -35,10 +35,10 @@ export function setTouchEvent(
    */
   options?: AddEventListenerOptions
 ): void {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   el[`${add ? "add" : "remove"}EventListener`](
     `touch${eventType}`,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
     callback,
     isSupported ? { passive: true, capture, ...options } : capture
   );

diff --git a/packages/utils/src/positioning/__tests__/createHorizonalPosition.ts b/packages/utils/src/positioning/__tests__/createHorizonalPosition.ts
@@ -14,24 +14,29 @@ import {
   getLeftCoord,
   getRightCoord,
 } from "../getCoord";
-import { HorizontalPosition } from "../types";
 
-const containerRect1: ClientRect = {
+const containerRect1: DOMRect = {
   left: 100,
   right: 50,
   top: 25,
   bottom: 75,
   height: 200,
   width: 100,
+  x: 100,
+  y: 25,
+  toJSON() {},
 };
 
-const containerRect2: ClientRect = {
+const containerRect2: DOMRect = {
   left: 50,
   right: 100,
   top: 75,
   bottom: 25,
   height: 100,
   width: 200,
+  x: 200,
+  y: 75,
+  toJSON() {},
 };
 const config1: FixConfig = {
   xMargin: 0,
@@ -83,10 +88,13 @@ const leftBoundsConfig1: FixConfig = {
     // pretending an icon button
     height: 40,
     width: 40,
+    x: 0,
+    y: 0,
+    toJSON() {},
   },
 };
 const leftBoundsConfig2: FixConfig = { ...leftBoundsConfig1, vwMargin: 8 };
-const rightBoundsConfig1 = {
+const rightBoundsConfig1: FixConfig = {
   xMargin: 0,
   vwMargin: 0,
   elWidth: 475,
@@ -101,9 +109,12 @@ const rightBoundsConfig1 = {
     // pretending an icon button
     height: 40,
     width: 40,
+    x: vw - 40,
+    y: 0,
+    toJSON() {},
   },
 };
-const rightBoundsConfig2 = { ...rightBoundsConfig1, vwMargin: 8 };
+const rightBoundsConfig2: FixConfig = { ...rightBoundsConfig1, vwMargin: 8 };
 
 describe("createAnchoredLeft", () => {
   it("should return the calcualted left coord and an actualX value of left", () => {
@@ -481,7 +492,7 @@ describe("createAnchoredRight", () => {
   });
 
   it("should return the left coord as the left value if the position can be swapped within the viewport", () => {
-    const config1 = {
+    const config1: FixConfig = {
       xMargin: 0,
       vwMargin: 0,
       elWidth: 50,
@@ -494,9 +505,12 @@ describe("createAnchoredRight", () => {
         right: 0,
         height: 40,
         width: 40,
+        x: 160,
+        y: 0,
+        toJSON() {},
       },
     };
-    const config2 = { ...config1, xMargin: 8 };
+    const config2: FixConfig = { ...config1, xMargin: 8 };
 
     expect(createAnchoredRight(config2)).toEqual({
       left: getLeftCoord(config2),
@@ -507,7 +521,7 @@ describe("createAnchoredRight", () => {
 
 describe("createEqualWidth", () => {
   const options1 = {
-    x: "center" as HorizontalPosition,
+    x: "center",
     vw: 1000,
     vwMargin: 0,
     xMargin: 0,
@@ -519,9 +533,12 @@ describe("createEqualWidth", () => {
       bottom: 200,
       height: 200,
       width: 400,
+      x: 300,
+      y: 0,
+      toJSON() {},
     },
     isMinWidth: false,
-  };
+  } as const;
   const options2 = { ...options1, vwMargin: 16 };
   const options3 = { ...options1, xMargin: 5 };
   const options4 = { ...options2, xMargin: 5 };

diff --git a/packages/utils/src/positioning/__tests__/getCoord.ts b/packages/utils/src/positioning/__tests__/getCoord.ts
@@ -11,22 +11,28 @@ import {
   getTopCoord,
 } from "../getCoord";
 
-const containerRect1: ClientRect = {
+const containerRect1: DOMRect = {
   left: 100,
   right: 50,
   top: 25,
   bottom: 75,
   height: 200,
   width: 100,
+  x: 100,
+  y: 25,
+  toJSON() {},
 };
 
-const containerRect2: ClientRect = {
+const containerRect2: DOMRect = {
   left: 50,
   right: 100,
   top: 75,
   bottom: 25,
   height: 100,
   width: 200,
+  x: 60,
+  y: 75,
+  toJSON() {},
 };
 
 describe("getLeftCoord", () => {

diff --git a/packages/utils/src/positioning/createHorizontalPosition.ts b/packages/utils/src/positioning/createHorizontalPosition.ts
@@ -42,7 +42,7 @@ interface Options
   vw: number;
   elWidth: number;
   initialX?: number;
-  containerRect: DOMRect | ClientRect;
+  containerRect: DOMRect;
 }
 
 /**

diff --git a/packages/utils/src/positioning/createVerticalPosition.ts b/packages/utils/src/positioning/createVerticalPosition.ts
@@ -47,7 +47,7 @@ interface Options
   vh: number;
   initialY?: number;
   elHeight: number;
-  containerRect: DOMRect | ClientRect;
+  containerRect: DOMRect;
 }
 
 /**

diff --git a/packages/utils/src/positioning/getCoord.ts b/packages/utils/src/positioning/getCoord.ts
@@ -2,14 +2,14 @@ export interface XCoordConfig {
   xMargin: number;
   elWidth: number;
   initialX?: number;
-  containerRect: DOMRect | ClientRect;
+  containerRect: DOMRect;
 }
 
 export interface YCoordConfig {
   yMargin: number;
   elHeight: number;
   initialY?: number;
-  containerRect: DOMRect | ClientRect;
+  containerRect: DOMRect;
 }
 
 type Left = number;

diff --git a/packages/utils/src/positioning/getElementRect.ts b/packages/utils/src/positioning/getElementRect.ts
@@ -13,13 +13,13 @@ function applyCoords(coord: number | undefined): string {
  * @param coords - An optional object of coordinates to apply to the positioning
  * styles. This should be used when the coords might resize the element since it
  * needs to try to fit within the viewport.
- * @returns either a DOMRect or ClientRect for the element
+ * @returns either a DOMRect for the element
  * @internal
  */
 export function getElementRect(
   element: HTMLElement,
   coords: Coords = {}
-): DOMRect | ClientRect {
+): DOMRect {
   const cloned = element.cloneNode(true) as HTMLElement;
   // remove the id so there won't be two elements with the same id on the page
   cloned.removeAttribute("id");