mirror of https://github.com/VERT-sh/VERT.git
hawk tuah!
Co-authored-by: RealmyTheMan <RealmyTheMan@users.noreply.github.com>
This commit is contained in:
not-nullptr
parent
036e928b8a
commit
4edf12f5c1
|
|
@ -33,6 +33,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@imagemagick/magick-wasm": "^0.0.31",
|
||||
"lucide-svelte": "^0.456.0"
|
||||
"lucide-svelte": "^0.456.0",
|
||||
"wasm-vips": "^0.0.11"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="/a.out.js" defer></script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<input type="file" />
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import type { IFile } 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> {
|
||||
throw new Error("Not implemented");
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
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
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import type { IFile } from "$lib/types";
|
||||
import { Converter } from "./converter";
|
||||
|
||||
export class VipsConverter extends Converter {
|
||||
public supportedFormats = [""];
|
||||
public convert(input: IFile, output: IFile): Promise<IFile> {
|
||||
throw new Error("Not implemented");
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
// place files you want to import through the `$lib` alias in this folder.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export interface IFile {
|
||||
name: string;
|
||||
extension: string;
|
||||
buffer: ArrayBuffer;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from "./file";
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Vips from "wasm-vips";
|
||||
|
||||
Vips()
|
||||
.then((vips) => {
|
||||
postMessage({ type: "success", vips });
|
||||
})
|
||||
.catch((error) => {
|
||||
postMessage({ type: "error", error });
|
||||
});
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import "../app.css";
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import { init } from "./util/magick";
|
||||
import { browser } from "$app/environment";
|
||||
import VipsWorker from "$lib/workers/vips?worker";
|
||||
|
||||
export async function load({ fetch }) {
|
||||
await init(fetch);
|
||||
}
|
||||
export const load = () => {
|
||||
if (!browser) return;
|
||||
const worker = new VipsWorker();
|
||||
worker.onmessage = (e) => {
|
||||
console.log(e.data);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { converters } from "$lib/converters/index.svelte";
|
||||
|
||||
let files = $state<FileList>();
|
||||
|
||||
$effect(() => {
|
||||
if (!converters.loaded) return;
|
||||
});
|
||||
</script>
|
||||
|
||||
<input type="file" bind:files />
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { initializeImageMagick } from "@imagemagick/magick-wasm";
|
||||
|
||||
export let initialized = false;
|
||||
|
||||
export const init = async (
|
||||
fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>,
|
||||
) => {
|
||||
if (initialized) return;
|
||||
const wasmBytes = await fetch("/magick.wasm").then((res) =>
|
||||
res.arrayBuffer(),
|
||||
);
|
||||
await initializeImageMagick(wasmBytes);
|
||||
initialized = true;
|
||||
};
|
||||
|
|
@ -1,6 +1,24 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import { sveltekit } from "@sveltejs/kit/vite";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
plugins: [
|
||||
sveltekit(),
|
||||
{
|
||||
name: "vips-request-middleware",
|
||||
configureServer(server) {
|
||||
server.middlewares.use((req, res, next) => {
|
||||
res.setHeader(
|
||||
"Cross-Origin-Embedder-Policy",
|
||||
"require-corp",
|
||||
);
|
||||
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
|
||||
next();
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
optimizeDeps: {
|
||||
exclude: ["wasm-vips"],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue