cleanup hacky fixes + minify polyfill + better docs

Author: oscartbeaumont

guest-js/index.ts

@@ -8,6 +8,7 @@ class TauriMIDIAccess extends EventTarget implements MIDIAccess {
 
 	inputs = new Map<string, TauriMIDIInput>();
 	outputs = new Map<string, TauriMIDIOutput>();
+	ready: Promise<void>;
 
 	onstatechange: ((this: MIDIAccess, ev: Event) => any) | null = null;
 
@@ -30,6 +31,13 @@ class TauriMIDIAccess extends EventTarget implements MIDIAccess {
 	constructor() {
 		super();
 
+		// TODO: This could be `Promise.withResolvers` when it's stable
+		let resolve: (value: any) => void;
+		this.ready = new Promise((r, reject) => {
+			resolve = r;
+			setTimeout(() => reject(new Error("Failed to initialise WebMIDI")), 10_000);
+		});
+
 		events.stateChange.listen((event: any) => {
 			const { inputs, outputs } = event.payload;
 
@@ -76,6 +84,7 @@ class TauriMIDIAccess extends EventTarget implements MIDIAccess {
 			}
 
 			if (dirty) this.dispatchEvent(new Event("statechange"));
+			resolve(void 0);
 		});
 	}
 }
@@ -150,6 +159,9 @@ class TauriMIDIMessageEvent extends Event implements MIDIMessageEvent {
 class TauriMIDIInput extends TauriMIDIPort implements MIDIInput {
 	constructor(name: string) {
 		super(name, "input");
+		this.addEventListener("midimessage", (cb) => {
+			if (this.onmidimessage) this.onmidimessage(cb);
+		});
 	}
 
 	private stopListening?: Promise<UnlistenFn>;
@@ -177,18 +189,14 @@ class TauriMIDIInput extends TauriMIDIPort implements MIDIInput {
 		return super.close();
 	}
 
-	// TODO: Cleanup this stuff
-	// private _onmidimessage: ((this: MIDIInput, ev: Event) => any) | null = null;
+	private _onmidimessage: ((this: MIDIInput, ev: Event) => any) | null = null;
 
-	// get onmidimessage() {
-	// 	return this._onmidimessage;
-	// }
+	get onmidimessage() {
+		return this._onmidimessage;
+	}
 
 	set onmidimessage(cb: ((this: MIDIInput, ev: Event) => any) | null) {
-		// this._onmidimessage = cb;
-
-		this.addEventListener("midimessage", cb as any);
-
+		this._onmidimessage = cb;
 		if (this.connection !== "open") this.open();
 	}
 }
@@ -213,12 +221,4 @@ class TauriMIDIOutput extends TauriMIDIPort implements MIDIOutput {
 
 const access = new TauriMIDIAccess();
 
-// TODO: We could possible just ensure `access` already has data so this can be done while JS is still loading in the webview
-// TODO: and then it only every await's the first time.
-navigator.requestMIDIAccess = () => {
-	// We wait for the next update to ensure we have initialised the inputs and outputs.
-    // This event is emitted regularly by the backend
-    return new Promise((resolve) => access.addEventListener("statechange", () => resolve(access)));
-};
-
-// navigator.requestMIDIAccess = () => Promise.resolve(access);
+navigator.requestMIDIAccess = () => access.ready.then(() => access);

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "tsc --noEmit && esbuild ./guest-js/index.ts --bundle --outfile=src/polyfill.js --platform=browser"
+    "build": "tsc --noEmit && esbuild ./guest-js/index.ts --bundle --minify --outfile=src/polyfill.js --platform=browser"
   },
   "devDependencies": {
     "@tauri-apps/api": "2.0.0-rc.6",

src/lib.rs

@@ -1,4 +1,6 @@
 //! A WebMIDI-compatible plugin for Tauri
+//!
+//! Refer to the [init](fn.init.html) function for more information on how to use this plugin or checkout [the example](https://github.com/specta-rs/tauri-plugin-midi/tree/main/example).
 
 use std::{
     collections::BTreeMap,
@@ -182,16 +184,38 @@ fn builder<R: Runtime>() -> tauri_specta::Builder<R> {
         .events(tauri_specta::collect_events![StateChange, MIDIMessage])
 }
 
-/// Initialise the Tauri MIDI plugin
+/// Initialise the plugin which will take care of polyfilling WebMIDI into any Tauri webviews.
 ///
-/// # Example
+/// # Usage
+///
+/// Using this plugin is very simple. Just add it to your Tauri builder:
 ///
 /// ```rust
 ///  tauri::Builder::default()
-///        // Just add this plugin to your Tauri builder
-///        .plugin(tauri_plugin_midi::init());
+///        .plugin(tauri_plugin_midi::init()) // <- This bit here
+/// # ;
 ///        // .... rest of your builder
 /// ```
+///
+/// Then give permissions to the plugin by adding the `midi:default` permissions to your application.
+///
+/// This can be done by modifying the `capabilities/default.json` file:
+/// ```json
+/// {
+///   "$schema": "../gen/schemas/desktop-schema.json",
+///   "identifier": "default",
+///   "description": "Capability for the main window",
+///   "windows": ["main"],
+///   "permissions": ["core:default", "midi:default"] // <- add `midi:default` into here
+/// }
+/// ```
+///
+/// and now you can use the regular [WebMIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API) from within your webview.
+///
+/// ## Known issues
+///
+/// - This plugin doesn't work within iframes at the moment. It's being tracked as [#7](https://github.com/specta-rs/tauri-plugin-midi/issues/7)
+///
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
     let builder = builder::<R>();