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": {
|
"dependencies": {
|
||||||
"@imagemagick/magick-wasm": "^0.0.31",
|
"@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" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<script src="/a.out.js" defer></script>
|
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<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,6 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
import "../app.css";
|
import "../app.css";
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{@render children()}
|
{@render children()}
|
||||||
|
|
@ -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 }) {
|
export const load = () => {
|
||||||
await init(fetch);
|
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 { sveltekit } from "@sveltejs/kit/vite";
|
||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
export default defineConfig({
|
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