@tremolo-ui/react 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -42,7 +42,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/functions": "^0.2.1",
+    "@tremolo-ui/dom": "^0.3.0",
+    "@tremolo-ui/functions": "^0.3.0",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },

package/src/hooks/useMIDIAccess.ts

@@ -1,39 +1,32 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useMemo, useSyncExternalStore } from 'react'
 
-/** @private */
-export const PERMISSION_DENIED = 'PERMISSION_DENIED'
-/** @private */
-export const NOT_SUPPORTED = 'NOT_SUPPORTED'
+import { createMIDIAccess } from '@tremolo-ui/dom'
 
-/** @private */
-export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
+export {
+  NOT_SUPPORTED,
+  PERMISSION_DENIED,
+  type MIDIAccessError,
+} from '@tremolo-ui/dom'
 
 /**
  * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
  */
 export function useMIDIAccess(requestOnMount = true) {
-  const [midiAccess, setMidiAccess] = useState<MIDIAccess | null>(null)
-  const [error, setError] = useState<MIDIAccessError | null>(null)
+  const instance = useMemo(() => createMIDIAccess(), [])
 
-  const request = useCallback(() => {
-    if (navigator.requestMIDIAccess) {
-      navigator
-        .requestMIDIAccess()
-        .then((access) => {
-          setMidiAccess(access)
-          setError(null)
-        })
-        .catch(() => {
-          setError(PERMISSION_DENIED)
-        })
-    } else {
-      setError(NOT_SUPPORTED)
-    }
-  }, [])
+  const { midiAccess, error } = useSyncExternalStore(
+    instance.subscribe,
+    instance.getState,
+    instance.getServerState,
+  )
 
   useEffect(() => {
-    if (requestOnMount) request()
-  }, [requestOnMount, request])
+    if (requestOnMount) instance.request()
+  }, [instance, requestOnMount])
 
-  return { request, midiAccess, error }
+  useEffect(() => {
+    return () => instance.destroy()
+  }, [instance])
+
+  return { request: instance.request, midiAccess, error }
 }

package/src/hooks/useMIDIInput.ts

@@ -1,18 +1,6 @@
-import { useCallback } from 'react'
+import { useEffect } from 'react'
 
-import { useMIDIMessage } from './useMIDIMessage'
-
-const MIDI_EVENT_TO_NUMBER = {
-  NOTE_ON: 0x90,
-  NOTE_OFF: 0x80,
-  PITCH_BEND: 0xe0,
-}
-
-// const NUMBER_TO_MIDI_EVENT: Record<number, string> = {
-//   0x90: 'NOTE_ON',
-//   0x80: 'NOTE_OFF',
-//   0xe0: 'PITCH_BEND',
-// }
+import { createMIDIInput } from '@tremolo-ui/dom'
 
 /**
  * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
@@ -23,27 +11,12 @@ export function useMIDIInput(
   onNoteOffEvent?: (note: number) => void,
   onPitchBendEvent?: (msb: number, lsb: number) => void,
 ) {
-  const handleMIDIMessage = useCallback(
-    (event: MIDIMessageEvent) => {
-      if (!event.data) return
-      // event.data[0] ... command
-      // event.data[1] ... note, MSB (Most Significant Byte)
-      // event.data[2] ... velocity, LSB (Least Significant Byte)
-      const kind = event.data[0] & 0xf0
-
-      if (
-        kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||
-        (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)
-      ) {
-        onNoteOffEvent?.(event.data[1])
-      } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {
-        onNoteOnEvent?.(event.data[1], event.data[2])
-      } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {
-        onPitchBendEvent?.(event.data[1], event.data[2])
-      }
-    },
-    [onNoteOffEvent, onNoteOnEvent, onPitchBendEvent],
-  )
-
-  useMIDIMessage(midiAccess, handleMIDIMessage)
+  useEffect(() => {
+    const instance = createMIDIInput(midiAccess, {
+      onNoteOnEvent,
+      onNoteOffEvent,
+      onPitchBendEvent,
+    })
+    return () => instance.destroy()
+  }, [midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEvent])
 }

package/src/hooks/useMIDIMessage.ts

@@ -1,5 +1,7 @@
 import { useEffect } from 'react'
 
+import { createMIDIMessage } from '@tremolo-ui/dom'
+
 /**
  * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
  */
@@ -8,16 +10,7 @@ export function useMIDIMessage(
   onMIDIMessage: (event: MIDIMessageEvent) => void,
 ) {
   useEffect(() => {
-    if (!midiAccess) return
-
-    for (const input of midiAccess.inputs.values()) {
-      input.addEventListener('midimessage', onMIDIMessage)
-    }
-
-    return () => {
-      for (const input of midiAccess.inputs.values()) {
-        input.removeEventListener('midimessage', onMIDIMessage)
-      }
-    }
+    const instance = createMIDIMessage(midiAccess, onMIDIMessage)
+    return () => instance.destroy()
   }, [midiAccess, onMIDIMessage])
 }