feat: load wasm

Author: brettkolodny

src/App.tsx

@@ -2,8 +2,61 @@ import { ResizableHandle, ResizablePanelGroup } from "@/components/Resizable";
 import { Editor } from "./Editor";
 import { Logo } from "./components/Logo";
 import { Preview } from "./Preview";
+import { useStore } from "@/store";
+import { useEffect, type FC } from "react";
+
+// Glue code required to be able to run wasm compiled Go code.
+import "@/utils/wasm_exec.js";
+import { LoaderIcon } from "lucide-react";
+
+type GoPreviewDef = (v: unknown) => Promise<string>;
+
+// Extend the Window object to include the Go related code that is added from
+// wasm_exec.js and our loaded Go code.
+declare global {
+	interface Window {
+		// Loaded from wasm
+		go_preview?: GoPreviewDef;
+		Go: { new (): Go };
+	}
+}
+
+declare class Go {
+	argv: string[];
+	env: { [envKey: string]: string };
+	exit: (code: number) => void;
+	importObject: WebAssembly.Imports;
+	exited: boolean;
+	mem: DataView;
+	run(instance: WebAssembly.Instance): Promise<void>;
+}
 
 export const App = () => {
+	const $isWasmLoaded = useStore((state) => state.isWasmLoaded);
+	const $setIsWasmLoaded = useStore((state) => state.setIsWasmLoaded);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		const initWasm = async () => {
+			try {
+				const goWasm = new window.Go();
+				const result = await WebAssembly.instantiateStreaming(
+					fetch("build/preview.wasm"),
+					goWasm.importObject,
+				);
+
+				goWasm.run(result.instance);
+				$setIsWasmLoaded(true);
+			} catch (e) {
+				console.error(e);
+			}
+		};
+
+		if (!$isWasmLoaded) {
+			initWasm();
+		}
+	}, []);
+
 	return (
 		<main className="flex h-dvh w-screen flex-col items-center bg-surface-primary">
 			{/* NAV BAR */}
@@ -43,16 +96,42 @@ export const App = () => {
 				</div>
 			</nav>
 
-			{/* CONTENT */}
-			<ResizablePanelGroup direction={"horizontal"}>
-				{/* EDITOR */}
-				<Editor />
+			<div className="relative h-full w-full">
+				{!$isWasmLoaded ? (
+					<div className="absolute top-0 left-0 z-30 flex h-full w-full items-center justify-center backdrop-blur-sm">
+						<WasmLoading />
+					</div>
+				) : null}
+
+				<ResizablePanelGroup
+					aria-hidden={!$isWasmLoaded}
+					direction={"horizontal"}
+				>
+					{/* EDITOR */}
+					<Editor />
 
-				<ResizableHandle className="bg-surface-quaternary" />
+					<ResizableHandle className="bg-surface-quaternary" />
 
-				{/* PREVIEW */}
-				<Preview />
-			</ResizablePanelGroup>
+					{/* PREVIEW */}
+					<Preview />
+				</ResizablePanelGroup>
+			</div>
 		</main>
 	);
 };
+
+const WasmLoading: FC = () => {
+	return (
+		<div className="flex w-full max-w-xs flex-col items-center justify-center gap-2 rounded-xl border border-[#38BDF8] bg-surface-tertiary p-4">
+			<LoaderIcon className="animate-spin text-content-primary" />
+			<div className="text-center">
+				<p className="font-semibold text-content-primary text-xl">
+					Loading Assets
+				</p>
+				<p className="text-content-secondary text-sm">
+					Add some copy here to explain that this will only take a few moments
+				</p>
+			</div>
+		</div>
+	);
+};

src/Editor.tsx

@@ -125,7 +125,7 @@ export const Editor: FC = () => {
 			{/* CODE EDITOR */}
 			<div className="relative h-full w-full">
 				<Button
-					className="absolute top-3 right-3 z-50"
+					className="absolute top-3 right-3 z-10"
 					variant="subtle"
 					size="sm"
 					onClick={onCopy}

src/store.tsx

@@ -10,14 +10,17 @@ const defaultCode = `terraform {
 
 type State = {
 	code: string;
+	isWasmLoaded: boolean;
 	error?: string;
 	setCode: (code: string) => void;
 	setError: (error: string) => void;
+	setIsWasmLoaded: (isWasmLoaded: boolean) => void;
 };
 
 export const useStore = create<State>()((set) => ({
 	code: defaultCode,
+	isWasmLoaded: false,
 	setCode: (code) => set((_) => ({ code })),
 	setError: (error) => set((_) => ({ error })),
+	setIsWasmLoaded: (isWasmLoaded) => set((_) => ({ isWasmLoaded })),
 }));
-