camox 0.48.0 → 0.52.1

package/dist/features/renderer/RendererFrames.js

@@ -0,0 +1,450 @@
+import { useDraftScope } from "../../lib/draft-scope.js";
+import { ViewLocaleContext } from "../../lib/view-locale-context.js";
+import { useLocation, useNavigate } from "../navigation/navigation.js";
+import { runtimePath } from "../runtime/navigationTarget.js";
+import { useStudioCache } from "../../lib/studio-reads.js";
+import { ArtifactStudioContext, ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
+import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
+import { RevisionsContext } from "../../lib/revisions.js";
+import { CanvasWorkspaceContext } from "../canvas/canvasZoom.js";
+import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
+import { showNotice } from "../preview/studioNotice.js";
+import { RENDERER_DOCUMENT_PATH, STUDIO_HANDLE_KEY } from "./protocol.js";
+import { createRendererHost } from "./rendererHost.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+
+//#region src/features/renderer/RendererFrames.tsx
+/** The Website Section's renderer host. `RendererFramesProvider` provides it. */
+const RendererHostContext = React.createContext(null);
+/** The Website Section's renderer host, once it exists: null before, and outside the section. */
+function useRendererHost() {
+	return React.use(RendererHostContext);
+}
+/**
+* What the renderer frame's code answers `question`, asked again whenever another renderer
+* connects (a draft move or a reload): undefined until it answers, without a renderer, or
+* without a question.
+*/
+function useRendererAnswer(question) {
+	const $ = c(12);
+	const host = useRendererHost();
+	let t0;
+	if ($[0] !== question) {
+		t0 = question ? JSON.stringify(question) : null;
+		$[0] = question;
+		$[1] = t0;
+	} else t0 = $[1];
+	const json = t0;
+	const connections = React.useRef(0);
+	let t1;
+	if ($[2] !== host) {
+		t1 = (listener) => host ? host.subscribe(() => {
+			connections.current = connections.current + 1;
+			listener();
+		}) : _temp;
+		$[2] = host;
+		$[3] = t1;
+	} else t1 = $[3];
+	const subscribe = t1;
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => connections.current;
+		$[4] = t2;
+	} else t2 = $[4];
+	const connection = React.useSyncExternalStore(subscribe, t2);
+	const [answer, setAnswer] = React.useState();
+	let t3;
+	if ($[5] !== host || $[6] !== json) {
+		t3 = () => {
+			if (!host || !json) return;
+			let current = true;
+			host.ask(JSON.parse(json)).then((value) => current && setAnswer({
+				asked: json,
+				value
+			}), () => current && setAnswer({
+				asked: json,
+				value: void 0
+			}));
+			return () => {
+				current = false;
+			};
+		};
+		$[5] = host;
+		$[6] = json;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== connection || $[9] !== host || $[10] !== json) {
+		t4 = [
+			host,
+			json,
+			connection
+		];
+		$[8] = connection;
+		$[9] = host;
+		$[10] = json;
+		$[11] = t4;
+	} else t4 = $[11];
+	React.useEffect(t3, t4);
+	return answer && answer.asked === json ? answer.value : void 0;
+}
+function _temp() {}
+/**
+* The Website Section's renderer frame: one hidden frame loading the renderer document of the
+* draft the studio views, which renders every page the section's frames show (ADR 0023).
+*
+* A renderer shows one draft. Moving to another loads another renderer document, with a cache
+* of its own. A draft the studio's first content write starts is Live plus that write, so the
+* renderer showing Live enters it instead. Each new revision of the draft shown loads it again:
+* the studio keeps the Canvas position and selection, and tells the new renderer.
+*/
+function RendererFramesProvider(t0) {
+	const $ = c(27);
+	const { runtimeBasePath, children } = t0;
+	const queryClient = useQueryClient();
+	const studioCache = useStudioCache();
+	const draftScope = useDraftScope();
+	const [host, setHost] = React.useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== draftScope || $[1] !== queryClient || $[2] !== studioCache) {
+		t1 = () => {
+			const created = createRendererHost({
+				studioCache,
+				draftScope,
+				queryClient,
+				notify: showNotice
+			});
+			setHost(created);
+			return () => created.close();
+		};
+		t2 = [
+			studioCache,
+			draftScope,
+			queryClient
+		];
+		$[0] = draftScope;
+		$[1] = queryClient;
+		$[2] = studioCache;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[5] !== draftScope || $[6] !== runtimeBasePath) {
+		t3 = () => draftScope.hrefFor(runtimePath(RENDERER_DOCUMENT_PATH, runtimeBasePath));
+		$[5] = draftScope;
+		$[6] = runtimeBasePath;
+		$[7] = t3;
+	} else t3 = $[7];
+	const documentUrl = t3;
+	const [source, setSource] = React.useState(documentUrl);
+	let t4;
+	let t5;
+	if ($[8] !== documentUrl || $[9] !== draftScope) {
+		t4 = () => draftScope.subscribe((t6) => {
+			const { move } = t6;
+			if (move !== "started") setSource(documentUrl());
+		});
+		t5 = [draftScope, documentUrl];
+		$[8] = documentUrl;
+		$[9] = draftScope;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t4 = $[10];
+		t5 = $[11];
+	}
+	React.useEffect(t4, t5);
+	const [loads, setLoads] = React.useState(0);
+	const revisions = React.use(RevisionsContext);
+	let t6;
+	let t7;
+	if ($[12] !== draftScope || $[13] !== revisions) {
+		t6 = () => revisions?.subscribe((t8) => {
+			const { draftId } = t8;
+			if (draftId === draftScope.current()) setLoads(_temp2);
+		});
+		t7 = [revisions, draftScope];
+		$[12] = draftScope;
+		$[13] = revisions;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t6 = $[14];
+		t7 = $[15];
+	}
+	React.useEffect(t6, t7);
+	let t8;
+	if ($[16] !== host) {
+		t8 = (frame) => {
+			if (frame && host) frame[STUDIO_HANDLE_KEY] = host.handle;
+		};
+		$[16] = host;
+		$[17] = t8;
+	} else t8 = $[17];
+	const connect = t8;
+	let t9;
+	if ($[18] !== connect || $[19] !== host || $[20] !== loads || $[21] !== source) {
+		t9 = host && /* @__PURE__ */ jsx("iframe", {
+			ref: connect,
+			src: source,
+			hidden: true,
+			title: "Website renderer",
+			"data-camox-renderer": true
+		}, `${source}#${loads}`);
+		$[18] = connect;
+		$[19] = host;
+		$[20] = loads;
+		$[21] = source;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== children || $[24] !== host || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(RendererHostContext, {
+			value: host,
+			children: [children, t9]
+		});
+		$[23] = children;
+		$[24] = host;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	return t10;
+}
+function _temp2(count) {
+	return count + 1;
+}
+/**
+* Where the renderer renders a page, inside one of the Website Section's frames: the place a
+* frame used to render the page itself. What the frame around it says (its owner, whether it is
+* editable, its Canvas workspace, location and locale) tells the renderer how to render it.
+*/
+function RendererSlot(t0) {
+	const $ = c(43);
+	const { pathname, derivedLayoutId, resting: t1, onRendered, onFailed } = t0;
+	const resting = t1 === void 0 ? false : t1;
+	const host = useRendererHost();
+	const frameId = React.useId();
+	const [slot, setSlot] = React.useState(null);
+	const owner = React.use(PreviewEditingOwnerContext);
+	const editable = React.use(EditableSurfaceContext);
+	const artifactsRun = React.use(ArtifactsRunContext);
+	const artifactStudio = React.use(ArtifactStudioContext);
+	const workspace = React.use(CanvasWorkspaceContext);
+	const locale = React.use(ViewLocaleContext);
+	const { href } = useLocation();
+	const navigate = useNavigate();
+	const workspaceKey = workspace?.workspaceKey;
+	let t2;
+	if ($[0] !== derivedLayoutId) {
+		t2 = derivedLayoutId && { derivedLayoutId };
+		$[0] = derivedLayoutId;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== workspaceKey) {
+		t3 = workspaceKey === void 0 ? null : { workspaceKey };
+		$[2] = workspaceKey;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== artifactStudio || $[5] !== artifactsRun || $[6] !== editable || $[7] !== href || $[8] !== locale || $[9] !== owner || $[10] !== pathname || $[11] !== resting || $[12] !== t2 || $[13] !== t3) {
+		t4 = {
+			pathname,
+			href,
+			...t2,
+			owner,
+			locale,
+			editable,
+			artifactsRun,
+			artifactStudio,
+			resting,
+			canvas: t3
+		};
+		$[4] = artifactStudio;
+		$[5] = artifactsRun;
+		$[6] = editable;
+		$[7] = href;
+		$[8] = locale;
+		$[9] = owner;
+		$[10] = pathname;
+		$[11] = resting;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	const target = useSameJson(t4);
+	let t5;
+	if ($[15] !== navigate || $[16] !== onFailed || $[17] !== onRendered || $[18] !== workspace) {
+		t5 = {
+			onRendered,
+			onFailed,
+			navigate,
+			workspace
+		};
+		$[15] = navigate;
+		$[16] = onFailed;
+		$[17] = onRendered;
+		$[18] = workspace;
+		$[19] = t5;
+	} else t5 = $[19];
+	const latest = React.useRef(t5);
+	let t6;
+	if ($[20] !== navigate || $[21] !== onFailed || $[22] !== onRendered || $[23] !== workspace) {
+		t6 = () => {
+			latest.current = {
+				onRendered,
+				onFailed,
+				navigate,
+				workspace
+			};
+		};
+		$[20] = navigate;
+		$[21] = onFailed;
+		$[22] = onRendered;
+		$[23] = workspace;
+		$[24] = t6;
+	} else t6 = $[24];
+	React.useLayoutEffect(t6);
+	let t7;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => ({
+			rendered: () => latest.current.onRendered?.(),
+			failed: (message) => latest.current.onFailed?.(message),
+			navigate: (to) => void latest.current.navigate({ to }),
+			reveal: (element, immediate) => latest.current.workspace?.reveal(element, immediate)
+		});
+		$[25] = t7;
+	} else t7 = $[25];
+	const [hears] = React.useState(t7);
+	let t8;
+	let t9;
+	if ($[26] !== frameId || $[27] !== hears || $[28] !== host || $[29] !== slot || $[30] !== target) {
+		t8 = () => {
+			if (host && slot) host.show(frameId, slot, target, hears);
+		};
+		t9 = [
+			host,
+			slot,
+			frameId,
+			target,
+			hears
+		];
+		$[26] = frameId;
+		$[27] = hears;
+		$[28] = host;
+		$[29] = slot;
+		$[30] = target;
+		$[31] = t8;
+		$[32] = t9;
+	} else {
+		t8 = $[31];
+		t9 = $[32];
+	}
+	React.useLayoutEffect(t8, t9);
+	let t10;
+	let t11;
+	if ($[33] !== frameId || $[34] !== host || $[35] !== slot) {
+		t10 = () => {
+			if (!host || !slot) return;
+			return () => host.hide(frameId);
+		};
+		t11 = [
+			host,
+			slot,
+			frameId
+		];
+		$[33] = frameId;
+		$[34] = host;
+		$[35] = slot;
+		$[36] = t10;
+		$[37] = t11;
+	} else {
+		t10 = $[36];
+		t11 = $[37];
+	}
+	React.useLayoutEffect(t10, t11);
+	const status = useRendererStatus(host);
+	let t12;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			ref: setSlot,
+			"data-camox-renderer-slot": true,
+			style: { display: "contents" }
+		});
+		$[38] = t12;
+	} else t12 = $[38];
+	let t13;
+	if ($[39] !== status) {
+		t13 = status === "updating" && /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"data-camox-renderer-updating": true,
+			style: NOTICE_STYLE,
+			children: "Updating the preview…"
+		});
+		$[39] = status;
+		$[40] = t13;
+	} else t13 = $[40];
+	let t14;
+	if ($[41] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t13] });
+		$[41] = t13;
+		$[42] = t14;
+	} else t14 = $[42];
+	return t14;
+}
+/** What the studio says in a frame in place of its page, in the frame's own document. */
+const NOTICE_STYLE = {
+	padding: "24px",
+	fontFamily: "system-ui, sans-serif",
+	fontSize: "14px",
+	color: "#71717a"
+};
+/** Where the renderer frame of `host` is: null without a host. */
+function useRendererStatus(host) {
+	const $ = c(4);
+	let t0;
+	if ($[0] !== host) {
+		t0 = (listener) => host?.subscribeStatus(listener) ?? _temp3;
+		$[0] = host;
+		$[1] = t0;
+	} else t0 = $[1];
+	const subscribe = t0;
+	let t1;
+	if ($[2] !== host) {
+		t1 = () => host?.status() ?? null;
+		$[2] = host;
+		$[3] = t1;
+	} else t1 = $[3];
+	const status = t1;
+	return React.useSyncExternalStore(subscribe, status, status);
+}
+function _temp3() {}
+/** `value`, kept while it says the same, so a re-render doesn't show the frame again. */
+function useSameJson(value) {
+	const $ = c(4);
+	let t0;
+	if ($[0] !== value) {
+		t0 = JSON.stringify(value);
+		$[0] = value;
+		$[1] = t0;
+	} else t0 = $[1];
+	const json = t0;
+	let t1;
+	if ($[2] !== json) {
+		t1 = JSON.parse(json);
+		$[2] = json;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+
+//#endregion
+export { RendererFramesProvider, RendererHostContext, RendererSlot, useRendererAnswer, useRendererHost, useRendererStatus };

package/dist/features/renderer/definitionAnswers.js

@@ -0,0 +1,26 @@
+import { curatedLayoutContext } from "../../core/layoutContext.js";
+
+//#region src/features/renderer/definitionAnswers.ts
+/** The block of `type` in the draft's code, loading it if it is lazy. */
+async function blockOfCode(camoxApp, type) {
+	const block = camoxApp.getBlockById(type);
+	if (block || !camoxApp.canLoadMoreBlocks()) return block;
+	return camoxApp.loadBlock(type);
+}
+async function answerFromCode(camoxApp, question) {
+	switch (question.type) {
+		case "initialBundle": return (await blockOfCode(camoxApp, question.blockType))?._internal.getInitialBundle() ?? null;
+		case "pageTitle": {
+			const layout = camoxApp.getLayoutById(question.layoutId);
+			if (!layout) return null;
+			const { page, projectName, locale } = question;
+			return layout._internal.toTitle(curatedLayoutContext({
+				page,
+				projectName
+			}, locale));
+		}
+	}
+}
+
+//#endregion
+export { answerFromCode, blockOfCode };

package/dist/features/renderer/protocol.js

@@ -0,0 +1,35 @@
+import { RUNTIME_ROUTE_PATHS } from "../runtime/runtimeRoutes.js";
+import { version } from "../../package.js";
+
+//#region src/features/renderer/protocol.ts
+/** The SDK version this side of the protocol was built with. Both sides must share it. */
+const SDK_VERSION = version;
+/** The property of the renderer frame's element that holds the studio's {@link StudioHandle}. */
+const STUDIO_HANDLE_KEY = "__camoxStudio";
+/** The runtime route that serves the renderer document. */
+const RENDERER_DOCUMENT_PATH = RUNTIME_ROUTE_PATHS.renderer;
+/**
+* An inbox that handles each message later, in order, apart from the call that delivered it: the
+* sender never runs the receiver's code, and never sees its errors. `onError` hears them.
+*/
+function deferredInbox(handle, onError = (error) => console.error("Camox: the renderer frame's protocol failed to handle a message.", error)) {
+	const queue = [];
+	let scheduled = false;
+	const drain = () => {
+		scheduled = false;
+		for (const message of queue.splice(0)) try {
+			handle(message);
+		} catch (error) {
+			onError(error);
+		}
+	};
+	return (message) => {
+		queue.push(message);
+		if (scheduled) return;
+		scheduled = true;
+		queueMicrotask(drain);
+	};
+}
+
+//#endregion
+export { RENDERER_DOCUMENT_PATH, SDK_VERSION, STUDIO_HANDLE_KEY, deferredInbox };