Correctly specify types for modern React contexts

babel.config.js

@@ -10,15 +10,15 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: ["@babel/plugin-proposal-class-properties"],
             },
         ],
-        "@babel/preset-typescript",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
         "@babel/preset-react",
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-proposal-numeric-separator",
-        "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-object-rest-spread",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",

src/ContentMessages.ts

@@ -55,9 +55,9 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import UploadFailureDialog from "./components/views/dialogs/UploadFailureDialog";
 import UploadConfirmDialog from "./components/views/dialogs/UploadConfirmDialog";
 import { createThumbnail } from "./utils/image-media";
-import { attachMentions, attachRelation } from "./components/views/rooms/SendMessageComposer";
 import { doMaybeLocalRoomAction } from "./utils/local-room";
 import { SdkContextClass } from "./contexts/SDKContext";
+import { attachMentions, attachRelation } from "./components/views/rooms/SendMessageComposer";
 
 // scraped out of a macOS hidpi (5660ppm) screenshot png
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre

src/DecryptionFailureTracker.ts

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Error as ErrorEvent } from "@matrix-org/analytics-events/types/typescript/Error";
-
+import type { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
+import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import type { Error as ErrorEvent } from "@matrix-org/analytics-events/types/typescript/Error";
 import { PosthogAnalytics } from "./PosthogAnalytics";
 
 export class DecryptionFailure {

src/HtmlUtils.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 */
 
 import React, { LegacyRef, ReactElement, ReactNode } from "react";
-import sanitizeHtml from "sanitize-html";
+import sanitizeHtml, { IOptions } from "sanitize-html";
 import classNames from "classnames";
 import EMOJIBASE_REGEX from "emojibase-regex";
 import { merge } from "lodash";
@@ -36,7 +36,6 @@ import {
     ELEMENT_URL_PATTERN,
     options as linkifyMatrixOptions,
 } from "./linkify-matrix";
-import { IExtendedSanitizeOptions } from "./@types/sanitize-html";
 import SettingsStore from "./settings/SettingsStore";
 import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks";
 import { getEmojiFromUnicode } from "./emoji";
@@ -120,7 +119,7 @@ export function isUrlPermitted(inputUrl: string): boolean {
     }
 }
 
-const transformTags: IExtendedSanitizeOptions["transformTags"] = {
+const transformTags: IOptions["transformTags"] = {
     // custom to matrix
     // add blank targets to all hyperlinks except vector URLs
     "a": function (tagName: string, attribs: sanitizeHtml.Attributes) {
@@ -231,7 +230,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = {
     },
 };
 
-const sanitizeHtmlParams: IExtendedSanitizeOptions = {
+const sanitizeHtmlParams: IOptions = {
     allowedTags: [
         "font", // custom to matrix for IRC-style font coloring
         "del", // for markdown
@@ -297,7 +296,7 @@ const sanitizeHtmlParams: IExtendedSanitizeOptions = {
 };
 
 // this is the same as the above except with less rewriting
-const composerSanitizeHtmlParams: IExtendedSanitizeOptions = {
+const composerSanitizeHtmlParams: IOptions = {
     ...sanitizeHtmlParams,
     transformTags: {
         "code": transformTags["code"],
@@ -306,7 +305,7 @@ const composerSanitizeHtmlParams: IExtendedSanitizeOptions = {
 };
 
 // reduced set of allowed tags to avoid turning topics into Myspace
-const topicSanitizeHtmlParams: IExtendedSanitizeOptions = {
+const topicSanitizeHtmlParams: IOptions = {
     ...sanitizeHtmlParams,
     allowedTags: [
         "font", // custom to matrix for IRC-style font coloring

src/PosthogAnalytics.ts

@@ -17,17 +17,17 @@ limitations under the License.
 import posthog, { CaptureOptions, PostHog, Properties } from "posthog-js";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { UserProperties } from "@matrix-org/analytics-events/types/typescript/UserProperties";
-import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
 
+import type { UserProperties } from "@matrix-org/analytics-events/types/typescript/UserProperties";
+import type { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
 import PlatformPeg from "./PlatformPeg";
 import SdkConfig from "./SdkConfig";
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import SettingsStore from "./settings/SettingsStore";
-import { ScreenName } from "./PosthogTrackers";
-import { ActionPayload } from "./dispatcher/payloads";
+import type { ScreenName } from "./PosthogTrackers";
+import type { ActionPayload } from "./dispatcher/payloads";
 import { Action } from "./dispatcher/actions";
-import { SettingUpdatedPayload } from "./dispatcher/payloads/SettingUpdatedPayload";
+import type { SettingUpdatedPayload } from "./dispatcher/payloads/SettingUpdatedPayload";
 import dis from "./dispatcher/dispatcher";
 import { Layout } from "./settings/enums/Layout";
 

src/PosthogTrackers.ts

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import { PureComponent, SyntheticEvent } from "react";
-import { WebScreen as ScreenEvent } from "@matrix-org/analytics-events/types/typescript/WebScreen";
-import { Interaction as InteractionEvent } from "@matrix-org/analytics-events/types/typescript/Interaction";
 
+import type { WebScreen as ScreenEvent } from "@matrix-org/analytics-events/types/typescript/WebScreen";
+import type { Interaction as InteractionEvent } from "@matrix-org/analytics-events/types/typescript/Interaction";
 import PageType from "./PageTypes";
 import Views from "./Views";
 import { PosthogAnalytics } from "./PosthogAnalytics";

src/SlashCommands.tsx

@@ -18,13 +18,13 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { User } from "matrix-js-sdk/src/models/user";
 import { Direction } from "matrix-js-sdk/src/models/event-timeline";
 import * as ContentHelpers from "matrix-js-sdk/src/content-helpers";
 import { logger } from "matrix-js-sdk/src/logger";
 import { IContent } from "matrix-js-sdk/src/models/event";
 import { MRoomTopicEventContent } from "matrix-js-sdk/src/@types/topic";
 
+import type { User } from "matrix-js-sdk/src/models/user";
 import dis from "./dispatcher/dispatcher";
 import { _t, _td, UserFriendlyError } from "./languageHandler";
 import Modal from "./Modal";

src/Unread.ts

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Room } from "matrix-js-sdk/src/models/room";
-import { Thread } from "matrix-js-sdk/src/models/thread";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { M_BEACON } from "matrix-js-sdk/src/@types/beacon";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
+import type { Room } from "matrix-js-sdk/src/models/room";
+import type { Thread } from "matrix-js-sdk/src/models/thread";
+import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import shouldHideEvent from "./shouldHideEvent";
 import { haveRendererForEvent } from "./events/EventTileFactory";
 import SettingsStore from "./settings/SettingsStore";

src/components/structures/EmbeddedPage.tsx

@@ -45,6 +45,7 @@ interface IState {
 
 export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
     private unmounted = false;
     private dispatcherRef: string | null = null;
 

src/components/structures/FilePanel.tsx

@@ -52,6 +52,7 @@ interface IState {
  */
 class FilePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.

src/components/structures/LeftPanel.tsx

@@ -34,7 +34,7 @@ import UIStore from "../../stores/UIStore";
 import { IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
 import RoomListHeader from "../views/rooms/RoomListHeader";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
+import RoomListStore from "../../stores/room-list/RoomListStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import IndicatorScrollbar from "./IndicatorScrollbar";
 import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
@@ -45,6 +45,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton";
 import PosthogTrackers from "../../PosthogTrackers";
 import PageType from "../../PageTypes";
 import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
+import { RoomListStoreEvent } from "../../stores/room-list/Interface";
 
 interface IProps {
     isMinimized: boolean;
@@ -77,7 +78,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        RoomListStore.instance.on(RoomListStoreEvent.ListsUpdate, this.onBreadcrumbsUpdate);
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
     }
 
@@ -97,7 +98,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     public componentWillUnmount(): void {
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        RoomListStore.instance.off(RoomListStoreEvent.ListsUpdate, this.onBreadcrumbsUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
         UIStore.instance.stopTrackingElementDimensions("ListContainer");
         UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);

src/components/structures/MessagePanel.tsx

@@ -214,7 +214,7 @@ interface IReadReceiptForUser {
  */
 export default class MessagePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public static defaultProps = {
         disableGrouping: false,

src/components/structures/NotificationPanel.tsx

@@ -40,6 +40,7 @@ interface IState {
  */
 export default class NotificationPanel extends React.PureComponent<IProps, IState> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private card = React.createRef<HTMLDivElement>();
 

src/components/structures/RightPanel.tsx

@@ -72,7 +72,7 @@ interface IState {
 
 export default class RightPanel extends React.Component<Props, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);

src/components/structures/RoomStatusBar.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 
 import React, { ReactNode } from "react";
 import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { SyncState, ISyncStateData } from "matrix-js-sdk/src/sync";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
+import { ClientEvent, MatrixError } from "matrix-js-sdk/src/matrix";
 
 import { Icon as WarningIcon } from "../../../res/img/feather-customised/warning-triangle.svg";
 import { _t, _td } from "../../languageHandler";
@@ -82,15 +82,16 @@ interface IProps {
 }
 
 interface IState {
-    syncState: SyncState;
-    syncStateData: ISyncStateData;
+    syncState: SyncState | null;
+    syncStateData: ISyncStateData | null;
     unsentMessages: MatrixEvent[];
     isResending: boolean;
 }
 
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
     private unmounted = false;
     public static contextType = MatrixClientContext;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: typeof MatrixClientContext) {
         super(props, context);
@@ -105,8 +106,8 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
 
     public componentDidMount(): void {
         const client = this.context;
-        client.on("sync", this.onSyncStateChange);
-        client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+        client.on(ClientEvent.Sync, this.onSyncStateChange);
+        client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
 
         this.checkSize();
     }
@@ -120,19 +121,19 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = this.context;
         if (client) {
-            client.removeListener("sync", this.onSyncStateChange);
-            client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated);
+            client.removeListener(ClientEvent.Sync, this.onSyncStateChange);
+            client.removeListener(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
         }
     }
 
-    private onSyncStateChange = (state: SyncState, prevState: SyncState, data: ISyncStateData): void => {
+    private onSyncStateChange = (state: SyncState, prevState: SyncState | null, data?: ISyncStateData): void => {
         if (state === "SYNCING" && prevState === "SYNCING") {
             return;
         }
         if (this.unmounted) return;
         this.setState({
             syncState: state,
-            syncStateData: data,
+            syncStateData: data ?? null,
         });
     };
 

src/components/structures/RoomView.tsx

@@ -382,7 +382,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private roomViewBody = createRef<HTMLDivElement>();
 
     public static contextType = SDKContext;
-    public context!: React.ContextType<typeof SDKContext>;
+    public declare context: React.ContextType<typeof SDKContext>;
 
     public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);

src/components/structures/SpaceRoomView.tsx

@@ -46,7 +46,6 @@ import {
     shouldShowSpaceSettings,
     showAddExistingRooms,
     showCreateNewRoom,
-    showCreateNewSubspace,
     showSpaceInvite,
     showSpaceSettings,
 } from "../../utils/space";
@@ -77,6 +76,7 @@ import MainSplit from "./MainSplit";
 import RightPanel from "./RightPanel";
 import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
+import { showCreateNewSubspace } from "../views/dialogs/CreateSubspaceDialog";
 
 interface IProps {
     space: Room;
@@ -616,7 +616,7 @@ const SpaceSetupPrivateInvite: React.FC<{
 
 export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private readonly dispatcherRef: string;
 

src/components/structures/ThreadView.tsx

@@ -77,7 +77,7 @@ interface IState {
 
 export default class ThreadView extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private dispatcherRef: string | null = null;
     private readonly layoutWatcherRef: string;

src/components/structures/TimelinePanel.tsx

@@ -233,7 +233,7 @@ interface IEventIndexOpts {
  */
 class TimelinePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     // a map from room id to read marker event timestamp
     public static roomReadMarkerTsMap: Record<string, number> = {};
@@ -265,7 +265,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
-        this.context = context;
 
         debuglog("mounting");