camox 0.67.0 → 0.69.0

package/dist/features/renderer/RendererApp.js

@@ -1,3 +1,4 @@
+import { parseLocalePath } from "../../lib/locale-path.js";
 import { ViewLocaleContext } from "../../lib/view-locale-context.js";
 import { NavigationProvider } from "../navigation/navigation.js";
 import { reads, useRead } from "../../lib/studio-reads.js";
@@ -31,7 +32,7 @@ import { createPortal } from "react-dom";
 function RendererApp(t0) {
 	const $ = c(27);
 	const { connection, camoxApp, codeLoaded, projectUuid, runtimeBasePath } = t0;
-	const frames = React.useSyncExternalStore(connection.subscribe, connection.frames, connection.frames);
+	const frames = useFrames(connection);
 	const thumbnails = React.useSyncExternalStore(connection.subscribe, connection.thumbnails, connection.thumbnails);
 	const t1 = connection.edit;
 	let t2;
@@ -111,6 +112,32 @@ function RendererApp(t0) {
 	} else t6 = $[26];
 	return t6;
 }
+/**
+* The frames the studio gives the renderer to fill. Each change renders in a transition, so a
+* frame switching to another page or locale keeps showing the last one until the next loads.
+*/
+function useFrames(connection) {
+	const $ = c(3);
+	const [frames, setFrames] = React.useState(connection.frames);
+	let t0;
+	let t1;
+	if ($[0] !== connection) {
+		t0 = () => {
+			const follow = () => React.startTransition(() => setFrames(connection.frames()));
+			follow();
+			return connection.subscribe(follow);
+		};
+		t1 = [connection];
+		$[0] = connection;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	return frames;
+}
 /** A block's thumbnail, rendered by the draft's code into its frame: nothing for a block it lacks. */
 function RendererThumbnail(t0) {
 	const $ = c(17);
@@ -263,7 +290,7 @@ function locationOf(href) {
 }
 /** One frame's page, with what the studio says of the frame around it. */
 function RendererFrameContent(t0) {
-	const $ = c(65);
+	const $ = c(71);
 	const { frame: t1, connection, camoxApp, codeLoaded, projectUuid, runtimeBasePath } = t0;
 	const { frameId, slot, target } = t1;
 	const frameWindow = slot.ownerDocument.defaultView;
@@ -277,28 +304,36 @@ function RendererFrameContent(t0) {
 	} else t2 = $[1];
 	const location = t2;
 	let t3;
-	if ($[2] !== connection || $[3] !== frameId) {
-		t3 = (t4) => {
-			const { to } = t4;
+	if ($[2] !== target.locale || $[3] !== target.pathname) {
+		t3 = target.locale ? parseLocalePath(target.pathname, target.locale.locales).path : target.pathname;
+		$[2] = target.locale;
+		$[3] = target.pathname;
+		$[4] = t3;
+	} else t3 = $[4];
+	const page = t3;
+	let t4;
+	if ($[5] !== connection || $[6] !== frameId) {
+		t4 = (t5) => {
+			const { to } = t5;
 			return connection.send({
 				type: "navigate",
 				frameId,
 				to
 			});
 		};
-		$[2] = connection;
-		$[3] = frameId;
-		$[4] = t3;
-	} else t3 = $[4];
-	const navigate = t3;
+		$[5] = connection;
+		$[6] = frameId;
+		$[7] = t4;
+	} else t4 = $[7];
+	const navigate = t4;
 	const workspaceKey = target.canvas?.workspaceKey;
-	let t4;
-	if ($[5] !== connection || $[6] !== frameId || $[7] !== workspaceKey) {
-		t4 = workspaceKey === void 0 ? null : {
+	let t5;
+	if ($[8] !== connection || $[9] !== frameId || $[10] !== workspaceKey) {
+		t5 = workspaceKey === void 0 ? null : {
 			workspaceKey,
 			mirrorCamera: _temp2,
-			reveal: (element, t5) => {
-				const immediate = t5 === void 0 ? false : t5;
+			reveal: (element, t6) => {
+				const immediate = t6 === void 0 ? false : t6;
 				return connection.send({
 					type: "reveal",
 					frameId,
@@ -307,58 +342,59 @@ function RendererFrameContent(t0) {
 				});
 			}
 		};
-		$[5] = connection;
-		$[6] = frameId;
-		$[7] = workspaceKey;
-		$[8] = t4;
-	} else t4 = $[8];
-	const workspace = t4;
-	let t5;
-	if ($[9] !== frameElement || $[10] !== frameWindow) {
-		t5 = {
-			window: frameWindow,
-			iframeElement: frameElement
-		};
-		$[9] = frameElement;
-		$[10] = frameWindow;
+		$[8] = connection;
+		$[9] = frameId;
+		$[10] = workspaceKey;
 		$[11] = t5;
 	} else t5 = $[11];
-	const frameContext = t5;
+	const workspace = t5;
 	let t6;
-	if ($[12] !== connection || $[13] !== frameId) {
-		t6 = (message) => connection.send({
-			type: "error",
-			frameId,
-			message
-		});
-		$[12] = connection;
-		$[13] = frameId;
+	if ($[12] !== frameElement || $[13] !== frameWindow) {
+		t6 = {
+			window: frameWindow,
+			iframeElement: frameElement
+		};
+		$[12] = frameElement;
+		$[13] = frameWindow;
 		$[14] = t6;
 	} else t6 = $[14];
-	const failed = t6;
+	const frameContext = t6;
 	let t7;
 	if ($[15] !== connection || $[16] !== frameId) {
-		t7 = () => connection.send({
-			type: "rendered",
-			frameId
+		t7 = (message) => connection.send({
+			type: "error",
+			frameId,
+			message
 		});
 		$[15] = connection;
 		$[16] = frameId;
 		$[17] = t7;
 	} else t7 = $[17];
-	const rendered = t7;
-	const t8 = target.resting ? "hidden" : "visible";
-	let t9;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx("div", {
+	const failed = t7;
+	let t8;
+	if ($[18] !== connection || $[19] !== frameId) {
+		t8 = () => connection.send({
+			type: "rendered",
+			frameId
+		});
+		$[18] = connection;
+		$[19] = frameId;
+		$[20] = t8;
+	} else t8 = $[20];
+	const rendered = t8;
+	const t9 = target.resting ? "hidden" : "visible";
+	let t10;
+	if ($[21] !== left.length) {
+		t10 = left.length ? null : /* @__PURE__ */ jsx("div", {
 			role: "status",
 			children: "Loading page…"
 		});
-		$[18] = t9;
-	} else t9 = $[18];
-	let t10;
-	if ($[19] !== camoxApp || $[20] !== codeLoaded || $[21] !== projectUuid || $[22] !== rendered || $[23] !== runtimeBasePath || $[24] !== target.derivedLayoutId || $[25] !== target.pathname) {
-		t10 = /* @__PURE__ */ jsx(FramePage, {
+		$[21] = left.length;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== camoxApp || $[24] !== codeLoaded || $[25] !== projectUuid || $[26] !== rendered || $[27] !== runtimeBasePath || $[28] !== target.derivedLayoutId || $[29] !== target.pathname) {
+		t11 = /* @__PURE__ */ jsx(FramePage, {
 			camoxApp,
 			codeLoaded,
 			projectUuid,
@@ -367,138 +403,141 @@ function RendererFrameContent(t0) {
 			derivedLayoutId: target.derivedLayoutId,
 			onRendered: rendered
 		});
-		$[19] = camoxApp;
-		$[20] = codeLoaded;
-		$[21] = projectUuid;
-		$[22] = rendered;
-		$[23] = runtimeBasePath;
-		$[24] = target.derivedLayoutId;
-		$[25] = target.pathname;
-		$[26] = t10;
-	} else t10 = $[26];
-	let t11;
-	if ($[27] !== left) {
-		t11 = /* @__PURE__ */ jsx(RemovesLeft, { nodes: left });
-		$[27] = left;
-		$[28] = t11;
-	} else t11 = $[28];
-	let t12;
-	if ($[29] !== t10 || $[30] !== t11) {
-		t12 = /* @__PURE__ */ jsxs(React.Suspense, {
-			fallback: t9,
-			children: [t10, t11]
-		});
-		$[29] = t10;
+		$[23] = camoxApp;
+		$[24] = codeLoaded;
+		$[25] = projectUuid;
+		$[26] = rendered;
+		$[27] = runtimeBasePath;
+		$[28] = target.derivedLayoutId;
+		$[29] = target.pathname;
 		$[30] = t11;
-		$[31] = t12;
-	} else t12 = $[31];
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== left) {
+		t12 = /* @__PURE__ */ jsx(RemovesLeft, { nodes: left });
+		$[31] = left;
+		$[32] = t12;
+	} else t12 = $[32];
 	let t13;
-	if ($[32] !== failed || $[33] !== left || $[34] !== t12 || $[35] !== target.pathname) {
-		t13 = /* @__PURE__ */ jsx(FrameErrorBoundary, {
-			onError: failed,
-			left,
-			children: t12
-		}, target.pathname);
-		$[32] = failed;
-		$[33] = left;
-		$[34] = t12;
-		$[35] = target.pathname;
+	if ($[33] !== t10 || $[34] !== t11 || $[35] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(React.Suspense, {
+			fallback: t10,
+			children: [t11, t12]
+		});
+		$[33] = t10;
+		$[34] = t11;
+		$[35] = t12;
 		$[36] = t13;
 	} else t13 = $[36];
 	let t14;
-	if ($[37] !== t13 || $[38] !== t8) {
-		t14 = /* @__PURE__ */ jsx(React.Activity, {
-			mode: t8,
+	if ($[37] !== failed || $[38] !== left || $[39] !== page || $[40] !== t13 || $[41] !== target.pathname) {
+		t14 = /* @__PURE__ */ jsx(FrameErrorBoundary, {
+			pathname: target.pathname,
+			onError: failed,
+			left,
 			children: t13
-		});
-		$[37] = t13;
-		$[38] = t8;
-		$[39] = t14;
-	} else t14 = $[39];
+		}, page);
+		$[37] = failed;
+		$[38] = left;
+		$[39] = page;
+		$[40] = t13;
+		$[41] = target.pathname;
+		$[42] = t14;
+	} else t14 = $[42];
 	let t15;
-	if ($[40] !== t14 || $[41] !== target.artifactStudio) {
-		t15 = /* @__PURE__ */ jsx(ArtifactStudioContext, {
-			value: target.artifactStudio,
+	if ($[43] !== t14 || $[44] !== t9) {
+		t15 = /* @__PURE__ */ jsx(React.Activity, {
+			mode: t9,
 			children: t14
 		});
-		$[40] = t14;
-		$[41] = target.artifactStudio;
-		$[42] = t15;
-	} else t15 = $[42];
+		$[43] = t14;
+		$[44] = t9;
+		$[45] = t15;
+	} else t15 = $[45];
 	let t16;
-	if ($[43] !== t15 || $[44] !== target.artifactsRun) {
-		t16 = /* @__PURE__ */ jsx(ArtifactsRunContext, {
-			value: target.artifactsRun,
+	if ($[46] !== t15 || $[47] !== target.artifactStudio) {
+		t16 = /* @__PURE__ */ jsx(ArtifactStudioContext, {
+			value: target.artifactStudio,
 			children: t15
 		});
-		$[43] = t15;
-		$[44] = target.artifactsRun;
-		$[45] = t16;
-	} else t16 = $[45];
+		$[46] = t15;
+		$[47] = target.artifactStudio;
+		$[48] = t16;
+	} else t16 = $[48];
 	let t17;
-	if ($[46] !== t16 || $[47] !== target.editable) {
-		t17 = /* @__PURE__ */ jsx(EditableSurfaceContext, {
-			value: target.editable,
+	if ($[49] !== t16 || $[50] !== target.artifactsRun) {
+		t17 = /* @__PURE__ */ jsx(ArtifactsRunContext, {
+			value: target.artifactsRun,
 			children: t16
 		});
-		$[46] = t16;
-		$[47] = target.editable;
-		$[48] = t17;
-	} else t17 = $[48];
+		$[49] = t16;
+		$[50] = target.artifactsRun;
+		$[51] = t17;
+	} else t17 = $[51];
 	let t18;
-	if ($[49] !== t17 || $[50] !== workspace) {
-		t18 = /* @__PURE__ */ jsx(CanvasWorkspaceContext, {
-			value: workspace,
+	if ($[52] !== t17 || $[53] !== target.editable) {
+		t18 = /* @__PURE__ */ jsx(EditableSurfaceContext, {
+			value: target.editable,
 			children: t17
 		});
-		$[49] = t17;
-		$[50] = workspace;
-		$[51] = t18;
-	} else t18 = $[51];
+		$[52] = t17;
+		$[53] = target.editable;
+		$[54] = t18;
+	} else t18 = $[54];
 	let t19;
-	if ($[52] !== t18 || $[53] !== target.owner) {
-		t19 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
-			value: target.owner,
+	if ($[55] !== t18 || $[56] !== workspace) {
+		t19 = /* @__PURE__ */ jsx(CanvasWorkspaceContext, {
+			value: workspace,
 			children: t18
 		});
-		$[52] = t18;
-		$[53] = target.owner;
-		$[54] = t19;
-	} else t19 = $[54];
+		$[55] = t18;
+		$[56] = workspace;
+		$[57] = t19;
+	} else t19 = $[57];
 	let t20;
-	if ($[55] !== frameContext || $[56] !== t19) {
-		t20 = /* @__PURE__ */ jsx(FrameContext.Provider, {
-			value: frameContext,
+	if ($[58] !== t19 || $[59] !== target.owner) {
+		t20 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: target.owner,
 			children: t19
 		});
-		$[55] = frameContext;
-		$[56] = t19;
-		$[57] = t20;
-	} else t20 = $[57];
+		$[58] = t19;
+		$[59] = target.owner;
+		$[60] = t20;
+	} else t20 = $[60];
 	let t21;
-	if ($[58] !== location || $[59] !== navigate || $[60] !== t20) {
-		t21 = /* @__PURE__ */ jsx(NavigationProvider, {
-			location,
-			navigate,
+	if ($[61] !== frameContext || $[62] !== t20) {
+		t21 = /* @__PURE__ */ jsx(FrameContext.Provider, {
+			value: frameContext,
 			children: t20
 		});
-		$[58] = location;
-		$[59] = navigate;
-		$[60] = t20;
-		$[61] = t21;
-	} else t21 = $[61];
-	const content = t21;
+		$[61] = frameContext;
+		$[62] = t20;
+		$[63] = t21;
+	} else t21 = $[63];
 	let t22;
-	if ($[62] !== content || $[63] !== target.locale) {
-		t22 = target.locale ? /* @__PURE__ */ jsx(ViewLocaleContext, {
+	if ($[64] !== location || $[65] !== navigate || $[66] !== t21) {
+		t22 = /* @__PURE__ */ jsx(NavigationProvider, {
+			location,
+			navigate,
+			children: t21
+		});
+		$[64] = location;
+		$[65] = navigate;
+		$[66] = t21;
+		$[67] = t22;
+	} else t22 = $[67];
+	const content = t22;
+	let t23;
+	if ($[68] !== content || $[69] !== target.locale) {
+		t23 = target.locale ? /* @__PURE__ */ jsx(ViewLocaleContext, {
 			value: target.locale,
 			children: content
 		}) : content;
-		$[62] = content;
-		$[63] = target.locale;
-		$[64] = t22;
-	} else t22 = $[64];
-	return t22;
+		$[68] = content;
+		$[69] = target.locale;
+		$[70] = t23;
+	} else t23 = $[70];
+	return t23;
 }
 function _temp2() {
 	return _temp;
@@ -606,10 +645,19 @@ const ERROR_STYLE = {
 * the studio. The studio and every other frame keep working.
 */
 var FrameErrorBoundary = class extends React.Component {
-	state = { error: null };
+	state = {
+		error: null,
+		pathname: this.props.pathname
+	};
 	static getDerivedStateFromError(error) {
 		return { error: messageOf(error) };
 	}
+	static getDerivedStateFromProps(props, state) {
+		return props.pathname === state.pathname ? null : {
+			error: null,
+			pathname: props.pathname
+		};
+	}
 	componentDidCatch(error) {
 		this.props.onError(messageOf(error));
 	}

package/dist/features/renderer/RendererFrames.js

@@ -2,6 +2,7 @@ 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 { useViewPreparer } from "../../lib/view-switch.js";
 import { useStudioCache } from "../../lib/studio-reads.js";
 import { ArtifactStudioContext, ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
 import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
@@ -102,7 +103,7 @@ function _temp() {}
 * the studio keeps the Canvas position and selection, and tells the new renderer.
 */
 function RendererFramesProvider(t0) {
-	const $ = c(28);
+	const $ = c(33);
 	const { runtimeBasePath, children } = t0;
 	const queryClient = useQueryClient();
 	const studioCache = useStudioCache();
@@ -145,85 +146,116 @@ function RendererFramesProvider(t0) {
 	} else t3 = $[7];
 	const documentUrl = t3;
 	const [source, setSource] = React.useState(documentUrl);
+	const loaded = React.useRef(source);
 	let t4;
-	let t5;
-	if ($[8] !== documentUrl || $[9] !== draftScope) {
-		t4 = () => draftScope.subscribe((t6) => {
-			const { move } = t6;
-			if (move !== "started") setSource(documentUrl());
-		});
-		t5 = [draftScope, documentUrl];
+	if ($[8] !== documentUrl || $[9] !== host) {
+		t4 = (t5) => {
+			const always = t5 === void 0 ? false : t5;
+			const next = documentUrl();
+			if (next === loaded.current && !always) return;
+			loaded.current = next;
+			host?.replacing();
+			setSource(next);
+		};
 		$[8] = documentUrl;
-		$[9] = draftScope;
+		$[9] = host;
 		$[10] = t4;
-		$[11] = t5;
+	} else t4 = $[10];
+	const reload = t4;
+	let t5;
+	let t6;
+	if ($[11] !== draftScope || $[12] !== reload) {
+		t5 = () => draftScope.subscribe((t7) => {
+			const { move } = t7;
+			if (move !== "started") reload();
+		});
+		t6 = [draftScope, reload];
+		$[11] = draftScope;
+		$[12] = reload;
+		$[13] = t5;
+		$[14] = t6;
 	} else {
-		t4 = $[10];
-		t5 = $[11];
+		t5 = $[13];
+		t6 = $[14];
 	}
-	React.useEffect(t4, t5);
+	React.useEffect(t5, t6);
+	let t7;
+	if ($[15] !== host) {
+		t7 = (next_0) => {
+			if (!host) return Promise.resolve();
+			return host.ask({
+				type: "prepareFrame",
+				pathname: next_0.pathname,
+				...next_0.derivedLayoutId && { derivedLayoutId: next_0.derivedLayoutId },
+				locale: next_0.locale
+			});
+		};
+		$[15] = host;
+		$[16] = t7;
+	} else t7 = $[16];
+	useViewPreparer(t7);
 	const [loads, setLoads] = React.useState(0);
 	const revisions = React.use(RevisionsContext);
-	let t6;
-	let t7;
-	if ($[12] !== documentUrl || $[13] !== draftScope || $[14] !== revisions) {
-		t6 = () => revisions?.subscribe((t8) => {
-			const { draftId } = t8;
+	let t8;
+	let t9;
+	if ($[17] !== draftScope || $[18] !== reload || $[19] !== revisions) {
+		t8 = () => revisions?.subscribe((t10) => {
+			const { draftId } = t10;
 			if (draftId !== draftScope.current()) return;
-			setSource(documentUrl());
+			reload(true);
 			setLoads(_temp2);
 		});
-		t7 = [
+		t9 = [
 			revisions,
 			draftScope,
-			documentUrl
+			reload
 		];
-		$[12] = documentUrl;
-		$[13] = draftScope;
-		$[14] = revisions;
-		$[15] = t6;
-		$[16] = t7;
+		$[17] = draftScope;
+		$[18] = reload;
+		$[19] = revisions;
+		$[20] = t8;
+		$[21] = t9;
 	} else {
-		t6 = $[15];
-		t7 = $[16];
+		t8 = $[20];
+		t9 = $[21];
 	}
-	React.useEffect(t6, t7);
-	let t8;
-	if ($[17] !== host) {
-		t8 = (frame) => {
+	React.useEffect(t8, t9);
+	let t10;
+	if ($[22] !== host) {
+		t10 = (frame) => {
 			if (frame && host) frame[STUDIO_HANDLE_KEY] = host.handle;
 		};
-		$[17] = host;
-		$[18] = t8;
-	} else t8 = $[18];
-	const connect = t8;
-	let t9;
-	if ($[19] !== connect || $[20] !== host || $[21] !== loads || $[22] !== source) {
-		t9 = host && /* @__PURE__ */ jsx("iframe", {
+		$[22] = host;
+		$[23] = t10;
+	} else t10 = $[23];
+	const connect = t10;
+	let t11;
+	if ($[24] !== connect || $[25] !== host || $[26] !== loads || $[27] !== source) {
+		t11 = host && /* @__PURE__ */ jsx("iframe", {
 			ref: connect,
 			src: source,
 			hidden: true,
 			title: "Website renderer",
 			"data-camox-renderer": true
 		}, `${source}#${loads}`);
-		$[19] = connect;
-		$[20] = host;
-		$[21] = loads;
-		$[22] = source;
-		$[23] = t9;
-	} else t9 = $[23];
-	let t10;
-	if ($[24] !== children || $[25] !== host || $[26] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(RendererHostContext, {
+		$[24] = connect;
+		$[25] = host;
+		$[26] = loads;
+		$[27] = source;
+		$[28] = t11;
+	} else t11 = $[28];
+	let t12;
+	if ($[29] !== children || $[30] !== host || $[31] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(RendererHostContext, {
 			value: host,
-			children: [children, t9]
+			children: [children, t11]
 		});
-		$[24] = children;
-		$[25] = host;
-		$[26] = t9;
-		$[27] = t10;
-	} else t10 = $[27];
-	return t10;
+		$[29] = children;
+		$[30] = host;
+		$[31] = t11;
+		$[32] = t12;
+	} else t12 = $[32];
+	return t12;
 }
 function _temp2(count) {
 	return count + 1;

package/dist/features/renderer/definitionAnswers.js

@@ -10,6 +10,7 @@ async function blockOfCode(camoxApp, type) {
 async function answerFromCode(camoxApp, question) {
 	switch (question.type) {
 		case "initialBundle": return (await blockOfCode(camoxApp, question.blockType))?._internal.getInitialBundle() ?? null;
+		case "prepareFrame": return null;
 		case "pageTitle": {
 			const layout = camoxApp.getLayoutById(question.layoutId);
 			if (!layout) return null;

package/dist/features/renderer/rendererHost.js

@@ -194,6 +194,10 @@ function createRendererHost({ studioCache, draftScope, queryClient, notify } = {
 				frameId
 			});
 		},
+		replacing() {
+			renderer = null;
+			welcomed = false;
+		},
 		ask(question) {
 			return new Promise((resolve, reject) => {
 				const askId = ++lastAskId;