Convert imports to ES6 from CommonJS

This is needed because `require()` means something different in webpack - it ends up importing the module as something we didn't expect (and is occasionally async)

src/ScalarAuthClient.js

@@ -19,7 +19,7 @@ import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
 import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
 import {MatrixClientPeg} from "./MatrixClientPeg";
-const request = require('browser-request');
+import request from "browser-request";
 
 import * as Matrix from 'matrix-js-sdk';
 import SdkConfig from "./SdkConfig";

src/Unread.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';
-const sdk = require('./index');
+import * as sdk from "./index";
 
 module.exports = {
     /**

src/Velociraptor.js

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from "react";
-const ReactDom = require('react-dom');
+import ReactDom from "react-dom";
+import Velocity from "velocity-animate";
 import PropTypes from 'prop-types';
-const Velocity = require('velocity-animate');
 
 /**
  * The Velociraptor contains components and animates transitions with velocity.

src/VelocityBounce.js

@@ -1,4 +1,4 @@
-const Velocity = require('velocity-animate');
+import Velocity from "velocity-animate";
 
 // courtesy of https://github.com/julianshapiro/velocity/issues/283
 // We only use easeOutBounce (easeInBounce is just sort of nonsensical)

src/actions/RoomListActions.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import { asyncAction } from './actionCreators';
 import RoomListStore from '../stores/RoomListStore';
-
 import Modal from '../Modal';
 import * as Rooms from '../Rooms';
 import { _t } from '../languageHandler';

src/async-components/views/dialogs/EncryptedEventDialog.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require("react");
+import React from "react";
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import FileSaver from 'file-saver';
-
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { scorePassword } from '../../../../utils/PasswordScorer';

src/autocomplete/CommunityProvider.js

@@ -46,7 +46,7 @@ export default class CommunityProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
         const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
 
         // Disable autocompletions when composing commands because of various issues

src/autocomplete/DuckDuckGoProvider.js

@@ -37,7 +37,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false) {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false) {
         const {command, range} = this.getCurrentCommand(query, selection);
         if (!query || !command) {
             return [];

src/autocomplete/NotifProvider.js

@@ -30,7 +30,7 @@ export default class NotifProvider extends AutocompleteProvider {
         this.room = room;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?:boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force:boolean = false): Array<Completion> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();

src/autocomplete/RoomProvider.js

@@ -48,7 +48,7 @@ export default class RoomProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();

src/autocomplete/UserProvider.js

@@ -91,7 +91,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.users = null;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
         const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
 
         // lazy-load user list into matcher

src/components/structures/InteractiveAuth.js

@@ -15,9 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
+import {InteractiveAuth} from "matrix-js-sdk";
-const InteractiveAuth = Matrix.InteractiveAuth;
-
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';

src/components/structures/MatrixChat.js

@@ -20,7 +20,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import Matrix from "matrix-js-sdk";
+import * as Matrix from "matrix-js-sdk";
 
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';

src/components/structures/NotificationPanel.js

@@ -19,8 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
-
+import * as sdk from "../../index";
-const sdk = require('../../index');
 
 /*
  * Component which shows the global notification list using a TimelinePanel

src/components/structures/RoomDirectory.js

@@ -20,11 +20,9 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import {ContentRepo} from "matrix-js-sdk";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
-
+import * as sdk from "../../index";
-const Modal = require('../../Modal');
+import dis from "../../dispatcher";
-const sdk = require('../../index');
+import Modal from "../../Modal";
-const dis = require('../../dispatcher');
-
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';

src/components/structures/TimelinePanel.js

@@ -18,22 +18,19 @@ limitations under the License.
 */
 
 import SettingsStore from "../../settings/SettingsStore";
-
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-
+import {EventTimeline} from "matrix-js-sdk";
-const Matrix = require("matrix-js-sdk");
+import * as Matrix from "matrix-js-sdk";
-const EventTimeline = Matrix.EventTimeline;
-
-const sdk = require('../../index');
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
-const dis = require("../../dispatcher");
 import * as ObjectUtils from "../../ObjectUtils";
-const Modal = require("../../Modal");
+import UserActivity from "../../UserActivity";
-const UserActivity = require("../../UserActivity");
+import Modal from "../../Modal";
+import dis from "../../dispatcher";
+import * as sdk from "../../index";
 import { KeyCode } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';

src/components/structures/UploadBar.js

@@ -18,8 +18,8 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import ContentMessages from '../../ContentMessages';
-const dis = require('../../dispatcher');
+import dis from "../../dispatcher";
-const filesize = require('filesize');
+import filesize from "filesize";
 import { _t } from '../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/avatars/MemberAvatar.js

@@ -18,8 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as Avatar from '../../../Avatar';
-const sdk = require("../../../index");
+import * as sdk from "../../../index";
-const dispatcher = require("../../../dispatcher");
+import dis from "../../../dispatcher";
 
 module.exports = createReactClass({
     displayName: 'MemberAvatar',

src/components/views/elements/ImageView.js

@@ -21,11 +21,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {formatDate} from '../../../DateUtils';
-const filesize = require('filesize');
-const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
-const Modal = require('../../../Modal');
-const sdk = require('../../../index');
 import { _t } from '../../../languageHandler';
+import filesize from "filesize";
+import AccessibleButton from "./AccessibleButton";
+import Modal from "../../../Modal";
+import * as sdk from "../../../index";
 
 export default class ImageView extends React.Component {
     static propTypes = {

src/components/views/room_settings/AliasSettings.js

@@ -15,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from "react";
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const sdk = require("../../../index");
+import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import ErrorDialog from "../dialogs/ErrorDialog";
-const Modal = require("../../../Modal");
+import Modal from "../../../Modal";
 
 export default class AliasSettings extends React.Component {
     static propTypes = {

src/components/views/rooms/EventTile.js

@@ -18,17 +18,14 @@ limitations under the License.
 */
 
 import ReplyThread from "../elements/ReplyThread";
-
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-const classNames = require("classnames");
+import classNames from "classnames";
 import { _t, _td } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
-const Modal = require('../../../Modal');
+import Modal from "../../../Modal";
-
+import * as sdk from "../../../index";
-const sdk = require('../../../index');
-
 import dis from '../../../dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {EventStatus, MatrixClient} from 'matrix-js-sdk';

src/components/views/rooms/LinkPreviewWidget.js

@@ -20,10 +20,9 @@ import createReactClass from 'create-react-class';
 import { linkifyElement } from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-
+import * as sdk from "../../../index";
-const sdk = require('../../../index');
+import Modal from "../../../Modal";
-const ImageUtils = require('../../../ImageUtils');
+import * as ImageUtils from "../../../ImageUtils";
-const Modal = require('../../../Modal');
 
 module.exports = createReactClass({
     displayName: 'LinkPreviewWidget',

src/components/views/rooms/MemberList.js

@@ -25,8 +25,8 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {isValid3pidInvite} from "../../../RoomInvite";
 import rate_limited_func from "../../../ratelimitedfunc";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const sdk = require('../../../index');
+import * as sdk from "../../../index";
-const CallHandler = require("../../../CallHandler");
+import CallHandler from "../../../CallHandler";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;

src/components/views/rooms/MemberTile.js

@@ -15,13 +15,11 @@ limitations under the License.
 */
 
 import SettingsStore from "../../../settings/SettingsStore";
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-
+import * as sdk from "../../../index";
-const sdk = require('../../../index');
+import dis from "../../../dispatcher";
-const dis = require('../../../dispatcher');
 import { _t } from '../../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/rooms/ReadReceiptMarker.js

@@ -18,14 +18,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-
+import('../../../VelocityBounce');
-const sdk = require('../../../index');
-
-const Velociraptor = require('../../../Velociraptor');
-require('../../../VelocityBounce');
 import { _t } from '../../../languageHandler';
-
 import {formatDate} from '../../../DateUtils';
+import Velociraptor from "../../../Velociraptor";
+import * as sdk from "../../../index";
 
 let bounce = false;
 try {

src/components/views/rooms/RoomList.js

@@ -17,29 +17,28 @@ limitations under the License.
 
 import SettingsStore from "../../../settings/SettingsStore";
 import Timer from "../../../utils/Timer";
-
 import React from "react";
 import ReactDOM from "react-dom";
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const CallHandler = require('../../../CallHandler');
-const dis = require("../../../dispatcher");
-const sdk = require('../../../index');
 import rate_limited_func from "../../../ratelimitedfunc";
 import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
-const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
 import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
-
+import CallHandler from "../../../CallHandler";
+import dis from "../../../dispatcher";
+import * as sdk from "../../../index";
+import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
+
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 const HOVER_MOVE_TIMEOUT = 1000;

src/components/views/rooms/RoomNameEditor.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const sdk = require('../../../index');
+import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/rooms/SearchBar.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
-const classNames = require('classnames');
+import AccessibleButton from "../elements/AccessibleButton";
-const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
+import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/rooms/UserTile.js

@@ -18,8 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as Avatar from '../../../Avatar';
-
+import * as sdk from "../../../index";
-const sdk = require('../../../index');
 
 module.exports = createReactClass({
     displayName: 'UserTile',

src/components/views/settings/ChangePassword.js

@@ -16,17 +16,15 @@ limitations under the License.
 */
 
 import Field from "../elements/Field";
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const Modal = require("../../../Modal");
-const sdk = require("../../../index");
-
 import dis from "../../../dispatcher";
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
+import * as sdk from "../../../index";
+import Modal from "../../../Modal";
 
 import sessionStore from '../../../stores/SessionStore';
 

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -19,7 +19,7 @@ import {_t} from "../../../../../languageHandler";
 import PropTypes from "prop-types";
 import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
-const sdk = require("../../../../..");
+import * as sdk from "../../../../../index";
 
 export class LabsSettingToggle extends React.Component {
     static propTypes = {

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js

@@ -21,8 +21,7 @@ import {ListRule} from "../../../../../mjolnir/ListRule";
 import {BanList, RULE_SERVER, RULE_USER} from "../../../../../mjolnir/BanList";
 import Modal from "../../../../../Modal";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-
+import * as sdk from "../../../../../index";
-const sdk = require("../../../../..");
 
 export default class MjolnirUserSettingsTab extends React.Component {
     constructor() {

src/components/views/settings/tabs/user/NotificationUserSettingsTab.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
-const sdk = require("../../../../..");
+import * as sdk from "../../../../../index";
 
 export default class NotificationUserSettingsTab extends React.Component {
     constructor() {

src/components/views/settings/tabs/user/VoiceUserSettingsTab.js

@@ -21,8 +21,8 @@ import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import {SettingLevel} from "../../../../../settings/SettingsStore";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-const Modal = require("../../../../../Modal");
+import * as sdk from "../../../../../index";
-const sdk = require("../../../../..");
+import Modal from "../../../../../Modal";
 
 export default class VoiceUserSettingsTab extends React.Component {
     constructor() {

src/dispatcher.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 'use strict';
 
-const flux = require("flux");
+import flux from "flux";
 
 class MatrixDispatcher extends flux.Dispatcher {
     /**

src/utils/createMatrixClient.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
+import * as Matrix from 'matrix-js-sdk';
 
 const localStorage = window.localStorage;
 

src/utils/permalinks/Permalinks.js

@@ -21,8 +21,7 @@ import SpecPermalinkConstructor, {baseUrl as matrixtoBaseUrl} from "./SpecPermal
 import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
 import RiotPermalinkConstructor from "./RiotPermalinkConstructor";
 import matrixLinkify from "../../linkify-matrix";
-
+import SdkConfig from "../../SdkConfig";
-const SdkConfig = require("../../SdkConfig");
 
 // The maximum number of servers to pick when working out which servers
 // to add to permalinks. The servers are appended as ?via=example.org