Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit d98a73b

Browse files
author
Kerry
authored
Revert "replace all require(.svg) with esm import" (#7969)
* Revert "replace all require(svgs) with esm import (#7948)" This reverts commit 61cd463. * add .default to svg icon inline requires Signed-off-by: Kerry Archibald <[email protected]> * add shameful eslint ignore Signed-off-by: Kerry Archibald <[email protected]> * format eslintrc Signed-off-by: Kerry Archibald <[email protected]> * add missed MFileBody change Signed-off-by: Kerry Archibald <[email protected]> * one more broken svg Signed-off-by: Kerry Archibald <[email protected]> * and ignore it Signed-off-by: Kerry Archibald <[email protected]>
1 parent 8a7ffb4 commit d98a73b

36 files changed

+119
-131
lines changed

‎.eslintrc.js

+62-23
Original file line numberDiff line numberDiff line change
@@ -87,32 +87,71 @@ module.exports = {
8787
"jsx-a11y/role-supports-aria-props": "off",
8888
"jsx-a11y/tabindex-no-positive": "off",
8989
},
90-
overrides: [{
91-
files: [
92-
"src/**/*.{ts,tsx}",
93-
"test/**/*.{ts,tsx}",
94-
],
95-
extends: [
96-
"plugin:matrix-org/typescript",
97-
"plugin:matrix-org/react",
98-
],
99-
rules: {
100-
// Things we do that break the ideal style
101-
"prefer-promise-reject-errors": "off",
102-
"quotes": "off",
103-
"no-extra-boolean-cast": "off",
90+
overrides: [
91+
{
92+
files: [
93+
"src/**/*.{ts,tsx}",
94+
"test/**/*.{ts,tsx}",
95+
],
96+
extends: [
97+
"plugin:matrix-org/typescript",
98+
"plugin:matrix-org/react",
99+
],
100+
rules: {
101+
// Things we do that break the ideal style
102+
"prefer-promise-reject-errors": "off",
103+
"quotes": "off",
104+
"no-extra-boolean-cast": "off",
104105

105-
// Remove Babel things manually due to override limitations
106-
"@babel/no-invalid-this": ["off"],
106+
// Remove Babel things manually due to override limitations
107+
"@babel/no-invalid-this": ["off"],
107108

108-
// We're okay being explicit at the moment
109-
"@typescript-eslint/no-empty-interface": "off",
110-
// We disable this while we're transitioning
111-
"@typescript-eslint/no-explicit-any": "off",
112-
// We'd rather not do this but we do
113-
"@typescript-eslint/ban-ts-comment": "off",
109+
// We're okay being explicit at the moment
110+
"@typescript-eslint/no-empty-interface": "off",
111+
// We disable this while we're transitioning
112+
"@typescript-eslint/no-explicit-any": "off",
113+
// We'd rather not do this but we do
114+
"@typescript-eslint/ban-ts-comment": "off",
115+
},
114116
},
115-
}],
117+
// temporary override for offending icon require files
118+
{
119+
files: [
120+
"src/SdkConfig.ts",
121+
"src/components/structures/FileDropTarget.tsx",
122+
"src/components/structures/RoomStatusBar.tsx",
123+
"src/components/structures/UserMenu.tsx",
124+
"src/components/views/avatars/WidgetAvatar.tsx",
125+
"src/components/views/dialogs/AddExistingToSpaceDialog.tsx",
126+
"src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx",
127+
"src/components/views/dialogs/ForwardDialog.tsx",
128+
"src/components/views/dialogs/InviteDialog.tsx",
129+
"src/components/views/dialogs/ModalWidgetDialog.tsx",
130+
"src/components/views/dialogs/UploadConfirmDialog.tsx",
131+
"src/components/views/dialogs/security/SetupEncryptionDialog.tsx",
132+
"src/components/views/elements/AddressTile.tsx",
133+
"src/components/views/elements/AppWarning.tsx",
134+
"src/components/views/elements/SSOButtons.tsx",
135+
"src/components/views/messages/MAudioBody.tsx",
136+
"src/components/views/messages/MImageBody.tsx",
137+
"src/components/views/messages/MFileBody.tsx",
138+
"src/components/views/messages/MStickerBody.tsx",
139+
"src/components/views/messages/MVideoBody.tsx",
140+
"src/components/views/messages/MVoiceMessageBody.tsx",
141+
"src/components/views/right_panel/EncryptionPanel.tsx",
142+
"src/components/views/rooms/EntityTile.tsx",
143+
"src/components/views/rooms/LinkPreviewGroup.tsx",
144+
"src/components/views/rooms/MemberList.tsx",
145+
"src/components/views/rooms/MessageComposer.tsx",
146+
"src/components/views/rooms/ReplyPreview.tsx",
147+
"src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx",
148+
"src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx"
149+
],
150+
rules: {
151+
"@typescript-eslint/no-var-requires": "off",
152+
},
153+
}
154+
],
116155
settings: {
117156
react: {
118157
version: "detect",

‎src/SdkConfig.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const DEFAULTS: ConfigOptions = {
5050
},
5151
desktopBuilds: {
5252
available: true,
53-
logo: require("../res/img/element-desktop-logo.svg"),
53+
logo: require("../res/img/element-desktop-logo.svg").default,
5454
url: "https://element.io/get-started",
5555
},
5656
};

‎src/components/structures/FileDropTarget.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ limitations under the License.
1717
import React, { useEffect, useState } from "react";
1818

1919
import { _t } from "../../languageHandler";
20-
import FileDropSvg from '../../../res/img/upload-big.svg';
2120

2221
interface IProps {
2322
parent: HTMLElement;
@@ -110,7 +109,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
110109

111110
if (state.dragging) {
112111
return <div className="mx_FileDropTarget">
113-
<img src={FileDropSvg} className="mx_FileDropTarget_image" alt="" />
112+
<img src={require("../../../res/img/upload-big.svg").default} className="mx_FileDropTarget_image" alt="" />
114113
{ _t("Drop file here to upload") }
115114
</div>;
116115
}

‎src/components/structures/GroupView.js

+8-14
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,6 @@ import { createSpaceFromCommunity } from "../../utils/space";
4646
import { Action } from "../../dispatcher/actions";
4747
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
4848
import { UPDATE_EVENT } from "../../stores/AsyncStore";
49-
import CreateRoomSvg from '../../../res/img/icons-create-room.svg';
50-
import CancelSmallSvg from '../../../res/img/cancel-small.svg';
51-
import CancelSvg from '../../../res/img/cancel.svg';
52-
import ExternalLinkSvg from '../../../res/img/external-link.svg';
53-
import AddRoomSvg from '../../../res/img/icons-room-add.svg';
54-
import CameraSvg from '../../../res/img/camera.svg';
5549

5650
const LONG_DESC_PLACEHOLDER = _td(
5751
`<h1>HTML for your community's page</h1>
@@ -141,7 +135,7 @@ class CategoryRoomList extends React.Component {
141135
(<AccessibleButton className="mx_GroupView_featuredThings_addButton"
142136
onClick={this.onAddRoomsToSummaryClicked}
143137
>
144-
<img src={CreateRoomSvg} width="64" height="64" />
138+
<img src={require("../../../res/img/icons-create-room.svg").default} width="64" height="64" />
145139
<div className="mx_GroupView_featuredThings_addButton_label">
146140
{ _t('Add a Room') }
147141
</div>
@@ -241,7 +235,7 @@ class FeaturedRoom extends React.Component {
241235
const deleteButton = this.props.editing ?
242236
<img
243237
className="mx_GroupView_featuredThing_deleteButton"
244-
src={CancelSmallSvg}
238+
src={require("../../../res/img/cancel-small.svg").default}
245239
width="14"
246240
height="14"
247241
alt="Delete"
@@ -312,7 +306,7 @@ class RoleUserList extends React.Component {
312306
render() {
313307
const addButton = this.props.editing ?
314308
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
315-
<img src={CreateRoomSvg} width="64" height="64" />
309+
<img src={require("../../../res/img/icons-create-room.svg").default} width="64" height="64" />
316310
<div className="mx_GroupView_featuredThings_addButton_label">
317311
{ _t('Add a User') }
318312
</div>
@@ -392,7 +386,7 @@ class FeaturedUser extends React.Component {
392386
const deleteButton = this.props.editing ?
393387
<img
394388
className="mx_GroupView_featuredThing_deleteButton"
395-
src={CancelSmallSvg}
389+
src={require("../../../res/img/cancel-small.svg").default}
396390
width="14"
397391
height="14"
398392
alt="Delete"
@@ -850,7 +844,7 @@ export default class GroupView extends React.Component {
850844
},
851845
) }
852846
<a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
853-
<img src={ExternalLinkSvg} width="11" height="10" alt='' />
847+
<img src={require("../../../res/img/external-link.svg").default} width="11" height="10" alt='' />
854848
</a>
855849
</div>;
856850
}
@@ -931,7 +925,7 @@ export default class GroupView extends React.Component {
931925
onClick={this._onAddRoomsClick}
932926
>
933927
<div className="mx_GroupView_rooms_header_addRow_button">
934-
<img src={AddRoomSvg} width="24" height="24" />
928+
<img src={require("../../../res/img/icons-room-add.svg").default} width="24" height="24" />
935929
</div>
936930
<div className="mx_GroupView_rooms_header_addRow_label">
937931
{ _t('Add rooms to this community') }
@@ -1263,7 +1257,7 @@ export default class GroupView extends React.Component {
12631257
<div className="mx_GroupView_avatarPicker_edit">
12641258
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
12651259
<img
1266-
src={CameraSvg}
1260+
src={require("../../../res/img/camera.svg").default}
12671261
alt={_t("Upload avatar")}
12681262
title={_t("Upload avatar")}
12691263
width="17"
@@ -1337,7 +1331,7 @@ export default class GroupView extends React.Component {
13371331
onClick={this._onCancelClick}
13381332
>
13391333
<img
1340-
src={CancelSvg}
1334+
src={require("../../../res/img/cancel.svg").default}
13411335
className="mx_filterFlipColor"
13421336
width="18"
13431337
height="18"

‎src/components/structures/MyGroups.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import AccessibleButton from '../views/elements/AccessibleButton';
2626
import MatrixClientContext from "../../contexts/MatrixClientContext";
2727
import AutoHideScrollbar from "./AutoHideScrollbar";
2828
import { replaceableComponent } from "../../utils/replaceableComponent";
29-
import GroupsSvg from '../../../res/img/icons-groups.svg';
3029

3130
@replaceableComponent("structures.MyGroups")
3231
export default class MyGroups extends React.Component {
@@ -107,7 +106,7 @@ export default class MyGroups extends React.Component {
107106
}
108107

109108
return <div className="mx_MyGroups">
110-
<SimpleRoomHeader title={_t("Communities")} icon={GroupsSvg} />
109+
<SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg").default} />
111110
<div className='mx_MyGroups_header'>
112111
<div className="mx_MyGroups_headerCard">
113112
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />
@@ -123,7 +122,7 @@ export default class MyGroups extends React.Component {
123122
</div>
124123
{ /*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
125124
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
126-
<img src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
125+
<img src={require("../../../res/img/icons-create-room.svg").default} width="50" height="50" />
127126
</AccessibleButton>
128127
<div className="mx_MyGroups_headerCard_content">
129128
<div className="mx_MyGroups_headerCard_header">

‎src/components/structures/RoomStatusBar.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import { StaticNotificationState } from "../../stores/notifications/StaticNotifi
3030
import AccessibleButton from "../views/elements/AccessibleButton";
3131
import InlineSpinner from "../views/elements/InlineSpinner";
3232
import MatrixClientContext from "../../contexts/MatrixClientContext";
33-
import WarningTriangleSvg from '../../../res/img/feather-customised/warning-triangle.svg';
3433

3534
const STATUS_BAR_HIDDEN = 0;
3635
const STATUS_BAR_EXPANDED = 1;
@@ -286,7 +285,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
286285
<div role="alert">
287286
<div className="mx_RoomStatusBar_connectionLostBar">
288287
<img
289-
src={WarningTriangleSvg}
288+
src={require("../../../res/img/feather-customised/warning-triangle.svg").default}
290289
width="24"
291290
height="24"
292291
title="/!\ "

‎src/components/structures/UserMenu.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedP
6262
import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
6363
import PosthogTrackers from "../../PosthogTrackers";
6464
import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
65-
import SwitchThemeSvg from '../../../res/img/element-icons/roomlist/dark-light-mode.svg';
6665

6766
const CustomStatusSection = () => {
6867
const cli = useContext(MatrixClientContext);
@@ -516,7 +515,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
516515
title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
517516
>
518517
<img
519-
src={SwitchThemeSvg}
518+
src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg").default}
520519
alt={_t("Switch theme")}
521520
width={16}
522521
/>

‎src/components/views/avatars/WidgetAvatar.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,22 @@ import classNames from 'classnames';
2020
import { IApp } from "../../../stores/WidgetStore";
2121
import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
2222
import { mediaFromMxc } from "../../../customisations/Media";
23-
import DefaultAppSvg from '../../../../res/img/element-icons/room/default_app.svg';
24-
import DefaultVideoSvg from '../../../../res/img/element-icons/room/default_video.svg';
25-
import DefaultCalSvg from '../../../../res/img/element-icons/room/default_cal.svg';
26-
import DefaultDocSvg from '../../../../res/img/element-icons/room/default_doc.svg';
27-
import DefaultClockSvg from '../../../../res/img/element-icons/room/default_clock.svg';
2823

2924
interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
3025
app: IApp;
3126
}
3227

3328
const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
34-
let iconUrls = [DefaultAppSvg];
29+
let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg").default];
3530
// heuristics for some better icons until Widgets support their own icons
3631
if (app.type.includes("jitsi")) {
37-
iconUrls = [DefaultVideoSvg];
32+
iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg").default];
3833
} else if (app.type.includes("meeting") || app.type.includes("calendar")) {
39-
iconUrls = [DefaultCalSvg];
34+
iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg").default];
4035
} else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
41-
iconUrls = [DefaultDocSvg];
36+
iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg").default];
4237
} else if (app.type.includes("clock")) {
43-
iconUrls = [DefaultClockSvg];
38+
iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg").default];
4439
}
4540

4641
return (

‎src/components/views/context_menus/GroupInviteTileContextMenu.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import Modal from '../../../Modal';
2626
import GroupStore from "../../../stores/GroupStore";
2727
import { MenuItem } from "../../structures/ContextMenu";
2828
import { replaceableComponent } from "../../../utils/replaceableComponent";
29-
import ContextDeleteSvg from '../../../../res/img/icon_context_delete.svg';
3029

3130
@replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
3231
export default class GroupInviteTileContextMenu extends React.Component {
@@ -86,7 +85,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
8685
render() {
8786
return <div>
8887
<MenuItem className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject}>
89-
<img className="mx_RoomTileContextMenu_tag_icon" src={ContextDeleteSvg} width="15" height="15" alt="" />
88+
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg").default} width="15" height="15" alt="" />
9089
{ _t('Reject') }
9190
</MenuItem>
9291
</div>;

‎src/components/views/dialogs/AddExistingToSpaceDialog.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ import ProgressBar from "../elements/ProgressBar";
3939
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
4040
import QueryMatcher from "../../../autocomplete/QueryMatcher";
4141
import LazyRenderList from "../elements/LazyRenderList";
42-
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
4342

4443
// These values match CSS
4544
const ROW_HEIGHT = 32 + 12;
@@ -214,7 +213,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
214213
if (error) {
215214
footer = <>
216215
<img
217-
src={WarningBadgeSvg}
216+
src={require("../../../../res/img/element-icons/warning-badge.svg").default}
218217
height="24"
219218
width="24"
220219
alt=""

‎src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ import { inviteUsersToRoom } from "../../../RoomInvite";
4444
import ProgressBar from "../elements/ProgressBar";
4545
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
4646
import { CreateEventField, IGroupRoom, IGroupSummary } from "../../../@types/groups";
47-
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
4847

4948
interface IProps {
5049
matrixClient: MatrixClient;
@@ -242,7 +241,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
242241
let footer;
243242
if (error) {
244243
footer = <>
245-
<img src={WarningBadgeSvg} height="24" width="24" alt="" />
244+
<img src={require("../../../../res/img/element-icons/warning-badge.svg").default} height="24" width="24" alt="" />
246245

247246
<span className="mx_CreateSpaceFromCommunityDialog_error">
248247
<div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>

‎src/components/views/dialogs/ForwardDialog.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ import { roomContextDetailsText } from "../../../Rooms";
4848
import { Action } from "../../../dispatcher/actions";
4949
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
5050
import { ButtonEvent } from "../elements/AccessibleButton";
51-
import EllipsisSvg from '../../../../res/img/ellipsis.svg';
5251

5352
const AVATAR_SIZE = 30;
5453

@@ -217,7 +216,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
217216
<EntityTile
218217
className="mx_EntityTile_ellipsis"
219218
avatarJsx={
220-
<BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
219+
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
221220
}
222221
name={text}
223222
presenceState="online"

0 commit comments

Comments
 (0)