chore: Update Typescript to 4.4.4 (excalidraw#4188)

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["@excalidraw/eslint-config", "react-app"],
   "rules": {
-    "import/no-anonymous-default-export": "off"
+    "import/no-anonymous-default-export": "off",
+    "no-restricted-globals": "off"
   }
 }

package.json

@@ -52,7 +52,7 @@
     "roughjs": "4.4.1",
     "sass": "1.43.4",
     "socket.io-client": "2.3.1",
-    "typescript": "4.2.4"
+    "typescript": "4.4.4"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.0",
@@ -61,6 +61,7 @@
     "@types/lodash.throttle": "4.1.6",
     "@types/pako": "1.0.2",
     "@types/resize-observer-browser": "0.1.6",
+    "@types/web": "0.0.45",
     "chai": "4.3.4",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.3.1",
@@ -72,6 +73,9 @@
     "prettier": "2.4.1",
     "rewire": "5.0.0"
   },
+  "resolutions": {
+    "@typescript-eslint/typescript-estree": "5.3.0"
+  },
   "engines": {
     "node": ">=14.0.0"
   },

scripts/autorelease.js

@@ -15,8 +15,8 @@ const publish = () => {
     execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
     execSync(`yarn run build:umd`, { cwd: excalidrawDir });
     execSync(`yarn --cwd ${excalidrawDir} publish`);
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
   }
 };
 

scripts/release.js

@@ -25,8 +25,8 @@ const release = async (nextVersion) => {
     );
     /* eslint-disable no-console */
     console.log("Done!");
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
     process.exit(1);
   }
 };

scripts/updateChangelog.js

@@ -28,8 +28,8 @@ const getCommitHashForLastVersion = async () => {
       `git log --format=format:"%H" --grep=${commitMessage}`,
     );
     return stdout;
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
   }
 };
 

src/actions/actionClipboard.tsx

@@ -56,7 +56,7 @@ export const actionCopyAsSvg = register({
       return {
         commitToHistory: false,
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       return {
         appState: {
@@ -106,7 +106,7 @@ export const actionCopyAsPng = register({
         },
         commitToHistory: false,
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       return {
         appState: {

src/actions/actionExport.tsx

@@ -151,7 +151,7 @@ export const actionSaveToActiveFile = register({
             : null,
         },
       };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name !== "AbortError") {
         console.error(error);
       }
@@ -181,7 +181,7 @@ export const actionSaveFileToDisk = register({
         app.files,
       );
       return { commitToHistory: false, appState: { ...appState, fileHandle } };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name !== "AbortError") {
         console.error(error);
       }
@@ -219,7 +219,7 @@ export const actionLoadScene = register({
         files,
         commitToHistory: true,
       };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name === "AbortError") {
         return false;
       }

src/clipboard.ts

@@ -74,7 +74,7 @@ export const copyToClipboard = async (
   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);
-  } catch (error) {
+  } catch (error: any) {
     PREFER_APP_CLIPBOARD = true;
     console.error(error);
   }
@@ -87,7 +87,7 @@ const getAppClipboard = (): Partial<ElementsClipboard> => {
 
   try {
     return JSON.parse(CLIPBOARD);
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     return {};
   }
@@ -179,7 +179,7 @@ export const copyTextToSystemClipboard = async (text: string | null) => {
       // not focused
       await navigator.clipboard.writeText(text || "");
       copied = true;
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   }
@@ -219,7 +219,7 @@ const copyTextViaExecCommand = (text: string) => {
     textarea.setSelectionRange(0, textarea.value.length);
 
     success = document.execCommand("copy");
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
   }
 

src/components/App.tsx

@@ -621,7 +621,7 @@ class App extends React.Component<AppProps, AppState> {
     this.onBlur();
   };
 
-  private disableEvent: EventHandlerNonNull = (event) => {
+  private disableEvent: EventListener = (event) => {
     event.preventDefault();
   };
 
@@ -665,7 +665,7 @@ class App extends React.Component<AppProps, AppState> {
         }
         this.setState({ isLibraryOpen: true });
       }
-    } catch (error) {
+    } catch (error: any) {
       window.alert(t("alerts.errorLoadingLibrary"));
       console.error(error);
     } finally {
@@ -1294,8 +1294,8 @@ class App extends React.Component<AppProps, AppState> {
           if ((await this.props.onPaste(data, event)) === false) {
             return;
           }
-        } catch (e) {
-          console.error(e);
+        } catch (error: any) {
+          console.error(error);
         }
       }
       if (data.errorMessage) {
@@ -3705,7 +3705,7 @@ class App extends React.Component<AppProps, AppState> {
               this.actionManager.executeAction(actionFinalize);
             },
           );
-        } catch (error) {
+        } catch (error: any) {
           console.error(error);
           this.scene.replaceAllElements(
             this.scene
@@ -3974,7 +3974,7 @@ class App extends React.Component<AppProps, AppState> {
           await normalizeSVG(await imageFile.text()),
           imageFile.name,
         );
-      } catch (error) {
+      } catch (error: any) {
         console.warn(error);
         throw new Error(t("errors.svgImageInsertError"));
       }
@@ -4000,7 +4000,7 @@ class App extends React.Component<AppProps, AppState> {
           imageFile,
           DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
         );
-      } catch (error) {
+      } catch (error: any) {
         console.error("error trying to resing image file on insertion", error);
       }
 
@@ -4061,7 +4061,7 @@ class App extends React.Component<AppProps, AppState> {
             this.initializeImageDimensions(imageElement, true);
           }
           resolve(imageElement);
-        } catch (error) {
+        } catch (error: any) {
           console.error(error);
           reject(new Error(t("errors.imageInsertError")));
         } finally {
@@ -4092,7 +4092,7 @@ class App extends React.Component<AppProps, AppState> {
         imageElement,
         showCursorImagePreview,
       });
-    } catch (error) {
+    } catch (error: any) {
       mutateElement(imageElement, {
         isDeleted: true,
       });
@@ -4187,7 +4187,7 @@ class App extends React.Component<AppProps, AppState> {
           },
         );
       }
-    } catch (error) {
+    } catch (error: any) {
       if (error.name !== "AbortError") {
         console.error(error);
       }

src/components/ToolButton.tsx

@@ -61,7 +61,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
       try {
         setIsLoading(true);
         await ret;
-      } catch (error) {
+      } catch (error: any) {
         if (!(error instanceof AbortError)) {
           throw error;
         }

src/components/TopErrorBoundary.tsx

@@ -27,7 +27,7 @@ export class TopErrorBoundary extends React.Component<
     for (const [key, value] of Object.entries({ ...localStorage })) {
       try {
         _localStorage[key] = JSON.parse(value);
-      } catch (error) {
+      } catch (error: any) {
         _localStorage[key] = value;
       }
     }
@@ -60,7 +60,7 @@ export class TopErrorBoundary extends React.Component<
         )
       ).default;
       body = encodeURIComponent(templateStrFn(this.state.sentryEventId));
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
 
@@ -86,7 +86,7 @@ export class TopErrorBoundary extends React.Component<
                 try {
                   localStorage.clear();
                   window.location.reload();
-                } catch (error) {
+                } catch (error: any) {
                   console.error(error);
                 }
               }}

src/data/blob.ts

@@ -24,7 +24,7 @@ const parseFileContents = async (blob: Blob | File) => {
       return await (
         await import(/* webpackChunkName: "image" */ "./image")
       ).decodePngMetadata(blob);
-    } catch (error) {
+    } catch (error: any) {
       if (error.message === "INVALID") {
         throw new DOMException(
           t("alerts.imageDoesNotContainScene"),
@@ -58,7 +58,7 @@ const parseFileContents = async (blob: Blob | File) => {
         ).decodeSvgMetadata({
           svg: contents,
         });
-      } catch (error) {
+      } catch (error: any) {
         if (error.message === "INVALID") {
           throw new DOMException(
             t("alerts.imageDoesNotContainScene"),
@@ -156,7 +156,7 @@ export const loadFromBlob = async (
     );
 
     return result;
-  } catch (error) {
+  } catch (error: any) {
     console.error(error.message);
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   }
@@ -187,7 +187,7 @@ export const canvasToBlob = async (
         }
         resolve(blob);
       });
-    } catch (error) {
+    } catch (error: any) {
       reject(error);
     }
   });
@@ -208,7 +208,7 @@ export const generateIdFromFile = async (file: File) => {
         // convert to hex string
         .map((byte) => byte.toString(16).padStart(2, "0"))
         .join("") as FileId;
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     // length 40 to align with the HEX length of SHA-1 (which is 160 bit)
     id = nanoid(40) as FileId;

src/data/encode.ts

@@ -85,7 +85,7 @@ export const encode = async ({
   if (compress !== false) {
     try {
       deflated = await toByteString(deflate(text));
-    } catch (error) {
+    } catch (error: any) {
       console.error("encode: cannot deflate", error);
     }
   }
@@ -367,7 +367,7 @@ export const decompressData = async <T extends Record<string, any>>(
       /** data can be anything so the caller must decode it */
       data: contentsBuffer,
     };
-  } catch (error) {
+  } catch (error: any) {
     console.error(
       `Error during decompressing and decrypting the file.`,
       encodingMetadata,

src/data/image.ts

@@ -76,7 +76,7 @@ export const decodePngMetadata = async (blob: Blob) => {
         throw new Error("FAILED");
       }
       return await decode(encodedData);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
     }
@@ -127,7 +127,7 @@ export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
         throw new Error("FAILED");
       }
       return await decode(encodedData);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
     }

src/data/index.ts

@@ -93,7 +93,7 @@ export const exportCanvas = async (
   } else if (type === "clipboard") {
     try {
       await copyBlobToClipboardAsPng(blob);
-    } catch (error) {
+    } catch (error: any) {
       if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
         throw error;
       }

src/data/library.ts

@@ -90,7 +90,7 @@ class Library {
         this.libraryCache = JSON.parse(JSON.stringify(items));
 
         resolve(items);
-      } catch (error) {
+      } catch (error: any) {
         console.error(error);
         resolve([]);
       }
@@ -105,7 +105,7 @@ class Library {
       // immediately
       this.libraryCache = JSON.parse(serializedItems);
       await this.app.props.onLibraryChange?.(items);
-    } catch (error) {
+    } catch (error: any) {
       this.libraryCache = prevLibraryItems;
       throw error;
     }

src/element/image.ts

@@ -63,7 +63,7 @@ export const updateImageCache = async ({
               const image = await imagePromise;
 
               imageCache.set(fileId, { ...data, image });
-            } catch (error) {
+            } catch (error: any) {
               erroredFiles.set(fileId, true);
             }
           })(),