feat: file converting

src/lib/converters/converter.ts

@@ -1,9 +1,13 @@
-import type { IFile } from "$lib/types";
+import type { IFile, OmitBetterStrict } from "$lib/types";
 
 export class Converter {
 	public supportedFormats: string[] = [];
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	public async convert(input: IFile, output: IFile): Promise<IFile> {
+	public async convert(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		input: OmitBetterStrict<IFile, "extension">,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		to: string,
+	): Promise<IFile> {
 		throw new Error("Not implemented");
 	}
 }

src/lib/converters/index.svelte.ts

@@ -1,15 +0,0 @@
-import Vips from "wasm-vips";
-
-class Converters {
-	public vips = $state<typeof Vips>(null!);
-	public loaded = $derived(this.vips !== null);
-}
-
-export const converters = new Converters();
-
-// Vips().then((vips) => {
-// 	converters.vips = vips;
-// });
-
-// the above *does* work but it blocks the ui thread whilst wasm is loading
-// we can use a web worker to remedy this, see +layout.ts for details

src/lib/converters/index.ts

@@ -0,0 +1,3 @@
+import { VipsConverter } from "./vips";
+
+export const converters = [new VipsConverter()];

src/lib/converters/vips.ts

@@ -1,9 +1,63 @@
 import type { IFile } from "$lib/types";
 import { Converter } from "./converter";
+import VipsWorker from "$lib/workers/vips?worker";
+import { browser } from "$app/environment";
+import type { VipsWorkerMessage, OmitBetterStrict } from "$lib/types";
 
 export class VipsConverter extends Converter {
+	private worker: Worker = browser ? new VipsWorker() : null!;
+	private id = 0;
 	public supportedFormats = [""];
-	public convert(input: IFile, output: IFile): Promise<IFile> {
-		throw new Error("Not implemented");
+
+	constructor() {
+		super();
+		if (!browser) return;
+		this.worker.onmessage = (e) => {
+			console.log(e.data);
+		};
+	}
+
+	public async convert(
+		input: OmitBetterStrict<IFile, "extension">,
+		to: string,
+	): Promise<IFile> {
+		const res = await this.sendMessage({
+			type: "convert",
+			input: input as unknown as IFile,
+			to,
+		});
+
+		if (res.type === "finished") {
+			return res.output;
+		}
+
+		throw new Error("Unknown message type");
+	}
+
+	private sendMessage(
+		message: OmitBetterStrict<VipsWorkerMessage, "id">,
+	): Promise<OmitBetterStrict<VipsWorkerMessage, "id">> {
+		const id = this.id++;
+		let resolved = false;
+		return new Promise((resolve) => {
+			const onMessage = (e: MessageEvent) => {
+				if (e.data.id === id) {
+					this.worker.removeEventListener("message", onMessage);
+					resolve(e.data);
+					resolved = true;
+				}
+			};
+
+			setTimeout(() => {
+				if (!resolved) {
+					this.worker.removeEventListener("message", onMessage);
+					throw new Error("Timeout");
+				}
+			}, 20000);
+
+			this.worker.addEventListener("message", onMessage);
+
+			this.worker.postMessage({ ...message, id });
+		});
 	}
 }

src/lib/types/index.ts

@@ -1 +1,3 @@
 export * from "./file";
+export * from "./util";
+export * from "./vips-worker";

src/lib/types/util.ts

@@ -0,0 +1,3 @@
+export type OmitBetterStrict<T, K extends keyof T> = T extends unknown
+	? Pick<T, Exclude<keyof T, K>>
+	: never;

src/lib/types/vips-worker.ts

@@ -0,0 +1,16 @@
+import type { IFile } from "./file";
+
+interface VipsConvertMessage {
+	type: "convert";
+	input: IFile;
+	to: string;
+}
+
+interface VipsFinishedMessage {
+	type: "finished";
+	output: IFile;
+}
+
+export type VipsWorkerMessage = (VipsConvertMessage | VipsFinishedMessage) & {
+	id: number;
+};

src/lib/workers/vips.ts

@@ -1,9 +1,43 @@
+import type { VipsWorkerMessage, OmitBetterStrict } from "$lib/types";
 import Vips from "wasm-vips";
 
-Vips()
-	.then((vips) => {
-		postMessage({ type: "success", vips });
+const vipsPromise = Vips();
+
+vipsPromise
+	.then(() => {
+		postMessage({ type: "loaded" });
 	})
 	.catch((error) => {
 		postMessage({ type: "error", error });
 	});
+
+const handleMessage = async (
+	message: VipsWorkerMessage,
+): Promise<OmitBetterStrict<VipsWorkerMessage, "id"> | undefined> => {
+	const vips = await vipsPromise;
+	switch (message.type) {
+		case "convert": {
+			if (!message.to.startsWith(".")) message.to = `.${message.to}`;
+			const image = vips.Image.newFromBuffer(message.input.buffer);
+			const output = image.writeToBuffer(message.to);
+			return {
+				type: "finished",
+				output: {
+					...message.input,
+					buffer: output.buffer,
+					extension: message.to,
+				},
+			};
+		}
+	}
+};
+
+onmessage = async (e) => {
+	const message: VipsWorkerMessage = e.data;
+	const res = await handleMessage(message);
+	if (!res) return;
+	postMessage({
+		...res,
+		id: message.id,
+	});
+};

src/routes/+layout.ts

@@ -1,10 +0,0 @@
-import { browser } from "$app/environment";
-import VipsWorker from "$lib/workers/vips?worker";
-
-export const load = () => {
-	if (!browser) return;
-	const worker = new VipsWorker();
-	worker.onmessage = (e) => {
-		console.log(e.data);
-	};
-};

src/routes/+page.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
-	import Uploader from "$lib/components/visual/Uploader.svelte";
-	import { converters } from "$lib/converters/index.svelte";
+	import { converters } from "$lib/converters";
+	import type { Converter } from "$lib/converters/converter";
 
-	let files = $state<FileList>();
+	let file = $state<File>();
+	let to = "";
 
-	$effect(() => {
-		if (!converters.loaded) return;
-	});
+	const convert = async (converter: Converter, file: File, to: string) => {
+		const buffer = await file.arrayBuffer();
+		const result = await converter.convert({
+			name: file.name.split(".").slice(0, -1).join("."),
+			buffer
+		}, to);
+		console.log(result);
+	}
 </script>
 
-<Uploader bind:files />
+<div class="flex flex-col">
+	<input type="file" onchange={e => file = (e.target as any).files[0]} />
+	<input type="text" placeholder="to" bind:value={to} />
+	<button onclick={() => convert(converters[0], file!, to)}>Go</button>
+</div>