Typescript updates (#9658)

* Typescript updates

* Update @types/node

* Fix more types

package.json

@@ -160,7 +160,7 @@
     "@types/katex": "^0.14.0",
     "@types/lodash": "^4.14.168",
     "@types/modernizr": "^3.5.3",
-    "@types/node": "^14.18.28",
+    "@types/node": "^16",
     "@types/pako": "^1.0.1",
     "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
@@ -212,7 +212,7 @@
     "stylelint": "^14.9.1",
     "stylelint-config-standard": "^26.0.0",
     "stylelint-scss": "^4.2.0",
-    "typescript": "4.8.4",
+    "typescript": "4.9.3",
     "walk": "^2.3.14"
   },
   "jest": {

src/@types/global.d.ts

@@ -149,14 +149,10 @@ declare global {
 
     // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
     interface OffscreenCanvas {
-        height: number;
-        width: number;
-        getContext: HTMLCanvasElement["getContext"];
         convertToBlob(opts?: {
             type?: string;
             quality?: number;
         }): Promise<Blob>;
-        transferToImageBitmap(): ImageBitmap;
     }
 
     interface HTMLAudioElement {

src/DecryptionFailureTracker.ts

@@ -174,12 +174,12 @@ export class DecryptionFailureTracker {
      * Start checking for and tracking failures.
      */
     public start(): void {
-        this.checkInterval = setInterval(
+        this.checkInterval = window.setInterval(
             () => this.checkFailures(Date.now()),
             DecryptionFailureTracker.CHECK_INTERVAL_MS,
         );
 
-        this.trackInterval = setInterval(
+        this.trackInterval = window.setInterval(
             () => this.trackFailures(),
             DecryptionFailureTracker.TRACK_INTERVAL_MS,
         );

src/LegacyCallHandler.tsx

@@ -254,7 +254,7 @@ export default class LegacyCallHandler extends EventEmitter {
                 logger.log("Failed to check for protocol support and no retries remain: assuming no support", e);
             } else {
                 logger.log("Failed to check for protocol support: will retry", e);
-                setTimeout(() => {
+                window.setTimeout(() => {
                     this.checkProtocols(maxTries - 1);
                 }, 10000);
             }

src/Lifecycle.ts

@@ -584,7 +584,7 @@ async function doSetLoggedIn(
     // later than MatrixChat might assume.
     //
     // we fire it *synchronously* to make sure it fires before on_logged_in.
-    // (dis.dispatch uses `setTimeout`, which does not guarantee ordering.)
+    // (dis.dispatch uses `window.setTimeout`, which does not guarantee ordering.)
     dis.dispatch({ action: 'on_logging_in' }, true);
 
     if (clearStorageEnabled) {
@@ -865,7 +865,7 @@ export async function onLoggedOut(): Promise<void> {
     if (SdkConfig.get().logout_redirect_url) {
         logger.log("Redirecting to external provider to finish logout");
         // XXX: Defer this so that it doesn't race with MatrixChat unmounting the world by going to /#/login
-        setTimeout(() => {
+        window.setTimeout(() => {
             window.location.href = SdkConfig.get().logout_redirect_url;
         }, 100);
     }

src/NodeAnimator.tsx

@@ -119,7 +119,7 @@ export default class NodeAnimator extends React.Component<IProps> {
             }
 
             // and then we animate to the resting state
-            setTimeout(() => {
+            window.setTimeout(() => {
                 this.applyStyles(domNode as HTMLElement, restingStyle);
             }, 0);
         }

src/PasswordReset.ts

@@ -119,7 +119,7 @@ export default class PasswordReset {
         this.checkEmailLinkClicked()
             .then(() => resolve())
             .catch(() => {
-                setTimeout(
+                window.setTimeout(
                     () => this.tryCheckEmailLinkClicked(resolve),
                     CHECK_EMAIL_VERIFIED_POLL_INTERVAL,
                 );

src/audio/PlaybackClock.ts

@@ -127,7 +127,7 @@ export class PlaybackClock implements IDestroyable {
             // cast to number because the types are wrong
             // 100ms interval to make sure the time is as accurate as possible without
             // being overly insane
-            this.timerId = <number><any>setInterval(this.checkTime, 100);
+            this.timerId = <number><any>window.setInterval(this.checkTime, 100);
         }
     }
 

src/autocomplete/Autocompleter.ts

@@ -35,7 +35,7 @@ export interface ISelectionRange {
 }
 
 export interface ICompletion {
-    type: "at-room" | "command" | "community" | "room" | "user";
+    type?: "at-room" | "command" | "community" | "room" | "user";
     completion: string;
     completionId?: string;
     component?: ReactElement;

src/autocomplete/EmojiProvider.tsx

@@ -103,7 +103,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             return []; // don't give any suggestions if the user doesn't want them
         }
 
-        let completions = [];
+        let completions: ISortedEmoji[] = [];
         const { command, range } = this.getCurrentCommand(query, selection);
 
         if (command && command[0].length > 2) {
@@ -132,7 +132,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             }
             // Finally, sort by original ordering
             sorters.push(c => c._orderBy);
-            completions = sortBy(uniq(completions), sorters);
+            completions = sortBy<ISortedEmoji>(uniq(completions), sorters);
 
             completions = completions.slice(0, LIMIT);
 
@@ -141,9 +141,9 @@ export default class EmojiProvider extends AutocompleteProvider {
             this.recentlyUsed.forEach(emoji => {
                 sorters.push(c => score(emoji.shortcodes[0], c.emoji.shortcodes[0]));
             });
-            completions = sortBy(uniq(completions), sorters);
+            completions = sortBy<ISortedEmoji>(uniq(completions), sorters);
 
-            completions = completions.map(c => ({
+            return completions.map(c => ({
                 completion: c.emoji.unicode,
                 component: (
                     <PillCompletion title={`:${c.emoji.shortcodes[0]}:`} aria-label={c.emoji.unicode}>
@@ -153,7 +153,7 @@ export default class EmojiProvider extends AutocompleteProvider {
                 range,
             }));
         }
-        return completions;
+        return [];
     }
 
     getName() {

src/components/structures/InteractiveAuth.tsx

@@ -127,7 +127,7 @@ export default class InteractiveAuthComponent extends React.Component<IProps, IS
         });
 
         if (this.props.poll) {
-            this.intervalId = setInterval(() => {
+            this.intervalId = window.setInterval(() => {
                 this.authLogic.poll();
             }, 2000);
         }

src/components/structures/MatrixChat.tsx

@@ -1965,7 +1965,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.accountPassword = password;
         // self-destruct the password after 5mins
         if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
-        this.accountPasswordTimer = setTimeout(() => {
+        this.accountPasswordTimer = window.setTimeout(() => {
             this.accountPassword = null;
             this.accountPasswordTimer = null;
         }, 60 * 5 * 1000);

src/components/structures/ScrollPanel.tsx

@@ -459,7 +459,7 @@ export default class ScrollPanel extends React.Component<IProps> {
             if (this.unfillDebouncer) {
                 clearTimeout(this.unfillDebouncer);
             }
-            this.unfillDebouncer = setTimeout(() => {
+            this.unfillDebouncer = window.setTimeout(() => {
                 this.unfillDebouncer = null;
                 debuglog("unfilling now", { backwards, origExcessHeight });
                 this.props.onUnfillRequest?.(backwards, markerScrollToken!);
@@ -485,7 +485,7 @@ export default class ScrollPanel extends React.Component<IProps> {
         // this will block the scroll event handler for +700ms
         // if messages are already cached in memory,
         // This would cause jumping to happen on Chrome/macOS.
-        return new Promise(resolve => setTimeout(resolve, 1)).then(() => {
+        return new Promise(resolve => window.setTimeout(resolve, 1)).then(() => {
             return this.props.onFillRequest(backwards);
         }).finally(() => {
             this.pendingFillRequests[dir] = false;

src/components/views/dialogs/InviteDialog.tsx

@@ -697,7 +697,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         if (this.debounceTimer) {
             clearTimeout(this.debounceTimer);
         }
-        this.debounceTimer = setTimeout(() => {
+        this.debounceTimer = window.setTimeout(() => {
             this.updateSuggestions(term);
         }, 150); // 150ms debounce (human reaction time + some)
     };

src/components/views/dialogs/SlidingSyncOptionsDialog.tsx

@@ -48,7 +48,7 @@ async function syncHealthCheck(cli: MatrixClient): Promise<void> {
  */
 async function proxyHealthCheck(endpoint: string, hsUrl?: string): Promise<void> {
     const controller = new AbortController();
-    const id = setTimeout(() => controller.abort(), 10 * 1000); // 10s
+    const id = window.setTimeout(() => controller.abort(), 10 * 1000); // 10s
     const res = await fetch(endpoint + "/client/server.json", {
         signal: controller.signal,
     });

src/components/views/dialogs/devtools/VerificationExplorer.tsx

@@ -51,7 +51,7 @@ const VerificationRequestExplorer: React.FC<{
         if (request.timeout == 0) return;
 
         /* Note that request.timeout is a getter, so its value changes */
-        const id = setInterval(() => {
+        const id = window.setInterval(() => {
             setRequestTimeout(request.timeout);
         }, 500);
 

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -228,7 +228,7 @@ export const useWebSearchMetrics = (numResults: number, queryLength: number, via
         if (!queryLength) return;
 
         // send metrics after a 1s debounce
-        const timeoutId = setTimeout(() => {
+        const timeoutId = window.setTimeout(() => {
             PosthogAnalytics.instance.trackEvent<WebSearchEvent>({
                 eventName: "WebSearch",
                 viaSpotlight,

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -106,7 +106,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<
     }
 
     async componentDidMount() {
-        // setInterval() first waits and then executes, therefore
+        // window.setInterval() first waits and then executes, therefore
         // we call getDesktopCapturerSources() here without any delay.
         // Otherwise the dialog would be left empty for some time.
         this.setState({
@@ -114,7 +114,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<
         });
 
         // We update the sources every 500ms to get newer thumbnails
-        this.interval = setInterval(async () => {
+        this.interval = window.setInterval(async () => {
             this.setState({
                 sources: await getDesktopCapturerSources(),
             });

src/components/views/elements/UseCaseSelection.tsx

@@ -35,7 +35,7 @@ export function UseCaseSelection({ onFinished }: Props) {
     // Call onFinished 1.5s after `selection` becomes truthy, to give time for the animation to run
     useEffect(() => {
         if (selection) {
-            let handler: number | null = setTimeout(() => {
+            let handler: number | null = window.setTimeout(() => {
                 handler = null;
                 onFinished(selection);
             }, TIMEOUT);

src/components/views/emojipicker/EmojiPicker.tsx

@@ -191,7 +191,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
         this.setState({ filter });
         // Header underlines need to be updated, but updating requires knowing
         // where the categories are, so we wait for a tick.
-        setTimeout(this.updateVisibility, 0);
+        window.setTimeout(this.updateVisibility, 0);
     };
 
     private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean => {

src/components/views/emojipicker/Search.tsx

@@ -31,8 +31,8 @@ class Search extends React.PureComponent<IProps> {
     private inputRef = React.createRef<HTMLInputElement>();
 
     componentDidMount() {
-        // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a setTimeout
+        // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a window.setTimeout
-        setTimeout(() => this.inputRef.current.focus(), 0);
+        window.setTimeout(() => this.inputRef.current.focus(), 0);
     }
 
     private onKeyDown = (ev: React.KeyboardEvent) => {

src/components/views/messages/MImageBody.tsx

@@ -335,7 +335,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         // Add a 150ms timer for blurhash to first appear.
         if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
             this.clearBlurhashTimeout();
-            this.timeout = setTimeout(() => {
+            this.timeout = window.setTimeout(() => {
                 if (!this.state.imgLoaded || !this.state.imgError) {
                     this.setState({
                         placeholder: Placeholder.Blurhash,

src/components/views/messages/TextualBody.tsx

@@ -130,7 +130,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             if (codes.length > 0) {
                 // Do this asynchronously: parsing code takes time and we don't
                 // need to block the DOM update on it.
-                setTimeout(() => {
+                window.setTimeout(() => {
                     if (this.unmounted) return;
                     for (let i = 0; i < codes.length; i++) {
                         this.highlightCode(codes[i]);

src/components/views/rooms/Autocomplete.tsx

@@ -127,7 +127,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         }
 
         return new Promise((resolve) => {
-            this.debounceCompletionsRequest = setTimeout(() => {
+            this.debounceCompletionsRequest = window.setTimeout(() => {
                 resolve(this.processQuery(query, selection));
             }, autocompleteDelay);
         });

src/components/views/rooms/MessageComposer.tsx

@@ -199,7 +199,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                     // that the ScrollPanel listening to the resizeNotifier can
                     // correctly measure it's new height and scroll down to keep
                     // at the bottom if it already is
-                    setTimeout(() => {
+                    window.setTimeout(() => {
                         this.props.resizeNotifier.notifyTimelineHeightChanged();
                     }, 100);
                 }
@@ -395,7 +395,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
     private onRecordingEndingSoon = ({ secondsLeft }) => {
         this.setState({ recordingTimeLeftSeconds: secondsLeft });
-        setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
+        window.setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
     };
 
     private setStickerPickerOpen = (isStickerPickerOpen: boolean) => {

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -99,7 +99,7 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
         // again and this time we want to show the newest breadcrumb because it'll be hidden
         // off screen for the animation.
         this.setState({ doAnimation: false, skipFirst: true });
-        setTimeout(() => this.setState({ doAnimation: true, skipFirst: false }), 0);
+        window.setTimeout(() => this.setState({ doAnimation: true, skipFirst: false }), 0);
     };
 
     private viewRoom = (room: Room, index: number, viaKeyboard = false) => {

src/components/views/rooms/wysiwyg_composer/hooks/useIsFocused.ts

@@ -28,7 +28,7 @@ export function useIsFocused() {
         } else {
             // To avoid a blink when we switch mode between plain text and rich text mode
             // We delay the unfocused action
-            timeoutIDRef.current = setTimeout(() => setIsFocused(false), 100);
+            timeoutIDRef.current = window.setTimeout(() => setIsFocused(false), 100);
         }
     }, [setIsFocused, timeoutIDRef]);
 

src/components/views/rooms/wysiwyg_composer/hooks/utils.ts

@@ -37,7 +37,7 @@ export function focusComposer(
         if (timeoutId.current) {
             clearTimeout(timeoutId.current);
         }
-        timeoutId.current = setTimeout(
+        timeoutId.current = window.setTimeout(
             () => composerElement.current?.focus(),
             200,
         );

src/components/views/settings/ThemeChoicePanel.tsx

@@ -150,7 +150,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
         await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
         this.setState({ customThemeUrl: "", customThemeMessage: { text: _t("Theme added!"), isError: false } });
 
-        this.themeTimer = setTimeout(() => {
+        this.themeTimer = window.setTimeout(() => {
             this.setState({ customThemeMessage: { text: "", isError: false } });
         }, 3000);
     };

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -127,7 +127,7 @@ const SessionManagerTab: React.FC = () => {
     const [expandedDeviceIds, setExpandedDeviceIds] = useState<ExtendedDevice['device_id'][]>([]);
     const [selectedDeviceIds, setSelectedDeviceIds] = useState<ExtendedDevice['device_id'][]>([]);
     const filteredDeviceListRef = useRef<HTMLDivElement>(null);
-    const scrollIntoViewTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+    const scrollIntoViewTimeoutRef = useRef<number>();
 
     const matrixClient = useContext(MatrixClientContext);
     const userId = matrixClient.getUserId();

src/components/views/toasts/VerificationRequestToast.tsx

@@ -57,7 +57,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
     async componentDidMount() {
         const { request } = this.props;
         if (request.timeout && request.timeout > 0) {
-            this.intervalHandle = setInterval(() => {
+            this.intervalHandle = window.setInterval(() => {
                 let { counter } = this.state;
                 counter = Math.max(0, counter - 1);
                 this.setState({ counter });

src/components/views/user-onboarding/UserOnboardingPage.tsx

@@ -55,7 +55,7 @@ export function UserOnboardingPage({ justRegistered = false }: Props) {
     const [showList, setShowList] = useState<boolean>(false);
     useEffect(() => {
         if (initialSyncComplete) {
-            let handler: number | null = setTimeout(() => {
+            let handler: number | null = window.setTimeout(() => {
                 handler = null;
                 setShowList(true);
             }, ANIMATION_DURATION);

src/components/views/voip/CallDuration.tsx

@@ -43,7 +43,7 @@ interface GroupCallDurationProps {
 export const GroupCallDuration: FC<GroupCallDurationProps> = ({ groupCall }) => {
     const [now, setNow] = useState(() => Date.now());
     useEffect(() => {
-        const timer = setInterval(() => setNow(Date.now()), 1000);
+        const timer = window.setInterval(() => setNow(Date.now()), 1000);
         return () => clearInterval(timer);
     }, []);
 

src/dispatcher/dispatcher.ts

@@ -49,7 +49,7 @@ export class MatrixDispatcher extends Dispatcher<ActionPayload> {
             // if you dispatch from within a dispatch, so rather than action
             // handlers having to worry about not calling anything that might
             // then dispatch, we just do dispatches asynchronously.
-            setTimeout(super.dispatch.bind(this, payload), 0);
+            window.setTimeout(super.dispatch.bind(this, payload), 0);
         }
     }
 

src/hooks/spotlight/useDebouncedCallback.ts

@@ -30,7 +30,7 @@ export function useDebouncedCallback<T extends any[]>(
             callback(...params);
         };
         if (enabled !== false) {
-            handle = setTimeout(doSearch, DEBOUNCE_TIMEOUT);
+            handle = window.setTimeout(doSearch, DEBOUNCE_TIMEOUT);
             return () => {
                 if (handle) {
                     clearTimeout(handle);

src/hooks/useTimeout.ts

@@ -30,7 +30,7 @@ export const useTimeout = (handler: Handler, timeoutMs: number) => {
 
     // Set up timer
     useEffect(() => {
-        const timeoutID = setTimeout(() => {
+        const timeoutID = window.setTimeout(() => {
             savedHandler.current();
         }, timeoutMs);
         return () => clearTimeout(timeoutID);
@@ -49,7 +49,7 @@ export const useInterval = (handler: Handler, intervalMs: number) => {
 
     // Set up timer
     useEffect(() => {
-        const intervalID = setInterval(() => {
+        const intervalID = window.setInterval(() => {
             savedHandler.current();
         }, intervalMs);
         return () => clearInterval(intervalID);

src/hooks/useTimeoutToggle.ts

@@ -28,7 +28,7 @@ export const useTimeoutToggle = (defaultValue: boolean, timeoutMs: number) => {
 
     const toggle = () => {
         setValue(!defaultValue);
-        timeoutId.current = setTimeout(() => setValue(defaultValue), timeoutMs);
+        timeoutId.current = window.setTimeout(() => setValue(defaultValue), timeoutMs);
     };
 
     useEffect(() => {

src/hooks/useUserOnboardingContext.ts

@@ -68,7 +68,7 @@ function useUserOnboardingContextValue<T>(defaultValue: T, callback: (cli: Matri
             }
             setValue(await handler(cli));
             if (enabled) {
-                handle = setTimeout(repeater, USER_ONBOARDING_CONTEXT_INTERVAL);
+                handle = window.setTimeout(repeater, USER_ONBOARDING_CONTEXT_INTERVAL);
             }
         };
         repeater().catch(err => logger.warn("could not update user onboarding context", err));

src/models/Call.ts

@@ -377,7 +377,7 @@ export class JitsiCall extends Call {
 
         this.participants = participants;
         if (allExpireAt < Infinity) {
-            this.participantsExpirationTimer = setTimeout(() => this.updateParticipants(), allExpireAt - now);
+            this.participantsExpirationTimer = window.setTimeout(() => this.updateParticipants(), allExpireAt - now);
         }
     }
 
@@ -553,7 +553,7 @@ export class JitsiCall extends Call {
             // Tell others that we're connected, by adding our device to room state
             await this.addOurDevice();
             // Re-add this device every so often so our video member event doesn't become stale
-            this.resendDevicesTimer = setInterval(async () => {
+            this.resendDevicesTimer = window.setInterval(async () => {
                 logger.log(`Resending video member event for ${this.roomId}`);
                 await this.addOurDevice();
             }, (this.STUCK_DEVICE_TIMEOUT_MS * 3) / 4);
@@ -814,7 +814,7 @@ export class ElementCall extends Call {
                 // randomly between 2 and 8 seconds before terminating the call, to
                 // probabilistically reduce event spam. If someone else beats us to it,
                 // this timer will be automatically cleared upon the call's destruction.
-                this.terminationTimer = setTimeout(
+                this.terminationTimer = window.setTimeout(
                     () => this.groupCall.terminate(),
                     Math.random() * 6000 + 2000,
                 );

src/rageshake/rageshake.ts

@@ -154,7 +154,7 @@ export class IndexedDBLogStore {
                 // @ts-ignore
                 this.db = event.target.result;
                 // Periodically flush logs to local storage / indexeddb
-                setInterval(this.flush.bind(this), FLUSH_RATE_MS);
+                window.setInterval(this.flush.bind(this), FLUSH_RATE_MS);
                 resolve();
             };
 

src/stores/OwnBeaconStore.ts

@@ -437,7 +437,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
             return;
         }
 
-        this.locationInterval = setInterval(() => {
+        this.locationInterval = window.setInterval(() => {
             if (!this.lastPublishedPositionTimestamp) {
                 return;
             }

src/stores/room-list/RoomListStore.ts

@@ -228,7 +228,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
             if (!room) {
                 logger.warn(`Live timeline event ${eventPayload.event.getId()} received without associated room`);
                 logger.warn(`Queuing failed room update for retry as a result.`);
-                setTimeout(async () => {
+                window.setTimeout(async () => {
                     const updatedRoom = this.matrixClient.getRoom(roomId);
                     await tryUpdate(updatedRoom);
                 }, 100); // 100ms should be enough for the room to show up

src/theme.ts

@@ -298,7 +298,7 @@ export async function setTheme(theme?: string): Promise<void> {
 
             // In case of theme toggling (white => black => white)
             // Chrome doesn't fire the `load` event when the white theme is selected the second times
-            const intervalId = setInterval(() => {
+            const intervalId = window.setInterval(() => {
                 if (isStyleSheetLoaded()) {
                     clearInterval(intervalId);
                     styleSheet.onload = undefined;

src/utils/MultiInviter.ts

@@ -241,7 +241,7 @@ export default class MultiInviter {
                         break;
                     case "M_LIMIT_EXCEEDED":
                         // we're being throttled so wait a bit & try again
-                        setTimeout(() => {
+                        window.setTimeout(() => {
                             this.doInvite(address, ignoreProfile).then(resolve, reject);
                         }, 5000);
                         return;

src/utils/Timer.ts

@@ -55,7 +55,7 @@ export default class Timer {
             this.setNotStarted();
         } else {
             const delta = this.timeout - elapsed;
-            this.timerHandle = setTimeout(this.onTimeout, delta);
+            this.timerHandle = window.setTimeout(this.onTimeout, delta);
         }
     };
 
@@ -78,7 +78,7 @@ export default class Timer {
     start() {
         if (!this.isRunning()) {
             this.startTs = Date.now();
-            this.timerHandle = setTimeout(this.onTimeout, this.timeout);
+            this.timerHandle = window.setTimeout(this.onTimeout, this.timeout);
         }
         return this;
     }

src/utils/WidgetUtils.ts

@@ -166,7 +166,7 @@ export default class WidgetUtils {
                     resolve();
                 }
             }
-            const timerId = setTimeout(() => {
+            const timerId = window.setTimeout(() => {
                 MatrixClientPeg.get().removeListener(ClientEvent.AccountData, onAccountData);
                 reject(new Error("Timed out waiting for widget ID " + widgetId + " to appear"));
             }, WIDGET_WAIT_TIME);
@@ -221,7 +221,7 @@ export default class WidgetUtils {
                     resolve();
                 }
             }
-            const timerId = setTimeout(() => {
+            const timerId = window.setTimeout(() => {
                 MatrixClientPeg.get().removeListener(RoomStateEvent.Events, onRoomStateEvents);
                 reject(new Error("Timed out waiting for widget ID " + widgetId + " to appear"));
             }, WIDGET_WAIT_TIME);

src/utils/exportUtils/exportJS.js

@@ -27,7 +27,7 @@ function showToast(text) {
     const el = document.getElementById("snackbar");
     el.innerHTML = text;
     el.className = "mx_show";
-    setTimeout(() => {
+    window.setTimeout(() => {
         el.className = el.className.replace("mx_show", "");
     }, 2000);
 }

src/utils/image-media.ts

@@ -77,10 +77,10 @@ export async function createThumbnail(
     }
 
     let canvas: HTMLCanvasElement | OffscreenCanvas;
-    let context: CanvasRenderingContext2D;
+    let context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
     try {
         canvas = new window.OffscreenCanvas(targetWidth, targetHeight);
-        context = canvas.getContext("2d");
+        context = canvas.getContext("2d") as OffscreenCanvasRenderingContext2D;
     } catch (e) {
         // Fallback support for other browsers (Safari and Firefox for now)
         canvas = document.createElement("canvas");
@@ -92,7 +92,7 @@ export async function createThumbnail(
     context.drawImage(element, 0, 0, targetWidth, targetHeight);
 
     let thumbnailPromise: Promise<Blob>;
-    if (window.OffscreenCanvas && canvas instanceof window.OffscreenCanvas) {
+    if (window.OffscreenCanvas && canvas instanceof OffscreenCanvas) {
         thumbnailPromise = canvas.convertToBlob({ type: mimeType });
     } else {
         thumbnailPromise = new Promise<Blob>(resolve => (canvas as HTMLCanvasElement).toBlob(resolve, mimeType));

src/utils/local-room.ts

@@ -102,10 +102,10 @@ export async function waitForRoomReadyAndApplyAfterCreateCallbacks(
             finish();
         };
 
-        const checkRoomStateIntervalHandle = setInterval(() => {
+        const checkRoomStateIntervalHandle = window.setInterval(() => {
             if (isRoomReady(client, localRoom)) finish();
         }, 500);
-        const stopgapTimeoutHandle = setTimeout(stopgapFinish, 5000);
+        const stopgapTimeoutHandle = window.setTimeout(stopgapFinish, 5000);
     });
 }
 

src/utils/membership.ts

@@ -97,7 +97,7 @@ export async function waitForMember(client: MatrixClient, roomId: string, userId
 
         /* We don't want to hang if this goes wrong, so we proceed and hope the other
            user is already in the megolm session */
-        setTimeout(resolve, timeout, false);
+        window.setTimeout(resolve, timeout, false);
     }).finally(() => {
         client.removeListener(RoomStateEvent.NewMember, handler);
     });

src/utils/promise.ts

@@ -18,7 +18,7 @@ limitations under the License.
 // or when the timeout of ms is reached with the value of given timeoutValue
 export async function timeout<T, Y>(promise: Promise<T>, timeoutValue: Y, ms: number): Promise<T | Y> {
     const timeoutPromise = new Promise<T | Y>((resolve) => {
-        const timeoutId = setTimeout(resolve, ms, timeoutValue);
+        const timeoutId = window.setTimeout(resolve, ms, timeoutValue);
         promise.then(() => {
             clearTimeout(timeoutId);
         });

test/ContentMessages-test.ts

@@ -91,7 +91,7 @@ describe("ContentMessages", () => {
             Object.defineProperty(global.Image.prototype, 'src', {
                 // Define the property setter
                 set(src) {
-                    setTimeout(() => this.onload());
+                    window.setTimeout(() => this.onload());
                 },
             });
             Object.defineProperty(global.Image.prototype, 'height', {

test/components/views/location/LocationShareMenu-test.tsx

@@ -352,7 +352,7 @@ describe('<LocationShareMenu />', () => {
             // @ts-ignore
             mocked(SettingsStore.watchSetting).mockImplementation((featureName, roomId, callback) => {
                 callback(featureName, roomId, SettingLevel.DEVICE, '', '');
-                setTimeout(() => {
+                window.setTimeout(() => {
                     callback(featureName, roomId, SettingLevel.DEVICE, '', '');
                 }, 1000);
             });

test/components/views/settings/Notifications-test.tsx

@@ -54,7 +54,7 @@ const encryptedGroupRule = { "conditions": [{ "kind": "event_match", "key": "typ
 // eslint-disable-next-line max-len
 const pushRules: IPushRules = { "global": { "underride": [{ "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.call.invite" }], "actions": ["notify", { "set_tweak": "sound", "value": "ring" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.call", "default": true, "enabled": true }, oneToOneRule, encryptedOneToOneRule, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.message" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.message", "default": true, "enabled": true }, encryptedGroupRule, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "im.vector.modular.widgets" }, { "kind": "event_match", "key": "content.type", "pattern": "jitsi" }, { "kind": "event_match", "key": "state_key", "pattern": "*" }], "actions": ["notify", { "set_tweak": "highlight", "value": false }], "rule_id": ".im.vector.jitsi", "default": true, "enabled": true }], "sender": [], "room": [{ "actions": ["dont_notify"], "rule_id": "!zJPyWqpMorfCcWObge:matrix.org", "default": false, "enabled": true }], "content": [{ "actions": ["notify", { "set_tweak": "highlight", "value": false }], "pattern": "banana", "rule_id": "banana", "default": false, "enabled": true }, { "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight" }], "pattern": "kadev1", "rule_id": ".m.rule.contains_user_name", "default": true, "enabled": true }], "override": [{ "conditions": [], "actions": ["dont_notify"], "rule_id": ".m.rule.master", "default": true, "enabled": false }, { "conditions": [{ "kind": "event_match", "key": "content.msgtype", "pattern": "m.notice" }], "actions": ["dont_notify"], "rule_id": ".m.rule.suppress_notices", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.member" }, { "kind": "event_match", "key": "content.membership", "pattern": "invite" }, { "kind": "event_match", "key": "state_key", "pattern": "@kadev1:matrix.org" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.invite_for_me", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.member" }], "actions": ["dont_notify"], "rule_id": ".m.rule.member_event", "default": true, "enabled": true }, { "conditions": [{ "kind": "contains_display_name" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight" }], "rule_id": ".m.rule.contains_display_name", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "content.body", "pattern": "@room" }, { "kind": "sender_notification_permission", "key": "room" }], "actions": ["notify", { "set_tweak": "highlight", "value": true }], "rule_id": ".m.rule.roomnotif", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.tombstone" }, { "kind": "event_match", "key": "state_key", "pattern": "" }], "actions": ["notify", { "set_tweak": "highlight", "value": true }], "rule_id": ".m.rule.tombstone", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.reaction" }], "actions": ["dont_notify"], "rule_id": ".m.rule.reaction", "default": true, "enabled": true }] }, "device": {} } as IPushRules;
 
-const flushPromises = async () => await new Promise(resolve => setTimeout(resolve));
+const flushPromises = async () => await new Promise(resolve => window.setTimeout(resolve));
 
 describe('<Notifications />', () => {
     const getComponent = () => render(<Notifications />);

test/setup/setupManualMocks.ts

@@ -21,7 +21,7 @@ import fetch from 'node-fetch';
 // jest 27 removes setImmediate from jsdom
 // polyfill until setImmediate use in client can be removed
 // @ts-ignore - we know the contract is wrong. That's why we're stubbing it.
-global.setImmediate = callback => setTimeout(callback, 0);
+global.setImmediate = callback => window.setTimeout(callback, 0);
 
 // Stub ResizeObserver
 // @ts-ignore - we know it's a duplicate (that's why we're stubbing it)

test/test-utils/beacon.ts

@@ -179,7 +179,7 @@ export const watchPositionMockImplementation = (delays: number[], errorCodes: nu
         let totalDelay = 0;
         delays.map((delayMs, index) => {
             totalDelay += delayMs;
-            const timeout = setTimeout(() => {
+            const timeout = window.setTimeout(() => {
                 if (errorCodes[index]) {
                     error(getMockGeolocationPositionError(errorCodes[index], 'error message'));
                 } else {

test/test-utils/utilities.ts

@@ -48,7 +48,7 @@ export function untilDispatch(
         let timeoutId;
         // set a timeout handler if needed
         if (timeout > 0) {
-            timeoutId = setTimeout(() => {
+            timeoutId = window.setTimeout(() => {
                 if (!fulfilled) {
                     reject(new Error(`untilDispatch: timed out at ${callerLine}`));
                     fulfilled = true;
@@ -92,7 +92,7 @@ export function untilEmission(
         let timeoutId;
         // set a timeout handler if needed
         if (timeout > 0) {
-            timeoutId = setTimeout(() => {
+            timeoutId = window.setTimeout(() => {
                 if (!fulfilled) {
                     reject(new Error(`untilEmission: timed out at ${callerLine}`));
                     fulfilled = true;
@@ -134,7 +134,7 @@ const findByTagAndAttr = (attr: string) =>
 
 export const findByTagAndTestId = findByTagAndAttr('data-test-id');
 
-export const flushPromises = async () => await new Promise(resolve => setTimeout(resolve));
+export const flushPromises = async () => await new Promise(resolve => window.setTimeout(resolve));
 
 // with jest's modern fake timers process.nextTick is also mocked,
 // flushing promises in the normal way then waits for some advancement

test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts

@@ -130,7 +130,7 @@ describe("startNewVoiceBroadcastRecording", () => {
                     _content: any,
                     _stateKey = "",
                 ): Promise<ISendEventResponse> => {
-                    setTimeout(() => {
+                    window.setTimeout(() => {
                         // emit state events after resolving the promise
                         room.currentState.setStateEvents([otherEvent]);
                         room.currentState.setStateEvents([infoEvent]);

yarn.lock

@@ -2451,10 +2451,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.26.tgz#239e19f8b4ea1a9eb710528061c1d733dc561996"
   integrity sha512-0b+utRBSYj8L7XAp0d+DX7lI4cSmowNaaTkk6/1SKzbKkG+doLuPusB9EOvzLJ8ahJSk03bTLIL6cWaEd4dBKA==
 
-"@types/node@^14.18.28":
+"@types/node@^16":
-  version "14.18.28"
+  version "16.18.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.28.tgz#ddb82da2fff476a8e827e8773c84c19d9c235278"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.3.tgz#d7f7ba828ad9e540270f01ce00d391c54e6e0abc"
-  integrity sha512-CK2fnrQlIgKlCV3N2kM+Gznb5USlwA1KFX3rJVHmgVk6NJxFPuQ86pAcvKnu37IA4BGlSRz7sEE1lHL1aLZ/eQ==
+  integrity sha512-jh6m0QUhIRcZpNv7Z/rpN+ZWXOicUUQbSoWks7Htkbb9IjFQj4kzcX/xFCkjstCj5flMsN8FiSvt+q+Tcs4Llg==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -9469,10 +9469,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@4.8.4:
+typescript@4.9.3:
-  version "4.8.4"
+  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"
-  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
+  integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==
 
 ua-parser-js@^0.7.30:
   version "0.7.31"