fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-18 07:48:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Split up Wasm binaries so Cloudflare deployments stay below 25 MB per file

Browse Source
This commit is contained in:
Keavon Chambers
2026-07-14 14:43:34 -07:00
parent 97f8113fe4
commit 97a43e66fb
6 changed files with 90 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.svelte
View File

@@ -5,7 +5,8 @@
import type { MessageName, SubscriptionsRouter } from "/src/subscriptions-router";
import { loadDemoArtwork } from "/src/utility-functions/network";
import { operatingSystem } from "/src/utility-functions/platform";
import init, { EditorWrapper, receiveNativeMessage } from "/wrapper/pkg/graphite_wasm_wrapper";
import { initWasm } from "/src/utility-functions/wasm-loader";
import { EditorWrapper, receiveNativeMessage } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { FrontendMessage } from "/wrapper/pkg/graphite_wasm_wrapper";
let subscriptions: SubscriptionsRouter | undefined = undefined;
@@ -13,7 +14,7 @@
onMount(async () => {
// Initialize the editor wrapper
const wrapper = await init();
const wrapper = await initWasm();
for (const [name, f] of Object.entries(wrapper)) {
if (name.startsWith("__node_registry")) f();
}

3
frontend/src/global.d.ts vendored
View File

@@ -6,6 +6,9 @@ interface Window {
receiveNativeMessage?: (buffer: ArrayBuffer) => void;
}
// Build-time constant injected by the `wasmSplitting` plugin in `vite.config.ts`
declare const __WASM_PART_COUNT__: number;
// Graphite's custom "pointerlockmove" event dispatched by input.ts for pointer lock in the CEF desktop app
interface WindowEventMap {
pointerlockmove: CustomEvent<{ x: number; y: number }>;

25
frontend/src/utility-functions/wasm-loader.ts Normal file
View File

@@ -0,0 +1,25 @@
import init from "/wrapper/pkg/graphite_wasm_wrapper";
import wasmBinaryUrl from "/wrapper/pkg/graphite_wasm_wrapper_bg.wasm?url";
// Initializes the editor's Wasm module, rejoining the parts that CI deployments split the binary into
// to fit under the single-file size limit (see `wasmSplitting` in `vite.config.ts`)
export async function initWasm() {
// Local and native builds keep the binary whole, letting the wasm-bindgen glue code load it directly
if (__WASM_PART_COUNT__ <= 1) return init();
// Fetch all parts in parallel (served from the service worker's precache once it is installed)
const partRequests = [];
for (let index = 0; index < __WASM_PART_COUNT__; index += 1) {
partRequests.push(fetch(wasmBinaryUrl.replace(/\.wasm$/, `-part${index}.wasm`)));
}
const partResponses = await Promise.all(partRequests);
const failedResponse = partResponses.find((response) => !response.ok);
if (failedResponse) throw new Error(`Failed to fetch Wasm binary part (status ${failedResponse.status}): ${failedResponse.url}`);
// Rejoin the parts and hand them to wasm-bindgen as a single response, with the MIME type needed for streaming compilation
const parts = await Promise.all(partResponses.map((response) => response.blob()));
const joined = new Response(new Blob(parts), { headers: { "Content-Type": "application/wasm" } });
// eslint-disable-next-line camelcase
return init({ module_or_path: joined });
}