Bump typescript to 5.0.3 (#5636)

**User-Facing Changes** None **Description** - Bumps typescript to 5.0 - Removes some type hacks now that the builtin lib has better OffscreenCanvas types (see microsoft/TypeScript-DOM-lib-generator#1480)
foxglove · Apr 6, 2023 · b6db0da · b6db0da
1 parent fd12e27
commit b6db0da
Show file tree

Hide file tree

Showing 19 changed files with 72 additions and 149 deletions.
diff --git a/package.json b/package.json
@@ -88,7 +88,7 @@
     "@types/jest": "29.4.0",
     "@types/license-checker": "^25.0.3",
     "@types/semver": "^7.3.13",
-    "@typescript-eslint/eslint-plugin": "5.56.0",
+    "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "babel-plugin-transform-import-meta": "2.2.0",
     "cross-env": "7.0.3",
@@ -117,7 +117,7 @@
     "ts-node": "10.9.1",
     "ts-prune": "0.10.3",
     "tslib": "2.5.0",
-    "typescript": "4.9.5",
+    "typescript": "5.0.3",
     "typescript-plugin-css-modules": "4.2.3",
     "webpack": "5.76.2",
     "webpack-cli": "5.0.1",

diff --git a/packages/comlink-transfer-handlers/package.json b/packages/comlink-transfer-handlers/package.json
@@ -21,6 +21,6 @@
   },
   "devDependencies": {
     "comlink": "4.4.1",
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   }
 }
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@testing-library/react-hooks": "8.0.1",
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   },
   "dependencies": {
     "@foxglove/log": "workspace:*",

diff --git a/packages/log/package.json b/packages/log/package.json
@@ -20,6 +20,6 @@
     "prepack": "tsc -b"
   },
   "devDependencies": {
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   }
 }
diff --git a/packages/mcap-support/package.json b/packages/mcap-support/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@types/protobufjs": "workspace:*",
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   },
   "dependencies": {
     "@foxglove/message-definition": "0.2.0",

diff --git a/packages/studio-base/package.json b/packages/studio-base/package.json
@@ -174,7 +174,7 @@
     "ts-key-enum": "2.0.12",
     "ts-loader": "9.4.2",
     "tss-react": "4.8.2",
-    "typescript": "4.9.5",
+    "typescript": "5.0.3",
     "url-search-params": "1.1.0",
     "use-debounce": "9.0.3",
     "use-immer": "0.8.1",

diff --git a/packages/studio-base/src/components/Chart/index.tsx b/packages/studio-base/src/components/Chart/index.tsx
@@ -88,7 +88,7 @@ function rpcMouseEvent(event: React.MouseEvent<HTMLElement>) {
 type RpcSend = <T>(
   topic: string,
   payload?: Record<string, unknown>,
-  transferables?: (Transferable | OffscreenCanvas)[],
+  transferables?: Transferable[],
 ) => Promise<T>;
 
 // Chart component renders data using workers with chartjs offscreen canvas
@@ -137,7 +137,7 @@ function Chart(props: Props): JSX.Element {
     const sendWrapper = async <T,>(
       topic: string,
       payload?: Record<string, unknown>,
-      transferables?: (Transferable | OffscreenCanvas)[],
+      transferables?: Transferable[],
     ) => {
       return await rpc.send<T>(topic, { id, ...payload }, transferables);
     };

diff --git a/packages/studio-base/src/components/CreateEventDialog.tsx b/packages/studio-base/src/components/CreateEventDialog.tsx
@@ -252,7 +252,7 @@ export function CreateEventDialog(props: { onClose: () => void }): JSX.Element {
         <FormLabel>Metadata</FormLabel>
         <div className={classes.grid}>
           {event.metadataEntries.map(({ key, value }, index) => {
-            const hasDuplicate = ((key.length > 0 && countedMetadata[key]) ?? 0) > 1;
+            const hasDuplicate = ((key.length > 0 ? countedMetadata[key] : undefined) ?? 0) > 1;
             return (
               <div className={classes.row} key={index}>
                 <TextField

diff --git a/packages/studio-base/src/panels/Image/components/ImageCanvas.worker.ts b/packages/studio-base/src/panels/Image/components/ImageCanvas.worker.ts
@@ -47,13 +47,8 @@ class ImageCanvasWorker {
 
       const matrix = (state.dimensions?.transform ?? new DOMMatrix()).inverse();
       const point = new DOMPoint(x, y).matrixTransform(matrix);
-      // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1480
-      const pixel = (
-        state.canvas.getContext("2d") as OffscreenCanvasRenderingContext2D | undefined
-      )?.getImageData(x, y, 1, 1);
-      const hit = (
-        state.hitmap.getContext("2d") as OffscreenCanvasRenderingContext2D | undefined
-      )?.getImageData(x, y, 1, 1);
+      const pixel = state.canvas.getContext("2d")?.getImageData(x, y, 1, 1);
+      const hit = state.hitmap.getContext("2d")?.getImageData(x, y, 1, 1);
       const markerIndex = hit ? idColorToIndex(hit.data) : undefined;
 
       if (pixel) {

diff --git a/packages/studio-base/src/panels/Image/lib/HitmapRenderContext.ts b/packages/studio-base/src/panels/Image/lib/HitmapRenderContext.ts
@@ -16,10 +16,7 @@ export class HitmapRenderContext {
     private readonly _ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
     private readonly _hitmapCanvas: HTMLCanvasElement | OffscreenCanvas | undefined,
   ) {
-    this._hctx = (this._hitmapCanvas?.getContext("2d") ?? undefined) as
-      | CanvasRenderingContext2D
-      | OffscreenCanvasRenderingContext2D
-      | undefined;
+    this._hctx = this._hitmapCanvas?.getContext("2d") ?? undefined;
     if (this._hctx) {
       this._hctx.imageSmoothingEnabled = false;
       this._hctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height);

diff --git a/packages/studio-base/src/panels/Image/lib/renderImage.ts b/packages/studio-base/src/panels/Image/lib/renderImage.ts
@@ -193,13 +193,7 @@ function decodeMessageToBitmap(
 
 function clearCanvas(canvas?: RenderableCanvas) {
   if (canvas) {
-    // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1480
-    (
-      canvas.getContext("2d") as
-        | CanvasRenderingContext2D
-        | OffscreenCanvasRenderingContext2D
-        | undefined
-    )?.clearRect(0, 0, canvas.width, canvas.height);
+    canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height);
   }
 }
 
@@ -223,10 +217,7 @@ function render({
       ? { width: bitmap.width, height: bitmap.height }
       : { width: bitmap.height, height: bitmap.width };
 
-  const canvasCtx = canvas.getContext("2d") as  // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1480
-    | CanvasRenderingContext2D
-    | OffscreenCanvasRenderingContext2D
-    | undefined;
+  const canvasCtx = canvas.getContext("2d");
   if (!canvasCtx) {
     return;
   }

diff --git a/packages/studio-base/src/players/UserNodePlayer/nodeTransformerWorker/generateRosLib.ts b/packages/studio-base/src/players/UserNodePlayer/nodeTransformerWorker/generateRosLib.ts
@@ -37,7 +37,6 @@ const createProperty = (name: string | ts.PropertyName, type: ts.TypeNode) => {
 
 const createTimeInterfaceDeclaration = (name: string) => {
   return ts.factory.createInterfaceDeclaration(
-    undefined /* decorators */,
     modifiers /* modifiers */,
     name /* name */,
     undefined /* typeParameters */,
@@ -51,8 +50,6 @@ const createTimeInterfaceDeclaration = (name: string) => {
 
 // Since rosbagjs treats json as a primitive, we have to shim it in.
 const jsonInterfaceDeclaration = ts.factory.createInterfaceDeclaration(
-  undefined,
-  /* decorators */
   modifiers,
   /* modifiers */
   "json",
@@ -134,7 +131,6 @@ export const generateTypeDefs = (datatypes: RosDatatypes): InterfaceDeclarations
     });
 
     interfaceDeclarations[datatype] = ts.factory.createInterfaceDeclaration(
-      undefined /* decorators */,
       [ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)] /* modifiers */,
       formatInterfaceName(datatype) /* name */,
       undefined /* typeParameters */,
@@ -155,7 +151,6 @@ const generateRosLib = ({
   datatypes: RosDatatypes;
 }): string => {
   let TopicsToMessageDefinition = ts.factory.createInterfaceDeclaration(
-    undefined,
     modifiers,
     "TopicsToMessageDefinition",
     undefined,
@@ -164,8 +159,6 @@ const generateRosLib = ({
   );
 
   const typedMessage = ts.factory.createInterfaceDeclaration(
-    undefined,
-    /* decorators */
     modifiers,
     /* modifiers */
     "Input",

diff --git a/packages/studio-base/src/theme/muiComponents.ts b/packages/studio-base/src/theme/muiComponents.ts
@@ -2,7 +2,15 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { alpha, Fade, Theme, dividerClasses, listClasses, listItemClasses } from "@mui/material";
+import {
+  alpha,
+  CSSInterpolation,
+  Fade,
+  Theme,
+  dividerClasses,
+  listClasses,
+  listItemClasses,
+} from "@mui/material";
 import { CSSProperties } from "react";
 import tinycolor from "tinycolor2";
 
@@ -15,7 +23,7 @@ type MuiLabComponents = {
   MuiToggleButton?: {
     styleOverrides?: {
       root?: CSSProperties;
-      label?: CSSProperties;
+      label?: CSSInterpolation;
     };
   };
   MuiToggleButtonGroup?: {

diff --git a/packages/studio-base/src/util/Rpc.ts b/packages/studio-base/src/util/Rpc.ts
@@ -15,7 +15,7 @@
 // instances of web-workers and shared-workers respectively, as well as avaiable on
 // 'global' within them.
 export interface Channel {
-  postMessage(data: unknown, transfer?: (Transferable | OffscreenCanvas)[]): void;
+  postMessage(data: unknown, transfer?: Transferable[]): void;
   onmessage?: ((ev: MessageEvent) => unknown) | null; // eslint-disable-line no-restricted-syntax
   terminate: () => void;
 }
@@ -154,7 +154,7 @@ export default class Rpc {
   public async send<TResult, TData = unknown>(
     topic: string,
     data?: TData,
-    transfer?: (Transferable | OffscreenCanvas)[],
+    transfer?: Transferable[],
   ): Promise<TResult> {
     const id = this._messageId++;
     const message = { topic, id, data };

diff --git a/packages/studio-base/webpack.ts b/packages/studio-base/webpack.ts
@@ -181,7 +181,7 @@ export function makeConfig(
           options: {
             multiple: [
               {
-                search: "etwModule = require(etwModulePath);",
+                search: /etwModule\s*=\s*require\(etwModulePath\);/,
                 replace:
                   "throw new Error('[Foxglove] This module is not supported in the browser.');",
               },
@@ -200,6 +200,10 @@ export function makeConfig(
                 replace:
                   "throw new Error('[Foxglove] This module is not supported in the browser.');",
               },
+              {
+                search: `return { module:   require(modulePath), modulePath, error: void 0 };`,
+                replace: `throw new Error('[Foxglove] This module is not supported in the browser.');`,
+              },
               {
                 search: `getModuleResolver=function(e){let t;try{t=require(e)}`,
                 replace:

diff --git a/packages/studio/package.json b/packages/studio/package.json
@@ -19,6 +19,6 @@
     "prepack": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   }
 }
diff --git a/packages/typescript-transformers/package.json b/packages/typescript-transformers/package.json
@@ -20,6 +20,6 @@
     "prepack": "tsc -b"
   },
   "dependencies": {
-    "typescript": "4.9.5"
+    "typescript": "5.0.3"
   }
 }
diff --git a/packages/typescript-transformers/src/createTssReactNameTransformer.ts b/packages/typescript-transformers/src/createTssReactNameTransformer.ts
@@ -48,6 +48,6 @@ export function createTssReactNameTransformer(
       }
       return ts.visitEachChild(node, visitor, context);
     };
-    return ts.visitNode(sourceFile, visitor);
+    return ts.visitNode(sourceFile, visitor, ts.isSourceFile);
   };
 }