From 17450b453195aedeb3abb4d91d12672135e85688 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 30 Jun 2023 18:21:18 -0400 Subject: [PATCH] Fix big grid crashing due to missing React import by fixing the cause rather than the symptom: this upgrades the code to use the new, recommended JSX transform mode of React 17+, which no longer requires you to import React manually just to write JSX. --- .gitignore | 1 + .storybook/preview.jsx | 1 - package.json | 5 +- src/App.tsx | 2 +- src/Avatar.tsx | 6 +- src/ClientContext.tsx | 2 +- src/Facepile.tsx | 2 +- src/FullScreenView.tsx | 2 +- src/Header.stories.jsx | 1 - src/Header.tsx | 2 +- src/IncompatibleVersionModal.tsx | 4 +- src/ListBox.tsx | 6 +- src/Menu.tsx | 2 +- src/Modal.tsx | 2 +- src/SequenceDiagramViewerPage.tsx | 2 +- src/Tooltip.tsx | 2 +- src/UserMenu.tsx | 2 +- src/UserMenuContainer.tsx | 2 +- src/analytics/AnalyticsNotice.tsx | 2 +- src/auth/LoginPage.tsx | 2 +- src/auth/RegisterPage.tsx | 2 +- src/button/Button.tsx | 2 +- src/button/CopyButton.tsx | 1 - src/button/LinkButton.tsx | 2 +- src/button/VolumeIcon.tsx | 2 - src/form/Form.tsx | 2 +- src/home/CallList.tsx | 1 - src/home/CallTypeDropdown.tsx | 2 +- src/home/HomePage.tsx | 1 - src/home/JoinExistingCallModal.tsx | 1 - src/home/RegisteredView.tsx | 7 +- src/home/UnauthenticatedView.tsx | 2 +- src/input/AvatarInputField.tsx | 4 +- src/input/Input.tsx | 13 +- src/input/SelectInput.tsx | 2 +- src/input/StarRatingInput.tsx | 2 +- src/livekit/useLiveKit.ts | 6 +- src/main.tsx | 2 +- src/popover/Popover.tsx | 2 +- src/popover/PopoverMenu.tsx | 2 +- src/room/CallEndedView.tsx | 2 +- src/room/GridLayoutMenu.tsx | 2 +- src/room/GroupCallInspector.tsx | 12 +- src/room/GroupCallLoader.tsx | 2 +- src/room/GroupCallView.tsx | 2 +- src/room/InCallView.tsx | 11 +- src/room/InviteModal.tsx | 2 +- src/room/LobbyView.tsx | 8 +- src/room/RageshakeRequestModal.tsx | 2 +- src/room/RoomAuthView.tsx | 2 +- src/room/RoomPage.tsx | 2 +- src/room/RoomRedirect.tsx | 2 +- src/room/VideoPreview.tsx | 14 +- src/settings/FeedbackSettingsTab.tsx | 2 +- src/settings/ProfileSettingsTab.tsx | 2 +- src/settings/SettingsModal.tsx | 10 +- src/tabs/Tabs.stories.tsx | 4 +- src/tabs/Tabs.tsx | 2 +- src/typography/Typography.stories.tsx | 4 +- src/video-grid/BigGrid.tsx | 1 - src/video-grid/NewVideoGrid.tsx | 2 +- src/video-grid/TileWrapper.tsx | 2 +- src/video-grid/VideoGrid.tsx | 4 +- src/video-grid/VideoTile.tsx | 8 +- test/home/CallList-test.tsx | 2 - tsconfig.json | 2 +- vite.config.js | 7 +- yarn.lock | 706 ++++++++++++++++++-------- 68 files changed, 600 insertions(+), 329 deletions(-) diff --git a/.gitignore b/.gitignore index 263dea0..6ad79d7 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ dist-ssr .idea/ public/config.json /coverage +yarn-error.log diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 9fda6df..928e10e 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -1,4 +1,3 @@ -import React from "react"; import { addDecorator } from "@storybook/react"; import { MemoryRouter } from "react-router-dom"; import { usePageFocusStyle } from "../src/usePageFocusStyle"; diff --git a/package.json b/package.json index 360c84c..c98dbe5 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@types/grecaptcha": "^3.0.4", "@types/sdp-transform": "^2.4.5", "@use-gesture/react": "^10.2.11", + "@vitejs/plugin-react": "^4.0.1", "classnames": "^2.3.1", "color-hash": "^2.0.1", "events": "^3.3.0", @@ -105,9 +106,9 @@ "storybook-builder-vite": "^0.1.12", "typescript": "^4.9.5", "typescript-strict-plugin": "^2.0.1", - "vite": "^2.4.2", + "vite": "^4.2.0", "vite-plugin-html-template": "^1.1.0", - "vite-plugin-svgr": "^0.4.0" + "vite-plugin-svgr": "^3.2.0" }, "jest": { "testEnvironment": "jsdom", diff --git a/src/App.tsx b/src/App.tsx index f859a19..d020655 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { Suspense, useEffect, useState } from "react"; +import { Suspense, useEffect, useState } from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import * as Sentry from "@sentry/react"; import { OverlayProvider } from "@react-aria/overlays"; diff --git a/src/Avatar.tsx b/src/Avatar.tsx index a6d151f..9549cd4 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useMemo, CSSProperties } from "react"; +import { useMemo, CSSProperties, HTMLAttributes, FC } from "react"; import classNames from "classnames"; import { MatrixClient } from "matrix-js-sdk/src/client"; @@ -62,7 +62,7 @@ function hashStringToArrIndex(str: string, arrLength: number) { const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) => src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src; -interface Props extends React.HTMLAttributes { +interface Props extends HTMLAttributes { bgKey?: string; src?: string; size?: Size | number; @@ -71,7 +71,7 @@ interface Props extends React.HTMLAttributes { fallback: string; } -export const Avatar: React.FC = ({ +export const Avatar: FC = ({ bgKey, src, fallback, diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx index 08593a4..c69dd44 100644 --- a/src/ClientContext.tsx +++ b/src/ClientContext.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { +import { FC, useCallback, useEffect, diff --git a/src/Facepile.tsx b/src/Facepile.tsx index 79e2788..f5ffff6 100644 --- a/src/Facepile.tsx +++ b/src/Facepile.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { HTMLAttributes, useMemo } from "react"; +import { HTMLAttributes, useMemo } from "react"; import classNames from "classnames"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx index 774e55a..95a8a7a 100644 --- a/src/FullScreenView.tsx +++ b/src/FullScreenView.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ReactNode, useCallback, useEffect } from "react"; +import { ReactNode, useCallback, useEffect } from "react"; import { useLocation } from "react-router-dom"; import classNames from "classnames"; import { Trans, useTranslation } from "react-i18next"; diff --git a/src/Header.stories.jsx b/src/Header.stories.jsx index 2ab1696..e5c4473 100644 --- a/src/Header.stories.jsx +++ b/src/Header.stories.jsx @@ -1,4 +1,3 @@ -import React from "react"; import { GridLayoutMenu } from "./room/GridLayoutMenu"; import { Header, diff --git a/src/Header.tsx b/src/Header.tsx index 8974bcc..8d754b9 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import classNames from "classnames"; -import React, { HTMLAttributes, ReactNode, useCallback } from "react"; +import { HTMLAttributes, ReactNode, useCallback } from "react"; import { Link } from "react-router-dom"; import { Room } from "matrix-js-sdk/src/models/room"; import { useTranslation } from "react-i18next"; diff --git a/src/IncompatibleVersionModal.tsx b/src/IncompatibleVersionModal.tsx index 49c9044..d11822d 100644 --- a/src/IncompatibleVersionModal.tsx +++ b/src/IncompatibleVersionModal.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import { Room } from "matrix-js-sdk/src/models/room"; -import React, { useMemo } from "react"; +import { FC, useMemo } from "react"; import { Trans, useTranslation } from "react-i18next"; import { Modal, ModalContent } from "./Modal"; @@ -27,7 +27,7 @@ interface Props { onClose: () => void; } -export const IncompatibleVersionModal: React.FC = ({ +export const IncompatibleVersionModal: FC = ({ userIds, room, onClose, diff --git a/src/ListBox.tsx b/src/ListBox.tsx index 121f367..0ee2542 100644 --- a/src/ListBox.tsx +++ b/src/ListBox.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useRef } from "react"; +import { MutableRefObject, PointerEvent, useCallback, useRef } from "react"; import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox"; import { ListState } from "@react-stately/list"; import { Node } from "@react-types/shared"; @@ -26,7 +26,7 @@ interface ListBoxProps extends AriaListBoxOptions { optionClassName: string; state: ListState; className?: string; - listBoxRef?: React.MutableRefObject; + listBoxRef?: MutableRefObject; } export function ListBox({ @@ -84,7 +84,7 @@ function Option({ item, state, className }: OptionProps) { delete optionProps.onPointerUp; optionProps.onClick = useCallback( (e) => { - origPointerUp(e as unknown as React.PointerEvent); + origPointerUp(e as unknown as PointerEvent); }, [origPointerUp] ); diff --git a/src/Menu.tsx b/src/Menu.tsx index 0a995af..1e15841 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { Key, useRef, useState } from "react"; +import { Key, useRef, useState } from "react"; import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu"; import { TreeState, useTreeState } from "@react-stately/tree"; import { mergeProps } from "@react-aria/utils"; diff --git a/src/Modal.tsx b/src/Modal.tsx index 6c24f0a..0721753 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -16,7 +16,7 @@ limitations under the License. /* eslint-disable jsx-a11y/no-autofocus */ -import React, { useRef, useMemo, ReactNode } from "react"; +import { useRef, useMemo, ReactNode } from "react"; import { useOverlay, usePreventScroll, diff --git a/src/SequenceDiagramViewerPage.tsx b/src/SequenceDiagramViewerPage.tsx index e04837d..208352f 100644 --- a/src/SequenceDiagramViewerPage.tsx +++ b/src/SequenceDiagramViewerPage.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useState } from "react"; +import { useCallback, useState } from "react"; import { useTranslation } from "react-i18next"; import { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index c2f64f2..e090633 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { +import { ForwardedRef, forwardRef, ReactElement, diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx index afb4248..5648edd 100644 --- a/src/UserMenu.tsx +++ b/src/UserMenu.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useMemo } from "react"; +import { useCallback, useMemo } from "react"; import { Item } from "@react-stately/collections"; import { useLocation } from "react-router-dom"; import { useTranslation } from "react-i18next"; diff --git a/src/UserMenuContainer.tsx b/src/UserMenuContainer.tsx index 0a116d9..4702c4f 100644 --- a/src/UserMenuContainer.tsx +++ b/src/UserMenuContainer.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useState } from "react"; +import { useCallback, useState } from "react"; import { useHistory, useLocation } from "react-router-dom"; import { useClient } from "./ClientContext"; diff --git a/src/analytics/AnalyticsNotice.tsx b/src/analytics/AnalyticsNotice.tsx index feceef7..544de61 100644 --- a/src/analytics/AnalyticsNotice.tsx +++ b/src/analytics/AnalyticsNotice.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import { FC } from "react"; import { Trans } from "react-i18next"; import { Link } from "../typography/Typography"; diff --git a/src/auth/LoginPage.tsx b/src/auth/LoginPage.tsx index 68cd326..c5a090f 100644 --- a/src/auth/LoginPage.tsx +++ b/src/auth/LoginPage.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { FC, FormEvent, useCallback, useRef, useState } from "react"; +import { FC, FormEvent, useCallback, useRef, useState } from "react"; import { useHistory, useLocation, Link } from "react-router-dom"; import { Trans, useTranslation } from "react-i18next"; diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx index 5eec26d..fd8e3f0 100644 --- a/src/auth/RegisterPage.tsx +++ b/src/auth/RegisterPage.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { +import { ChangeEvent, FC, FormEvent, diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 289f2b9..50184f0 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import React, { forwardRef, useCallback } from "react"; +import { forwardRef, useCallback } from "react"; import { PressEvent } from "@react-types/shared"; import classNames from "classnames"; import { useButton } from "@react-aria/button"; diff --git a/src/button/CopyButton.tsx b/src/button/CopyButton.tsx index 7453e45..91c8e75 100644 --- a/src/button/CopyButton.tsx +++ b/src/button/CopyButton.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; import { useTranslation } from "react-i18next"; import useClipboard from "react-use-clipboard"; diff --git a/src/button/LinkButton.tsx b/src/button/LinkButton.tsx index e918965..3f3b1d5 100644 --- a/src/button/LinkButton.tsx +++ b/src/button/LinkButton.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { HTMLAttributes } from "react"; +import { HTMLAttributes } from "react"; import { Link } from "react-router-dom"; import classNames from "classnames"; import * as H from "history"; diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx index d4958e4..163699f 100644 --- a/src/button/VolumeIcon.tsx +++ b/src/button/VolumeIcon.tsx @@ -15,8 +15,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; - import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg"; import { ReactComponent as AudioLow } from "../icons/AudioLow.svg"; import { ReactComponent as Audio } from "../icons/Audio.svg"; diff --git a/src/form/Form.tsx b/src/form/Form.tsx index fd98a62..5496179 100644 --- a/src/form/Form.tsx +++ b/src/form/Form.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import classNames from "classnames"; -import React, { FormEventHandler, forwardRef, ReactNode } from "react"; +import { FormEventHandler, forwardRef, ReactNode } from "react"; import styles from "./Form.module.css"; diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index b2a7774..545dfad 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; import { Link } from "react-router-dom"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; diff --git a/src/home/CallTypeDropdown.tsx b/src/home/CallTypeDropdown.tsx index 991c528..712523d 100644 --- a/src/home/CallTypeDropdown.tsx +++ b/src/home/CallTypeDropdown.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { FC } from "react"; +import { FC } from "react"; import { Item } from "@react-stately/collections"; import { useTranslation } from "react-i18next"; diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx index 7ff6efc..4c5522d 100644 --- a/src/home/HomePage.tsx +++ b/src/home/HomePage.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; import { useTranslation } from "react-i18next"; import { useClient } from "../ClientContext"; diff --git a/src/home/JoinExistingCallModal.tsx b/src/home/JoinExistingCallModal.tsx index 078d317..dfa6b09 100644 --- a/src/home/JoinExistingCallModal.tsx +++ b/src/home/JoinExistingCallModal.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; import { PressEvent } from "@react-types/shared"; import { useTranslation } from "react-i18next"; diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx index 41559d6..ee696d2 100644 --- a/src/home/RegisteredView.tsx +++ b/src/home/RegisteredView.tsx @@ -14,12 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { - useState, - useCallback, - FormEvent, - FormEventHandler, -} from "react"; +import { useState, useCallback, FormEvent, FormEventHandler } from "react"; import { useHistory } from "react-router-dom"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { useTranslation } from "react-i18next"; diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx index 44f16ad..1fb1a84 100644 --- a/src/home/UnauthenticatedView.tsx +++ b/src/home/UnauthenticatedView.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { FC, useCallback, useState, FormEventHandler } from "react"; +import { FC, useCallback, useState, FormEventHandler } from "react"; import { useHistory } from "react-router-dom"; import { randomString } from "matrix-js-sdk/src/randomstring"; import { Trans, useTranslation } from "react-i18next"; diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx index aec4880..9280fad 100644 --- a/src/input/AvatarInputField.tsx +++ b/src/input/AvatarInputField.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import { useObjectRef } from "@react-aria/utils"; -import React, { AllHTMLAttributes, useEffect } from "react"; +import { AllHTMLAttributes, ChangeEvent, useEffect } from "react"; import { useCallback } from "react"; import { useState } from "react"; import { forwardRef } from "react"; @@ -51,7 +51,7 @@ export const AvatarInputField = forwardRef( const currentInput = fileInputRef.current; const onChange = (e: Event) => { - const inputEvent = e as unknown as React.ChangeEvent; + const inputEvent = e as unknown as ChangeEvent; if (inputEvent.target.files.length > 0) { setObjUrl(URL.createObjectURL(inputEvent.target.files[0])); setRemoved(false); diff --git a/src/input/Input.tsx b/src/input/Input.tsx index 3548d5b..a983f71 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -14,7 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ChangeEvent, FC, forwardRef, ReactNode, useId } from "react"; +import { + ChangeEvent, + FC, + ForwardedRef, + forwardRef, + ReactNode, + useId, +} from "react"; import classNames from "classnames"; import styles from "./Input.module.css"; @@ -114,7 +121,7 @@ export const InputField = forwardRef< {type === "textarea" ? (