Correctly specify types for modern React contexts

babel.config.js

@@ -1,5 +1,8 @@
 module.exports = {
     sourceMaps: "inline",
+    assumptions: {
+        setPublicClassFields: true,
+    },
     presets: [
         [
             "@babel/preset-env",
@@ -10,15 +13,15 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: ["@babel/plugin-proposal-class-properties"],
             },
         ],
-        "@babel/preset-typescript",
         "@babel/preset-react",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
     ],
     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/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/MessagePanel.tsx

@@ -213,7 +213,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

@@ -61,7 +61,7 @@ interface IState {
 
 export default class RightPanel extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, 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 { _t, _td } from "../../languageHandler";
 import Resend from "../../Resend";
@@ -89,6 +89,7 @@ interface IState {
 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);
@@ -103,8 +104,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();
     }
@@ -118,8 +119,8 @@ 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);
         }
     }
 

src/components/structures/RoomView.tsx

@@ -380,7 +380,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

@@ -632,7 +632,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 creator: string;
     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;
     private readonly layoutWatcherRef: string;

src/components/structures/TimelinePanel.tsx

@@ -229,7 +229,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> = {};
@@ -260,7 +260,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");
 

src/components/structures/UserMenu.tsx

@@ -84,7 +84,7 @@ const below = (rect: PartialDOMRect): MenuProps => {
 
 export default class UserMenu extends React.Component<IProps, IState> {
     public static contextType = SDKContext;
-    public context!: React.ContextType<typeof SDKContext>;
+    public declare context: React.ContextType<typeof SDKContext>;
 
     private dispatcherRef: string;
     private themeWatcherRef: string;
@@ -94,7 +94,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
-        this.context = context;
         this.state = {
             contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),

src/components/views/context_menus/MessageContextMenu.tsx

@@ -129,7 +129,7 @@ interface IState {
 
 export default class MessageContextMenu extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private reactButtonRef = createRef<any>(); // XXX Ref to a functional component
 

src/components/views/elements/AppTile.tsx

@@ -106,7 +106,7 @@ interface IState {
 
 export default class AppTile extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context: ContextType<typeof MatrixClientContext>;
+    public declare context: ContextType<typeof MatrixClientContext>;
 
     public static defaultProps: Partial<IProps> = {
         waitForIframeLoad: true,

src/components/views/elements/EventListSummary.tsx

@@ -80,7 +80,7 @@ const SEP = ",";
 
 export default class EventListSummary extends React.Component<IProps> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public static defaultProps = {
         summaryLength: 1,

src/components/views/elements/PersistentApp.tsx

@@ -32,7 +32,7 @@ interface IProps {
 
 export default class PersistentApp extends React.Component<IProps> {
     public static contextType = MatrixClientContext;
-    public context: ContextType<typeof MatrixClientContext>;
+    public declare context: ContextType<typeof MatrixClientContext>;
     private room: Room;
 
     public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {

src/components/views/elements/ReplyChain.tsx

@@ -75,7 +75,7 @@ interface IState {
 // be low as each event being loaded (after the first) is triggered by an explicit user action.
 export default class ReplyChain extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private unmounted = false;
     private room: Room;

src/components/views/elements/RoomAliasField.tsx

@@ -40,7 +40,7 @@ interface IState {
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 export default class RoomAliasField extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private fieldRef = createRef<Field>();
 

src/components/views/emojipicker/ReactionPicker.tsx

@@ -39,7 +39,7 @@ interface IState {
 
 class ReactionPicker extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);

src/components/views/location/LocationPicker.tsx

@@ -51,7 +51,7 @@ const isSharingOwnLocation = (shareType: LocationShareType): boolean =>
 
 class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
     private map?: maplibregl.Map;
     private geolocate?: maplibregl.GeolocateControl;
     private marker?: maplibregl.Marker;

src/components/views/messages/MAudioBody.tsx

@@ -38,7 +38,7 @@ interface IState {
 
 export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IBodyProps) {
         super(props);

src/components/views/messages/MFileBody.tsx

@@ -107,7 +107,7 @@ interface IState {
 
 export default class MFileBody 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 = {
         showGenericPlaceholder: true,

src/components/views/messages/MImageBody.tsx

@@ -64,7 +64,7 @@ interface IState {
 
 export default class MImageBody extends React.Component<IBodyProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private unmounted = true;
     private image = createRef<HTMLImageElement>();

src/components/views/messages/MLocationBody.tsx

@@ -42,7 +42,7 @@ interface IState {
 
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private unmounted = false;
     private mapId: string;

src/components/views/messages/MPollBody.tsx

@@ -140,7 +140,7 @@ export function launchPollEditor(mxEvent: MatrixEvent, getRelationsForEvent?: Ge
 
 export default class MPollBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
     private seenEventIds: string[] = []; // Events we have already seen
 
     public constructor(props: IBodyProps) {

src/components/views/messages/MVideoBody.tsx

@@ -42,7 +42,7 @@ interface IState {
 
 export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private videoRef = React.createRef<HTMLVideoElement>();
     private sizeWatcher: string;

src/components/views/messages/MessageActionBar.tsx

@@ -303,6 +303,7 @@ interface IMessageActionBarProps {
 
 export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public componentDidMount(): void {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {

src/components/views/messages/MessageEvent.tsx

@@ -87,7 +87,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
     private evTypes = new Map<string, React.ComponentType<Partial<IBodyProps>>>(baseEvTypes.entries());
 
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);

src/components/views/messages/ReactionsRow.tsx

@@ -79,11 +79,10 @@ interface IState {
 
 export default class ReactionsRow extends React.PureComponent<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
-        this.context = context;
 
         this.state = {
             myReactions: this.getMyReactions(),

src/components/views/messages/ReactionsRowButton.tsx

@@ -47,7 +47,7 @@ interface IState {
 
 export default class ReactionsRowButton extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public state = {
         tooltipRendered: false,

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -35,7 +35,7 @@ interface IProps {
 
 export default class ReactionsRowButtonTooltip extends React.PureComponent<IProps> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public render(): React.ReactNode {
         const { content, reactionEvents, mxEvent, visible } = this.props;

src/components/views/messages/TextualBody.tsx

@@ -68,7 +68,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
     private tooltips: Element[] = [];
 
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IBodyProps) {
         super(props);

src/components/views/messages/TextualEvent.tsx

@@ -26,6 +26,7 @@ interface IProps {
 
 export default class TextualEvent extends React.Component<IProps> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public render(): React.ReactNode {
         const text = TextForEvent.textForEvent(this.props.mxEvent, true, this.context?.showHiddenEvents);

src/components/views/right_panel/TimelineCard.tsx

@@ -72,6 +72,7 @@ interface IState {
 
 export default class TimelineCard extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private dispatcherRef: string;
     private layoutWatcherRef: string;

src/components/views/room_settings/AliasSettings.tsx

@@ -97,7 +97,7 @@ interface IState {
 
 export default class AliasSettings extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context: ContextType<typeof MatrixClientContext>;
+    public declare context: ContextType<typeof MatrixClientContext>;
 
     public static defaultProps = {
         canSetAliases: false,

src/components/views/rooms/Autocomplete.tsx

@@ -56,6 +56,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     private containerRef = createRef<HTMLDivElement>();
 
     public static contextType = RoomContext;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IProps) {
         super(props);