Step 1: Remove all usage of @replaceableComponent

src/components/views/messages/DateSeparator.tsx

@@ -21,7 +21,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from '../../../languageHandler';
 import { formatFullDateNoTime } from '../../../DateUtils';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import { Action } from '../../../dispatcher/actions';
@@ -61,7 +60,6 @@ interface IState {
     jumpToDateEnabled: boolean;
 }
 
-@replaceableComponent("views.messages.DateSeparator")
 export default class DateSeparator extends React.Component<IProps, IState> {
     private settingWatcherRef = null;
 

src/components/views/messages/DownloadActionButton.tsx

@@ -22,7 +22,6 @@ import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
 import Spinner from "../elements/Spinner";
 import { _t, _td } from "../../../languageHandler";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { FileDownloader } from "../../../utils/FileDownloader";
 
 interface IProps {
@@ -40,7 +39,6 @@ interface IState {
     tooltip: string;
 }
 
-@replaceableComponent("views.messages.DownloadActionButton")
 export default class DownloadActionButton extends React.PureComponent<IProps, IState> {
     private downloader = new FileDownloader();
 

src/components/views/messages/EditHistoryMessage.tsx

@@ -26,7 +26,6 @@ import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import RedactedBody from "./RedactedBody";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from "../elements/AccessibleButton";
 import ConfirmAndWaitRedactDialog from "../dialogs/ConfirmAndWaitRedactDialog";
 import ViewSource from "../../structures/ViewSource";
@@ -50,7 +49,6 @@ interface IState {
     sendStatus: EventStatus;
 }
 
-@replaceableComponent("views.messages.EditHistoryMessage")
 export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
     private content = createRef<HTMLDivElement>();
     private pills: Element[] = [];

src/components/views/messages/MAudioBody.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Playback } from "../../../audio/Playback";
 import InlineSpinner from '../elements/InlineSpinner';
 import { _t } from "../../../languageHandler";
@@ -35,7 +34,6 @@ interface IState {
     playback?: Playback;
 }
 
-@replaceableComponent("views.messages.MAudioBody")
 export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/messages/MFileBody.tsx

@@ -21,7 +21,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import AccessibleButton from "../elements/AccessibleButton";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { presentableTextForFile } from "../../../utils/FileUtils";
@@ -106,7 +105,6 @@ interface IState {
     decryptedBlob?: Blob;
 }
 
-@replaceableComponent("views.messages.MFileBody")
 export default class MFileBody extends React.Component<IProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/messages/MImageBody.tsx

@@ -28,7 +28,6 @@ import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import Spinner from '../elements/Spinner';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Media, mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD, createThumbnail } from "../../../ContentMessages";
 import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent';
@@ -60,7 +59,6 @@ interface IState {
     placeholder: Placeholder;
 }
 
-@replaceableComponent("views.messages.MImageBody")
 export default class MImageBody extends React.Component<IBodyProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -22,14 +22,12 @@ import WidgetStore from "../../../stores/WidgetStore";
 import EventTileBubble from "./EventTileBubble";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     mxEvent: MatrixEvent;
     timestamp?: JSX.Element;
 }
 
-@replaceableComponent("views.messages.MJitsiWidgetEvent")
 export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
     constructor(props) {
         super(props);

src/components/views/messages/MKeyVerificationConclusion.tsx

@@ -28,7 +28,6 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import { getNameForEventRoom, userLabelForEventRoom } from '../../../utils/KeyVerificationStateObserver';
 import EventTileBubble from "./EventTileBubble";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     /* the MatrixEvent to show */
@@ -36,7 +35,6 @@ interface IProps {
     timestamp?: JSX.Element;
 }
 
-@replaceableComponent("views.messages.MKeyVerificationConclusion")
 export default class MKeyVerificationConclusion extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);

src/components/views/messages/MKeyVerificationRequest.tsx

@@ -24,7 +24,6 @@ import { _t } from '../../../languageHandler';
 import { getNameForEventRoom, userLabelForEventRoom } from '../../../utils/KeyVerificationStateObserver';
 import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import EventTileBubble from "./EventTileBubble";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from '../elements/AccessibleButton';
 import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
 
@@ -33,7 +32,6 @@ interface IProps {
     timestamp?: JSX.Element;
 }
 
-@replaceableComponent("views.messages.MKeyVerificationRequest")
 export default class MKeyVerificationRequest extends React.Component<IProps> {
     public componentDidMount() {
         const request = this.props.mxEvent.verificationRequest;

src/components/views/messages/MLocationBody.tsx

@@ -24,7 +24,6 @@ import {
 } from 'matrix-js-sdk/src/@types/location';
 import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
@@ -47,7 +46,6 @@ interface IState {
     error: Error;
 }
 
-@replaceableComponent("views.messages.MLocationBody")
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;

src/components/views/messages/MPollBody.tsx

@@ -32,7 +32,6 @@ import {
 import { RelatedRelations } from "matrix-js-sdk/src/models/related-relations";
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Modal from '../../../Modal';
 import { IBodyProps } from "./IBodyProps";
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
@@ -210,7 +209,6 @@ export function launchPollEditor(mxEvent: MatrixEvent, getRelationsForEvent?: Ge
     }
 }
 
-@replaceableComponent("views.messages.MPollBody")
 export default class MPollBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;

src/components/views/messages/MStickerBody.tsx

@@ -17,11 +17,9 @@ limitations under the License.
 import React from 'react';
 
 import MImageBody from './MImageBody';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
 import Tooltip from "../elements/Tooltip";
 
-@replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
     // Mostly empty to prevent default behaviour of MImageBody
     protected onClick = (ev: React.MouseEvent) => {

src/components/views/messages/MVideoBody.tsx

@@ -21,7 +21,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
@@ -40,7 +39,6 @@ interface IState {
     blurhashUrl: string;
 }
 
-@replaceableComponent("views.messages.MVideoBody")
 export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/messages/MVoiceMessageBody.tsx

@@ -16,14 +16,12 @@ limitations under the License.
 
 import React from "react";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import InlineSpinner from '../elements/InlineSpinner';
 import { _t } from "../../../languageHandler";
 import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import MAudioBody from "./MAudioBody";
 import MFileBody from "./MFileBody";
 
-@replaceableComponent("views.messages.MVoiceMessageBody")
 export default class MVoiceMessageBody extends MAudioBody {
     // A voice message is an audio file but rendered in a special way.
     public render() {

src/components/views/messages/MVoiceOrAudioBody.tsx

@@ -17,12 +17,10 @@ limitations under the License.
 import React from "react";
 
 import MAudioBody from "./MAudioBody";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import MVoiceMessageBody from "./MVoiceMessageBody";
 import { IBodyProps } from "./IBodyProps";
 import { isVoiceMessage } from "../../../utils/EventUtils";
 
-@replaceableComponent("views.messages.MVoiceOrAudioBody")
 export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> {
     public render() {
         if (!this.props.forExport && isVoiceMessage(this.props.mxEvent)) {

src/components/views/messages/MessageActionBar.tsx

@@ -29,7 +29,6 @@ import { isContentActionable, canEditContent, editEvent } from '../../../utils/E
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import Toolbar from "../../../accessibility/Toolbar";
 import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import MessageContextMenu, { canCancel } from "../context_menus/MessageContextMenu";
 import Resend from "../../../Resend";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -170,7 +169,6 @@ interface IMessageActionBarProps {
     ) => Relations;
 }
 
-@replaceableComponent("views.messages.MessageActionBar")
 export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
     public static contextType = RoomContext;
 

src/components/views/messages/MessageEvent.tsx

@@ -25,7 +25,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { Mjolnir } from "../../../mjolnir/Mjolnir";
 import RedactedBody from "./RedactedBody";
 import UnknownBody from "./UnknownBody";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IMediaBody } from "./IMediaBody";
 import { IOperableEventTile } from "../context_menus/MessageContextMenu";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
@@ -45,7 +44,6 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed"> {
     isSeeingThroughMessageHiddenForModeration?: boolean;
 }
 
-@replaceableComponent("views.messages.MessageEvent")
 export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
     private body: React.RefObject<React.Component | IOperableEventTile> = createRef();
     private mediaHelper: MediaEventHelper;

src/components/views/messages/MessageTimestamp.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 
 import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from '../../../DateUtils';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     ts: number;
@@ -28,7 +27,6 @@ interface IProps {
     showRelative?: boolean;
 }
 
-@replaceableComponent("views.messages.MessageTimestamp")
 export default class MessageTimestamp extends React.Component<IProps> {
     public render() {
         const date = new Date(this.props.ts);

src/components/views/messages/MjolnirBody.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from '../elements/AccessibleButton';
 
 interface IProps {
@@ -26,7 +25,6 @@ interface IProps {
     onMessageAllowed: () => void;
 }
 
-@replaceableComponent("views.messages.MjolnirBody")
 export default class MjolnirBody extends React.Component<IProps> {
     private onAllowClick = (e: React.MouseEvent): void => {
         e.preventDefault();

src/components/views/messages/ReactionsRow.tsx

@@ -21,7 +21,6 @@ import { Relations, RelationsEvent } from "matrix-js-sdk/src/models/relations";
 
 import { _t } from '../../../languageHandler';
 import { isContentActionable } from '../../../utils/EventUtils';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import ContextMenu, { aboveLeftOf, useContextMenu } from "../../structures/ContextMenu";
 import ReactionPicker from "../emojipicker/ReactionPicker";
@@ -74,7 +73,6 @@ interface IState {
     showAll: boolean;
 }
 
-@replaceableComponent("views.messages.ReactionsRow")
 export default class ReactionsRow extends React.PureComponent<IProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/messages/ReactionsRowButton.tsx

@@ -21,7 +21,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import dis from "../../../dispatcher/dispatcher";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -46,7 +45,6 @@ interface IState {
     tooltipVisible: boolean;
 }
 
-@replaceableComponent("views.messages.ReactionsRowButton")
 export default class ReactionsRowButton extends React.PureComponent<IProps, IState> {
     static contextType = MatrixClientContext;
 

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -20,7 +20,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { unicodeToShortcode } from '../../../HtmlUtils';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
@@ -34,7 +33,6 @@ interface IProps {
     visible: boolean;
 }
 
-@replaceableComponent("views.messages.ReactionsRowButtonTooltip")
 export default class ReactionsRowButtonTooltip extends React.PureComponent<IProps> {
     static contextType = MatrixClientContext;
 

src/components/views/messages/RoomAvatarEvent.tsx

@@ -23,7 +23,6 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
 import RoomAvatar from "../avatars/RoomAvatar";
 import ImageView from "../elements/ImageView";
@@ -33,7 +32,6 @@ interface IProps {
     mxEvent: MatrixEvent;
 }
 
-@replaceableComponent("views.messages.RoomAvatarEvent")
 export default class RoomAvatarEvent extends React.Component<IProps> {
     private onAvatarClick = (): void => {
         const cli = MatrixClientPeg.get();

src/components/views/messages/RoomCreate.tsx

@@ -24,7 +24,6 @@ import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTileBubble from "./EventTileBubble";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 
 interface IProps {
@@ -33,7 +32,6 @@ interface IProps {
     timestamp?: JSX.Element;
 }
 
-@replaceableComponent("views.messages.RoomCreate")
 export default class RoomCreate extends React.Component<IProps> {
     private onLinkClicked = (e: React.MouseEvent): void => {
         e.preventDefault();

src/components/views/messages/SenderProfile.tsx

@@ -19,7 +19,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import DisambiguatedProfile from "./DisambiguatedProfile";
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -30,7 +29,6 @@ interface IProps {
     onClick?(): void;
 }
 
-@replaceableComponent("views.messages.SenderProfile")
 export default class SenderProfile extends React.PureComponent<IProps> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;

src/components/views/messages/TextualBody.tsx

@@ -33,7 +33,6 @@ import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
@@ -59,7 +58,6 @@ interface IState {
     widgetHidden: boolean;
 }
 
-@replaceableComponent("views.messages.TextualBody")
 export default class TextualBody extends React.Component<IBodyProps, IState> {
     private readonly contentRef = createRef<HTMLSpanElement>();
 

src/components/views/messages/TextualEvent.tsx

@@ -19,13 +19,11 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import RoomContext from "../../../contexts/RoomContext";
 import * as TextForEvent from "../../../TextForEvent";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
-@replaceableComponent("views.messages.TextualEvent")
 export default class TextualEvent extends React.Component<IProps> {
     static contextType = RoomContext;
 

src/components/views/messages/TileErrorBoundary.tsx

@@ -21,7 +21,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BugReportDialog from '../dialogs/BugReportDialog';
 import AccessibleButton from '../elements/AccessibleButton';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -37,7 +36,6 @@ interface IState {
     error: Error;
 }
 
-@replaceableComponent("views.messages.TileErrorBoundary")
 export default class TileErrorBoundary extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/messages/ViewSourceEvent.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import { MatrixEvent, MatrixEventEvent } from 'matrix-js-sdk/src/matrix';
 import classNames from 'classnames';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -31,7 +30,6 @@ interface IState {
     expanded: boolean;
 }
 
-@replaceableComponent("views.messages.ViewSourceEvent")
 export default class ViewSourceEvent extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);