feat: switch to heic-to, better bundling of deps (#873)

Author: baseplate-admin

src/frontend/package-lock.json

@@ -59,7 +59,7 @@
 		"formsnap": "^2.0.1",
 		"globals": "^17.5.0",
 		"hash-wasm": "^4.12.0",
-		"heic2any": "^0.0.4",
+		"heic-to": "^1.4.3",
 		"idb": "^8.0.3",
 		"layerchart": "^2.0.0-next.48",
 		"mode-watcher": "^1.1.0",

src/frontend/package.json

@@ -17,14 +17,4 @@ declare global {
 	declare const __COMMIT_SHA__: string;
 }
 
-declare module 'heic2any' {
-	type Heic2Any = (options: {
-		blob: Blob;
-		toType?: string;
-		quality?: number;
-	}) => Promise<Blob | Blob[]>;
-	const heic2any: Heic2Any;
-	export default heic2any;
-}
-
 export {};

src/frontend/src/app.d.ts

@@ -6,6 +6,8 @@
 	import { detectMimeFromBlob } from '$lib/functions/mime';
 	import { getImageSupportInfo, type ImageSupportInfo } from '$lib/functions/media-support';
 
+	const { heicTo } = await import('heic-to');
+
 	let {
 		filename,
 		contentText = null,
@@ -47,11 +49,6 @@
 	const baseName = $derived(filename.split(/[/\\]/).pop() ?? filename);
 
 	type MediaKind = 'image' | 'video' | 'audio' | 'other';
-	type Heic2Any = (options: {
-		blob: Blob;
-		toType?: string;
-		quality?: number;
-	}) => Promise<Blob | Blob[]>;
 
 	const heicExtensions = ['.heic', '.heif'];
 
@@ -116,11 +113,8 @@
 
 		heicConvertPromise = (async () => {
 			try {
-				const { default: heic2any } = (await import('heic2any')) as {
-					default: Heic2Any;
-				};
-				const result = await heic2any({ blob: sourceBlob, toType: 'image/png' });
-				const pngBlob = Array.isArray(result) ? result[0] : result;
+				const result = await heicTo({ blob: sourceBlob, type: 'image/png' });
+				const pngBlob = result instanceof Blob ? result : null;
 				if (!pngBlob || token !== heicConversionToken) return null;
 				heicConvertedBlob = pngBlob;
 				heicConvertedUrl = URL.createObjectURL(pngBlob);

src/frontend/src/lib/components/FileViewerOverlay.svelte

@@ -1,13 +1,13 @@
-import { feature } from 'caniuse-lite';
+const { feature } = await import('caniuse-lite');
 
 // @ts-expect-error: type is not available
-import avifData from 'caniuse-lite/data/features/avif';
+const { default: avifData } = await import('caniuse-lite/data/features/avif');
 
 // @ts-expect-error: type is not available
-import heifData from 'caniuse-lite/data/features/heif';
+const { default: heifData } = await import('caniuse-lite/data/features/heif');
 
 // @ts-expect-error: type is not available
-import webpData from 'caniuse-lite/data/features/webp';
+const { default: webpData } = await import('caniuse-lite/data/features/webp');
 
 type CaniuseStats = Record<string, Record<string, string>>;
 
@@ -68,30 +68,65 @@ const parseIosVersion = (ua: string) => {
 
 const getBrowserInfo = (): BrowserInfo | null => {
 	if (typeof navigator === 'undefined') return null;
+
 	const ua = navigator.userAgent;
 	const isiOS = /iPad|iPhone|iPod/.test(ua);
 	const isAndroid = /Android/.test(ua);
 
 	if (isiOS) {
 		const version = parseIosVersion(ua);
 		if (!version) return null;
-		return { agent: 'ios_saf', version };
+
+		return {
+			agent: 'ios_saf',
+			version
+		};
 	}
 
 	const edgeVersion = parseVersion(ua.match(/Edg\/(\d+(?:\.\d+)?)/)?.[1] ?? null);
-	if (edgeVersion) return { agent: 'edge', version: edgeVersion };
+
+	if (edgeVersion) {
+		return {
+			agent: 'edge',
+			version: edgeVersion
+		};
+	}
 
 	const operaVersion = parseVersion(ua.match(/OPR\/(\d+(?:\.\d+)?)/)?.[1] ?? null);
-	if (operaVersion) return { agent: 'opera', version: operaVersion };
+
+	if (operaVersion) {
+		return {
+			agent: 'opera',
+			version: operaVersion
+		};
+	}
 
 	const firefoxVersion = parseVersion(ua.match(/Firefox\/(\d+(?:\.\d+)?)/)?.[1] ?? null);
-	if (firefoxVersion) return { agent: isAndroid ? 'and_ff' : 'firefox', version: firefoxVersion };
+
+	if (firefoxVersion) {
+		return {
+			agent: isAndroid ? 'and_ff' : 'firefox',
+			version: firefoxVersion
+		};
+	}
 
 	const chromeVersion = parseVersion(ua.match(/Chrome\/(\d+(?:\.\d+)?)/)?.[1] ?? null);
-	if (chromeVersion) return { agent: isAndroid ? 'and_chr' : 'chrome', version: chromeVersion };
+
+	if (chromeVersion) {
+		return {
+			agent: isAndroid ? 'and_chr' : 'chrome',
+			version: chromeVersion
+		};
+	}
 
 	const safariVersion = parseVersion(ua.match(/Version\/(\d+(?:\.\d+)?)/)?.[1] ?? null);
-	if (safariVersion && /Safari\//.test(ua)) return { agent: 'safari', version: safariVersion };
+
+	if (safariVersion && /Safari\//.test(ua)) {
+		return {
+			agent: 'safari',
+			version: safariVersion
+		};
+	}
 
 	return null;
 };
@@ -101,8 +136,11 @@ const getMinSupportedVersion = (stats: Record<string, string>) => {
 
 	for (const [version, support] of Object.entries(stats)) {
 		if (!isSupported(support)) continue;
+
 		const numeric = parseVersion(version.split('-')[0]);
+
 		if (numeric === null) continue;
+
 		minVersion = minVersion === null ? numeric : Math.min(minVersion, numeric);
 	}
 
@@ -114,25 +152,58 @@ const getSupportedAgents = (stats: CaniuseStats) => {
 
 	for (const [agent, versions] of Object.entries(stats)) {
 		if (!Object.hasOwn(agentLabels, agent)) continue;
-		if (Object.values(versions).some(isSupported)) supported.push(agent as AgentKey);
+
+		if (Object.values(versions).some(isSupported)) {
+			supported.push(agent as AgentKey);
+		}
 	}
 
 	return supported;
 };
 
 export const getImageSupportInfo = (mime: string): ImageSupportInfo => {
 	const featureData = featureByMime[mime];
-	if (!featureData) return { status: 'unknown', message: null };
+
+	if (!featureData) {
+		return {
+			status: 'unknown',
+			message: null
+		};
+	}
 
 	const supportedAgents = getSupportedAgents(featureData.stats).map((agent) => agentLabels[agent]);
+
 	const message = supportedAgents.length ? `Supported in: ${supportedAgents.join(', ')}.` : null;
+
 	const browser = getBrowserInfo();
-	if (!browser) return { status: 'unknown', message };
+
+	if (!browser) {
+		return {
+			status: 'unknown',
+			message
+		};
+	}
 
 	const agentStats = featureData.stats[browser.agent];
-	if (!agentStats) return { status: 'unknown', message };
+
+	if (!agentStats) {
+		return {
+			status: 'unknown',
+			message
+		};
+	}
 
 	const minVersion = getMinSupportedVersion(agentStats);
-	if (minVersion === null) return { status: 'unsupported', message };
-	return { status: browser.version >= minVersion ? 'supported' : 'unsupported', message };
+
+	if (minVersion === null) {
+		return {
+			status: 'unsupported',
+			message
+		};
+	}
+
+	return {
+		status: browser.version >= minVersion ? 'supported' : 'unsupported',
+		message
+	};
 };