@cloudcannon/editable-regions 0.0.20-rc.2 → 0.0.20

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/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/integrations/react.mjs

@@ -1,4 +1,6 @@
-import { createElement } from "react";
+"use client";
+
+import { createElement, useEffect, useRef } from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { addEditableComponentRenderer } from "../helpers/cloudcannon.mjs";
@@ -26,3 +28,63 @@ export const registerReactComponent = (key, component) => {
 
 	addEditableComponentRenderer(key, wrappedComponent);
 };
+
+/**
+ * Root editable region component for React (e.g. Next.js App Router pages).
+ * Keeps editable regions from mutating the DOM before frameworks like Next.js finish hydrating.
+ *
+ * @param {{ tag?: string } & Record<string, any>} props
+ * All other props and attributes are forwarded to the rendered element.
+ */
+export const EditableRegions = ({ tag: Tag = "div", ...attrs }) => {
+	const elementRef = useRef(null);
+	/** @type {{ current: any | null }} */
+	const editableRef = useRef(null);
+
+	useEffect(() => {
+		/** @param {any} regions */
+		const connectEditable = (regions) => {
+			if (!regions || editableRef.current) {
+				return;
+			}
+
+			editableRef.current = new regions.Editable(elementRef.current);
+			editableRef.current.connect();
+		};
+
+		const onLoad = () => {
+			connectEditable(/** @type {any} */ (window).editableRegions);
+		};
+
+		if (/** @type {any} */ (window).editableRegions) {
+			connectEditable(/** @type {any} */ (window).editableRegions);
+		} else {
+			document.addEventListener("editable-regions:load", onLoad, {
+				once: true,
+			});
+		}
+
+		return () => {
+			document.removeEventListener("editable-regions:load", onLoad);
+			editableRef.current?.disconnect();
+			editableRef.current = null;
+		};
+	}, []);
+
+	/** @type {Record<string, any>} */
+	const forwarded = {};
+	for (const [name, value] of Object.entries(attrs)) {
+		if (/^data-(prop|literal)/i.test(name)) {
+			continue;
+		}
+
+		forwarded[name] = value;
+	}
+
+	return createElement(Tag, {
+		...forwarded,
+		ref: elementRef,
+		"data-editable": "_dynamic",
+		"data-prop": "",
+	});
+};

package/integrations/svelte/EditableRegions.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { onDestroy, onMount } from "svelte";
+
+	// Element type to render. Defaults to "div".
+	/** @type {string | undefined} */
+	export let tag = "div";
+
+	/** @type {any} */
+	let editable = null;
+	/** @type {HTMLElement | undefined} */
+	let element;
+	/** @type {(() => void) | null} */
+	let pendingLoadHandler = null;
+
+	// data-prop and data-literal attributes are controlled by this component
+	// itself; user-supplied ones are ignored.
+	$: restProps = filterProps($$restProps);
+
+	function filterProps(props) {
+		const filtered = {};
+		for (const [name, value] of Object.entries(props)) {
+			if (/^data-(prop|literal)/i.test(name)) {
+				continue;
+			}
+
+			filtered[name] = value;
+		}
+		return filtered;
+	}
+
+	onMount(() => {
+		/**
+		 * @param {any} regions
+		 */
+		const connectEditable = (regions) => {
+			if (!regions || editable) {
+				return;
+			}
+
+			editable = new regions.Editable(element);
+			editable.connect();
+		};
+
+		if (window.editableRegions) {
+			connectEditable(window.editableRegions);
+		} else {
+			pendingLoadHandler = () => {
+			    connectEditable(window.editableRegions);
+		    };
+			document.addEventListener(
+				"editable-regions:load",
+				pendingLoadHandler,
+				{ once: true },
+			);
+		}
+	});
+
+	onDestroy(() => {
+		if (pendingLoadHandler) {
+			document.removeEventListener(
+				"editable-regions:load",
+				pendingLoadHandler,
+			);
+			pendingLoadHandler = null;
+		}
+
+		editable?.disconnect();
+		editable = null;
+	});
+</script>
+
+<svelte:element
+	this={tag}
+	{...restProps}
+	bind:this={element}
+	data-editable="_dynamic"
+	data-prop=""
+>
+	<slot />
+</svelte:element>

package/integrations/{svelte.mjs → svelte/index.mjs}

@@ -1,4 +1,6 @@
-import { addEditableComponentRenderer } from "../helpers/cloudcannon.mjs";
+export { default as EditableRegions } from "./EditableRegions.svelte";
+
+import { addEditableComponentRenderer } from "../../helpers/cloudcannon.mjs";
 
 /** @type{((component: any, args: { target: HTMLElement, props: unknown }) => void) | undefined} */
 let mount;