From 75e63ff94b6beb5309b435f7c5ca013580f81e67 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Mon, 17 Feb 2025 22:41:07 +0300
Subject: [PATCH] feat: support svg and heif

prevents conversion into svg/heif (not supported by vips)
also remove outdated "animated images not supported' text
---
 .../components/functional/ConversionPanel.svelte    | 13 ++++++++++---
 src/lib/converters/vips.svelte.ts                   |  3 ++-
 src/lib/workers/vips.ts                             |  4 +++-
 src/routes/+page.svelte                             |  4 +++-
 src/routes/convert/+page.svelte                     |  6 +++++-
 5 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index 44caf2c..f6be9be 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -11,14 +11,16 @@
 	<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
 		<button
 			onclick={() => files.convertAll()}
-			class="btn {$effects ? "" : "!scale-100"} highlight flex gap-3 max-md:w-full"
+			class="btn {$effects
+				? ''
+				: '!scale-100'} highlight flex gap-3 max-md:w-full"
 			disabled={!files.ready}
 		>
 			<RefreshCw size="24" />
 			<p>Convert all</p>
 		</button>
 		<button
-			class="btn {$effects ? "" : "!scale-100"} flex gap-3 max-md:w-full"
+			class="btn {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
 			disabled={!files.ready || !files.results}
 			onclick={() => files.downloadAll()}
 		>
@@ -30,13 +32,18 @@
 	<div class="flex items-center gap-2">
 		<p class="whitespace-nowrap text-xl">Set all to</p>
 		{#if files.requiredConverters.length === 1}
+			<!-- cannot convert to svg or heif -->
+			{@const supported =
+				files.files[0]?.converter?.supportedFormats?.filter(
+					(format) => format !== ".svg" && format !== ".heif",
+				)}
 			<Dropdown
 				onselect={(r) =>
 					files.files.forEach((f) => {
 						f.to = r;
 						f.result = null;
 					})}
-				options={files.files[0]?.converter?.supportedFormats || []}
+				options={supported || []}
 			/>
 		{:else}
 			<Dropdown options={["N/A"]} disabled />
diff --git a/src/lib/converters/vips.svelte.ts b/src/lib/converters/vips.svelte.ts
index bdc2af7..ad0d953 100644
--- a/src/lib/converters/vips.svelte.ts
+++ b/src/lib/converters/vips.svelte.ts
@@ -33,9 +33,10 @@ export class VipsConverter extends Converter {
 		".tif",
 		".tiff",
 		".jfif",
-		//".heif", HEIF files that are encoded like HEIC files (and HEIC files in general) aren't supported due to https://github.com/kleisauke/wasm-vips/issues/3
+		".heif", // HEIF files that are encoded like HEIC files (and HEIC files in general) aren't supported due to https://github.com/kleisauke/wasm-vips/issues/3
 		".avif",
 		".jxl",
+		".svg",
 	];
 
 	public readonly reportsProgress = false;
diff --git a/src/lib/workers/vips.ts b/src/lib/workers/vips.ts
index 35665ed..8424cfc 100644
--- a/src/lib/workers/vips.ts
+++ b/src/lib/workers/vips.ts
@@ -1,6 +1,8 @@
 import Vips from "wasm-vips";
 
-const vipsPromise = Vips();
+const vipsPromise = Vips({
+	dynamicLibraries: ["vips-jxl.wasm", "vips-heif.wasm", "vips-resvg.wasm"],
+});
 
 vipsPromise
 	.then(() => {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 081cbc4..1555deb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -63,7 +63,9 @@
 				</div>
 
 				<div class="flex flex-col text-center justify-center">
-					<p>Animated images are not supported (yet).</p>
+					<p class="flex items-center justify-center gap-2">
+						<Check size="20" /> Fully supported
+					</p>
 					<p>
 						<b>Supported formats:</b>
 						{supportedFormats.images}
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index c27ee0c..af77515 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -182,8 +182,12 @@
 					<div
 						class="w-[122px] h-fit flex flex-col gap-2 items-center justify-center"
 					>
+						<!-- cannot convert to svg or heif -->
 						<Dropdown
-							options={file.converter?.supportedFormats || []}
+							options={file.converter?.supportedFormats?.filter(
+								(format) =>
+									format !== ".svg" && format !== ".heif",
+							) || []}
 							bind:selected={file.to}
 							onselect={(option) => handleSelect(option, file)}
 						/>