Merge pull request #4791 from matrix-org/joriks/semicolon

Lint ts semicolons (aka. The great semicolon migration)

src/@types/common.ts

@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 // Based on https://stackoverflow.com/a/53229857/3532235
-export type Without<T, U> = {[P in Exclude<keyof T, keyof U>] ? : never}
+export type Without<T, U> = {[P in Exclude<keyof T, keyof U>] ? : never};
 export type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;

src/BasePlatform.ts

@@ -150,7 +150,7 @@ export default abstract class BasePlatform {
     abstract displayNotification(title: string, msg: string, avatarUrl: string, room: Object);
 
     loudNotification(ev: Event, room: Object) {
-    };
+    }
 
     /**
      * Returns a promise that resolves to a string representing the current version of the application.

src/DeviceListener.ts

@@ -119,26 +119,26 @@ export default class DeviceListener {
 
         // No need to do a recheck here: we just need to get a snapshot of our devices
         // before we download any new ones.
-    }
+    };
 
     _onDevicesUpdated = (users: string[]) => {
         if (!users.includes(MatrixClientPeg.get().getUserId())) return;
         this._recheck();
-    }
+    };
 
     _onDeviceVerificationChanged = (userId: string) => {
         if (userId !== MatrixClientPeg.get().getUserId()) return;
         this._recheck();
-    }
+    };
 
     _onUserTrustStatusChanged = (userId: string) => {
         if (userId !== MatrixClientPeg.get().getUserId()) return;
         this._recheck();
-    }
+    };
 
     _onCrossSingingKeysChanged = () => {
         this._recheck();
-    }
+    };
 
     _onAccountData = (ev) => {
         // User may have:
@@ -152,11 +152,11 @@ export default class DeviceListener {
         ) {
             this._recheck();
         }
-    }
+    };
 
     _onSync = (state, prevState) => {
         if (state === 'PREPARED' && prevState === null) this._recheck();
-    }
+    };
 
     // The server doesn't tell us when key backup is set up, so we poll
     // & cache the result

src/MatrixClientPeg.ts

@@ -35,13 +35,13 @@ import { crossSigningCallbacks } from './CrossSigningManager';
 import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
 export interface IMatrixClientCreds {
-    homeserverUrl: string,
-    identityServerUrl: string,
-    userId: string,
-    deviceId: string,
-    accessToken: string,
-    guest: boolean,
-    pickleKey?: string,
+    homeserverUrl: string;
+    identityServerUrl: string;
+    userId: string;
+    deviceId: string;
+    accessToken: string;
+    guest: boolean;
+    pickleKey?: string;
 }
 
 // TODO: Move this to the js-sdk

src/actions/TagOrderActions.ts

@@ -60,7 +60,7 @@ export default class TagOrderActions {
             // For an optimistic update
             return {tags, removedTags};
         });
-    };
+    }
 
     /**
      * Creates an action thunk that will do an asynchronous request to

src/autocomplete/Autocompleter.ts

@@ -35,15 +35,15 @@ export interface ISelectionRange {
 
 export interface ICompletion {
     type: "at-room" | "command" | "community" | "room" | "user";
-    completion: string,
+    completion: string;
     completionId?: string;
-    component?: ReactElement,
-    range: ISelectionRange,
-    command?: string,
+    component?: ReactElement;
+    range: ISelectionRange;
+    command?: string;
     suffix?: string;
     // If provided, apply a LINK entity to the completion with the
     // data = { url: href }.
-    href?: string,
+    href?: string;
 }
 
 const PROVIDERS = [

src/autocomplete/Components.tsx

@@ -46,7 +46,7 @@ export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props
 });
 
 interface IPillCompletionProps extends ITextualCompletionProps {
-    children?: React.ReactNode,
+    children?: React.ReactNode;
 }
 
 export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref) => {

src/components/structures/MatrixChat.tsx

@@ -151,9 +151,9 @@ interface IProps { // TODO type things better
     // Represents the screen to display as a result of parsing the initial window.location
     initialScreenAfterLogin?: IScreen;
     // displayname, if any, to set on the device when logging in/registering.
-    defaultDeviceDisplayName?: string,
+    defaultDeviceDisplayName?: string;
     // A function that makes a registration URL
-    makeRegistrationUrl: (object) => string,
+    makeRegistrationUrl: (object) => string;
 }
 
 interface IState {

src/components/structures/UserMenuButton.tsx

@@ -291,6 +291,6 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                 </ContextMenuButton>
                 {contextMenu}
             </React.Fragment>
-        )
+        );
     }
 }

src/components/views/auth/PassphraseField.tsx

@@ -118,7 +118,7 @@ class PassphraseField extends PureComponent<IProps, IState> {
             value={this.props.value}
             onChange={this.props.onChange}
             onValidate={this.onValidate}
-        />
+        />;
     }
 }
 

src/components/views/elements/AccessibleButton.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import {Key} from '../../../Keyboard';
 import classnames from 'classnames';
 
-export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>
+export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>;
 
 /**
  * children: React's magic prop. Represents all children given to the element.
@@ -40,7 +40,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     disabled?: boolean;
     className?: string;
     onClick?(e?: ButtonEvent): void;
-};
+}
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
     ref?: React.Ref<Element>;

src/components/views/elements/Draggable.tsx

@@ -17,20 +17,20 @@ limitations under the License.
 import React from 'react';
 
 interface IProps {
-    className: string,
-    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
-    onMouseUp: (event: MouseEvent) => void,
+    className: string;
+    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState;
+    onMouseUp: (event: MouseEvent) => void;
 }
 
 interface IState {
-    onMouseMove: (event: MouseEvent) => void,
-    onMouseUp: (event: MouseEvent) => void,
-    location: ILocationState,
+    onMouseMove: (event: MouseEvent) => void;
+    onMouseUp: (event: MouseEvent) => void;
+    location: ILocationState;
 }
 
 export interface ILocationState {
-    currentX: number,
-    currentY: number,
+    currentX: number;
+    currentY: number;
 }
 
 export default class Draggable extends React.Component<IProps, IState> {
@@ -58,13 +58,13 @@ export default class Draggable extends React.Component<IProps, IState> {
 
         document.addEventListener("mousemove", this.state.onMouseMove);
         document.addEventListener("mouseup", this.state.onMouseUp);
-    }
+    };
 
     private onMouseUp = (event: MouseEvent): void => {
         document.removeEventListener("mousemove", this.state.onMouseMove);
         document.removeEventListener("mouseup", this.state.onMouseUp);
         this.props.onMouseUp(event);
-    }
+    };
 
     private onMouseMove(event: MouseEvent): void {
         const newLocation = this.props.dragFunc(this.state.location, event);
@@ -75,7 +75,7 @@ export default class Draggable extends React.Component<IProps, IState> {
     }
 
     render() {
-        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />
+        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />;
     }
 
 }

src/components/views/elements/Field.tsx

@@ -85,20 +85,20 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
 type PropShapes = IInputProps | ISelectProps | ITextareaProps;
 
 interface IState {
-    valid: boolean,
-    feedback: React.ReactNode,
-    feedbackVisible: boolean,
-    focused: boolean,
+    valid: boolean;
+    feedback: React.ReactNode;
+    feedbackVisible: boolean;
+    focused: boolean;
 }
 
 export default class Field extends React.PureComponent<PropShapes, IState> {
     private id: string;
     private input: HTMLInputElement;
 
-    private static defaultProps = {
+    public static readonly defaultProps = {
         element: "input",
         type: "text",
-    }
+    };
 
     /*
      * This was changed from throttle to debounce: this is more traditional for

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -20,15 +20,15 @@ import Draggable, {ILocationState} from './Draggable';
 
 interface IProps {
     // Current room
-    roomId: string,
-    minWidth: number,
-    maxWidth: number,
-};
+    roomId: string;
+    minWidth: number;
+    maxWidth: number;
+}
 
 interface IState {
-    width: number,
-    IRCLayoutRoot: HTMLElement,
-};
+    width: number;
+    IRCLayoutRoot: HTMLElement;
+}
 
 export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
     constructor(props: IProps) {
@@ -37,20 +37,19 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         this.state = {
             width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
             IRCLayoutRoot: null,
-        }
         };
+    }
 
     componentDidMount() {
         this.setState({
             IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
-        }, () => this.updateCSSWidth(this.state.width))
+        }, () => this.updateCSSWidth(this.state.width));
     }
 
     private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
         const offset = event.clientX - location.currentX;
         const newWidth = this.state.width + offset;
 
-        console.log({offset})
         // If we're trying to go smaller than min width, don't.
         if (newWidth < this.props.minWidth) {
             return location;
@@ -69,8 +68,8 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         return {
             currentX: event.clientX,
             currentY: location.currentY,
-        }
-    }
+        };
+    };
 
     private updateCSSWidth(newWidth: number) {
         this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
@@ -83,6 +82,10 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
     }
 
     render() {
-        return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc.bind(this)} onMouseUp={this.onMoueUp.bind(this)}/>
+        return <Draggable
+            className="mx_ProfileResizer"
+            dragFunc={this.dragFunc.bind(this)}
+            onMouseUp={this.onMoueUp.bind(this)}
+        />;
+    }
 }
-};

src/components/views/elements/SettingsFlag.tsx

@@ -48,18 +48,18 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                 this.props.roomId,
                 this.props.isExplicit,
             ),
-        }
+        };
     }
 
     private onChange = (checked: boolean): void => {
         this.save(checked);
         this.setState({ value: checked });
         if (this.props.onChange) this.props.onChange(checked);
-    }
+    };
 
     private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.onChange(e.target.checked);
-    }
+    };
 
     private save = (val?: boolean): void => {
         return SettingsStore.setValue(
@@ -68,7 +68,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
             this.props.level,
             val !== undefined ? val : this.state.value,
         );
-    }
+    };
 
     public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);

src/components/views/elements/Slider.tsx

@@ -65,9 +65,9 @@ export default class Slider extends React.Component<IProps> {
 
         const intervalWidth = 1 / (values.length - 1);
 
-        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
+        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue);
 
-        return 100 * (closest - 1 + linearInterpolation) * intervalWidth
+        return 100 * (closest - 1 + linearInterpolation) * intervalWidth;
 
     }
 
@@ -87,7 +87,7 @@ export default class Slider extends React.Component<IProps> {
             selection = <div className="mx_Slider_selection">
                 <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
                 <hr style={{width: offset + "%"}} />
-            </div>
+            </div>;
         }
 
         return <div className="mx_Slider">
@@ -115,13 +115,13 @@ export default class Slider extends React.Component<IProps> {
 
 interface IDotProps {
     // Callback for behavior onclick
-    onClick: () => void,
+    onClick: () => void;
 
     // Whether the dot should appear active
-    active: boolean,
+    active: boolean;
 
     // The label on the dot
-    label: string,
+    label: string;
 
     // Whether the slider is disabled
     disabled: boolean;
@@ -129,7 +129,7 @@ interface IDotProps {
 
 class Dot extends React.PureComponent<IDotProps> {
     render(): React.ReactNode {
-        let className = "mx_Slider_dot"
+        let className = "mx_Slider_dot";
         if (!this.props.disabled && this.props.active) {
             className += " mx_Slider_dotActive";
         }

src/components/views/elements/StyledCheckbox.tsx

@@ -30,7 +30,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
 
     public static readonly defaultProps = {
         className: "",
-    }
+    };
 
     constructor(props: IProps) {
         super(props);
@@ -51,6 +51,6 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
                     { this.props.children }
                 </div>
             </label>
-        </span>
+        </span>;
     }
 }

src/components/views/elements/StyledRadioButton.tsx

@@ -26,7 +26,7 @@ interface IState {
 export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
     public static readonly defaultProps = {
         className: '',
-    }
+    };
 
     public render() {
         const { children, className, disabled, ...otherProps } = this.props;
@@ -43,6 +43,6 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
             <div><div></div></div>
             <span>{children}</span>
             <div className="mx_RadioButton_spacer" />
-        </label>
+        </label>;
     }
 }

src/components/views/elements/ToggleSwitch.tsx

@@ -28,7 +28,7 @@ interface IProps {
 
     // Called when the checked state changes. First argument will be the new state.
     onChange(checked: boolean): void;
-};
+}
 
 // Controlled Toggle Switch element, written with Accessibility in mind
 export default ({checked, disabled = false, onChange, ...props}: IProps) => {

src/components/views/elements/Tooltip.tsx

@@ -29,15 +29,15 @@ const MIN_TOOLTIP_HEIGHT = 25;
 
 interface IProps {
         // Class applied to the element used to position the tooltip
-        className: string,
+        className: string;
         // Class applied to the tooltip itself
-        tooltipClassName?: string,
+        tooltipClassName?: string;
         // Whether the tooltip is visible or hidden.
         // The hidden state allows animating the tooltip away via CSS.
         // Defaults to visible if unset.
-        visible?: boolean,
+        visible?: boolean;
         // the react element to put into the tooltip
-        label: React.ReactNode,
+        label: React.ReactNode;
 }
 
 export default class Tooltip extends React.Component<IProps> {
@@ -126,7 +126,7 @@ export default class Tooltip extends React.Component<IProps> {
             tooltip: this.tooltip,
             parent: parent,
         });
-    }
+    };
 
     public render() {
         // Render a placeholder

src/components/views/rooms/RoomBreadcrumbs2.tsx

@@ -97,7 +97,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
                 >
                     <RoomAvatar room={r} width={32} height={32}/>
                 </AccessibleButton>
-            )
+            );
         });
 
         if (tiles.length > 0) {

src/components/views/rooms/RoomSublist2.tsx

@@ -423,7 +423,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     {visibleTiles}
                     {showNButton}
                 </ResizableBox>
-            )
+            );
         }
 
         // TODO: onKeyDown support

src/components/views/rooms/RoomTile2.tsx

@@ -232,7 +232,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                 />
                 {contextMenu}
             </React.Fragment>
-        )
+        );
     }
 
     public render(): React.ReactElement {

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

@@ -35,23 +35,23 @@ interface IProps {
 }
 
 interface IThemeState {
-    theme: string,
-    useSystemTheme: boolean,
+    theme: string;
+    useSystemTheme: boolean;
 }
 
 export interface CustomThemeMessage {
-    isError: boolean,
-    text: string
-};
+    isError: boolean;
+    text: string;
+}
 
 interface IState extends IThemeState {
     // String displaying the current selected fontSize.
     // Needs to be string for things like '17.' without
     // trailing 0s.
-    fontSize: string,
-    customThemeUrl: string,
-    customThemeMessage: CustomThemeMessage,
-    useCustomFontSize: boolean,
+    fontSize: string;
+    customThemeUrl: string;
+    customThemeMessage: CustomThemeMessage;
+    useCustomFontSize: boolean;
 }
 
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
@@ -159,7 +159,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         );
 
         return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
-    }
+    };
 
     private onAddCustomTheme = async (): Promise<void> => {
         let currentThemes: string[] = SettingsStore.getValue("custom_themes");

src/components/views/toasts/VerificationRequestToast.tsx

@@ -90,7 +90,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         } catch (err) {
             console.error("Error while cancelling verification request", err);
         }
-    }
+    };
 
     accept = async () => {
         ToastStore.sharedInstance().dismissToast(this.props.toastKey);

src/dispatcher/payloads/CheckUpdatesPayload.ts

@@ -19,7 +19,7 @@ import { Action } from "../actions";
 import {UpdateCheckStatus} from "../../BasePlatform";
 
 export interface CheckUpdatesPayload extends ActionPayload {
-    action: Action.CheckUpdates,
+    action: Action.CheckUpdates;
 
     /**
      * The current phase of the manual update check.

src/dispatcher/payloads/OpenToTabPayload.ts

@@ -18,7 +18,7 @@ import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
 
 export interface OpenToTabPayload extends ActionPayload {
-    action: Action.ViewUserSettings | string, // TODO: Add room settings action
+    action: Action.ViewUserSettings | string; // TODO: Add room settings action
 
     /**
      * The tab ID to open in the settings view to start, if possible.

src/dispatcher/payloads/RecheckThemePayload.ts

@@ -18,7 +18,7 @@ import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
 
 export interface RecheckThemePayload extends ActionPayload {
-    action: Action.RecheckTheme,
+    action: Action.RecheckTheme;
 
     /**
      * Optionally specify the exact theme which is to be loaded.

src/dispatcher/payloads/ViewTooltipPayload.ts

@@ -19,7 +19,7 @@ import { Action } from "../actions";
 import { Component } from "react";
 
 export interface ViewTooltipPayload extends ActionPayload {
-    action: Action.ViewTooltip,
+    action: Action.ViewTooltip;
 
     /*
      * The tooltip to render. If it's null the tooltip will not be rendered
@@ -31,5 +31,5 @@ export interface ViewTooltipPayload extends ActionPayload {
      * The parent under which to render the tooltip. Can be null to remove
      * the parent type.
      */
-    parent: null | Element
+    parent: null | Element;
 }

src/dispatcher/payloads/ViewUserPayload.ts

@@ -19,7 +19,7 @@ import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
 
 export interface ViewUserPayload extends ActionPayload {
-    action: Action.ViewUser,
+    action: Action.ViewUser;
 
     /**
      * The member to view. May be null or falsy to indicate that no member

src/settings/watchers/Watcher.ts

@@ -15,6 +15,6 @@ limitations under the License.
 */
 
 export default interface IWatcher {
-    start(): void
-    stop(): void
+    start(): void;
+    stop(): void;
 }

src/stores/room-list/algorithms/Algorithm.ts

@@ -127,7 +127,7 @@ export class Algorithm extends EventEmitter {
         const algorithm = getListAlgorithmInstance(order, tagId, this.sortAlgorithms[tagId]);
         this.algorithms[tagId] = algorithm;
 
-        await algorithm.setRooms(this._cachedRooms[tagId])
+        await algorithm.setRooms(this._cachedRooms[tagId]);
         this._cachedRooms[tagId] = algorithm.orderedRooms;
         this.recalculateFilteredRoomsForTag(tagId); // update filter to re-sort the list
         this.recalculateStickyRoom(tagId); // update sticky room to make sure it appears if needed
@@ -539,5 +539,5 @@ export class Algorithm extends EventEmitter {
         }
 
         return true;
-    };
+    }
 }

src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts

@@ -270,7 +270,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         // handling. For instance, if 45 rooms are removed from the middle of a 50 room list, the
         // index for the categories will be way off.
 
-        const nextOrderIndex = CATEGORY_ORDER.indexOf(category) + 1
+        const nextOrderIndex = CATEGORY_ORDER.indexOf(category) + 1;
         if (n > 0) {
             for (let i = nextOrderIndex; i < CATEGORY_ORDER.length; i++) {
                 const nextCategory = CATEGORY_ORDER[i];

src/utils/FormattingUtils.ts

@@ -36,7 +36,7 @@ export function formatCount(count: number): string {
  */
 export function formatCountLong(count: number): string {
     const formatter = new Intl.NumberFormat();
-    return formatter.format(count)
+    return formatter.format(count);
 }
 
 /**

src/utils/ShieldUtils.ts

@@ -10,7 +10,7 @@ interface Client {
     getStoredDevicesForUser: (userId: string) => [{ deviceId: string }];
     checkDeviceTrust: (userId: string, deviceId: string) => {
         isVerified: () => boolean
-    }
+    };
 }
 
 interface Room {

tslint.json

@@ -46,7 +46,9 @@
     "quotemark": false,
     "radix": true,
     "semicolon": [
-      "always"
+      true,
+      "always",
+      "strict-bound-class-methods"
     ],
     "triple-equals": [],
     "typedef-whitespace": [