Don't need to import React just for JSX any more

packages/webamp/demo/js/DemoDesktop.tsx

@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import WebampIcon from "./WebampIcon";
 // import Mp3Icon from "./Mp3Icon";
 import SkinIcon from "./SkinIcon";

packages/webamp/demo/js/DesktopIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 import IconImage from "./IconImage";
 

packages/webamp/demo/js/DesktopLinkIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 import IconImage from "./IconImage";
 

packages/webamp/demo/js/IconImage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import SuspenseImage from "./SuspenseImage";
 
 type Props = {

packages/webamp/demo/js/MilkIcon.tsx

@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore

packages/webamp/demo/js/Mp3Icon.tsx

@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 // @ts-ignore
 import iconLarge from "../images/manifest/icon-96x96.png";
 // @ts-ignore

packages/webamp/demo/js/SkinIcon.tsx

@@ -1,5 +1,4 @@
 import WebampLazy from "../../js/webampLazy";
-import React from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/paint-file-32x32.png";
 import DesktopIcon from "./DesktopIcon";

packages/webamp/demo/js/SuspenseImage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 // A Resource is an object with a read method returning the payload
 interface Resource<Payload> {

packages/webamp/demo/js/WebampIcon.tsx

@@ -1,5 +1,5 @@
 import WebampLazy from "../../js/webampLazy";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 // @ts-ignore
 import iconSmall from "../images/icons/winamp2-32x32.png";
 import DesktopIcon from "./DesktopIcon";

packages/webamp/demo/js/index.js

@@ -1,7 +1,6 @@
 /* global SENTRY_DSN */
 
 import * as Sentry from "@sentry/browser";
-import React from "react";
 import ReactDOM from "react-dom";
 import createMiddleware from "redux-sentry-middleware";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";

packages/webamp/js/components/App.tsx

@@ -1,8 +1,9 @@
-import React, {
+import {
   useLayoutEffect,
   useEffect,
   useState,
   useCallback,
+  StrictMode,
 } from "react";
 import ReactDOM from "react-dom";
 import { FilePicker } from "../types";
@@ -127,7 +128,7 @@ export default function App({ media, filePickers }: Props) {
   }
 
   return ReactDOM.createPortal(
-    <React.StrictMode>
+    <StrictMode>
       <div onBlur={handleBlur}>
         <Skin />
         <ContextMenuWrapper
@@ -136,7 +137,7 @@ export default function App({ media, filePickers }: Props) {
           <WindowManager windows={renderWindows()} />
         </ContextMenuWrapper>
       </div>
-    </React.StrictMode>,
+    </StrictMode>,
     webampNode
   );
 }

packages/webamp/js/components/Balance.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";

packages/webamp/js/components/Character.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import deburr from "lodash/deburr";
 
 interface Props extends React.HTMLAttributes<HTMLSpanElement> {

packages/webamp/js/components/CharacterString.tsx

@@ -1,19 +1,19 @@
-import React from "react";
+import { memo, Fragment } from "react";
 import Character from "./Character";
 
 interface Props {
   children: string;
 }
 
-const CharacterString = React.memo((props: Props) => {
+const CharacterString = memo((props: Props) => {
   const text = `${props.children}` || "";
   const chars = text.split("");
   return (
-    <React.Fragment>
+    <Fragment>
       {chars.map((character, index) => (
         <Character key={index + character}>{character}</Character>
       ))}
-    </React.Fragment>
+    </Fragment>
   );
 });
 

packages/webamp/js/components/ClickedDiv.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import classnames from "classnames";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {

packages/webamp/js/components/ClipPaths.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useLayoutEffect } from "react";
+import { useMemo, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 
 type Props = {

packages/webamp/js/components/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from "react";
+import { useMemo, useEffect } from "react";
 import { createPortal } from "react-dom";
 import classnames from "classnames";
 

packages/webamp/js/components/ContextMenuTarget.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import ContextMenu from "./ContextMenu";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {

packages/webamp/js/components/ContextMenuWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState, useEffect, useCallback } from "react";
+import { ReactNode, useState, useEffect, useCallback } from "react";
 import ContextMenu from "./ContextMenu";
 
 interface Props {

packages/webamp/js/components/DropTarget.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useActionCreator } from "../hooks";
 import * as Actions from "../actionCreators";
 import { WindowId } from "../types";

packages/webamp/js/components/EqualizerWindow/Band.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import Slider from "rc-slider";
 import { Slider as SliderType } from "../../types";
 import { useTypedSelector, useActionCreator } from "../../hooks";

packages/webamp/js/components/EqualizerWindow/EqAuto.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Actions from "../../actionCreators";
 import { useTypedSelector, useActionCreator } from "../../hooks";
 
-const EqAuto = React.memo(() => {
+const EqAuto = memo(() => {
   const selected = useTypedSelector((state) => state.equalizer.auto);
   const toggleAuto = useActionCreator(Actions.toggleEqAuto);
   return (

packages/webamp/js/components/EqualizerWindow/EqGraph.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useLayoutEffect } from "react";
+import { useState, useMemo, useLayoutEffect } from "react";
 import { percentToRange, clamp } from "../../utils";
 import { BANDS } from "../../constants";
 import spline from "./spline";

packages/webamp/js/components/EqualizerWindow/EqOn.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import classnames from "classnames";
 
 import * as Actions from "../../actionCreators";

packages/webamp/js/components/EqualizerWindow/EqualizerShade.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Volume from "../Volume";
 import Balance from "../Balance";
 import { segment } from "../../utils";

packages/webamp/js/components/EqualizerWindow/PresetsContextMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import builtin from "../../../presets/builtin.json";
 import * as Actions from "../../actionCreators";
 import { Node, Parent, Hr } from "../ContextMenu";

packages/webamp/js/components/EqualizerWindow/index.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
 import getStore from "../../store";

packages/webamp/js/components/EqualizerWindow/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import classnames from "classnames";
 
 import { BANDS, WINDOWS } from "../../constants";

packages/webamp/js/components/FocusTarget.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect } from "react";
+import { useCallback, useState, useEffect } from "react";
 import { WindowId } from "../types";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";

packages/webamp/js/components/Fullscreen.tsx

@@ -1,5 +1,5 @@
 // Adapted from https://github.com/snakesilk/react-fullscreen
-import React, { ReactNode, useRef, useLayoutEffect, useEffect } from "react";
+import { ReactNode, useRef, useLayoutEffect, useEffect } from "react";
 import fscreen from "fscreen";
 
 interface Props {

packages/webamp/js/components/GenWindow/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import "../../../css/gen-window.css";
 

packages/webamp/js/components/MainWindow/ActionButtons.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import { memo } from "react";
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const ActionButtons = React.memo(() => {
+const ActionButtons = memo(() => {
   const previous = useActionCreator(Actions.previous);
   const play = useActionCreator(Actions.play);
   const pause = useActionCreator(Actions.pause);

packages/webamp/js/components/MainWindow/Close.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import ClickedDiv from "../ClickedDiv";
 import { useActionCreator } from "../../hooks";
 
 import * as Actions from "../../actionCreators";
 
-const Close = React.memo(() => {
+const Close = memo(() => {
   const close = useActionCreator(Actions.close);
   return <ClickedDiv id="close" onClick={close} title="Close" />;
 });

packages/webamp/js/components/MainWindow/ClutterBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Actions from "../../actionCreators";
@@ -19,7 +19,7 @@ function mouseUp(): Thunk {
   };
 }
 
-const ClutterBar = React.memo(() => {
+const ClutterBar = memo(() => {
   const handleMouseDown = useActionCreator(setFocusDouble);
   const handleMouseUp = useActionCreator(mouseUp);
   const doubled = useTypedSelector(Selectors.getDoubled);

packages/webamp/js/components/MainWindow/Eject.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const Eject = React.memo(() => {
+const Eject = memo(() => {
   const openMediaFileDialog = useActionCreator(Actions.openMediaFileDialog);
   return <div id="eject" onClick={openMediaFileDialog} title="Open File(s)" />;
 });

packages/webamp/js/components/MainWindow/EqToggleButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Selectors from "../../selectors";
@@ -9,7 +9,7 @@ function toggleEqualizer() {
   return Actions.toggleWindow("equalizer");
 }
 
-const EqToggleButton = React.memo(() => {
+const EqToggleButton = memo(() => {
   const handleClick = useActionCreator(toggleEqualizer);
   const windowOpen = useTypedSelector(Selectors.getWindowOpen)("equalizer");
   return (

packages/webamp/js/components/MainWindow/Kbps.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 
 import CharacterString from "../CharacterString";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
-const Kbps = React.memo(() => {
+const Kbps = memo(() => {
   const kbps = useTypedSelector(Selectors.getKbps);
   return (
     <div id="kbps">

packages/webamp/js/components/MainWindow/Khz.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 
 import CharacterString from "../CharacterString";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
-const Khz = React.memo(() => {
+const Khz = memo(() => {
   const khz = useTypedSelector(Selectors.getKhz);
   return (
     <div id="khz">

packages/webamp/js/components/MainWindow/MainBalance.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 
 import Balance from "../Balance";
 import * as Selectors from "../../selectors";
@@ -11,7 +11,7 @@ export const offsetFromBalance = (balance: number): number => {
   return offset;
 };
 
-const MainBalance = React.memo(() => {
+const MainBalance = memo(() => {
   const balance = useTypedSelector(Selectors.getBalance);
   return (
     <Balance

packages/webamp/js/components/MainWindow/MainContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { memo, Fragment, useEffect } from "react";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
 import { LOAD_STYLE } from "../../constants";
@@ -13,7 +13,7 @@ interface Props {
   filePickers: FilePicker[];
 }
 
-const MainContextMenu = React.memo(({ filePickers }: Props) => {
+const MainContextMenu = memo(({ filePickers }: Props) => {
   const networkConnected = useTypedSelector(Selectors.getNetworkConnected);
   const genWindows = useTypedSelector(Selectors.getGenWindows);
 
@@ -29,7 +29,7 @@ const MainContextMenu = React.memo(({ filePickers }: Props) => {
   }, [menuOpened]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <LinkNode
         href="https://webamp.org/about"
         target="_blank"
@@ -79,7 +79,7 @@ const MainContextMenu = React.memo(({ filePickers }: Props) => {
       </Parent>
       <Hr />
       <Node onClick={close} label="Exit" />
-    </React.Fragment>
+    </Fragment>
   );
 });
 

packages/webamp/js/components/MainWindow/MainVolume.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import * as Selectors from "../../selectors";
 
 import Volume from "../Volume";
 import { useTypedSelector } from "../../hooks";
 
-const MainVolume = React.memo(() => {
+const MainVolume = memo(() => {
   const volume = useTypedSelector(Selectors.getVolume);
   const percent = volume / 100;
   const sprite = Math.round(percent * 28);

packages/webamp/js/components/MainWindow/Marquee.tsx

@@ -1,6 +1,6 @@
 // Single line text display that can animate and hold multiple registers
 // Knows how to display various modes like tracking, volume, balance, etc.
-import React from "react";
+import * as React from "react";
 import CharacterString from "../CharacterString";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";

packages/webamp/js/components/MainWindow/Minimize.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 import ClickedDiv from "../ClickedDiv";
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const Minimize = React.memo(() => {
+const Minimize = memo(() => {
   const minimize = useActionCreator(Actions.minimize);
   return <ClickedDiv id="minimize" title="Minimize" onClick={minimize} />;
 });

packages/webamp/js/components/MainWindow/MonoStereo.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 
-const MonoStereo = React.memo(() => {
+const MonoStereo = memo(() => {
   const channels = useTypedSelector(Selectors.getChannels);
   return (
     <div className="mono-stereo">

packages/webamp/js/components/MainWindow/PlaylistToggleButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 
 import * as Selectors from "../../selectors";
@@ -9,7 +9,7 @@ function togglePlaylist() {
   return Actions.toggleWindow("playlist");
 }
 
-const PlaylistToggleButton = React.memo(() => {
+const PlaylistToggleButton = memo(() => {
   const selected = useTypedSelector(Selectors.getWindowOpen)("playlist");
   const handleClick = useActionCreator(togglePlaylist);
   return (

packages/webamp/js/components/MainWindow/Position.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo, useCallback } from "react";
 
 import {
   SEEK_TO_PERCENT_COMPLETE,
@@ -22,11 +22,11 @@ function usePosition() {
   return [position, displayedPosition];
 }
 
-const Position = React.memo(() => {
+const Position = memo(() => {
   const [position, displayedPosition] = usePosition();
   const dispatch = useTypedDispatch();
 
-  const seekToPercentComplete = React.useCallback(
+  const seekToPercentComplete = useCallback(
     (e) => {
       dispatch({
         type: SEEK_TO_PERCENT_COMPLETE,
@@ -37,7 +37,7 @@ const Position = React.memo(() => {
     [dispatch]
   );
 
-  const setPosition = React.useCallback(
+  const setPosition = useCallback(
     (e) => {
       dispatch({ type: SET_FOCUS, input: "position" });
       dispatch({

packages/webamp/js/components/MainWindow/Repeat.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
@@ -6,7 +6,7 @@ import ContextMenuWraper from "../ContextMenuWrapper";
 import { Node } from "../ContextMenu";
 import { useTypedSelector, useActionCreator } from "../../hooks";
 
-const Repeat = React.memo(() => {
+const Repeat = memo(() => {
   const repeat = useTypedSelector(Selectors.getRepeat);
   const handleClick = useActionCreator(Actions.toggleRepeat);
   return (

packages/webamp/js/components/MainWindow/Shade.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import { memo } from "react";
 import ClickedDiv from "../ClickedDiv";
 
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";
 
-const Shade = React.memo(() => {
+const Shade = memo(() => {
   const handleClick = useActionCreator(Actions.toggleMainWindowShadeMode);
   return (
     <ClickedDiv

packages/webamp/js/components/MainWindow/Shuffle.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import classnames from "classnames";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";
@@ -6,7 +6,7 @@ import ContextMenuWraper from "../ContextMenuWrapper";
 import { Node } from "../ContextMenu";
 import { useTypedSelector, useActionCreator } from "../../hooks";
 
-const Shuffle = React.memo(() => {
+const Shuffle = memo(() => {
   const shuffle = useTypedSelector(Selectors.getShuffle);
   const handleClick = useActionCreator(Actions.toggleShuffle);
   return (

packages/webamp/js/components/MainWindow/Time.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import * as Utils from "../../utils";
 
 import * as Actions from "../../actionCreators";
@@ -6,7 +6,7 @@ import * as Selectors from "../../selectors";
 import { TIME_MODE } from "../../constants";
 import { useActionCreator, useTypedSelector } from "../../hooks";
 
-const Time = React.memo(() => {
+const Time = memo(() => {
   const toggleTimeMode = useActionCreator(Actions.toggleTimeMode);
   const timeElapsed = useTypedSelector(Selectors.getTimeElapsed);
   const duration = useTypedSelector(Selectors.getDuration) || 0;

packages/webamp/js/components/MainWindow/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { WINDOWS, MEDIA_STATUS, LOAD_STYLE } from "../../constants";
 import * as Actions from "../../actionCreators";

packages/webamp/js/components/MilkdropWindow/Background.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 interface Props {
   innerRef?: (node: HTMLDivElement) => void;

packages/webamp/js/components/MilkdropWindow/Desktop.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom";
 
 interface Props {

packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { Hr, Node } from "../ContextMenu";
 import { WINDOWS } from "../../constants";
 import * as Selectors from "../../selectors";

packages/webamp/js/components/MilkdropWindow/PresetOverlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import { useState, useCallback } from "react";
 import { promptForFileReferences } from "../../fileUtils";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";

packages/webamp/js/components/MilkdropWindow/Visualizer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { VISUALIZERS } from "../../constants";
 import * as Selectors from "../../selectors";
 import { TransitionType } from "../../types";

packages/webamp/js/components/MilkdropWindow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import Fullscreen from "../Fullscreen";
 import {
   useWindowSize,

packages/webamp/js/components/MiniTime.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 import classnames from "classnames";
 import { getTimeObj } from "../utils";
 import { TIME_MODE, MEDIA_STATUS } from "../constants";
@@ -14,7 +14,7 @@ import { useTypedSelector, useActionCreator } from "../hooks";
 // Possible to do that in pure CSS with the background being dynamically generated.
 // All "space" characters is also how Winamp renders no content.
 const Background = () => (
-  <React.Fragment>
+  <Fragment>
     {[1, 7, 12, 20, 25].map((left, i) => (
       <Character
         style={{ left }}
@@ -23,7 +23,7 @@ const Background = () => (
         children=" "
       />
     ))}
-  </React.Fragment>
+  </Fragment>
 );
 
 const MiniTime = () => {

packages/webamp/js/components/OptionsContextMenu.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Hr, Node } from "./ContextMenu";
 import SkinsContextMenu from "./SkinsContextMenu";
 import * as Actions from "../actionCreators";

packages/webamp/js/components/PlaybackContextMenu.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 import * as Actions from "../actionCreators";
 import { Hr, Node } from "./ContextMenu";
 import { useActionCreator } from "../hooks";
@@ -13,7 +13,7 @@ const PlaybackContextMenu = () => {
   const seekBackward = useActionCreator(Actions.seekBackward);
   const nextN = useActionCreator(Actions.nextN);
   return (
-    <React.Fragment>
+    <Fragment>
       <Node label="Previous" hotkey="Z" onClick={previous} />
       <Node label="Play" hotkey="X" onClick={play} />
       <Node label="Pause" hotkey="C" onClick={pause} />
@@ -44,7 +44,7 @@ const PlaybackContextMenu = () => {
     <Node label="Jump to time" hotkey="Ctrl+J" />
     <Node label="Jump to file" hotkey="J" />
     */}
-    </React.Fragment>
+    </Fragment>
   );
 };
 

packages/webamp/js/components/PlaylistWindow/AddMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";

packages/webamp/js/components/PlaylistWindow/ListMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
 import { useActionCreator } from "../../hooks";

packages/webamp/js/components/PlaylistWindow/MiscMenu.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import PlaylistMenu from "./PlaylistMenu";
 import SortContextMenu from "./SortContextMenu";
 import MiscOptionsContextMenu from "./MiscOptionsContextMenu";

packages/webamp/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Node } from "../ContextMenu";
 import ContextMenuTarget from "../ContextMenuTarget";
 import * as Actions from "../../actionCreators";

packages/webamp/js/components/PlaylistWindow/PlaylistActionArea.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 
 import * as Actions from "../../actionCreators";
 
@@ -14,7 +14,7 @@ const PlaylistWindow = () => {
   const next = useActionCreator(Actions.next);
   const previous = useActionCreator(Actions.previous);
   return (
-    <React.Fragment>
+    <Fragment>
       <RunningTimeDisplay />
       <div className="playlist-action-buttons">
         <div className="playlist-previous-button" onClick={previous} />
@@ -25,7 +25,7 @@ const PlaylistWindow = () => {
         <div className="playlist-eject-button" onClick={openMediaFileDialog} />
       </div>
       <MiniTime />
-    </React.Fragment>
+    </Fragment>
   );
 };
 export default PlaylistWindow;

packages/webamp/js/components/PlaylistWindow/PlaylistMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode, useCallback } from "react";
+import { Children, memo, useState, ReactNode, useCallback } from "react";
 import classnames from "classnames";
 import { useOnClickAway } from "../../hooks";
 
@@ -43,7 +43,7 @@ function PlaylistMenu(props: Props) {
       <div className="bar" />
       {selected && (
         <ul>
-          {React.Children.map(props.children, (child, i) => (
+          {Children.map(props.children, (child, i) => (
             <PlaylistMenuEnry key={i}>{child}</PlaylistMenuEnry>
           ))}
         </ul>
@@ -51,4 +51,4 @@ function PlaylistMenu(props: Props) {
     </div>
   );
 }
-export default React.memo(PlaylistMenu);
+export default memo(PlaylistMenu);

packages/webamp/js/components/PlaylistWindow/PlaylistMenuEntry.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { memo, ReactNode } from "react";
 import classnames from "classnames";
 import { useIsHovered } from "../../hooks";
 
@@ -16,4 +16,4 @@ function PlaylistMenuEntry({ children }: Props) {
   );
 }
 
-export default React.memo(PlaylistMenuEntry);
+export default memo(PlaylistMenuEntry);

packages/webamp/js/components/PlaylistWindow/PlaylistResizeTarget.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ResizeTarget from "../ResizeTarget";
 import * as Actions from "../../actionCreators";
 import * as Selectors from "../../selectors";

packages/webamp/js/components/PlaylistWindow/PlaylistShade.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
 import Emitter from "../../emitter";

packages/webamp/js/components/PlaylistWindow/PlaylistShade.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import classnames from "classnames";
 import { getTimeStr } from "../../utils";
 import * as Selectors from "../../selectors";

packages/webamp/js/components/PlaylistWindow/RemoveMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
 import { useActionCreator } from "../../hooks";

packages/webamp/js/components/PlaylistWindow/RunningTimeDisplay.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 import CharacterString from "../CharacterString";
 import * as Actions from "../../selectors";

packages/webamp/js/components/PlaylistWindow/ScrollBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 
 // Here we import the rc-slider class just to get it's type.
 // We expect the Typescript compiler to not actually include this in the bundle.
@@ -39,4 +39,4 @@ const ScrollBar = () => {
   );
 };
 
-export default React.memo(ScrollBar);
+export default memo(ScrollBar);

packages/webamp/js/components/PlaylistWindow/SelectionMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PlaylistMenu from "./PlaylistMenu";
 import * as Actions from "../../actionCreators";
 import { useActionCreator } from "../../hooks";

packages/webamp/js/components/PlaylistWindow/SortContextMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../../actionCreators";
 
 import { Hr, Node } from "../ContextMenu";

packages/webamp/js/components/PlaylistWindow/TrackCell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, ReactNode } from "react";
+import { useCallback, ReactNode } from "react";
 import classnames from "classnames";
 import {
   CLICKED_TRACK,

packages/webamp/js/components/PlaylistWindow/TrackList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
 import { getTimeStr } from "../../utils";
 import * as Selectors from "../../selectors";

packages/webamp/js/components/PlaylistWindow/TrackTitle.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import * as Selectors from "../../selectors";
 import { useTypedSelector } from "../../hooks";
 

packages/webamp/js/components/PlaylistWindow/index.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import renderer from "react-test-renderer";
 import getStore from "../../store";

packages/webamp/js/components/PlaylistWindow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import classnames from "classnames";
 
 import { WINDOWS, TRACK_HEIGHT, LOAD_STYLE } from "../../constants";

packages/webamp/js/components/ResizeTarget.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
 import {
   WINDOW_RESIZE_SEGMENT_WIDTH,
   WINDOW_RESIZE_SEGMENT_HEIGHT,
@@ -67,4 +67,4 @@ function ResizeTarget(props: Props) {
 
   return <div onMouseDown={handleMouseDown} {...passThroughProps} />;
 }
-export default React.memo(ResizeTarget);
+export default memo(ResizeTarget);

packages/webamp/js/components/Skin.tsx

@@ -1,6 +1,4 @@
 // Dynamically set the css background images for all the sprites
-import React from "react";
-
 import { LETTERS } from "../constants";
 import { imageSelectors, cursorSelectors } from "../skinSelectors";
 import { useTypedSelector } from "../hooks";

packages/webamp/js/components/SkinsContextMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
 import { Hr, Node, Parent } from "./ContextMenu";

packages/webamp/js/components/Visualizer.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState, useLayoutEffect } from "react";
+import { useMemo, useCallback, useState, useLayoutEffect } from "react";
 
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";

packages/webamp/js/components/Volume.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
 import { useTypedSelector, useActionCreator } from "../hooks";

packages/webamp/js/components/WindowManager.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 
 import * as SnapUtils from "../snapUtils";
 import * as Selectors from "../selectors";

packages/webamp/js/playlistHtml.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "react-dom";
 
 interface Props {

packages/webamp/js/webampLazy.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";