@tremolo-ui/react 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _tremolo_ui_functions = require("@tremolo-ui/functions");
 let zustand = require("zustand");
+let _tremolo_ui_dom = require("@tremolo-ui/dom");
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
 	"strokeStyle",
@@ -2295,78 +2296,72 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 }
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
-/** @private */
-const PERMISSION_DENIED = "PERMISSION_DENIED";
-/** @private */
-const NOT_SUPPORTED = "NOT_SUPPORTED";
 /**
 * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
 */
 function useMIDIAccess(requestOnMount = true) {
-	const [midiAccess, setMidiAccess] = (0, react.useState)(null);
-	const [error, setError] = (0, react.useState)(null);
-	const request = (0, react.useCallback)(() => {
-		if (navigator.requestMIDIAccess) navigator.requestMIDIAccess().then((access) => {
-			setMidiAccess(access);
-			setError(null);
-		}).catch(() => {
-			setError(PERMISSION_DENIED);
-		});
-		else setError(NOT_SUPPORTED);
-	}, []);
+	const instance = (0, react.useMemo)(() => (0, _tremolo_ui_dom.createMIDIAccess)(), []);
+	const { midiAccess, error } = (0, react.useSyncExternalStore)(instance.subscribe, instance.getState, instance.getServerState);
+	(0, react.useEffect)(() => {
+		if (requestOnMount) instance.request();
+	}, [instance, requestOnMount]);
 	(0, react.useEffect)(() => {
-		if (requestOnMount) request();
-	}, [requestOnMount, request]);
+		return () => instance.destroy();
+	}, [instance]);
 	return {
-		request,
+		request: instance.request,
 		midiAccess,
 		error
 	};
 }
 //#endregion
-//#region src/hooks/useMIDIMessage.ts
-/**
-* Hooks for when you want to process MIDI events in more detail than useMIDIInput.
-*/
-function useMIDIMessage(midiAccess, onMIDIMessage) {
-	(0, react.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);
-		};
-	}, [midiAccess, onMIDIMessage]);
-}
-//#endregion
 //#region src/hooks/useMIDIInput.ts
-const MIDI_EVENT_TO_NUMBER = {
-	NOTE_ON: 144,
-	NOTE_OFF: 128,
-	PITCH_BEND: 224
-};
 /**
 * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
 */
 function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEvent) {
-	useMIDIMessage(midiAccess, (0, react.useCallback)((event) => {
-		if (!event.data) return;
-		const kind = event.data[0] & 240;
-		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]);
+	(0, react.useEffect)(() => {
+		const instance = (0, _tremolo_ui_dom.createMIDIInput)(midiAccess, {
+			onNoteOnEvent,
+			onNoteOffEvent,
+			onPitchBendEvent
+		});
+		return () => instance.destroy();
 	}, [
-		onNoteOffEvent,
+		midiAccess,
 		onNoteOnEvent,
+		onNoteOffEvent,
 		onPitchBendEvent
-	]));
+	]);
+}
+//#endregion
+//#region src/hooks/useMIDIMessage.ts
+/**
+* Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+*/
+function useMIDIMessage(midiAccess, onMIDIMessage) {
+	(0, react.useEffect)(() => {
+		const instance = (0, _tremolo_ui_dom.createMIDIMessage)(midiAccess, onMIDIMessage);
+		return () => instance.destroy();
+	}, [midiAccess, onMIDIMessage]);
 }
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
 exports.DragObserver = DragObserver;
 exports.Knob = Knob;
-exports.NOT_SUPPORTED = NOT_SUPPORTED;
+Object.defineProperty(exports, "NOT_SUPPORTED", {
+	enumerable: true,
+	get: function() {
+		return _tremolo_ui_dom.NOT_SUPPORTED;
+	}
+});
 exports.NumberInput = NumberInput;
-exports.PERMISSION_DENIED = PERMISSION_DENIED;
+Object.defineProperty(exports, "PERMISSION_DENIED", {
+	enumerable: true,
+	get: function() {
+		return _tremolo_ui_dom.PERMISSION_DENIED;
+	}
+});
 exports.Piano = Piano;
 exports.PointsEditor = PointsEditor;
 exports.SHORTCUTS = SHORTCUTS;