From 3453eb230aa7e2dd700c028240f63128a6a3fb11 Mon Sep 17 00:00:00 2001
From: kixelated <kixelated@gmail.com>
Date: Thu, 12 Dec 2024 22:21:52 -0800
Subject: [PATCH] import Moq from @kixelated/moq/video (#271)

---
 Cargo.lock                   |  2 +-
 README.md                    | 19 ++++++++++++++-----
 moq-web/Cargo.toml           |  2 +-
 moq-web/src/bridge.ts        | 20 ++++++++++++++++++++
 moq-web/src/demo/index.ts    |  2 +-
 moq-web/src/element/index.ts |  3 ++-
 moq-web/src/element/video.ts |  2 +-
 moq-web/src/index.ts         |  7 +++++--
 moq-web/src/main.ts          | 16 ----------------
 moq-web/src/watch.ts         | 14 +++++++-------
 package.json                 | 12 ++----------
 11 files changed, 54 insertions(+), 45 deletions(-)
 create mode 100644 moq-web/src/bridge.ts
 delete mode 100644 moq-web/src/main.ts

diff --git a/Cargo.lock b/Cargo.lock
index b0db3b12..983ae2c8 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1595,7 +1595,7 @@ dependencies = [
 
 [[package]]
 name = "moq-web"
-version = "0.3.7"
+version = "0.3.8"
 dependencies = [
  "console_error_panic_hook",
  "gloo-net",
diff --git a/README.md b/README.md
index a7ab6d81..dfa8ebce 100644
--- a/README.md
+++ b/README.md
@@ -79,22 +79,31 @@ For example:
 
 ```html
 <script type="module">
-	import '@kixelated/moq'
+	import '@kixelated/moq/video'
 </script>
 
 <moq-video src="https://relay.quic.video/demo/bbb"></moq-video>
 ```
 
-Because it uses WASM, it's not part of the main workspace and requires some extra steps to build.
+The package is a gross frankenstein of Rust+Typescript.
+To make changes, you'll need to install (Bun)[https://bun.sh/] and then run:
 
 ```sh
-cd moq-web
 bun i
 bun dev
 ```
 
-This will start a development server on `http://localhost:3000`.
-There's two separate compilation steps, the first building with `wasm-pack` and the second bundling with `rspack`.
+You can also test the package locally by linking.
+Replace `bun` with your favorite package manager; it might work.
+
+```sh
+bun pack
+bun link
+
+# In your other package
+bun link @kixelated/moq
+```
+
 See the [moq-web README](moq-web/README.md) for more information.
 
 ## moq-karp
diff --git a/moq-web/Cargo.toml b/moq-web/Cargo.toml
index d242ee97..8737191a 100644
--- a/moq-web/Cargo.toml
+++ b/moq-web/Cargo.toml
@@ -2,7 +2,7 @@
 name = "moq-web"
 authors = ["Luke Curley <kixelated@gmail.com>"]
 edition = "2021"
-version = "0.3.7"
+version = "0.3.8"
 license = "MIT OR Apache-2.0"
 repository = "https://github.com/kixelated/moq-web"
 description = "Web implementation for MoQ utilizing WebAssembly+Typescript"
diff --git a/moq-web/src/bridge.ts b/moq-web/src/bridge.ts
new file mode 100644
index 00000000..b443abbb
--- /dev/null
+++ b/moq-web/src/bridge.ts
@@ -0,0 +1,20 @@
+import * as Comlink from "comlink";
+import type { Api } from "./worker";
+
+// Create a new worker instance
+// We wait until the worker is fully initialized before we return the proxy.
+function init(): Promise<Comlink.Remote<Api>> {
+	return new Promise((resolve) => {
+		const worker = new Worker(new URL("./worker", import.meta.url), { type: "module" });
+		worker.addEventListener(
+			"message",
+			(event) => {
+				const proxy: Comlink.Remote<Api> = Comlink.wrap(worker);
+				resolve(proxy);
+			},
+			{ once: true },
+		);
+	});
+}
+
+export { init };
diff --git a/moq-web/src/demo/index.ts b/moq-web/src/demo/index.ts
index 911e5281..64138ab6 100644
--- a/moq-web/src/demo/index.ts
+++ b/moq-web/src/demo/index.ts
@@ -1 +1 @@
-export { MoqVideoElement } from "../element/video";
+export { MoqVideoElement } from "..";
diff --git a/moq-web/src/element/index.ts b/moq-web/src/element/index.ts
index d3ea5a11..0e56991b 100644
--- a/moq-web/src/element/index.ts
+++ b/moq-web/src/element/index.ts
@@ -1 +1,2 @@
-export { MoqVideoElement } from "./video";
+import MoqVideoElement from "./video";
+export { MoqVideoElement };
diff --git a/moq-web/src/element/video.ts b/moq-web/src/element/video.ts
index 0c33c1fd..530938ef 100644
--- a/moq-web/src/element/video.ts
+++ b/moq-web/src/element/video.ts
@@ -3,7 +3,7 @@ import * as Moq from "..";
 // Supports a subset of the <video> element API.
 // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
 // Also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
-export class MoqVideoElement extends HTMLElement implements HTMLVideoElement {
+export default class MoqVideoElement extends HTMLElement implements HTMLVideoElement {
 	#watch?: Moq.Watch;
 	#canvas?: OffscreenCanvas;
 
diff --git a/moq-web/src/index.ts b/moq-web/src/index.ts
index 87acb49b..b86238b4 100644
--- a/moq-web/src/index.ts
+++ b/moq-web/src/index.ts
@@ -2,5 +2,8 @@
 export { Watch } from "./watch";
 
 // NOTE: You can also use the custom elements
-// They are in a separate folder since they require side-effects to function fully.
-// import "@kixelated/moq/element/video"
+// They are in a separate path since they require side-effects to function fully.
+// import "@kixelated/moq/video"
+
+// We still export them here for convenience
+export { MoqVideoElement } from "./element";
diff --git a/moq-web/src/main.ts b/moq-web/src/main.ts
deleted file mode 100644
index bd3d495b..00000000
--- a/moq-web/src/main.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as Comlink from "comlink";
-import type { Api } from "./worker";
-
-const worker = new Worker(new URL("./worker", import.meta.url), { type: "module" });
-
-// Not 100% if this is the best solution, but Comlink was silently failing.
-// We wait until the worker is fully initialized before we return the proxy.
-const init: Promise<Comlink.Remote<Api>> = new Promise((resolve) => {
-	worker.onmessage = (_event) => {
-		worker.onmessage = null;
-		const proxy: Comlink.Remote<Api> = Comlink.wrap(worker);
-		resolve(proxy);
-	};
-});
-
-export { init };
diff --git a/moq-web/src/watch.ts b/moq-web/src/watch.ts
index 4cf21453..45e08642 100644
--- a/moq-web/src/watch.ts
+++ b/moq-web/src/watch.ts
@@ -1,29 +1,29 @@
 import * as Comlink from "comlink";
-import { init } from "./main";
+import { init } from "./bridge";
 import type * as Api from "./worker";
 
 export class Watch {
-	#inner: Promise<Comlink.Remote<Api.Watch>>;
+	#bridge: Promise<Comlink.Remote<Api.Watch>>;
 
 	constructor(src: string) {
-		this.#inner = init.then((api) => api.watch(src));
+		this.#bridge = init().then((api) => api.watch(src));
 	}
 
 	async pause(value: boolean) {
-		await (await this.#inner).pause(value);
+		await (await this.#bridge).pause(value);
 	}
 
 	async volume(value: number) {
-		await (await this.#inner).volume(value);
+		await (await this.#bridge).volume(value);
 	}
 
 	async render(value: HTMLCanvasElement | OffscreenCanvas) {
 		const canvas = value instanceof HTMLCanvasElement ? value.transferControlToOffscreen() : value;
 
-		await (await this.#inner).render(Comlink.transfer(canvas, [canvas]));
+		await (await this.#bridge).render(Comlink.transfer(canvas, [canvas]));
 	}
 
 	async close() {
-		await (await this.#inner).close();
+		await (await this.#bridge).close();
 	}
 }
diff --git a/package.json b/package.json
index 94b2ab29..eb85877b 100644
--- a/package.json
+++ b/package.json
@@ -9,20 +9,12 @@
 			"types": "./dist/src/index.d.ts",
 			"import": "./dist/src/index.js"
 		},
-		"./element": {
-			"types": "./dist/src/element/index.d.ts",
-			"import": "./dist/src/element/index.js"
-		},
-		"./element/video": {
+		"./video": {
 			"types": "./dist/src/element/video.d.ts",
 			"import": "./dist/src/element/video.js"
-		},
-		"./element/karp": {
-			"types": "./dist/src/element/karp.d.ts",
-			"import": "./dist/src/element/karp.js"
 		}
 	},
-	"sideEffects": ["./dist/src/element/index.js", "./dist/src/element/video.js"],
+	"sideEffects": ["./dist/src/element/video.js"],
 	"files": ["dist", "pkg", "README.md", "LICENSE*"],
 	"scripts": {
 		"pack": "bun run pack:wasm && rm pkg/.gitignore && tsc",