React 17 (#1030)

* Use faster source maps in dev

* Upgrade react

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

* Upgrade react-test-renderer

* See if having only one version of React fixes it

packages/webamp-modern/package.json

@@ -132,6 +132,8 @@
   "dependencies": {
     "eslint-plugin-react-hooks": "^2.1.2",
     "fscreen": "^1.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-dropzone": "^10.1.7",
     "redux-sentry-middleware": "^0.1.3",
     "xml-js": "^1.6.11"

packages/webamp/.babelrc

@@ -18,7 +18,13 @@
         }
       }
     ],
-    "@babel/preset-react",
+    // TODO: Can TypeScript just do this for us?
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
     "@babel/preset-typescript"
   ],
   "plugins": [

packages/webamp/.eslintrc

@@ -143,7 +143,7 @@
     "no-return-await": "error",
     "react/no-string-refs": "error",
     "react/jsx-boolean-value": "error",
-    "react/jsx-uses-react": "error",
+    "react/jsx-uses-react": "off",
     "react/jsx-uses-vars": "error",
     "react/prefer-es6-class": "error",
     "react/jsx-pascal-case": "error",

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

packages/webamp/package.json

@@ -116,11 +116,11 @@
     "prettier": "^2.0.4",
     "puppeteer": "^1.15.0",
     "rc-slider": "^8.7.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.1.0",
-    "react-test-renderer": "^16.8.1",
-    "redux": "^4.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-test-renderer": "^17.0.1",
+    "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.3.0",
     "reselect": "^3.0.1",

yarn.lock

@@ -1060,6 +1060,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.10.3", "@babel/template@^7.3.3":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8"
@@ -5983,7 +5990,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   dependencies:
@@ -10158,14 +10165,14 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+react-dom@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.1"
 
 react-dropzone@^10.1.7:
   version "10.2.2"
@@ -10175,10 +10182,15 @@ react-dropzone@^10.1.7:
     file-selector "^0.1.12"
     prop-types "^15.7.2"
 
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
 
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -10193,6 +10205,25 @@ react-redux@^7.1.0:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-redux@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+  integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
 react-test-renderer@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
@@ -10202,13 +10233,23 @@ react-test-renderer@^16.8.1:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
-react@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+react-test-renderer@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
+  integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.1"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.1"
+
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -10337,7 +10378,7 @@ redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 
-redux@^4.0.0, redux@^4.0.1:
+redux@^4.0.0, redux@^4.0.1, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   dependencies:
@@ -10746,6 +10787,14 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"