valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: load WASM from local assets via postinstall script

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 10:52:59 +01:00
parent 08e1cac3a0
commit 77e0114e96
3 changed files with 28 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
lib/media/wasm/wasmLoader.ts
View File

@@ -15,33 +15,6 @@ const moduleState: WASMModuleState = {
let ffmpegInstance: FFmpeg | null = null;
let imagemagickInstance: any = null;
/**
* Helper to fetch a file with local priority and CDN fallback
*/
async function fetchWithFallback(localPath: string, cdnUrl: string): Promise<ArrayBuffer> {
try {
const response = await fetch(localPath);
if (!response.ok) throw new Error(`Local fetch failed: ${response.status}`);
console.log(`[WASM] Loaded from local: ${localPath}`);
return await response.arrayBuffer();
} catch (e) {
console.warn(`[WASM] Local load failed for ${localPath}, falling back to CDN:`, e);
const response = await fetch(cdnUrl);
if (!response.ok) throw new Error(`CDN fetch failed: ${response.status}`);
console.log(`[WASM] Loaded from CDN: ${cdnUrl}`);
return await response.arrayBuffer();
}
}
/**
* Helper to create a blob URL from a fallback fetch
*/
async function getBlobUrl(localPath: string, cdnUrl: string, mimeType: string): Promise<string> {
const buffer = await fetchWithFallback(localPath, cdnUrl);
const blob = new Blob([buffer], { type: mimeType });
return URL.createObjectURL(blob);
}
/**
* Load FFmpeg WASM module
*/
@@ -58,20 +31,18 @@ export async function loadFFmpeg(): Promise<FFmpeg> {
console.log('[FFmpeg]', message);
});
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
// Load core and dependencies with local priority
const coreURL = await getBlobUrl('/wasm/ffmpeg-core.js', `${baseURL}/ffmpeg-core.js`, 'text/javascript');
const wasmURL = await getBlobUrl('/wasm/ffmpeg-core.wasm', `${baseURL}/ffmpeg-core.wasm`, 'application/wasm');
// Files are guaranteed to exist in /wasm/ by the postinstall script
const coreURL = '/wasm/ffmpeg-core.js';
const wasmURL = '/wasm/ffmpeg-core.wasm';
await ffmpegInstance.load({ coreURL, wasmURL });
moduleState.ffmpeg = true;
console.log('FFmpeg loaded successfully');
console.log('[FFmpeg] Loaded successfully from local assets');
return ffmpegInstance;
} catch (error) {
console.error('Failed to load FFmpeg:', error);
console.error('[FFmpeg] Failed to load:', error);
throw new Error('Failed to load FFmpeg WASM module');
}
}
@@ -87,10 +58,17 @@ export async function loadImageMagick(): Promise<any> {
try {
const { initializeImageMagick } = await import('@imagemagick/magick-wasm');
const localWasmUrl = '/wasm/magick.wasm';
const cdnUrl = 'https://unpkg.com/@imagemagick/magick-wasm@0.0.38/dist/magick.wasm';
// File is guaranteed to exist in /wasm/ by the postinstall script
const wasmUrl = '/wasm/magick.wasm';
const arrayBuffer = await fetchWithFallback(localWasmUrl, cdnUrl);
console.log('[ImageMagick] Loading local WASM:', wasmUrl);
const response = await fetch(wasmUrl);
if (!response.ok) {
throw new Error(`Failed to fetch WASM file: ${response.status} ${response.statusText}`);
}
const arrayBuffer = await response.arrayBuffer();
console.log('[ImageMagick] WASM file size:', arrayBuffer.byteLength, 'bytes');
await initializeImageMagick(arrayBuffer);
@@ -98,7 +76,7 @@ export async function loadImageMagick(): Promise<any> {
const ImageMagick = await import('@imagemagick/magick-wasm');
imagemagickInstance = ImageMagick;
moduleState.imagemagick = true;
console.log('[ImageMagick] Loaded and initialized successfully');
console.log('[ImageMagick] Loaded and initialized successfully from local asset');
return imagemagickInstance;
} catch (error) {