bump deps and make them compatible

package.json

@@ -3,19 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@blueprintjs/core": "^3.50.4",
-    "@tailwindcss/forms": "^0.3.4",
-    "autoprefixer": "^10.3.6",
-    "history": "^5.0.1",
-    "postcss": "^8.3.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.0.0-beta.0",
-    "sass": "^1.42.1",
-    "tailwindcss": "^2.2.16",
+    "@blueprintjs/core": "^4.3.2",
+    "@tailwindcss/forms": "^0.5.2",
+    "autoprefixer": "^10.4.7",
+    "history": "^5.3.0",
+    "postcss": "^8.4.14",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "tailwindcss": "^3.0.24",
     "tone": "^14.7.77",
-    "typescript": "^4.4.3",
-    "webmidi": "^2.5.3"
+    "typescript": "^4.7.2",
+    "webmidi": "^3.0.20"
   },
   "scripts": {
     "dev": "vite",
@@ -42,24 +41,14 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.10.2",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
-    "babel-eslint": "^10.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^6.1.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.5.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "eslint-plugin-testing-library": "^4.12.4",
-    "vite": "^2.6.2",
-    "vite-plugin-eslint": "^1.3.0"
+    "@types/jest": "^27.5.1",
+    "@types/node": "^17.0.35",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "@vitejs/plugin-react": "^1.3.2",
+    "eslint": "^8.16.0",
+    "eslint-config-react-app": "^7.0.1",
+    "vite": "^2.9.9",
+    "vite-plugin-eslint": "^1.6.1"
   }
 }

src/App.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
 import { WebMidiProvider } from './components/WebMidi'
 import { WakeLockProvider } from './components/WakeLock'
 import Layout from './components/Layout'
-import './styles/blueprint.scss'
 import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom'
 import Home from './pages/Home/Home'
 import MidiMonitor from './pages/MidiMonitor'

src/components/AppSpinner.tsx

@@ -1,8 +1,13 @@
 import { Spinner } from '@blueprintjs/core'
 import React from 'react'
 
-const AppSpinner: React.FC<{}> = ({ children }) => {
-  return <Spinner className="app-spinner">{children}</Spinner>
+const AppSpinner: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  return (
+    <div>
+      <Spinner className="app-spinner" />
+      {children}
+    </div>
+  )
 }
 
 export default AppSpinner

src/components/Layout.tsx

@@ -16,8 +16,13 @@ function NavBar({
       <NavLink
         key={href}
         to={href}
-        className={classNames(Classes.MINIMAL, Classes.BUTTON)}
-        activeClassName={Classes.ACTIVE}
+        className={({ isActive }) =>
+          classNames(
+            isActive && Classes.ACTIVE,
+            Classes.MINIMAL,
+            Classes.BUTTON
+          )
+        }
       >
         {title}
       </NavLink>
@@ -59,7 +64,7 @@ function NavBar({
   )
 }
 
-const Layout: React.FC<{}> = ({ children }) => {
+const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   useEffect(() => {
     document.body.classList.add(Classes.DARK)
     return () => {

src/components/MidiPiano.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Input, InputEventNoteoff, InputEventNoteon } from 'webmidi'
+import { Input, NoteMessageEvent } from 'webmidi'
 import { classNames } from './classNames'
 
 interface IPianoKeyProps {
@@ -74,15 +74,16 @@ export default function MidiPiano({ input }: { input: Input }) {
   const [keys, setKeys] = useState<{ [key: number]: boolean }>(() => ({}))
   useEffect(() => {
     if (!input) return
-    const noteOn = (e: InputEventNoteon) =>
+    const noteOn = (e: NoteMessageEvent) =>
       setKeys((keys) => Object.assign({}, keys, { [e.note.number]: true }))
-    const noteOff = (e: InputEventNoteoff) =>
+    const noteOff = (e: NoteMessageEvent) =>
       setKeys((keys) => Object.assign({}, keys, { [e.note.number]: false }))
-    input.addListener('noteon', 'all', noteOn)
-    input.addListener('noteoff', 'all', noteOff)
+    const options = { channels: undefined }
+    input.addListener('noteon', noteOn, options)
+    input.addListener('noteoff', noteOff, options)
     return () => {
-      input.removeListener('noteon', 'all', noteOn)
-      input.removeListener('noteoff', 'all', noteOff)
+      input.removeListener('noteon', noteOn, options)
+      input.removeListener('noteoff', noteOff, options)
     }
   }, [input])
 

src/components/WakeLock.tsx

@@ -38,7 +38,9 @@ const WakeLockContext = createContext<WakeLockContextState>({
   releaseWakeLock: () => {},
 })
 
-export const WakeLockProvider: React.FC<{}> = ({ children }) => {
+export const WakeLockProvider: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
   const { wakeLockEnabled, requestWakeLock, releaseWakeLock } =
     useRequestWakeLock()
 

src/components/WebMidi.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState } from 'react'
-import WebMidi, { Input, Output, WebMidiEvents } from 'webmidi'
+import { WebMidi, Input, Output, PortEvent } from 'webmidi'
 import { Position, Toaster } from '@blueprintjs/core'
 import AppError from './AppError'
 import AppSpinner from './AppSpinner'
@@ -15,11 +15,11 @@ const WebMidiContext = createContext<WebMidiContextState>({
   outputs: [],
 })
 
-export const WebMidiProvider: React.FC<{}> = ({ children }) => {
+export const WebMidiProvider: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
   const [webMidiEnabled, webMidiError] = useRequestWebMidi()
-  const { inputs, outputs } = useWebMidiDeviceConnectionListeners(
-    webMidiEnabled
-  )
+  const { inputs, outputs } = useWebMidiDeviceConnectionListeners()
 
   if (webMidiError !== null) {
     return (
@@ -48,13 +48,16 @@ function useRequestWebMidi(): [boolean, Error | null] {
       setWebMidiEnabled(true)
       return
     }
-    WebMidi.enable(function (err) {
-      if (err) {
-        setWebMidiError(err)
-      } else {
+    ;(async () => {
+      try {
+        await WebMidi.enable()
+        console.log('WebMidi enabled')
+        AppToaster.show({ message: `WebMidi enabled` })
         setWebMidiEnabled(true)
+      } catch (err) {
+        setWebMidiError(err as Error)
       }
-    })
+    })()
   }, [setWebMidiEnabled, setWebMidiError])
 
   return [webMidiEnabled, webMidiError]
@@ -64,13 +67,12 @@ export const AppToaster = Toaster.create({
   position: Position.TOP_RIGHT,
 })
 
-function useWebMidiDeviceConnectionListeners(webMidiEnabled: boolean) {
+function useWebMidiDeviceConnectionListeners() {
   const [inputs, setInputs] = useState<Input[]>([])
   const [outputs, setOutputs] = useState<Output[]>([])
 
   useEffect(() => {
-    if (!webMidiEnabled) return
-    const listener = (e: WebMidiEvents['connected' | 'disconnected']) => {
+    const listener = (e: PortEvent) => {
       AppToaster.show({ message: `${e.port.type} ${e.type} - ${e.port.name}` })
       console.log(`${e.port.type} ${e.type} - ${e.port.name}`, e)
       setInputs([...WebMidi.inputs])
@@ -79,11 +81,10 @@ function useWebMidiDeviceConnectionListeners(webMidiEnabled: boolean) {
     WebMidi.addListener('connected', listener)
     WebMidi.addListener('disconnected', listener)
     return () => {
-      if (!webMidiEnabled) return
       WebMidi.removeListener('connected', listener)
       WebMidi.removeListener('disconnected', listener)
     }
-  }, [webMidiEnabled])
+  }, [])
 
   return { inputs, outputs }
 }

src/components/timer.ts

@@ -1,4 +1,4 @@
-import WebMidi from 'webmidi'
+import { WebMidi } from 'webmidi'
 import TimerWorker from './TimerWorker?worker'
 
 // https://github.com/cwilso/metronome/blob/master/js/metronome.js

src/main.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
+import './main.css'
 import 'normalize.css'
+import './styles/blueprint.css'
 import '@blueprintjs/core/lib/css/blueprint.css'
 import '@blueprintjs/icons/lib/css/blueprint-icons.css'
-import './main.css'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+const container = document.getElementById('root')
+const root = createRoot(container!)
+root.render(
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 )

src/pages/Home/MidiDevices.tsx

@@ -1,10 +1,10 @@
 import React, { useRef } from 'react'
 import { PolySynth, ToneAudioNode } from 'tone'
-import { MidiPort } from 'webmidi'
+import { Input, Output } from 'webmidi'
 import { HTMLTable, Tab, Tabs } from '@blueprintjs/core'
 import { useWebMidiDevices } from '../../components/WebMidi'
 
-function DeviceTable({ devices }: { devices: MidiPort[] }) {
+function DeviceTable({ devices }: { devices: (Input | Output)[] }) {
   return (
     <HTMLTable>
       <thead>

src/pages/MidiMonitor.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import useLocalStorageState from '../components/hooks/useLocalStorageState'
-import WebMidi, { InputEvents } from 'webmidi'
+import { WebMidi, Event } from 'webmidi'
 import MidiDeviceSelector from '../components/MidiDeviceSelector'
 import {
   Button,
@@ -47,7 +47,7 @@ export default function MidiMonitor() {
 
   useEffect(() => {
     const listener = (e: {
-      type: keyof InputEvents
+      type: keyof Event
       timestamp: number
       channel: { toString: () => string }
     }) => {
@@ -75,11 +75,13 @@ export default function MidiMonitor() {
     }
     if (device) {
       selectedEventTypes.forEach((eventType: any) => {
-        device.addListener(eventType, selectedChannels, listener)
+        device.addListener(eventType, listener, { channels: selectedChannels })
       })
       return () => {
         selectedEventTypes.forEach((eventType: any) => {
-          device.removeListener(eventType, selectedChannels, listener)
+          device.removeListener(eventType, listener, {
+            channels: selectedChannels,
+          })
         })
       }
     }