import Moq from @kixelated/moq/video (#271)

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

moq-web/Cargo.toml

@@ -2,7 +2,7 @@
 name = "moq-web"
 authors = ["Luke Curley <[email protected]>"]
 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"

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 };

moq-web/src/demo/index.ts

@@ -1 +1 @@
-export { MoqVideoElement } from "../element/video";
+export { MoqVideoElement } from "..";

moq-web/src/element/index.ts

@@ -1 +1,2 @@
-export { MoqVideoElement } from "./video";
+import MoqVideoElement from "./video";
+export { MoqVideoElement };

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;
 

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";

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();
 	}
 }

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",