build: Switch to new jsx runtime

.eslintrc.js

@@ -27,5 +27,8 @@ module.exports = {
         ],
       },
     ],
+    // Remove when I switch @evanpurkhiser to include this
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
 };

src/overlay/components/NotFound.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {AlertTriangle} from 'react-feather';
 import styled from '@emotion/styled';
 

src/overlay/components/liveHistoryIndicator.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Radio, ZapOff} from 'react-feather';
 import styled from '@emotion/styled';
 

src/renderer/components/ConnectingSplash.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {useTimeout} from 'react-use';
 import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';

src/renderer/components/ConnectionError.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {AlertCircle} from 'react-feather';
 import styled from '@emotion/styled';
 

src/renderer/components/Footer.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Save} from 'react-feather';
 import styled from '@emotion/styled';
 

src/renderer/components/NetworkStatus.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import {observer} from 'mobx-react';
 import {NetworkState} from 'prolink-connect/lib/types';

src/renderer/components/Titlebar.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 
 import Navigation from './Navigation';

src/renderer/components/device/BeatCounter.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import {observer} from 'mobx-react';
 

src/renderer/components/device/DeviceInfo.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import {Device} from 'prolink-connect/lib/types';
 

src/renderer/components/device/Waveform.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {autorun} from 'mobx';
 import {CDJStatus, DeviceID} from 'prolink-connect/lib/types';
 

src/renderer/icons/cdj.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const IconCdj = () => (
   <svg width="34" height="46" viewBox="0 0 34 46" xmlns="http://www.w3.org/2000/svg">
     <path

src/renderer/icons/djm.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const IconDjm = () => (
   <svg
     width="34"

src/renderer/icons/rekordbox.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 const IconRekordbox = () => (
   <svg
     width="30"

src/renderer/views/Application.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {MemoryRouter, Redirect, Route, Switch} from 'react-router-dom';
 import styled from '@emotion/styled';
 

src/renderer/views/devices/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 import {groupBy} from 'lodash';

src/renderer/views/overlayConfig/components/EmptyState.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Layers} from 'react-feather';
 import styled from '@emotion/styled';
 

src/renderer/views/overlayConfig/components/OverlayList.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Copy, Delete} from 'react-feather';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';

src/shared/components/Icons.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export const AppleLogo = () => (
   <svg
     width="19"

src/shared/components/Logo.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 type Props = {
   size: number;
 };

src/website/app.tsx

@@ -1,6 +1,5 @@
 import 'regenerator-runtime/runtime';
 
-import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {Route, Router, Switch} from 'react-router-dom';
 import {createBrowserHistory} from 'history';

src/website/components/OverlayExamples.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {observer} from 'mobx-react';
 
 import {registeredOverlays} from 'src/overlay';

tsconfig.json

@@ -6,7 +6,7 @@
     "esModuleInterop": true,
     "lib": ["dom", "ES2020"],
     "allowJs": true,
-    "jsx": "react",
+    "jsx": "react-jsxdev",
     "sourceMap": true,
     "inlineSources": true,
     "outDir": "./dist",

webpack.config.base.ts

@@ -61,7 +61,7 @@ export const baseConfig: webpack.Configuration = {
           presets: [
             '@babel/preset-env',
             '@babel/preset-typescript',
-            '@babel/preset-react',
+            ['@babel/preset-react', {runtime: 'automatic'}],
           ],
           plugins: [
             ['@babel/plugin-proposal-decorators', {legacy: true}],