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

@@ -7,3 +7,4 @@ dist-ssr
 .idea/
 public/config.json
 /coverage
+yarn-error.log

.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";

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",

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";

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<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   bgKey?: string;
   src?: string;
   size?: Size | number;
@@ -71,7 +71,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   fallback: string;
 }
 
-export const Avatar: React.FC<Props> = ({
+export const Avatar: FC<Props> = ({
   bgKey,
   src,
   fallback,

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,

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";

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";

src/Header.stories.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { GridLayoutMenu } from "./room/GridLayoutMenu";
 import {
   Header,

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";

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<Props> = ({
+export const IncompatibleVersionModal: FC<Props> = ({
   userIds,
   room,
   onClose,

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<T> extends AriaListBoxOptions<T> {
   optionClassName: string;
   state: ListState<T>;
   className?: string;
-  listBoxRef?: React.MutableRefObject<HTMLUListElement>;
+  listBoxRef?: MutableRefObject<HTMLUListElement>;
 }
 
 export function ListBox<T>({
@@ -84,7 +84,7 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
   delete optionProps.onPointerUp;
   optionProps.onClick = useCallback(
     (e) => {
-      origPointerUp(e as unknown as React.PointerEvent<HTMLElement>);
+      origPointerUp(e as unknown as PointerEvent<HTMLElement>);
     },
     [origPointerUp]
   );

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";

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,

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 {

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,

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";

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";

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";

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";
 

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,

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";

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";
 

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";

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";

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";
 

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";

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";
 

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";

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";
 

src/home/RegisteredView.tsx

@@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import { useState, useCallback, FormEvent, FormEventHandler } from "react";
-  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";

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";

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<HTMLInputElement, Props>(
       const currentInput = fileInputRef.current;
 
       const onChange = (e: Event) => {
-        const inputEvent = e as unknown as React.ChangeEvent<HTMLInputElement>;
+        const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
         if (inputEvent.target.files.length > 0) {
           setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
           setRemoved(false);

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" ? (
           <textarea
             id={id}
-            ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+            ref={ref as ForwardedRef<HTMLTextAreaElement>}
             disabled={disabled}
             aria-describedby={descriptionId}
             {...rest}
@@ -122,7 +129,7 @@ export const InputField = forwardRef<
         ) : (
           <input
             id={id}
-            ref={ref as React.ForwardedRef<HTMLInputElement>}
+            ref={ref as ForwardedRef<HTMLInputElement>}
             type={type}
             checked={checked}
             disabled={disabled}

src/input/SelectInput.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";

src/input/StarRatingInput.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, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./StarRatingInput.module.css";

src/livekit/useLiveKit.ts

@@ -1,6 +1,6 @@
 import { Room, RoomOptions } from "livekit-client";
 import { useLiveKitRoom, useToken } from "@livekit/components-react";
-import React from "react";
+import { useMemo } from "react";
 
 import { defaultLiveKitOptions } from "./options";
 
@@ -26,7 +26,7 @@ export function useLiveKit(
   userChoices: UserChoices,
   config: LiveKitConfig
 ): Room | undefined {
-  const tokenOptions = React.useMemo(
+  const tokenOptions = useMemo(
     () => ({
       userInfo: {
         name: config.userDisplayName,
@@ -37,7 +37,7 @@ export function useLiveKit(
   );
   const token = useToken(config.jwtUrl, config.roomName, tokenOptions);
 
-  const roomOptions = React.useMemo((): RoomOptions => {
+  const roomOptions = useMemo((): RoomOptions => {
     const options = defaultLiveKitOptions;
     options.videoCaptureDefaults = {
       ...options.videoCaptureDefaults,

src/main.tsx

@@ -20,7 +20,7 @@ limitations under the License.
 // dependency references.
 import "matrix-js-sdk/src/browser-index";
 
-import React, { StrictMode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
 

src/popover/Popover.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, HTMLAttributes } from "react";
+import { forwardRef, HTMLAttributes } from "react";
 import { DismissButton, useOverlay } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
 import classNames from "classnames";

src/popover/PopoverMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, useRef } from "react";
+import { forwardRef, useRef } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
 import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";

src/room/CallEndedView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FormEventHandler, useCallback, useState } from "react";
+import { FormEventHandler, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";

src/room/GridLayoutMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Item } from "@react-stately/collections";
 import { useTranslation } from "react-i18next";
 

src/room/GroupCallInspector.tsx

@@ -16,13 +16,16 @@ limitations under the License.
 
 import * as Sentry from "@sentry/react";
 import { Resizable } from "re-resizable";
-import React, {
+import {
   useEffect,
   useState,
   useReducer,
   useRef,
   createContext,
   useContext,
+  Dispatch,
+  SetStateAction,
+  ReactNode,
 } from "react";
 import ReactJson, { CollapsedFieldProps } from "react-json-view";
 import mermaid from "mermaid";
@@ -136,16 +139,13 @@ function lineForEvent(event: SequenceDiagramMatrixEvent): string {
 
 export const InspectorContext =
   createContext<
-    [
+    [InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
-      InspectorContextState,
-      React.Dispatch<React.SetStateAction<InspectorContextState>>
-    ]
   >(undefined);
 
 export function InspectorContextProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   // We take the tuple of [currentState, setter] and stick
   // it straight into the context for other things to call

src/room/GroupCallLoader.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useTranslation } from "react-i18next";

src/room/GroupCallView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";

src/room/InCallView.tsx

@@ -28,7 +28,7 @@ import { Room, Track } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import React, { Ref, useCallback, useEffect, useMemo, useRef } from "react";
+import { Ref, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { OverlayTriggerState } from "@react-stately/overlays";
@@ -50,11 +50,7 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import {
+import { useVideoGridLayout, TileDescriptor } from "../video-grid/VideoGrid";
-  VideoGrid,
-  useVideoGridLayout,
-  TileDescriptor,
-} from "../video-grid/VideoGrid";
 import {
   useShowInspector,
   useShowConnectionStats,
@@ -249,8 +245,7 @@ export function InCallView({
     [fullscreenItem, noControls, items]
   );
 
-  const Grid =
+  const Grid = NewVideoGrid;
-    items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
 
   const prefersReducedMotion = usePrefersReducedMotion();
 

src/room/InviteModal.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 { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";

src/room/LobbyView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { useRef, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
@@ -39,14 +39,14 @@ export function LobbyView(props: Props) {
   const { t } = useTranslation();
   useLocationNavigation();
 
-  const joinCallButtonRef = React.useRef<HTMLButtonElement>();
+  const joinCallButtonRef = useRef<HTMLButtonElement>();
-  React.useEffect(() => {
+  useEffect(() => {
     if (joinCallButtonRef.current) {
       joinCallButtonRef.current.focus();
     }
   }, [joinCallButtonRef]);
 
-  const [userChoices, setUserChoices] = React.useState<UserChoices | undefined>(
+  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
     undefined
   );
 

src/room/RageshakeRequestModal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";

src/room/RoomAuthView.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 { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 

src/room/RoomPage.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect, useState, useCallback } from "react";
+import { FC, useEffect, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";

src/room/RoomRedirect.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useLocation, useHistory } from "react-router-dom";
 
 import { Config } from "../config/Config";

src/room/VideoPreview.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { OverlayTriggerState } from "@react-stately/overlays";
@@ -65,8 +65,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
   const mediaDevices = useMediaDevices();
 
   // Create local media tracks.
-  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(true);
+  const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
-  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(true);
+  const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
   const [videoId, audioId] = [
     mediaDevices.videoIn.selectedId,
     mediaDevices.audioIn.selectedId,
@@ -85,7 +85,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
 
   const activeVideoId = video?.selectedDevice?.deviceId;
   const activeAudioId = audio?.selectedDevice?.deviceId;
-  React.useEffect(() => {
+  useEffect(() => {
     const createChoices = (
       enabled: boolean,
       deviceId?: string
@@ -116,7 +116,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     mediaDevices.videoIn.setSelected,
     mediaDevices.audioIn.setSelected,
   ];
-  React.useEffect(() => {
+  useEffect(() => {
     if (activeVideoId && activeVideoId !== "") {
       selectVideo(activeVideoId);
     }
@@ -125,8 +125,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     }
   }, [selectVideo, selectAudio, activeVideoId, activeAudioId]);
 
-  const mediaElement = React.useRef(null);
+  const mediaElement = useRef(null);
-  React.useEffect(() => {
+  useEffect(() => {
     if (mediaElement.current) {
       video?.localTrack?.attach(mediaElement.current);
     }

src/settings/FeedbackSettingsTab.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 

src/settings/ProfileSettingsTab.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 

src/settings/SettingsModal.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 { ChangeEvent, useCallback, useState } from "react";
 import { Item } from "@react-stately/collections";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk";
@@ -188,7 +188,7 @@ export const SettingsModal = (props: Props) => {
               description={t(
                 "Expose developer settings in the settings window."
               )}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
                 setDeveloperSettingsTab(event.target.checked)
               }
             />
@@ -200,7 +200,7 @@ export const SettingsModal = (props: Props) => {
               type="checkbox"
               checked={optInAnalytics}
               description={optInDescription}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
                 setOptInAnalytics(event.target.checked)
               }
             />
@@ -230,7 +230,7 @@ export const SettingsModal = (props: Props) => {
                 label={t("Show call inspector")}
                 type="checkbox"
                 checked={showInspector}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setShowInspector(e.target.checked)
                 }
               />
@@ -242,7 +242,7 @@ export const SettingsModal = (props: Props) => {
                 label={t("Show connection stats")}
                 type="checkbox"
                 checked={showConnectionStats}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setShowConnectionStats(e.target.checked)
                 }
               />

src/tabs/Tabs.stories.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { FC } from "react";
 
 import { TabContainer, TabItem } from "./Tabs";
 import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
@@ -30,7 +30,7 @@ export default {
   },
 };
 
-export const Tabs: React.FC<{}> = () => (
+export const Tabs: FC = () => (
   <TabContainer>
     <TabItem
       title={

src/tabs/Tabs.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { useTabList, useTab, useTabPanel } from "@react-aria/tabs";
 import { Item } from "@react-stately/collections";
 import { useTabListState, TabListState } from "@react-stately/tabs";

src/typography/Typography.stories.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { FC } from "react";
 
 import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography";
 
@@ -25,7 +25,7 @@ export default {
   },
 };
 
-export const Typography: React.FC<{}> = () => (
+export const Typography: FC = () => (
   <>
     <Headline>Headline Semi Bold</Headline>
     <Title>Title</Title>

src/video-grid/BigGrid.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import TinyQueue from "tinyqueue";
 import { RectReadOnly } from "react-use-measure";
 import { FC, memo, ReactNode } from "react";
-import React from "react";
 
 import { TileDescriptor } from "./VideoGrid";
 import { Slot } from "./NewVideoGrid";

src/video-grid/NewVideoGrid.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
 import { EventTypes, Handler, useScroll } from "@use-gesture/react";
-import React, {
+import {
   CSSProperties,
   FC,
   ReactNode,

src/video-grid/TileWrapper.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { memo, ReactNode, RefObject, useRef } from "react";
+import { memo, ReactNode, RefObject, useRef } from "react";
 import { EventTypes, Handler, useDrag } from "@use-gesture/react";
 import { SpringValue, to } from "@react-spring/web";
 

src/video-grid/VideoGrid.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import {
   ComponentProps,
   Key,
   ReactNode,
@@ -819,7 +819,7 @@ export interface VideoGridProps<T> {
   layout: Layout;
   disableAnimations: boolean;
   layoutStates: LayoutStatesMap;
-  children: (props: ChildrenProperties<T>) => React.ReactNode;
+  children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
 // Represents something that should get a tile on the layout,

src/video-grid/VideoTile.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -57,12 +57,12 @@ interface Props {
   targetWidth: number;
   targetHeight: number;
   className?: string;
-  style?: React.ComponentProps<typeof animated.div>["style"];
+  style?: ComponentProps<typeof animated.div>["style"];
   showSpeakingIndicator: boolean;
   showConnectionStats: boolean;
 }
 
-export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
+export const VideoTile = forwardRef<HTMLDivElement, Props>(
   (
     {
       data,
@@ -87,7 +87,7 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
       () => member?.rawDisplayName ?? "[👻]",
       [member]
     );
-    React.useEffect(() => {
+    useEffect(() => {
       if (member) {
         const updateName = () => {
           setDisplayName(member.rawDisplayName);

test/home/CallList-test.tsx

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-
 import { render, RenderResult } from "@testing-library/react";
 import { CallList } from "../../src/home/CallList";
 import { MatrixClient } from "matrix-js-sdk";

tsconfig.json

@@ -7,7 +7,7 @@
     "noEmit": true,
     "noImplicitAny": false,
     "noUnusedLocals": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["es2020", "dom", "dom.iterable"],
     "strict": false,
     "plugins": [

vite.config.js

@@ -18,14 +18,14 @@ import { defineConfig, loadEnv } from "vite";
 import svgrPlugin from "vite-plugin-svgr";
 import htmlTemplate from "vite-plugin-html-template";
 import sentryVitePlugin from "@sentry/vite-plugin";
-
+import react from "@vitejs/plugin-react";
-import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
 
   const plugins = [
+    react(),
     svgrPlugin(),
     htmlTemplate.default({
       data: {
@@ -49,6 +49,9 @@ export default defineConfig(({ mode }) => {
   }
 
   return {
+    server: {
+      port: 3000,
+    },
     build: {
       sourcemap: true,
     },