@cloudcannon/editable-regions 0.0.20-rc.1 → 0.0.20-rc.3

package/components/ui/editable-region-error-card.ts

@@ -64,6 +64,15 @@ export default class EditableRegionErrorCard extends HTMLElement {
 
 				body.appendChild(stack);
 			}
+
+			if ("hint" in error && typeof error.hint === "string") {
+				const hint = error.hint;
+				const hintElement = document.createElement("p");
+				hintElement.className = "hint";
+				hintElement.innerHTML = hint;
+
+				body.appendChild(hintElement);
+			}
 		}
 
 		if (this.hasAttribute("hint")) {

package/integrations/hugo/browser/errors.ts

@@ -3,30 +3,95 @@
  * on the core's component error card, so it should tell the user what to fix.
  */
 
+const TEMPLATE_FRAME_RE =
+	/^template: (.+?): executing ".*?" at .*?: error calling (.+?): /;
+const FAILED_SEPARATOR = ": execute of template failed: ";
+
+export interface ParsedHugoError {
+	/** Template refs (file:line:column), outermost call first. */
+	frames: string[];
+	/** The template function whose call failed in the innermost frame. */
+	call?: string;
+	/** The underlying error, with the template-call chain stripped. */
+	message: string;
+}
+
+export function parseHugoTemplateError(raw: string): ParsedHugoError {
+	const frames: string[] = [];
+	let call: string | undefined;
+	let rest = raw.trim();
+	for (;;) {
+		const match = rest.match(TEMPLATE_FRAME_RE);
+		if (!match) break;
+		frames.push(match[1]);
+		call = match[2];
+		rest = rest.slice(match[0].length);
+		const quotedSeparator = rest.match(
+			/^"[^"]*": execute of template failed: /,
+		);
+		if (quotedSeparator) {
+			rest = rest.slice(quotedSeparator[0].length);
+		} else {
+			const separator = rest.indexOf(FAILED_SEPARATOR);
+			const after =
+				separator === -1 ? "" : rest.slice(separator + FAILED_SEPARATOR.length);
+			if (after.startsWith("template: ")) {
+				rest = after;
+			}
+		}
+	}
+	return { frames, call, message: rest };
+}
+
 export function enhanceHugoError(message: string, componentKey: string): Error {
+	const parsed = parseHugoTemplateError(message);
+
 	let hint = "";
 
 	if (/partial .* not found/i.test(message)) {
 		hint =
-			" This partial isn't in the bundled template snapshot. Check that it " +
+			"This partial isn't in the bundled template snapshot. Check that it " +
 			"lives under one of the directories in " +
 			"`params.editable_regions.template_dirs` (by default the partials, " +
 			"render hooks, and shortcodes of your configured layout dir) " +
 			"and rebuild the site.";
-	} else if (/execute of template failed/i.test(message)) {
+	} else if (parsed.frames.length > 0) {
 		hint =
-			" The partial errored while rendering in the editor. If it depends on " +
-			"build-only state (page context, resources, .Site.Pages), guard that " +
-			"code with `if hugo.IsServer` or move it out of the component.";
+			"The partial errored while rendering in the editor. If the code " +
+			"should only run in the site build, guard it with " +
+			"`{{ if not site.Params.env_client }}`, " +
+			"or supply an editor-safe version via " +
+			"`params.editable_regions.templates_overrides`.";
 	} else if (/logged \d+ errors/i.test(message)) {
 		hint =
-			" Hugo logged errors during the render — open the browser console " +
+			"Hugo logged errors during the render — open the browser console " +
 			"for the underlying messages.";
 	}
 
-	return new Error(
-		`Failed to render Hugo component "${componentKey}": ${message}.${hint}`,
-	);
+	const primary =
+		parsed.frames.length > 0 && parsed.call
+			? `${parsed.call}: ${parsed.message}`
+			: parsed.message;
+	const sentence = /[.!?]$/.test(primary) ? primary : `${primary}.`;
+
+	const error = new Error(
+		`Failed to render Hugo component "${componentKey}": ${sentence}`,
+	) as Error & { hint?: string };
+
+	if (hint) {
+		error.hint = hint;
+	}
+
+	if (parsed.frames.length > 0) {
+		error.stack = parsed.frames
+			.slice()
+			.reverse()
+			.slice(0, 10)
+			.map((ref) => `    at ${ref}`)
+			.join("\n");
+	}
+
+	return error;
 }
 
 /** Error for a partial missing from the editor's template bundle; raised when

package/integrations/hugo/browser/hugo-renderer.ts

@@ -0,0 +1,282 @@
+import { enhanceHugoError, missingComponentError } from "./errors.ts";
+import { HugoWasm } from "./hugo-wasm.ts";
+import { group, groupEnd, log, warn } from "./logger.ts";
+import type { WorkerRequest, WorkerResponse } from "./worker-protocol.ts";
+
+export interface EngineTransport {
+	boot(args: {
+		wasmUrl: string;
+		env: string;
+		files: Record<string, string>;
+	}): Promise<void>;
+	writeFiles(json: string): Promise<void>;
+	removeFiles(json: string): Promise<void>;
+	init(): Promise<string | undefined>;
+	render(payload: string): Promise<{ html?: string; error?: string }>;
+}
+
+class WorkerClient implements EngineTransport {
+	private pending = new Map<string, (response: WorkerResponse) => void>();
+	private nextId = 0;
+
+	constructor(private worker: Worker) {
+		worker.onmessage = (event: MessageEvent<WorkerResponse>) => {
+			const response = event.data;
+			this.pending.get(response.id)?.(response);
+			this.pending.delete(response.id);
+		};
+	}
+
+	private send(request: WorkerRequest): Promise<WorkerResponse> {
+		return new Promise((resolve) => {
+			this.pending.set(request.id, resolve);
+			this.worker.postMessage(request);
+		});
+	}
+
+	async boot({
+		wasmUrl,
+		env,
+		files,
+	}: {
+		wasmUrl: string;
+		env: string;
+		files: Record<string, string>;
+	}): Promise<void> {
+		const response = await this.send({
+			id: `cc-worker-${this.nextId++}`,
+			kind: "boot",
+			wasmUrl,
+			env,
+			files,
+		});
+		if (response.error) {
+			throw new Error(response.error);
+		}
+	}
+
+	async writeFiles(json: string): Promise<void> {
+		await this.send({
+			id: `cc-worker-${this.nextId++}`,
+			kind: "writeFiles",
+			json,
+		});
+	}
+
+	async removeFiles(json: string): Promise<void> {
+		await this.send({
+			id: `cc-worker-${this.nextId++}`,
+			kind: "removeFiles",
+			json,
+		});
+	}
+
+	async init(): Promise<string | undefined> {
+		const response = await this.send({
+			id: `cc-worker-${this.nextId++}`,
+			kind: "init",
+		});
+		return response.error;
+	}
+
+	async render(payload: string): Promise<{ html?: string; error?: string }> {
+		const response = await this.send({
+			id: `cc-worker-${this.nextId++}`,
+			kind: "render",
+			payload,
+		});
+		return { html: response.html, error: response.error };
+	}
+}
+
+interface QueuedRender {
+	id: string;
+	partial: string;
+	props: Record<string, any>;
+	resolve: (el: HTMLElement) => void;
+	reject: (err: unknown) => void;
+}
+
+const BATCH_WINDOW_MS = 10;
+
+export interface HugoRendererOptions {
+	wasmUrl: string;
+	env: string;
+	workerUrl?: string;
+	getTarget: () => string;
+	getFiles: () => Record<string, string>;
+	onBooted?: () => Promise<void>;
+}
+
+/**
+ * Main-thread facade over the Hugo engine: owns batching, the render-id demux
+ * into real elements, and transport selection. Runs the engine in a worker
+ * when one is provided and constructible, falling back to an in-page
+ * HugoWasm; the interface returns HTMLElements either way.
+ */
+export class HugoRenderer {
+	private enginePromise: Promise<void> | null = null;
+	private transportPromise: Promise<EngineTransport> | null = null;
+	private batch: QueuedRender[] = [];
+	private batchTimer: ReturnType<typeof setTimeout> | null = null;
+	private nextRenderId = 0;
+
+	constructor(private options: HugoRendererOptions) {}
+
+	async ready(): Promise<void> {
+		this.enginePromise ??= this.start().catch((err) => {
+			this.enginePromise = null;
+			this.transportPromise = null;
+			throw err;
+		});
+		await this.enginePromise;
+	}
+
+	async writeFiles(json: string): Promise<void> {
+		await (await this.transport()).writeFiles(json);
+	}
+
+	async removeFiles(json: string): Promise<void> {
+		await (await this.transport()).removeFiles(json);
+	}
+
+	async renderPartial(
+		partial: string,
+		props: Record<string, any> = {},
+	): Promise<HTMLElement> {
+		await this.ready();
+		return new Promise<HTMLElement>((resolve, reject) => {
+			const id = `cc-render-${this.nextRenderId++}`;
+			log("Queueing Hugo component:", partial, "Props:", props);
+			this.batch.push({ id, partial, props, resolve, reject });
+			if (this.batchTimer === null) {
+				this.batchTimer = setTimeout(() => this.flushBatch(), BATCH_WINDOW_MS);
+			}
+		});
+	}
+
+	private transport(): Promise<EngineTransport> {
+		this.transportPromise ??= Promise.resolve(this.createEngine());
+		return this.transportPromise;
+	}
+
+	private createEngine(): EngineTransport {
+		if (this.options.workerUrl && typeof Worker === "function") {
+			try {
+				log("Starting Hugo renderer in a worker");
+				return new WorkerClient(new Worker(this.options.workerUrl));
+			} catch {
+				warn("Hugo worker unavailable, rendering on the main thread");
+			}
+		}
+		return new HugoWasm();
+	}
+
+	private async start(): Promise<void> {
+		const engine = await this.transport();
+
+		group("Starting Hugo renderer");
+		await engine.boot({
+			wasmUrl: this.options.wasmUrl,
+			env: this.options.env,
+			files: this.options.getFiles(),
+		});
+		await this.options.onBooted?.();
+
+		const initError = await engine.init();
+		if (initError) {
+			groupEnd();
+			throw new Error(`Hugo editor site failed to build: ${initError}`);
+		}
+
+		log("Hugo renderer ready");
+		groupEnd();
+	}
+
+	private flushBatch(): void {
+		this.batchTimer = null;
+		const queued = this.batch;
+		this.batch = [];
+		if (queued.length === 0) return;
+
+		group(`Rendering ${queued.length} Hugo component(s)`);
+		this.runBatch(queued);
+	}
+
+	private async runBatch(queued: QueuedRender[]): Promise<void> {
+		try {
+			const engine = await this.ready().then(() => this.transport());
+			const result = await engine.render(
+				JSON.stringify({
+					target: this.options.getTarget(),
+					requests: queued.map(({ id, partial, props }) => ({
+						id,
+						partial,
+						props,
+					})),
+				}),
+			);
+			this.demuxBatch(queued, result);
+		} catch (err) {
+			for (const { partial, reject } of queued) {
+				reject(enhanceHugoError(String(err), partial));
+			}
+		} finally {
+			groupEnd();
+		}
+	}
+
+	private demuxBatch(
+		queued: QueuedRender[],
+		result: { html?: string; error?: string } | null,
+	): void {
+		if (result?.error || typeof result?.html !== "string") {
+			log("Render error:", result?.error);
+			for (const { partial, reject } of queued) {
+				reject(enhanceHugoError(result?.error ?? "no output", partial));
+			}
+			return;
+		}
+
+		const holder = document.createElement("div");
+		holder.innerHTML = result.html;
+		for (const render of queued) {
+			const keyed = holder.querySelector<HTMLElement>(
+				`[data-cc-render="${render.id}"]`,
+			);
+			if (!keyed) {
+				render.reject(
+					new Error(
+						`Hugo render produced no output for component "${render.partial}"`,
+					),
+				);
+				continue;
+			}
+
+			const missing = keyed.querySelector("cc-missing-partial");
+			if (missing) {
+				render.reject(
+					missingComponentError(
+						missing.getAttribute("data-name") || render.partial,
+					),
+				);
+				continue;
+			}
+
+			const failed = keyed.querySelector("cc-failed-partial");
+			if (failed) {
+				render.reject(
+					enhanceHugoError(
+						failed.getAttribute("data-message") || "unknown error",
+						failed.getAttribute("data-name") || render.partial,
+					),
+				);
+				continue;
+			}
+
+			keyed.removeAttribute("data-cc-render");
+			log("Rendered HTML preview:", keyed.innerHTML.substring(0, 200));
+			render.resolve(keyed);
+		}
+	}
+}

package/integrations/hugo/browser/hugo-wasm.ts

@@ -0,0 +1,116 @@
+import "./wasm_exec.js";
+
+export interface HugoWasmBootArgs {
+	wasmUrl: string;
+	env: string;
+	files: Record<string, string>;
+}
+
+interface PendingOp {
+	run: () => Promise<unknown>;
+	resolve: (value: unknown) => void;
+	reject: (err: unknown) => void;
+}
+
+export class HugoWasm {
+	private pending: PendingOp[] = [];
+	private draining = false;
+
+	async boot(args: HugoWasmBootArgs): Promise<void> {
+		await this.enqueue(() => this.runBoot(args));
+	}
+
+	writeFiles(json: string): Promise<void> {
+		return this.enqueue(async () => {
+			writeHugoFiles(json);
+		});
+	}
+
+	removeFiles(json: string): Promise<void> {
+		return this.enqueue(async () => {
+			removeHugoFiles(json);
+		});
+	}
+
+	async init(): Promise<string | undefined> {
+		return this.enqueue(async () => initHugoEditorSite()?.error);
+	}
+
+	render(payload: string): Promise<{ html?: string; error?: string }> {
+		return this.enqueue(
+			() =>
+				new Promise((resolve) => {
+					renderHugoPartials(payload, resolve);
+				}),
+		);
+	}
+
+	private enqueue<T>(run: () => Promise<T>): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			this.pending.push({
+				run,
+				resolve: resolve as (value: unknown) => void,
+				reject,
+			});
+			this.pump();
+		});
+	}
+
+	private pump(): void {
+		if (this.draining) return;
+		this.draining = true;
+		this.drain();
+	}
+
+	private async drain(): Promise<void> {
+		while (this.pending.length > 0) {
+			const op = this.pending.shift();
+			if (!op) break;
+			try {
+				op.resolve(await op.run());
+			} catch (err) {
+				op.reject(err);
+			}
+		}
+		this.draining = false;
+	}
+
+	private async runBoot({
+		wasmUrl,
+		env,
+		files,
+	}: HugoWasmBootArgs): Promise<void> {
+		const response = await fetch(wasmUrl);
+		if (!response.ok || !response.body) {
+			throw new Error(
+				`Failed to fetch Hugo WASM from ${wasmUrl}: HTTP ${response.status}`,
+			);
+		}
+
+		let wasmBuffer: ArrayBuffer;
+		if (wasmUrl.endsWith(".gz")) {
+			const decompressed = response.body.pipeThrough(
+				new DecompressionStream("gzip"),
+			);
+			wasmBuffer = await new Response(decompressed).arrayBuffer();
+		} else {
+			wasmBuffer = await response.arrayBuffer();
+		}
+
+		const go = new (globalThis as any).Go();
+		const { instance } = await WebAssembly.instantiate(
+			wasmBuffer,
+			go.importObject,
+		);
+		go.run(instance);
+
+		while (
+			typeof (globalThis as { renderHugoPartials?: unknown })
+				.renderHugoPartials !== "function"
+		) {
+			await new Promise((resolve) => setTimeout(resolve, 10));
+		}
+
+		writeHugoFiles(JSON.stringify({ ...files, "cc-env": env }));
+	}
+}

package/integrations/hugo/browser/index.ts

@@ -1,10 +1,9 @@
-import "./wasm_exec.js";
 import {
 	apiLoadedPromise,
 	CloudCannon,
 } from "../../../helpers/cloudcannon.mjs";
-import { enhanceHugoError, missingComponentError } from "./errors.ts";
-import { group, groupEnd, log, setVerbose, warn } from "./logger.ts";
+import { HugoRenderer } from "./hugo-renderer.ts";
+import { log, setVerbose, warn } from "./logger.ts";
 
 /** A `(props) => HTMLElement` renderer installed on `window.cc_components`. */
 type HugoComponentRenderer = (
@@ -15,8 +14,19 @@ type HugoComponentRenderer = (
  * no associated file (the renderer then falls back to the home page). */
 let currentFilePath = "";
 
-/** @type {Promise<void> | null} */
-let enginePromise: Promise<void> | null = null;
+let renderer: HugoRenderer | null = null;
+
+function getRenderer(): HugoRenderer {
+	renderer ??= new HugoRenderer({
+		wasmUrl: window.cc_hugo?.wasmUrl ?? "/_cloudcannon/hugo_renderer.wasm.gz",
+		env: window.cc_hugo?.env ?? "production",
+		workerUrl: window.cc_hugo?.workerUrl,
+		getTarget: () => currentFilePath,
+		getFiles: () => ({ ...(window.cc_hugo_files ?? {}) }),
+		onBooted: () => loadAPIData(getRenderer()),
+	});
+	return renderer;
+}
 
 /**
  * Entry point, called by the prebuilt runtime bundle. Installs the component
@@ -36,84 +46,15 @@ export function initHugoLiveEditing(): void {
 	initComponentProxy();
 
 	apiLoadedPromise.then(() => {
-		ensureEngine().catch((err) => {
-			warn("Failed to start the Hugo renderer:", err);
-		});
+		getRenderer()
+			.ready()
+			.catch((err) => {
+				warn("Failed to start the Hugo renderer:", err);
+			});
 	});
 }
 
-/** Boots the WASM renderer once and builds the editor site from the snapshot. */
-export function ensureEngine(): Promise<void> {
-	if (!enginePromise) {
-		enginePromise = startEngine().catch((err) => {
-			// Allow a retry on transient failures (e.g. a dropped WASM fetch).
-			enginePromise = null;
-			throw err;
-		});
-	}
-	return enginePromise;
-}
-
-async function startEngine(): Promise<void> {
-	const wasmUrl =
-		window.cc_hugo?.wasmUrl ?? "/_cloudcannon/hugo_renderer.wasm.gz";
-
-	group("Starting Hugo renderer");
-	log("Fetching WASM from", wasmUrl);
-
-	const response = await fetch(wasmUrl);
-	if (!response.ok || !response.body) {
-		groupEnd();
-		throw new Error(
-			`Failed to fetch Hugo WASM from ${wasmUrl}: HTTP ${response.status}`,
-		);
-	}
-
-	let wasmBuffer: ArrayBuffer;
-	if (wasmUrl.endsWith(".gz")) {
-		const decompressed = response.body.pipeThrough(
-			new DecompressionStream("gzip"),
-		);
-		wasmBuffer = await new Response(decompressed).arrayBuffer();
-	} else {
-		wasmBuffer = await response.arrayBuffer();
-	}
-
-	const go = new (globalThis as any).Go();
-	const { instance } = await WebAssembly.instantiate(
-		wasmBuffer,
-		go.importObject,
-	);
-	go.run(instance);
-
-	// The Go side registers its globals synchronously at startup.
-	while (
-		typeof (globalThis as { renderHugoPartials?: unknown })
-			.renderHugoPartials !== "function"
-	) {
-		await new Promise((resolve) => setTimeout(resolve, 10));
-	}
-
-	const files = {
-		...(window.cc_hugo_files ?? {}),
-		"cc-env": window.cc_hugo?.env ?? "production",
-	};
-	writeHugoFiles(JSON.stringify(files));
-
-	await loadAPIData();
-
-	const initError = initHugoEditorSite();
-
-	if (initError?.error) {
-		groupEnd();
-		throw new Error(`Hugo editor site failed to build: ${initError.error}`);
-	}
-
-	log("Hugo renderer ready");
-	groupEnd();
-}
-
-async function loadAPIData(): Promise<void> {
+async function loadAPIData(engine: HugoRenderer): Promise<void> {
 	const files: Record<string, string> = {};
 	try {
 		currentFilePath = CloudCannon.currentFile().path;
@@ -131,7 +72,7 @@ async function loadAPIData(): Promise<void> {
 				return;
 			}
 
-			writeHugoFiles(
+			engine.writeFiles(
 				JSON.stringify({
 					[path]: `---\n${JSON.stringify(frontMatter)}\n---\n`,
 				}),
@@ -139,7 +80,7 @@ async function loadAPIData(): Promise<void> {
 		});
 		collection.addEventListener("delete", (event) => {
 			if (currentPath !== event.detail.sourcePath) {
-				removeHugoFiles(JSON.stringify([event.detail.sourcePath]));
+				engine.removeFiles(JSON.stringify([event.detail.sourcePath]));
 			}
 		});
 
@@ -156,14 +97,16 @@ async function loadAPIData(): Promise<void> {
 		dataset.addEventListener("change", async (event) => {
 			const data = await CloudCannon.file(event.detail.sourcePath).data.get();
 			if (data === undefined || data === null) return;
-			writeHugoFiles(
+			engine.writeFiles(
 				JSON.stringify({
 					[datasetPath(event.detail.sourcePath)]: `${JSON.stringify(data)}\n`,
 				}),
 			);
 		});
 		dataset.addEventListener("delete", (event) => {
-			removeHugoFiles(JSON.stringify([datasetPath(event.detail.sourcePath)]));
+			engine.removeFiles(
+				JSON.stringify([datasetPath(event.detail.sourcePath)]),
+			);
 		});
 
 		const result = await dataset.items();
@@ -178,7 +121,7 @@ async function loadAPIData(): Promise<void> {
 		log(
 			`Loading editor content: ${Object.keys(files).length} files (editing ${currentPath})`,
 		);
-		writeHugoFiles(JSON.stringify(files));
+		await engine.writeFiles(JSON.stringify(files));
 	}
 }
 
@@ -192,137 +135,14 @@ function datasetPath(apiPath: string): string {
 	return `${apiPath.replace(/\.[^./]*$/, "")}.json`;
 }
 
-/**
- * Queues a partial render, resolving with the rendered element once the batch
- * window closes; all callers get batching transparently.
- */
-interface QueuedRender {
-	id: string;
-	partial: string;
-	props: Record<string, any>;
-	resolve: (el: HTMLElement) => void;
-	reject: (err: unknown) => void;
-}
-
-const BATCH_WINDOW_MS = 10;
-
-let batch: QueuedRender[] = [];
-let batchTimer: ReturnType<typeof setTimeout> | null = null;
-let nextRenderId = 0;
-
-/**
- * Queues a partial render, resolving with the rendered element once the batch
- * window closes; all callers get batching transparently.
- */
-export async function renderHugoPartial(
-	partial: string,
-	props: Record<string, any> = {},
-): Promise<HTMLElement> {
-	await ensureEngine();
-
-	return new Promise<HTMLElement>((resolve, reject) => {
-		const id = `cc-render-${nextRenderId++}`;
-		log("Queueing Hugo component:", partial, "Props:", props);
-		batch.push({ id, partial, props, resolve, reject });
-		if (batchTimer === null) {
-			batchTimer = setTimeout(flushBatch, BATCH_WINDOW_MS);
-		}
-	});
-}
-
-/** Flushes the batch: one renderer call, then demux the keyed output. */
-function flushBatch(): void {
-	batchTimer = null;
-	const queued = batch;
-	batch = [];
-	if (queued.length === 0) return;
-
-	group(`Rendering ${queued.length} Hugo component(s)`);
-	try {
-		const result = renderHugoPartials(
-			JSON.stringify({
-				target: currentFilePath,
-				requests: queued.map(({ id, partial, props }) => ({
-					id,
-					partial,
-					props,
-				})),
-			}),
-		);
-		demuxBatch(queued, result);
-	} catch (err) {
-		for (const { partial, reject } of queued) {
-			reject(enhanceHugoError(String(err), partial));
-		}
-	}
-	groupEnd();
-}
-
-/**
- * Resolves each request's keyed element from the combined output; errors and
- * missing partials fail only the calls they apply to, the rest still resolves.
- */
-function demuxBatch(
-	queued: QueuedRender[],
-	result: { html?: string; error?: string } | null,
-): void {
-	if (result?.error || typeof result?.html !== "string") {
-		log("Render error:", result?.error);
-		for (const { partial, reject } of queued) {
-			reject(enhanceHugoError(result?.error ?? "no output", partial));
-		}
-		return;
-	}
-
-	const holder = document.createElement("div");
-	holder.innerHTML = result.html;
-	for (const render of queued) {
-		const keyed = holder.querySelector<HTMLElement>(
-			`[data-cc-render="${render.id}"]`,
-		);
-		if (!keyed) {
-			render.reject(
-				new Error(
-					`Hugo render produced no output for component "${render.partial}"`,
-				),
-			);
-			continue;
-		}
-
-		const missing = keyed.querySelector("cc-missing-partial");
-		if (missing) {
-			render.reject(
-				missingComponentError(
-					missing.getAttribute("data-name") || render.partial,
-				),
-			);
-			continue;
-		}
-
-		const failed = keyed.querySelector("cc-failed-partial");
-		if (failed) {
-			render.reject(
-				enhanceHugoError(
-					failed.getAttribute("data-message") || "unknown error",
-					failed.getAttribute("data-name") || render.partial,
-				),
-			);
-			continue;
-		}
-
-		keyed.removeAttribute("data-cc-render");
-		log("Rendered HTML preview:", keyed.innerHTML.substring(0, 200));
-		render.resolve(keyed);
-	}
-}
-
 /** Builds the `(props) => HTMLElement` renderer the shared core calls. */
 function createComponentRenderer(key: string): HugoComponentRenderer {
 	return async (props: Record<string, any> = {}) => {
 		// Render only once the engine is ready; the flush then sends the
 		// boot-captured currentFilePath as the batch's shared target.
-		await ensureEngine();
-		return renderHugoPartial(key, props);
+		const engine = getRenderer();
+		await engine.ready();
+		return engine.renderPartial(key, props);
 	};
 }
 

package/integrations/hugo/browser/worker-protocol.ts

@@ -0,0 +1,18 @@
+export type WorkerRequest =
+	| {
+			id: string;
+			kind: "boot";
+			wasmUrl: string;
+			env: string;
+			files: Record<string, string>;
+	  }
+	| { id: string; kind: "writeFiles"; json: string }
+	| { id: string; kind: "removeFiles"; json: string }
+	| { id: string; kind: "init" }
+	| { id: string; kind: "render"; payload: string };
+
+export interface WorkerResponse {
+	id: string;
+	html?: string;
+	error?: string;
+}

package/integrations/hugo/browser/worker.ts

@@ -0,0 +1,51 @@
+import { HugoWasm } from "./hugo-wasm.ts";
+import type { WorkerRequest } from "./worker-protocol.ts";
+
+let engine: HugoWasm | null = null;
+
+export async function handleWorkerMessage(
+	event: MessageEvent<WorkerRequest>,
+): Promise<void> {
+	const request = event.data;
+	try {
+		switch (request.kind) {
+			case "boot": {
+				engine = new HugoWasm();
+				await engine.boot(request);
+				break;
+			}
+			case "writeFiles": {
+				await engine?.writeFiles(request.json);
+				break;
+			}
+			case "removeFiles": {
+				await engine?.removeFiles(request.json);
+				break;
+			}
+			case "init": {
+				const error = await engine?.init();
+				if (error) {
+					postMessage({ id: request.id, error });
+					return;
+				}
+				break;
+			}
+			case "render": {
+				const result = await engine?.render(request.payload);
+				postMessage({
+					id: request.id,
+					html: result?.html,
+					error: result?.error,
+				});
+				return;
+			}
+		}
+		postMessage({ id: request.id });
+	} catch (err) {
+		postMessage({ id: request.id, error: String(err) });
+	}
+}
+
+self.onmessage = (event) => {
+	handleWorkerMessage(event);
+};

package/integrations/hugo/hugo-module/layouts/partials/editable-regions/resources.html

@@ -71,15 +71,26 @@
     {{- end -}}
   {{- end -}}
 
+{{- $workerSrc := resources.Get "integrations/hugo/browser/worker.ts" -}}
+{{- $workerUrl := "" -}}
+{{- if $workerSrc -}}
+  {{- $workerUrl = ($workerSrc | js.Build (dict
+    "minify" (not hugo.IsDevelopment)
+    "targetPath" "_cloudcannon/hugo-worker.js"
+  ) | fingerprint).RelPermalink -}}
+{{- end -}}
+
 {{- $ctx := dict
   "meta" (dict
     "generator" (printf "Hugo %s" hugo.Version)
     "wasmUrl" $wasmUrl
+    "workerUrl" $workerUrl
     "verbose" ($cfg.verbose | default false)
     "env" (hugo.Environment | default "production")
   )
   "files" (merge $templateFiles $configFiles $additionalFiles)
 -}}
+
 {{- $entry := resources.Get "integrations/hugo/browser/entry.js" -}}
 {{- if not $entry -}}
   {{- errorf "editable-regions: integrations/hugo/browser/entry.js not found in assets — is the editable-regions module imported and mounted?" -}}

package/integrations/hugo/renderer/go.mod

@@ -4,7 +4,6 @@ go 1.26.0
 
 require (
 	github.com/fsnotify/fsnotify v1.9.0
-	github.com/goccy/go-yaml v1.19.2
 	github.com/gohugoio/hugo v0.164.0
 	github.com/spf13/afero v1.15.0
 )
@@ -40,11 +39,12 @@ require (
 	github.com/evanw/esbuild v0.28.1 // indirect
 	github.com/fatih/color v1.18.0 // indirect
 	github.com/frankban/quicktest v1.14.6 // indirect
-	github.com/getkin/kin-openapi v0.140.0 // indirect
+	github.com/getkin/kin-openapi v0.144.0 // indirect
 	github.com/go-openapi/jsonpointer v0.22.5 // indirect
 	github.com/go-openapi/swag/jsonname v0.25.5 // indirect
 	github.com/gobuffalo/flect v1.0.3 // indirect
 	github.com/gobwas/glob v0.2.3 // indirect
+	github.com/goccy/go-yaml v1.19.2 // indirect
 	github.com/gohugoio/gift v0.2.0 // indirect
 	github.com/gohugoio/go-i18n/v2 v2.1.3-0.20251018145728-cfcc22d823c6 // indirect
 	github.com/gohugoio/go-radix v1.2.0 // indirect
@@ -69,8 +69,8 @@ require (
 	github.com/mitchellh/mapstructure v1.5.1-0.20231216201459-8508981c8b6c // indirect
 	github.com/muesli/smartcrop v0.3.0 // indirect
 	github.com/niklasfasching/go-org v1.9.1 // indirect
-	github.com/oasdiff/yaml v0.1.0 // indirect
-	github.com/oasdiff/yaml3 v0.0.13 // indirect
+	github.com/oasdiff/yaml v0.1.1 // indirect
+	github.com/oasdiff/yaml3 v0.0.14 // indirect
 	github.com/olekukonko/cat v0.0.0-20250911104152-50322a0618f6 // indirect
 	github.com/olekukonko/errors v1.2.0 // indirect
 	github.com/olekukonko/ll v0.1.6 // indirect

package/integrations/hugo/renderer/go.sum

@@ -74,8 +74,8 @@ github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHk
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
 github.com/fsnotify/fsnotify v1.9.0 h1:2Ml+OJNzbYCTzsxtv8vKSFD9PbJjmhYF14k/jKC7S9k=
 github.com/fsnotify/fsnotify v1.9.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0=
-github.com/getkin/kin-openapi v0.140.0 h1:JFn675aXRFjyiZKa/BFWploGldQlI0gobp4J5k0EZ2g=
-github.com/getkin/kin-openapi v0.140.0/go.mod h1:lISrB64F0CPcuDJ3LdtPTMJBY8VENjR9wJBdrcT6J3g=
+github.com/getkin/kin-openapi v0.144.0 h1:hIRcTH+KjLfkLpYU6bSSfdFpi0fZi1fp+hSPi4aQu9Y=
+github.com/getkin/kin-openapi v0.144.0/go.mod h1:3BH9M9XDe/y9M5DSvEocVYAYq1w0qrhJHjC/vZi0AaY=
 github.com/go-openapi/jsonpointer v0.22.5 h1:8on/0Yp4uTb9f4XvTrM2+1CPrV05QPZXu+rvu2o9jcA=
 github.com/go-openapi/jsonpointer v0.22.5/go.mod h1:gyUR3sCvGSWchA2sUBJGluYMbe1zazrYWIkWPjjMUY0=
 github.com/go-openapi/swag/jsonname v0.25.5 h1:8p150i44rv/Drip4vWI3kGi9+4W9TdI3US3uUYSFhSo=
@@ -151,10 +151,10 @@ github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646 h1:zYyBkD/k9seD2A7fsi6
 github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646/go.mod h1:jpp1/29i3P1S/RLdc7JQKbRpFeM1dOBd8T9ki5s+AY8=
 github.com/niklasfasching/go-org v1.9.1 h1:/3s4uTPOF06pImGa2Yvlp24yKXZoTYM+nsIlMzfpg/0=
 github.com/niklasfasching/go-org v1.9.1/go.mod h1:ZAGFFkWvUQcpazmi/8nHqwvARpr1xpb+Es67oUGX/48=
-github.com/oasdiff/yaml v0.1.0 h1:0bqZjfKc/8S9urj4JuwepX41WX9EoA6ifhU3SV06cXg=
-github.com/oasdiff/yaml v0.1.0/go.mod h1:kOlRmMdL2X3vucLCEQO5u61SU22RysnfXvcttrZA1O0=
-github.com/oasdiff/yaml3 v0.0.13 h1:06svmvOHOVBqF81+sY2EUScvUI/iS/vl2VIeUUxZQwg=
-github.com/oasdiff/yaml3 v0.0.13/go.mod h1:y5+oSEHCPT/DGrS++Wc/479ERge0zTFxaF8PbGKcg2o=
+github.com/oasdiff/yaml v0.1.1 h1:6nHx+pn9gBRM6YpBlFZFQGCCd1nuvqOBtTD3KKTgGxY=
+github.com/oasdiff/yaml v0.1.1/go.mod h1:EYJNoyktvWMJ0Hmhx+6qTaqMOsalUaRGT8Sj1hNcegU=
+github.com/oasdiff/yaml3 v0.0.14 h1:aLJee3hxBK2H5wdXd9iPcIXb93Nty1Ge0pT171eHtkw=
+github.com/oasdiff/yaml3 v0.0.14/go.mod h1:csto2xfDjYccdUn/yw/bPjj/cYTdp6HtFA0J4TWG+gg=
 github.com/olekukonko/cat v0.0.0-20250911104152-50322a0618f6 h1:zrbMGy9YXpIeTnGj4EljqMiZsIcE09mmF8XsD5AYOJc=
 github.com/olekukonko/cat v0.0.0-20250911104152-50322a0618f6/go.mod h1:rEKTHC9roVVicUIfZK7DYrdIoM0EOr8mK1Hj5s3JjH0=
 github.com/olekukonko/errors v1.2.0 h1:10Zcn4GeV59t/EGqJc8fUjtFT/FuUh5bTMzZ1XwmCRo=

package/integrations/hugo/renderer/main.go

@@ -3,11 +3,13 @@ package main
 import (
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"log"
 	"path/filepath"
 	"strings"
+	"sync"
 	"syscall/js"
 	_ "time/tzdata"
 
@@ -96,6 +98,7 @@ func (builder *editorSiteBuilder) loadConfig() error {
 	cfg.Base.WorkingDir = ""
 	cfg.Base.Internal.Running = true
 	cfg.Base.Internal.Watch = true
+	cfg.Base.EnableGitInfo = false
 
 	for _, languageConfig := range cfg.LanguageConfigMap {
 		languageConfig.Internal.Running = true
@@ -235,6 +238,8 @@ func normalizeMemfsPath(p string) string {
 
 var builder editorSiteBuilder
 
+var renderMutex sync.Mutex
+
 func main() {
 	builder = editorSiteBuilder{Afs: afero.NewMemMapFs()}
 
@@ -340,32 +345,54 @@ func (builder *editorSiteBuilder) targetPage(target string) page.Page {
 }
 
 func renderHugoPartials(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 || args[1].Type() != js.TypeFunction {
+		return errorValue("renderHugoPartials requires a callback function argument")
+	}
+	callback := args[1]
+
+	deliver := func(html string, err error) {
+		result := map[string]interface{}{}
+		if err != nil {
+			result["error"] = err.Error()
+		} else {
+			result["html"] = html
+		}
+		callback.Invoke(js.ValueOf(result))
+	}
+
 	var payload renderRequests
 	if err := json.Unmarshal([]byte(args[0].String()), &payload); err != nil {
-		return errorValue("bad renderHugoPartials payload: %s", err)
+		deliver("", fmt.Errorf("bad renderHugoPartials payload: %s", err))
+		return nil
 	}
 	reqs := payload.Requests
 	if len(reqs) == 0 {
-		return errorValue("renderHugoPartials requires at least one request")
-	}
-	if err := builder.buildIfDirty(); err != nil {
-		return errorValue("editor site build failed: %s", err)
+		deliver("", errors.New("renderHugoPartials requires at least one request"))
+		return nil
 	}
-
 	for _, req := range reqs {
 		if req.Partial == "" {
-			return errorValue("renderHugoPartials requires a \"partial\" name on every request")
+			deliver("", errors.New("renderHugoPartials requires a \"partial\" name on every request"))
+			return nil
 		}
 	}
 
-	html, err := builder.renderBatch(payload.Target, reqs)
-	if err != nil {
-		return errorValue("%s", err)
-	}
+	go func() {
+		html, err := builder.buildAndRender(payload.Target, reqs)
+		deliver(html, err)
+	}()
 
-	return js.ValueOf(map[string]interface{}{
-		"html": html,
-	})
+	return nil
+}
+
+func (builder *editorSiteBuilder) buildAndRender(target string, reqs []renderRequest) (string, error) {
+	renderMutex.Lock()
+	defer renderMutex.Unlock()
+
+	if err := builder.buildIfDirty(); err != nil {
+		return "", fmt.Errorf("editor site build failed: %s", err)
+	}
+	return builder.renderBatch(target, reqs)
 }
 
 func (builder *editorSiteBuilder) renderBatch(target string, reqs []renderRequest) (string, error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcannon/editable-regions",
-  "version": "0.0.20-rc.1",
+  "version": "0.0.20-rc.3",
   "type": "module",
   "description": "Visual Editing for the CloudCannon CMS.",
   "keywords": [

package/types/hugo.d.ts

@@ -29,6 +29,7 @@ declare global {
 	interface HugoRuntimeMeta {
 		generator?: string;
 		wasmUrl?: string;
+		workerUrl?: string;
 		verbose?: boolean;
 		env?: string;
 	}
@@ -53,7 +54,7 @@ declare global {
 		CloudCannonAPI?: CloudCannonVisualEditorAPIRouter;
 		/** The installed v0/v1 CloudCannon API for this page. */
 		CloudCannon?: CloudCannonVisualEditorAPIV0 | CloudCannonVisualEditorAPIV1;
-		/** Emitter metadata: generator, wasmUrl, verbose, env. */
+		/** Emitter metadata: generator, wasmUrl, workerUrl, verbose, env. */
 		cc_hugo?: HugoRuntimeMeta;
 		/** Template/config snapshot keyed by physical path. */
 		cc_hugo_files?: Record<string, string>;
@@ -65,5 +66,8 @@ declare global {
 	function removeHugoFiles(json: string): HugoEditorResult | null;
 	function readHugoFiles(json: string): Record<string, string>;
 	function initHugoEditorSite(): HugoEditorResult | null;
-	function renderHugoPartials(json: string): HugoRenderResult | null;
+	function renderHugoPartials(
+		json: string,
+		callback: (result: HugoRenderResult) => void,
+	): void;
 }