camox 0.48.0 → 0.52.1

package/dist/features/runtime/pageApp.js

@@ -1,6 +1,5 @@
 import { useAuthState, useSignInRedirect } from "../../lib/auth.js";
 import { DraftScopeContext } from "../../lib/draft-scope.js";
-import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { useSignInShortcut } from "../provider/signInShortcut.js";
 import { PreviewDocumentContext } from "./PreviewDocumentContext.js";
 import { PreviewActivation } from "../preview/components/PreviewActivation.js";
@@ -8,6 +7,7 @@ import { Frame } from "../preview/components/Frame.js";
 import { PreviewSignInPage } from "../provider/PreviewSignInPage.js";
 import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
 import { CuratedPageContent } from "../page/CuratedPageContent.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { EditingFallbackSlot } from "./editingFallback.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
 import { RuntimeChromeSlot } from "./runtimeChromeLoader.js";
@@ -97,11 +97,6 @@ function PageApp(t0) {
 	return t6;
 }
 const LazyEditablePageExperience = React.lazy(() => import("../preview/EditablePageExperience.js").then((module) => ({ default: module.EditablePageExperience })));
-/** Editing lists and adds any block, so it waits for every definition, not only the page's. */
-function AllBlocks({ camoxApp, children }) {
-	React.use(camoxApp.loadAllBlocks());
-	return children;
-}
 var EditingActivationBoundary = class extends React.Component {
 	state = { failed: false };
 	static getDerivedStateFromError() {
@@ -116,7 +111,7 @@ var EditingActivationBoundary = class extends React.Component {
 };
 const subscribeToHydration = () => () => {};
 function PageExperience(t0) {
-	const $ = c(38);
+	const $ = c(31);
 	const { camoxApp, input, queryClient, studioDocument } = t0;
 	const { isAuthenticated, isLoading } = useAuthState();
 	const hasHydrated = React.useSyncExternalStore(subscribeToHydration, _temp, _temp2);
@@ -175,96 +170,75 @@ function PageExperience(t0) {
 		$[13] = t5;
 	} else t5 = $[13];
 	const isolatedPage = t5;
-	let t6;
-	if ($[14] !== input.routeKind || $[15] !== isolatedPage) {
-		t6 = input.routeKind ? /* @__PURE__ */ jsx(StudioLoadError, {}) : isolatedPage;
-		$[14] = input.routeKind;
-		$[15] = isolatedPage;
-		$[16] = t6;
-	} else t6 = $[16];
-	const fallback = t6;
 	if (isAuthenticated) {
-		let t7;
-		if ($[17] !== camoxApp || $[18] !== hasHydrated || $[19] !== input || $[20] !== queryClient) {
-			t7 = hasHydrated ? /* @__PURE__ */ jsx(AllBlocks, {
+		let t6;
+		if ($[14] !== camoxApp || $[15] !== hasHydrated || $[16] !== input || $[17] !== queryClient) {
+			t6 = hasHydrated ? /* @__PURE__ */ jsx(LazyEditablePageExperience, {
 				camoxApp,
-				children: /* @__PURE__ */ jsx(LazyEditablePageExperience, {
-					camoxApp,
-					input,
-					queryClient
-				})
+				input,
+				queryClient
 			}) : null;
-			$[17] = camoxApp;
-			$[18] = hasHydrated;
-			$[19] = input;
-			$[20] = queryClient;
-			$[21] = t7;
-		} else t7 = $[21];
-		const editor = t7;
-		const t8 = input.routeKind ? loading : isolatedPage;
+			$[14] = camoxApp;
+			$[15] = hasHydrated;
+			$[16] = input;
+			$[17] = queryClient;
+			$[18] = t6;
+		} else t6 = $[18];
+		const editor = t6;
+		const t7 = input.routeKind ? loading : studioDocument ? null : isolatedPage;
+		let t8;
+		if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = /* @__PURE__ */ jsx(StudioLoadError, {});
+			$[19] = t8;
+		} else t8 = $[19];
 		let t9;
-		if ($[22] !== editor || $[23] !== input.derived || $[24] !== input.previewDocument || $[25] !== input.routeKind || $[26] !== readOnlyPage) {
-			t9 = input.routeKind ? /* @__PURE__ */ jsx(React.Suspense, {
-				fallback: loading,
-				children: editor ?? loading
-			}) : /* @__PURE__ */ jsx(PreviewActivation, {
-				fallback: /* @__PURE__ */ jsx(EditingFallbackSlot, {
-					layoutPage: !!input.derived,
-					children: /* @__PURE__ */ jsx(Frame, {
-						serverOnly: !!input.previewDocument,
-						children: readOnlyPage
-					})
-				}),
-				children: editor
+		if ($[20] !== editor || $[21] !== input.derived || $[22] !== input.routeKind) {
+			t9 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
+				fallback: t8,
+				children: input.routeKind ? /* @__PURE__ */ jsx(React.Suspense, {
+					fallback: loading,
+					children: editor ?? loading
+				}) : /* @__PURE__ */ jsx(PreviewActivation, {
+					fallback: /* @__PURE__ */ jsx(EditingFallbackSlot, { layoutPage: !!input.derived }),
+					children: editor
+				})
 			});
-			$[22] = editor;
-			$[23] = input.derived;
-			$[24] = input.previewDocument;
-			$[25] = input.routeKind;
-			$[26] = readOnlyPage;
-			$[27] = t9;
-		} else t9 = $[27];
+			$[20] = editor;
+			$[21] = input.derived;
+			$[22] = input.routeKind;
+			$[23] = t9;
+		} else t9 = $[23];
 		let t10;
-		if ($[28] !== fallback || $[29] !== t9) {
-			t10 = /* @__PURE__ */ jsx(EditingActivationBoundary, {
-				fallback,
-				children: t9
-			});
-			$[28] = fallback;
-			$[29] = t9;
-			$[30] = t10;
-		} else t10 = $[30];
-		let t11;
-		if ($[31] !== input || $[32] !== t10 || $[33] !== t8) {
-			t11 = /* @__PURE__ */ jsx(RuntimeChromeSlot, {
+		if ($[24] !== input || $[25] !== t7 || $[26] !== t9) {
+			t10 = /* @__PURE__ */ jsx(RuntimeChromeSlot, {
 				input,
-				fallback: t8,
-				children: t10
+				fallback: t7,
+				children: t9
 			});
-			$[31] = input;
-			$[32] = t10;
-			$[33] = t8;
-			$[34] = t11;
-		} else t11 = $[34];
-		return t11;
+			$[24] = input;
+			$[25] = t7;
+			$[26] = t9;
+			$[27] = t10;
+		} else t10 = $[27];
+		return t10;
 	}
 	if (studioOnly) return null;
 	if (studioDocument) {
+		let t6;
+		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = { height: "100vh" };
+			$[28] = t6;
+		} else t6 = $[28];
 		let t7;
-		if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-			t7 = { height: "100vh" };
-			$[35] = t7;
-		} else t7 = $[35];
-		let t8;
-		if ($[36] !== isolatedPage) {
-			t8 = /* @__PURE__ */ jsx("div", {
-				style: t7,
+		if ($[29] !== isolatedPage) {
+			t7 = /* @__PURE__ */ jsx("div", {
+				style: t6,
 				children: isolatedPage
 			});
-			$[36] = isolatedPage;
-			$[37] = t8;
-		} else t8 = $[37];
-		return t8;
+			$[29] = isolatedPage;
+			$[30] = t7;
+		} else t7 = $[30];
+		return t7;
 	}
 	return readOnlyPage;
 }

package/dist/features/runtime/pageClient.js

@@ -18,7 +18,7 @@ async function hydratePageWithApp(camoxApp) {
 		...hydrationData,
 		dehydratedState: restoreArtifactSources(hydrationData.dehydratedState, root)
 	};
-	await Promise.all([camoxApp.loadBlocks(getPageBlockTypes(input.dehydratedState)).catch((error) => console.error("Camox: a block of this page failed to load.", error)), input.presentation === "studio" ? loadRuntimeChrome() : void 0]);
+	await (input.presentation === "studio" ? loadRuntimeChrome() : camoxApp.loadBlocks(getPageBlockTypes(input.dehydratedState)).catch((error) => console.error("Camox: a block of this page failed to load.", error)));
 	const draftScope = createDraftScope({
 		queryClient,
 		browser: window

package/dist/features/runtime/pageNavigation.js

@@ -93,12 +93,13 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 		if (!response.ok) throw new Error(`Navigation failed: ${response.status}`);
 		const next = await response.json();
 		if (next.pathname !== pathname || !next.dehydratedState) throw new Error("Invalid navigation response");
-		await camoxApp.loadBlocks(getPageBlockTypes(next.dehydratedState));
+		if (initialInput.presentation !== "studio") await camoxApp.loadBlocks(getPageBlockTypes(next.dehydratedState));
 		return next;
 	}, [
 		camoxApp,
 		draftScope,
-		initialInput.runtimeBasePath
+		initialInput.runtimeBasePath,
+		initialInput.presentation
 	]);
 	const [prefetched] = React.useState(() => createPrefetchCache());
 	const headManager = React.useRef(null);

package/dist/features/runtime/publicCache.js

@@ -0,0 +1,95 @@
+import { prefersMarkdown } from "../routes/pageRuntime.js";
+
+//#region src/features/runtime/publicCache.ts
+/** The named cache public renders are kept in. */
+const PUBLIC_CACHE_NAME = "camox-public-renders";
+/** How long the edge keeps a render. Live changing replaces its key long before. */
+const EDGE_MAX_AGE = 86400;
+/** Browsers can't be purged, so they ask again each time; the edge answers them. */
+const VISITOR_CACHE_CONTROL = "public, max-age=0, must-revalidate";
+/** The search parameter the cache key adds to a request's URL. */
+const CACHE_KEY_PARAM = "__camox_cache";
+/** The project's Live cache key, as the API serves it from its edge cache. */
+async function readLiveCacheKey(apiUrl, projectUuid) {
+	try {
+		const response = await fetch(`${apiUrl}/live-cache-keys/${encodeURIComponent(projectUuid)}`);
+		return response.ok ? await response.text() || null : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Answers a public request from the cache, or renders it and keeps the render when it may be
+* shared. Without a Live cache key, it renders without the cache: nothing tells when Live changed.
+*/
+async function respondThroughPublicCache(request, publicCache, render) {
+	const liveCacheKey = await publicCache.liveCacheKey();
+	if (!liveCacheKey) return render();
+	const key = cacheKeyOf(request, `${liveCacheKey}.${publicCache.build}`);
+	let cache;
+	let cached;
+	try {
+		cache = await publicCache.cache();
+		cached = await cache.match(withValidators(key, request));
+	} catch (error) {
+		console.error("The edge cache couldn't be read: the page renders without it", error);
+		return render();
+	}
+	if (cached) return forVisitors(cached, request);
+	const response = await render();
+	if (!response || !mayBeShared(response)) return response;
+	publicCache.waitUntil((async () => cache.put(key, forEdge(response.clone())))().catch((error) => {
+		console.error("The edge cache couldn't keep a render", error);
+	}));
+	return forVisitors(response, request);
+}
+/**
+* What a request's render is kept under: its URL, the representation it asks for, and the
+* version of Live and of the website it renders.
+*/
+function cacheKeyOf(request, version) {
+	const url = new URL(request.url);
+	const representation = prefersMarkdown(request.headers.get("Accept") ?? "") ? "md" : "any";
+	url.searchParams.set(CACHE_KEY_PARAM, `${version}.${representation}`);
+	return new Request(url.toString(), { method: "GET" });
+}
+/** The cache key, asking for the part of the render the request does. */
+function withValidators(key, request) {
+	const headers = new Headers();
+	for (const name of [
+		"Range",
+		"If-None-Match",
+		"If-Modified-Since"
+	]) {
+		const value = request.headers.get(name);
+		if (value !== null) headers.set(name, value);
+	}
+	return new Request(key, { headers });
+}
+/** Whether a response is the same for every visitor: what a private render never is. */
+function mayBeShared(response) {
+	if (response.status !== 200 || response.headers.has("Set-Cookie")) return false;
+	const cacheControl = response.headers.get("Cache-Control") ?? "";
+	return !/\b(private|no-store)\b/i.test(cacheControl);
+}
+/** How long browsers may keep a render: what it asked for, if it's versioned, else not at all. */
+function visitorCacheControl(response) {
+	const cacheControl = response.headers.get("Cache-Control") ?? "";
+	return /\bmax-age=[1-9]/.test(cacheControl) ? cacheControl : VISITOR_CACHE_CONTROL;
+}
+/** The render as the edge keeps it: as visitors get it, for as long as the edge keeps renders. */
+function forEdge(response) {
+	const kept = new Response(response.body, response);
+	kept.headers.set("Cache-Control", `${visitorCacheControl(response)}, s-maxage=${EDGE_MAX_AGE}`);
+	return kept;
+}
+/** The render as visitors get it, without the edge's lifetime, which no cache downstream gets. */
+function forVisitors(response, request) {
+	const cacheControl = visitorCacheControl(response).replace(/,\s*s-maxage=\d+/, "");
+	const answered = new Response(request.method === "HEAD" ? null : response.body, response);
+	answered.headers.set("Cache-Control", cacheControl);
+	return answered;
+}
+
+//#endregion
+export { PUBLIC_CACHE_NAME, readLiveCacheKey, respondThroughPublicCache };

package/dist/features/runtime/publishingDraft.js

@@ -0,0 +1,23 @@
+import { PUBLISHING_DRAFT_VAR } from "@camox/api-contract/drafts";
+
+//#region src/features/runtime/publishingDraft.ts
+/**
+* The Worker a publish with code uploaded carries the publishing draft's ID as a variable
+* (`PUBLISHING_DRAFT_VAR`). Its reads of the API name that draft, so while the draft publishes
+* they see Live overlaid with it, the content its code was previewed with. Once the draft has
+* ended, the API reads Live for them. The variable is the same for every request a Worker
+* serves, so it's kept from the first.
+*/
+const PUBLISHING_DRAFT_GLOBAL = "__CAMOX_PUBLISHING_DRAFT__";
+/** Keeps the publishing draft a Worker's environment names, if it names one. */
+function rememberPublishingDraft(env) {
+	const draft = env?.[PUBLISHING_DRAFT_VAR];
+	if (typeof draft === "string" && draft) globalThis[PUBLISHING_DRAFT_GLOBAL] = draft;
+}
+/** The draft this Worker publishes, if a publish with code uploaded it. */
+function publishingDraft() {
+	return globalThis[PUBLISHING_DRAFT_GLOBAL];
+}
+
+//#endregion
+export { publishingDraft, rememberPublishingDraft };

package/dist/features/runtime/rendererClient.d.ts

@@ -0,0 +1,8 @@
+import { CamoxApp } from "../../core/createApp.js";
+//#region src/features/runtime/rendererClient.d.ts
+/**
+ * Starts the renderer frame's document (ADR 0023): connects to the studio that loaded it, and
+ * renders the pages of the frames it is given with the site's code, in a cache of its own.
+ */
+export declare function startRendererWithApp(camoxApp: CamoxApp): Promise<void>;
+//#endregion

package/dist/features/runtime/rendererClient.js

@@ -0,0 +1,77 @@
+import { getDraftReadClient } from "../../lib/api-client.js";
+import { DraftScopeContext, createDraftScope, followUrl } from "../../lib/draft-scope.js";
+import { StudioCacheContext, createStudioCache } from "../../lib/studio-reads.js";
+import { STUDIO_HANDLE_KEY } from "../renderer/protocol.js";
+import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
+import { readHydrationData } from "./hydrationData.js";
+import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
+import { RendererApp } from "../renderer/RendererApp.js";
+import { connectToStudio } from "../renderer/studioConnection.js";
+import { jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRoot } from "react-dom/client";
+
+//#region src/features/runtime/rendererClient.tsx
+/**
+* Starts the renderer frame's document (ADR 0023): connects to the studio that loaded it, and
+* renders the pages of the frames it is given with the site's code, in a cache of its own.
+*/
+async function startRendererWithApp(camoxApp) {
+	const handle = window.frameElement?.[STUDIO_HANDLE_KEY];
+	if (!handle) {
+		console.error("Camox: the renderer document only runs in the studio's renderer frame.");
+		return;
+	}
+	const input = readHydrationData();
+	if (!input.apiUrl || !input.authenticationUrl || !input.projectUuid) {
+		console.error("Camox: the renderer document is missing its API or project.");
+		return;
+	}
+	const codeLoaded = camoxApp.loadAllBlocks();
+	codeLoaded.catch((error) => console.error("Camox: the site's code failed to load.", error));
+	const queryClient = new QueryClient();
+	const draftScope = createDraftScope({
+		queryClient,
+		browser: window
+	});
+	followUrl(draftScope, window.location.href);
+	const studioCache = createStudioCache({
+		queryClient,
+		scope: draftScope,
+		api: getDraftReadClient
+	});
+	const connection = connectToStudio(handle, {
+		queryClient,
+		studioCache,
+		draftScope,
+		camoxApp
+	});
+	const container = document.createElement("div");
+	document.body.append(container);
+	createRoot(container).render(/* @__PURE__ */ jsx(QueryClientProvider, {
+		client: queryClient,
+		children: /* @__PURE__ */ jsx(DraftScopeContext.Provider, {
+			value: draftScope,
+			children: /* @__PURE__ */ jsx(StudioCacheContext.Provider, {
+				value: studioCache,
+				children: /* @__PURE__ */ jsx(CoreCamoxProvider, {
+					apiUrl: input.apiUrl,
+					authenticationUrl: input.authenticationUrl,
+					camoxApp,
+					projectUuid: input.projectUuid,
+					initialAuthenticated: true,
+					children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: /* @__PURE__ */ jsx(RendererApp, {
+						connection,
+						camoxApp,
+						codeLoaded,
+						projectUuid: input.projectUuid,
+						runtimeBasePath: input.runtimeBasePath
+					}) })
+				})
+			})
+		})
+	}));
+}
+
+//#endregion
+export { startRendererWithApp };

package/dist/features/runtime/runtime.d.ts

@@ -8,7 +8,10 @@ import { StudioRenderInput } from "./studioApp.js";
 import { DraftRead, MemberProject, PageHead, createServerApiClient } from "../routes/pageRuntime.js";
 import { UseHeadInput } from "unhead/types";
 //#region src/features/runtime/runtime.d.ts
-export type RuntimeRouteKind = RuntimeOwnedRouteKind | "canvas" | "page" | "studio" | "studio-content" | "studio-nested";
+/** The studio's own routes, rather than a page or the Canvas. */
+declare const STUDIO_ROUTE_KINDS: readonly ["studio", "studio-content", "studio-settings", "studio-nested"];
+export type StudioRouteKind = (typeof STUDIO_ROUTE_KINDS)[number];
+export type RuntimeRouteKind = RuntimeOwnedRouteKind | "canvas" | "page" | StudioRouteKind;
 export interface RuntimeRouteMatch {
   kind: RuntimeRouteKind;
   pathname: string;
@@ -32,7 +35,7 @@ export interface PageRenderInput extends DraftRead {
   /** Authenticate before rendering, to show the Studio around the page. */
   previewHandoff?: boolean;
   previewDocument?: string;
-  routeKind?: "studio" | "studio-content" | "studio-nested";
+  routeKind?: StudioRouteKind;
   /** Whether the location is the Canvas with nothing selected, which only the Canvas shows. */
   canvasOnly?: boolean;
   project?: MemberProject;
@@ -86,6 +89,8 @@ export interface RuntimeOptions {
   developmentDraft?: boolean;
   pageClientEntryUrl?: string;
   studioClientEntryUrl?: string;
+  /** The renderer frame's client entry, which renders the studio's pages (ADR 0023). */
+  rendererClientEntryUrl?: string;
   getCamoxApp?: () => Promise<CamoxApp>;
   getDocument?: () => Promise<CamoxDocument>;
   projectUuid?: string;
@@ -96,7 +101,21 @@ export interface RuntimeOptions {
   studioStylesheetUrl?: string;
 }
 export declare function getRuntimePathname(url: string, runtimeBasePath?: string): string | null;
+/**
+ * Whether a request reads what every visitor sees, so a shared cache may answer it: a GET or
+ * HEAD of a page or a public output, with no session, no draft named and no preview handoff. A
+ * response that comes out private all the same, such as the Studio's, still says so.
+ */
+export declare function isPublicRequest(request: Request, options?: RuntimeOptions): boolean;
 export declare function matchRuntimeRoute(pathname: string): RuntimeRouteMatch;
 export declare function createPageHeadInput(head: PageHead): UseHeadInput;
+/** What the renderer document tells its client: where the API, sign-in and runtime are. */
+export interface RendererDocumentInput {
+  apiUrl?: string;
+  authenticationUrl?: string;
+  projectUuid?: string;
+  runtimeBasePath: string;
+}
 export declare function handleCamoxRequest(request: Request, options?: RuntimeOptions): Promise<Response | null>;
-//#endregion
+//#endregion
+export {};