Step 1: Remove all usage of @replaceableComponent

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -19,7 +19,6 @@ import React, { SyntheticEvent } from 'react';
 
 import AccessibleButton from "./AccessibleButton";
 import Tooltip, { Alignment } from './Tooltip';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
@@ -36,7 +35,6 @@ interface IState {
     hover: boolean;
 }
 
-@replaceableComponent("views.elements.AccessibleTooltipButton")
 export default class AccessibleTooltipButton extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/ActionButton.tsx

@@ -19,7 +19,6 @@ import React from 'react';
 import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher/dispatcher';
 import Analytics from '../../../Analytics';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Tooltip from './Tooltip';
 
 interface IProps {
@@ -37,7 +36,6 @@ interface IState {
     showTooltip: boolean;
 }
 
-@replaceableComponent("views.elements.ActionButton")
 export default class ActionButton extends React.Component<IProps, IState> {
     static defaultProps: Partial<IProps> = {
         size: "25",

src/components/views/elements/AddressSelector.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React, { createRef } from 'react';
 import classNames from 'classnames';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IUserAddress } from '../../../UserAddress';
 import AddressTile from './AddressTile';
 
@@ -41,7 +40,6 @@ interface IState {
     hover: boolean;
 }
 
-@replaceableComponent("views.elements.AddressSelector")
 export default class AddressSelector extends React.Component<IProps, IState> {
     private scrollElement = createRef<HTMLDivElement>();
     private addressListElement = createRef<HTMLDivElement>();

src/components/views/elements/AddressTile.tsx

@@ -19,7 +19,6 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { IUserAddress } from '../../../UserAddress';
 import BaseAvatar from '../avatars/BaseAvatar';
@@ -33,7 +32,6 @@ interface IProps {
     showAddress?: boolean;
 }
 
-@replaceableComponent("views.elements.AddressTile")
 export default class AddressTile extends React.Component<IProps> {
     static defaultProps: Partial<IProps> = {
         canDismiss: false,

src/components/views/elements/AppPermission.tsx

@@ -24,7 +24,6 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import WidgetUtils from "../../../utils/WidgetUtils";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import MemberAvatar from '../avatars/MemberAvatar';
 import BaseAvatar from '../avatars/BaseAvatar';
 import AccessibleButton from './AccessibleButton';
@@ -44,7 +43,6 @@ interface IState {
     widgetDomain: string;
 }
 
-@replaceableComponent("views.elements.AppPermission")
 export default class AppPermission extends React.Component<IProps, IState> {
     static defaultProps: Partial<IProps> = {
         onPermissionGranted: () => {},

src/components/views/elements/AppTile.tsx

@@ -39,7 +39,6 @@ import { StopGapWidget } from "../../../stores/widgets/StopGapWidget";
 import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import CallHandler from '../../../CallHandler';
 import { IApp } from "../../../stores/WidgetStore";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
@@ -101,7 +100,6 @@ interface IState {
     requiresClient: boolean;
 }
 
-@replaceableComponent("views.elements.AppTile")
 export default class AppTile extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
     context: ContextType<typeof MatrixClientContext>;

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -21,7 +21,6 @@ import { _t } from '../../../languageHandler';
 import BaseDialog from "..//dialogs/BaseDialog";
 import DialogButtons from "./DialogButtons";
 import AccessibleButton from './AccessibleButton';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';
 import PlatformPeg from "../../../PlatformPeg";
 
@@ -90,7 +89,6 @@ export interface PickerIProps {
     onFinished(sourceId: string): void;
 }
 
-@replaceableComponent("views.elements.DesktopCapturerSourcePicker")
 export default class DesktopCapturerSourcePicker extends React.Component<
     PickerIProps,
     PickerIState

src/components/views/elements/DialogButtons.tsx

@@ -19,7 +19,6 @@ limitations under the License.
 import React from "react";
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The primary button which is styled differently and has default focus.
@@ -61,7 +60,6 @@ interface IProps {
 /**
  * Basic container for buttons in modal dialogs.
  */
-@replaceableComponent("views.elements.DialogButtons")
 export default class DialogButtons extends React.Component<IProps> {
     public static defaultProps: Partial<IProps> = {
         hasCancel: true,

src/components/views/elements/DirectorySearchBox.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { ChangeEvent, createRef } from 'react';
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from "./AccessibleButton";
 
 interface IProps {
@@ -34,7 +33,6 @@ interface IState {
     value: string;
 }
 
-@replaceableComponent("views.elements.DirectorySearchBox")
 export default class DirectorySearchBox extends React.Component<IProps, IState> {
     private input = createRef<HTMLInputElement>();
 

src/components/views/elements/Draggable.tsx

@@ -16,8 +16,6 @@ limitations under the License.
 
 import React from 'react';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 interface IProps {
     className: string;
     dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState;
@@ -35,7 +33,6 @@ export interface ILocationState {
     currentY: number;
 }
 
-@replaceableComponent("views.elements.Draggable")
 export default class Draggable extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/Dropdown.tsx

@@ -20,7 +20,6 @@ import classnames from 'classnames';
 
 import AccessibleButton, { ButtonEvent } from './AccessibleButton';
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
@@ -107,7 +106,6 @@ interface IState {
  * but somewhat simpler as react-select is 79KB of minified
  * javascript.
  */
-@replaceableComponent("views.elements.Dropdown")
 export default class Dropdown extends React.Component<IProps, IState> {
     private readonly buttonRef = createRef<HTMLDivElement>();
     private dropdownRootElement: HTMLDivElement = null;

src/components/views/elements/EditableItemList.tsx

@@ -19,7 +19,6 @@ import React from "react";
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IItemProps {
     index?: number;
@@ -107,7 +106,6 @@ interface IProps {
     onNewItemChanged?(item: string): void;
 }
 
-@replaceableComponent("views.elements.EditableItemList")
 export default class EditableItemList<P = {}> extends React.PureComponent<IProps & P> {
     protected onItemAdded = (e) => {
         e.stopPropagation();

src/components/views/elements/EditableText.tsx

@@ -19,7 +19,6 @@ import React, { createRef } from 'react';
 
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 enum Phases {
     Display = "display",
@@ -45,7 +44,6 @@ interface IState {
     phase: Phases;
 }
 
-@replaceableComponent("views.elements.EditableText")
 export default class EditableText extends React.Component<IProps, IState> {
     // we track value as an JS object field rather than in React state
     // as React doesn't play nice with contentEditable.

src/components/views/elements/EditableTextContainer.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from "./Spinner";
 import EditableText from "./EditableText";
 
@@ -56,7 +55,6 @@ interface IState {
  * similarly asynchronous way. If this is not provided, the initial value is
  * taken from the 'initialValue' property.
  */
-@replaceableComponent("views.elements.EditableTextContainer")
 export default class EditableTextContainer extends React.Component<IProps, IState> {
     private unmounted = false;
     public static defaultProps: Partial<IProps> = {

src/components/views/elements/ErrorBoundary.tsx

@@ -22,7 +22,6 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BugReportDialog from '../dialogs/BugReportDialog';
 import AccessibleButton from './AccessibleButton';
 
@@ -34,7 +33,6 @@ interface IState {
  * This error boundary component can be used to wrap large content areas and
  * catch exceptions during rendering in the component tree below them.
  */
-@replaceableComponent("views.elements.ErrorBoundary")
 export default class ErrorBoundary extends React.PureComponent<{}, IState> {
     constructor(props) {
         super(props);

src/components/views/elements/EventListSummary.tsx

@@ -25,7 +25,6 @@ import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import { isValid3pidInvite } from "../../../RoomInvite";
 import GenericEventListSummary from "./GenericEventListSummary";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import { jsxJoin } from '../../../utils/ReactUtils';
 import { Layout } from '../../../settings/enums/Layout';
@@ -79,7 +78,6 @@ enum TransitionType {
 
 const SEP = ",";
 
-@replaceableComponent("views.elements.EventListSummary")
 export default class EventListSummary extends React.Component<IProps> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/elements/EventTilePreview.tsx

@@ -22,7 +22,6 @@ import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 import * as Avatar from '../../../Avatar';
 import EventTile from '../rooms/EventTile';
 import { Layout } from "../../../settings/enums/Layout";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from './Spinner';
 
 interface IProps {
@@ -63,7 +62,6 @@ interface IState {
 
 const AVATAR_SIZE = 32;
 
-@replaceableComponent("views.elements.EventTilePreview")
 export default class EventTilePreview extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -19,7 +19,6 @@ import React from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
 import Draggable, { ILocationState } from './Draggable';
 import { SettingLevel } from "../../../settings/SettingLevel";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // Current room
@@ -33,7 +32,6 @@ interface IState {
     IRCLayoutRoot: HTMLElement;
 }
 
-@replaceableComponent("views.elements.IRCTimelineProfileResizer")
 export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/ImageView.tsx

@@ -31,7 +31,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 import { Action } from '../../../dispatcher/actions';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { normalizeWheelEvent } from "../../../utils/Mouse";
 import { IDialogProps } from '../dialogs/IDialogProps';
@@ -90,7 +89,6 @@ interface IState {
     contextMenuDisplayed: boolean;
 }
 
-@replaceableComponent("views.elements.ImageView")
 export default class ImageView extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/elements/InfoTooltip.tsx

@@ -20,7 +20,6 @@ import classNames from 'classnames';
 
 import { Alignment } from './Tooltip';
 import { _t } from "../../../languageHandler";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import TooltipTarget from './TooltipTarget';
 
 export enum InfoTooltipKind {
@@ -35,7 +34,6 @@ interface ITooltipProps {
     kind?: InfoTooltipKind;
 }
 
-@replaceableComponent("views.elements.InfoTooltip")
 export default class InfoTooltip extends React.PureComponent<ITooltipProps> {
     constructor(props: ITooltipProps) {
         super(props);

src/components/views/elements/InlineSpinner.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 
 import { _t } from "../../../languageHandler";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     w?: number;
@@ -25,7 +24,6 @@ interface IProps {
     children?: React.ReactNode;
 }
 
-@replaceableComponent("views.elements.InlineSpinner")
 export default class InlineSpinner extends React.PureComponent<IProps> {
     static defaultProps = {
         w: 16,

src/components/views/elements/InviteReason.tsx

@@ -19,7 +19,6 @@ import React from "react";
 
 import { sanitizedHtmlNode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     reason: string;
@@ -30,7 +29,6 @@ interface IState {
     hidden: boolean;
 }
 
-@replaceableComponent("views.elements.InviteReason")
 export default class InviteReason extends React.PureComponent<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 
 import ToggleSwitch from "./ToggleSwitch";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The value for the toggle switch
@@ -35,7 +34,6 @@ interface IProps {
     onChange(checked: boolean): void;
 }
 
-@replaceableComponent("views.elements.LabelledToggleSwitch")
 export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
     render() {
         // This is a minimal version of a SettingsFlag

src/components/views/elements/LanguageDropdown.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import * as languageHandler from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from "./Spinner";
 import Dropdown from "./Dropdown";
 
@@ -42,7 +41,6 @@ interface IState {
     langs: string[];
 }
 
-@replaceableComponent("views.elements.LanguageDropdown")
 export default class LanguageDropdown extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/LazyRenderList.tsx

@@ -16,8 +16,6 @@ limitations under the License.
 
 import React from "react";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 class ItemRange {
     constructor(
         public topCount: number,
@@ -84,7 +82,6 @@ interface IState {
     renderRange: ItemRange;
 }
 
-@replaceableComponent("views.elements.LazyRenderList")
 export default class LazyRenderList<T = any> extends React.Component<IProps<T>, IState> {
     public static defaultProps: Partial<IProps<unknown>> = {
         overflowItems: 20,

src/components/views/elements/PersistedElement.tsx

@@ -22,7 +22,6 @@ import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from "../../../dispatcher/payloads";
 
 export const getPersistKey = (appId: string) => 'widget_' + appId;
@@ -70,7 +69,6 @@ interface IProps {
  * children are made visible and are positioned into a div that is given the same
  * bounding rect as the parent of PE.
  */
-@replaceableComponent("views.elements.PersistedElement")
 export default class PersistedElement extends React.Component<IProps> {
     private resizeObserver: ResizeObserver;
     private dispatcherRef: string;

src/components/views/elements/PersistentApp.tsx

@@ -19,7 +19,6 @@ import React, { ContextType } from 'react';
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import WidgetUtils from '../../../utils/WidgetUtils';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AppTile from "./AppTile";
 import { IApp } from '../../../stores/WidgetStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -30,7 +29,6 @@ interface IProps {
     pointerEvents?: string;
 }
 
-@replaceableComponent("views.elements.PersistentApp")
 export default class PersistentApp extends React.Component<IProps> {
     public static contextType = MatrixClientContext;
     context: ContextType<typeof MatrixClientContext>;

src/components/views/elements/Pill.js

@@ -27,9 +27,7 @@ import { getPrimaryPermalinkEntity, parsePermalink } from "../../../utils/permal
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Action } from "../../../dispatcher/actions";
 import Tooltip from './Tooltip';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.Pill")
 class Pill extends React.Component {
     static roomNotifPos(text) {
         return text.indexOf("@room");

src/components/views/elements/PowerSelector.tsx

@@ -19,7 +19,6 @@ import React from 'react';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 
@@ -55,7 +54,6 @@ interface IState {
     customLevel?: number;
 }
 
-@replaceableComponent("views.elements.PowerSelector")
 export default class PowerSelector extends React.Component<IProps, IState> {
     public static defaultProps: Partial<IProps> = {
         maxValue: Infinity,

src/components/views/elements/ReplyChain.tsx

@@ -29,7 +29,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/enums/Layout";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import { Action } from "../../../dispatcher/actions";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from './Spinner';
 import ReplyTile from "../rooms/ReplyTile";
 import Pill from './Pill';
@@ -76,7 +75,6 @@ interface IState {
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
 // be low as each event being loaded (after the first) is triggered by an explicit user action.
-@replaceableComponent("views.elements.ReplyChain")
 export default class ReplyChain extends React.Component<IProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/elements/RoomAliasField.tsx

@@ -18,7 +18,6 @@ import React, { createRef, KeyboardEventHandler } from "react";
 
 import { _t } from '../../../languageHandler';
 import withValidation from './Validation';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Field, { IValidateOpts } from "./Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
@@ -39,7 +38,6 @@ interface IState {
 }
 
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
-@replaceableComponent("views.elements.RoomAliasField")
 export default class RoomAliasField extends React.PureComponent<IProps, IState> {
     static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;

src/components/views/elements/SettingsFlag.tsx

@@ -22,7 +22,6 @@ import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
 import StyledCheckbox from "./StyledCheckbox";
 import { SettingLevel } from "../../../settings/SettingLevel";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The setting must be a boolean
@@ -41,7 +40,6 @@ interface IState {
     value: boolean;
 }
 
-@replaceableComponent("views.elements.SettingsFlag")
 export default class SettingsFlag extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/Slider.tsx

@@ -16,8 +16,6 @@ limitations under the License.
 
 import * as React from 'react';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 interface IProps {
     // A callback for the selected value
     onSelectionChange: (value: number) => void;
@@ -36,7 +34,6 @@ interface IProps {
     disabled: boolean;
 }
 
-@replaceableComponent("views.elements.Slider")
 export default class Slider extends React.Component<IProps> {
     // offset is a terrible inverse approximation.
     // if the values represents some function f(x) = y where x is the

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -20,7 +20,6 @@ import Dropdown from "../../views/elements/Dropdown";
 import PlatformPeg from "../../../PlatformPeg";
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Spinner from "./Spinner";
 
 function languageMatchesSearchQuery(query, language) {
@@ -40,7 +39,6 @@ interface SpellCheckLanguagesDropdownIState {
     languages: any;
 }
 
-@replaceableComponent("views.elements.SpellCheckLanguagesDropdown")
 export default class SpellCheckLanguagesDropdown extends React.Component<SpellCheckLanguagesDropdownIProps,
                                                                          SpellCheckLanguagesDropdownIState> {
     constructor(props) {

src/components/views/elements/Spoiler.tsx

@@ -16,8 +16,6 @@
 
 import React from 'react';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 interface IProps {
     reason?: string;
     contentHtml: string;
@@ -27,7 +25,6 @@ interface IState {
     visible: boolean;
 }
 
-@replaceableComponent("views.elements.Spoiler")
 export default class Spoiler extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/StyledCheckbox.tsx

@@ -18,8 +18,6 @@ import React from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import classnames from 'classnames';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 export enum CheckboxStyle {
     Solid = "solid",
     Outline = "outline",
@@ -34,7 +32,6 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 interface IState {
 }
 
-@replaceableComponent("views.elements.StyledCheckbox")
 export default class StyledCheckbox extends React.PureComponent<IProps, IState> {
     private id: string;
 

src/components/views/elements/StyledRadioButton.tsx

@@ -17,8 +17,6 @@ limitations under the License.
 import React from 'react';
 import classnames from 'classnames';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     inputRef?: React.RefObject<HTMLInputElement>;
     outlined?: boolean;
@@ -31,7 +29,6 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 interface IState {
 }
 
-@replaceableComponent("views.elements.StyledRadioButton")
 export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
     public static readonly defaultProps = {
         className: '',

src/components/views/elements/SyntaxHighlight.tsx

@@ -17,14 +17,11 @@ limitations under the License.
 import React from 'react';
 import hljs from 'highlight.js';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-
 interface IProps {
     language?: string;
     children: string;
 }
 
-@replaceableComponent("views.elements.SyntaxHighlight")
 export default class SyntaxHighlight extends React.PureComponent<IProps> {
     public render(): JSX.Element {
         const { children: content, language } = this.props;

src/components/views/elements/TagComposer.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { ChangeEvent, FormEvent } from "react";
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Field from "./Field";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "./AccessibleButton";
@@ -38,7 +37,6 @@ interface IState {
  * A simple, controlled, composer for entering string tags. Contains a simple
  * input, add button, and per-tag remove button.
  */
-@replaceableComponent("views.elements.TagComposer")
 export default class TagComposer extends React.PureComponent<IProps, IState> {
     public constructor(props: IProps) {
         super(props);

src/components/views/elements/TextWithTooltip.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import TooltipTarget from './TooltipTarget';
 
 interface IProps {
@@ -28,7 +27,6 @@ interface IProps {
     onClick?: (ev?: React.MouseEvent) => void;
 }
 
-@replaceableComponent("views.elements.TextWithTooltip")
 export default class TextWithTooltip extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);

src/components/views/elements/Tooltip.tsx

@@ -21,7 +21,6 @@ import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
 
 const MIN_TOOLTIP_HEIGHT = 25;
@@ -55,7 +54,6 @@ export interface ITooltipProps {
         maxParentWidth?: number;
 }
 
-@replaceableComponent("views.elements.Tooltip")
 export default class Tooltip extends React.Component<ITooltipProps> {
     private tooltipContainer: HTMLElement;
     private parent: Element;

src/components/views/elements/TooltipButton.tsx

@@ -17,14 +17,12 @@ limitations under the License.
 
 import React from 'react';
 
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import TooltipTarget from './TooltipTarget';
 
 interface IProps {
     helpText: React.ReactNode | string;
 }
 
-@replaceableComponent("views.elements.TooltipButton")
 export default class TooltipButton extends React.Component<IProps> {
     constructor(props) {
         super(props);

src/components/views/elements/TruncatedList.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The number of elements to show before truncating. If negative, no truncation is done.
@@ -38,7 +37,6 @@ interface IProps {
     createOverflowElement?: (overflowCount: number, totalCount: number) => React.ReactNode;
 }
 
-@replaceableComponent("views.elements.TruncatedList")
 export default class TruncatedList extends React.Component<IProps> {
     static defaultProps ={
         truncateAt: 2,

src/components/views/elements/crypto/VerificationQRCode.tsx

@@ -17,14 +17,12 @@ limitations under the License.
 import React from "react";
 import { QRCodeData } from "matrix-js-sdk/src/crypto/verification/QRCode";
 
-import { replaceableComponent } from "../../../../utils/replaceableComponent";
 import QRCode from "../QRCode";
 
 interface IProps {
     qrCodeData: QRCodeData;
 }
 
-@replaceableComponent("views.elements.crypto.VerificationQRCode")
 export default class VerificationQRCode extends React.PureComponent<IProps> {
     public render(): JSX.Element {
         return (