camox 0.44.0 → 0.46.0

package/dist/lib/draft-scope.js

@@ -0,0 +1,222 @@
+import { UNNAMED_DEFAULT_LOCALE, localeHeaders } from "./locale-path.js";
+import { getApiClient } from "./api-client.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { generateUuidv7 } from "@camox/api-contract/ids";
+import { DEVELOPMENT_DRAFT, DRAFT_CREATE_HEADER, DRAFT_HEADER, DRAFT_SEARCH_PARAM } from "@camox/api-contract/drafts";
+import { LIVE_KEY_SCOPE, scopeOfKey } from "@camox/api-contract/query-keys";
+
+//#region src/lib/draft-scope.ts
+/** The draft a URL names, if any. */
+function draftNamedBy(href) {
+	return new URL(href, "http://camox.local").searchParams.get(DRAFT_SEARCH_PARAM) || null;
+}
+/** The URL without the draft param. */
+function withoutDraft(href) {
+	const url = new URL(href);
+	url.searchParams.delete(DRAFT_SEARCH_PARAM);
+	return url.href;
+}
+function buildIsDevelopmentMode() {
+	return typeof __CAMOX_DEVELOPMENT_DRAFT__ !== "undefined" && __CAMOX_DEVELOPMENT_DRAFT__;
+}
+function createDraftScope({ queryClient, browser, developmentMode = buildIsDevelopmentMode(), loadDevelopmentDraftId = async (projectId) => (await getApiClient().drafts.get({ projectId }))?.id }) {
+	let current = developmentMode ? DEVELOPMENT_DRAFT : null;
+	let locale = UNNAMED_DEFAULT_LOCALE;
+	let pending = null;
+	let developmentDraftId;
+	let adoptedRender = false;
+	const listeners = /* @__PURE__ */ new Set();
+	const noticeListeners = /* @__PURE__ */ new Set();
+	const pendingNotices = [];
+	const draftOfRender = (rendered) => {
+		if (!developmentMode) return rendered.draftId ?? null;
+		return rendered.refusedDraft ? null : DEVELOPMENT_DRAFT;
+	};
+	const notify = (move) => {
+		for (const listener of listeners) listener({
+			draftId: current,
+			move
+		});
+	};
+	const report = (notice) => {
+		if (noticeListeners.size === 0) return void pendingNotices.push(notice);
+		for (const listener of noticeListeners) listener(notice);
+	};
+	const replaceUrl = (draftId) => {
+		if (!browser) return;
+		const url = new URL(browser.location.href);
+		if (draftId === url.searchParams.get(DRAFT_SEARCH_PARAM)) return;
+		if (draftId) url.searchParams.set(DRAFT_SEARCH_PARAM, draftId);
+		else url.searchParams.delete(DRAFT_SEARCH_PARAM);
+		browser.history.replaceState(browser.history.state, "", url.pathname + url.search + url.hash);
+	};
+	const enterStartedDraft = (draftId) => {
+		pending = null;
+		current = draftId;
+		replaceUrl(draftId);
+		for (const query of queryClient.getQueryCache().findAll({ queryKey: ["camox"] })) {
+			if (scopeOfKey(query.queryKey) !== LIVE_KEY_SCOPE || query.state.data === void 0) continue;
+			queryClient.setQueryData([...query.queryKey.slice(0, -1), draftId], query.state.data);
+		}
+		queryClient.invalidateQueries({
+			queryKey: ["camox"],
+			predicate: (query) => scopeOfKey(query.queryKey) !== LIVE_KEY_SCOPE
+		});
+		notify("started");
+	};
+	const headersFor = (contentWrite) => {
+		const noop = () => {};
+		const inLocale = localeHeaders(locale);
+		if (current) return {
+			headers: {
+				[DRAFT_HEADER]: current,
+				...inLocale
+			},
+			settle: noop
+		};
+		if (!contentWrite || developmentMode) return {
+			headers: inLocale,
+			settle: noop
+		};
+		pending ??= {
+			id: generateUuidv7(),
+			inFlight: 0
+		};
+		const started = pending;
+		started.inFlight += 1;
+		return {
+			headers: {
+				[DRAFT_HEADER]: started.id,
+				[DRAFT_CREATE_HEADER]: "1",
+				...inLocale
+			},
+			settle: (ok) => {
+				if (pending !== started) return;
+				started.inFlight -= 1;
+				if (ok) return enterStartedDraft(started.id);
+				if (started.inFlight === 0) pending = null;
+			}
+		};
+	};
+	return {
+		current: () => current,
+		locale: () => locale,
+		developmentMode,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		requestHeaders: headersFor,
+		enterStarted(draftId) {
+			if (current !== null) return false;
+			enterStartedDraft(draftId);
+			return true;
+		},
+		hrefFor(to, { from, draft } = {}) {
+			if (developmentMode) return to;
+			const base = new URL(from ?? browser?.location.href ?? "http://camox.local");
+			const target = new URL(to, base);
+			if (target.origin !== base.origin) return to;
+			if (draft === void 0 && target.searchParams.has(DRAFT_SEARCH_PARAM)) return to;
+			const next = draft === void 0 ? current : draft;
+			if (next) target.searchParams.set(DRAFT_SEARCH_PARAM, next);
+			else target.searchParams.delete(DRAFT_SEARCH_PARAM);
+			if (target.href === new URL(to, base).href) return to;
+			return /^[a-z][a-z\d+.-]*:/i.test(to) || to.startsWith("//") ? target.href : `${target.pathname}${target.search}${target.hash}`;
+		},
+		adopt(rendered) {
+			if (rendered.locale) locale = rendered.locale;
+			if (rendered.refusedDraft) {
+				replaceUrl(null);
+				if (rendered.refusedDraft.notice) report(rendered.refusedDraft.notice);
+			}
+			const next = draftOfRender(rendered);
+			if (next !== null) pending = null;
+			const firstRender = !adoptedRender;
+			adoptedRender = true;
+			if (next === current) return;
+			current = next;
+			if (!firstRender) {
+				const entered = next ?? LIVE_KEY_SCOPE;
+				queryClient.invalidateQueries({
+					queryKey: ["camox"],
+					predicate: (query) => scopeOfKey(query.queryKey) === entered,
+					refetchType: "none"
+				});
+			}
+			notify("adopted");
+		},
+		leave(ended, { notice = false } = {}) {
+			queryClient.invalidateQueries({ queryKey: ["camox"] });
+			if (developmentMode) return false;
+			pending = null;
+			current = null;
+			replaceUrl(null);
+			if (notice && ended) report({
+				reason: "ended",
+				...ended
+			});
+			notify("left");
+			return true;
+		},
+		onNotice(listener) {
+			noticeListeners.add(listener);
+			for (const notice of pendingNotices.splice(0)) listener(notice);
+			return () => noticeListeners.delete(listener);
+		},
+		async keyScopeOfDraft(draftId, projectId) {
+			if (current !== DEVELOPMENT_DRAFT) return draftId;
+			developmentDraftId ??= loadDevelopmentDraftId(projectId).catch(() => {
+				developmentDraftId = void 0;
+			});
+			return draftId === await developmentDraftId ? DEVELOPMENT_DRAFT : draftId;
+		}
+	};
+}
+const DraftScopeContext = React.createContext(null);
+/**
+* The draft scope the studio is in, for handlers and effects. Render code reads the draft it
+* views from `useCurrentDraftId`: the scope object never changes, so a memoized render reading
+* `current()` from it would keep showing the draft of its first render.
+*/
+function useDraftScope() {
+	const scope = React.useContext(DraftScopeContext);
+	if (!scope) throw new Error("useDraftScope must be used inside a DraftScopeContext provider");
+	return scope;
+}
+const noScope = () => null;
+const noSubscription = () => () => {};
+/** The draft the studio is in, or null for Live. The caller re-renders after every move. */
+function useCurrentDraftId() {
+	const scope = useDraftScope();
+	return React.useSyncExternalStore(scope.subscribe, scope.current, scope.current);
+}
+/** The draft scope and the draft it views, outside the studio too, where there is none. */
+function useOptionalDraftScope() {
+	const $ = c(3);
+	const scope = React.useContext(DraftScopeContext);
+	const current = scope?.current ?? noScope;
+	const draftId = React.useSyncExternalStore(scope?.subscribe ?? noSubscription, current, current);
+	let t0;
+	if ($[0] !== draftId || $[1] !== scope) {
+		t0 = {
+			scope,
+			draftId
+		};
+		$[0] = draftId;
+		$[1] = scope;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* Follows the draft a browser URL names, for a studio mounted in a host application, whose
+* navigation renders nothing the scope could adopt.
+*/
+function followUrl(scope, href) {
+	scope.adopt({ draftId: draftNamedBy(href) ?? void 0 });
+}
+
+//#endregion
+export { DraftScopeContext, createDraftScope, draftNamedBy, followUrl, useCurrentDraftId, useDraftScope, useOptionalDraftScope, withoutDraft };

package/dist/lib/html.js

@@ -0,0 +1,12 @@
+//#region src/lib/html.ts
+/** `value`, safe inside a double-quoted HTML attribute. */
+function escapeAttribute(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;");
+}
+/** `value` as JSON that can't close the `<script>` element it's written into. */
+function serializeJsonForHtml(value) {
+	return JSON.stringify(value).replaceAll("<", "\\u003c");
+}
+
+//#endregion
+export { escapeAttribute, serializeJsonForHtml };

package/dist/lib/link-pages.js

@@ -0,0 +1,154 @@
+import { UNNAMED_DEFAULT_LOCALE, localizedPath } from "./locale-path.js";
+import { useViewLocale } from "./view-locale-context.js";
+import { reads, useReadQuery } from "./studio-reads.js";
+import { c } from "react/compiler-runtime";
+
+//#region src/lib/link-pages.ts
+/**
+* The locale whose pages links fall back to from `locale`: the default locale, or none in the
+* default locale itself. Its tag is never read: reads name the default locale by none.
+*/
+function linkFallbackLocale(locale) {
+	return locale.isDefault ? null : UNNAMED_DEFAULT_LOCALE;
+}
+/**
+* The pages a link can lead to from a locale, given its pages and its fallback locale's: its own,
+* then the fallback's pages it has no localization of.
+*/
+function linkablePages(pages, fallbackPages) {
+	const own = new Set(pages.map((page) => page.id));
+	return [...pages.map((page) => ({
+		page,
+		own: true
+	})), ...(fallbackPages ?? []).filter((page) => !own.has(page.id)).map((page) => ({
+		page,
+		own: false
+	}))];
+}
+/**
+* The pages links lead to in `locale`, at their paths: its own pages under its prefix, then the
+* default locale's pages it misses. Undefined until the locale's pages load.
+*/
+function linkPagesIn(locale, pages, fallbackPages) {
+	if (!pages) return void 0;
+	return linkablePages(pages, fallbackPages).map(({ page, own }) => ({
+		id: page.id,
+		fullPath: own ? localizedPath(page.fullPath, locale) : page.fullPath
+	}));
+}
+/**
+* Selects the page list as is. Selected values keep their identity while their content does, so
+* fields don't re-render when a frame hydrates an equal list.
+*/
+const samePageList = (pages) => pages;
+/** Selects only that a read loaded, so fields don't re-render as its value changes. */
+const isLoaded = () => true;
+/**
+* The pages a link can lead to in the locale viewed (see `linkablePages`), undefined until they
+* load. A site render seeds them, so by default the project they wait for is read from the cache
+* only: an anonymous visitor may not read the project, so fetching it would fail. The studio's
+* editors fetch it with `fetchProject`.
+*/
+function useLinkablePages(projectUuid, t0) {
+	const $ = c(21);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { fetchProject: t2 } = t1;
+	const fetchProject = t2 === void 0 ? false : t2;
+	const { locale } = useViewLocale();
+	let t3;
+	if ($[2] !== locale) {
+		t3 = linkFallbackLocale(locale);
+		$[2] = locale;
+		$[3] = t3;
+	} else t3 = $[3];
+	const fallback = t3;
+	let t4;
+	if ($[4] !== projectUuid) {
+		t4 = reads.project({ projectUuid });
+		$[4] = projectUuid;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== fetchProject) {
+		t5 = {
+			enabled: fetchProject,
+			select: isLoaded
+		};
+		$[6] = fetchProject;
+		$[7] = t5;
+	} else t5 = $[7];
+	const { data: projectLoaded } = useReadQuery(t4, t5);
+	let t6;
+	if ($[8] !== projectUuid) {
+		t6 = reads.pageList({ projectUuid });
+		$[8] = projectUuid;
+		$[9] = t6;
+	} else t6 = $[9];
+	const t7 = !!projectLoaded;
+	let t8;
+	if ($[10] !== t7) {
+		t8 = {
+			enabled: t7,
+			select: samePageList
+		};
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	const { data: pages } = useReadQuery(t6, t8);
+	let t9;
+	if ($[12] !== projectUuid) {
+		t9 = reads.pageList({ projectUuid });
+		$[12] = projectUuid;
+		$[13] = t9;
+	} else t9 = $[13];
+	const t10 = !!projectLoaded && fallback !== null;
+	const t11 = fallback ?? void 0;
+	let t12;
+	if ($[14] !== t10 || $[15] !== t11) {
+		t12 = {
+			enabled: t10,
+			locale: t11,
+			select: samePageList
+		};
+		$[14] = t10;
+		$[15] = t11;
+		$[16] = t12;
+	} else t12 = $[16];
+	const { data: fallbackPages } = useReadQuery(t9, t12);
+	const t13 = fallback ? fallbackPages : void 0;
+	let t14;
+	if ($[17] !== locale || $[18] !== pages || $[19] !== t13) {
+		t14 = {
+			locale,
+			pages,
+			fallbackPages: t13
+		};
+		$[17] = locale;
+		$[18] = pages;
+		$[19] = t13;
+		$[20] = t14;
+	} else t14 = $[20];
+	return t14;
+}
+/** The pages links lead to in the locale viewed, at their paths (see `linkPagesIn`). */
+function useLinkPages(projectUuid, options) {
+	const $ = c(4);
+	const { locale, pages, fallbackPages } = useLinkablePages(projectUuid, options);
+	let t0;
+	if ($[0] !== fallbackPages || $[1] !== locale || $[2] !== pages) {
+		t0 = linkPagesIn(locale, pages, fallbackPages);
+		$[0] = fallbackPages;
+		$[1] = locale;
+		$[2] = pages;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+
+//#endregion
+export { linkFallbackLocale, linkPagesIn, linkablePages, useLinkPages, useLinkablePages };

package/dist/lib/locale-path.d.ts

@@ -0,0 +1,22 @@
+//#region src/lib/locale-path.d.ts
+/**
+ * The URL names the locale: a non-default locale's paths sit under its prefix (`/de/preise`), the
+ * default locale's have none. The studio's routes follow the same rule (`/de/camox/content`).
+ * Pure, so the runtime and the browser share it.
+ */
+/** A locale of a project, as `locales.list` returns it. */
+export type LocaleView = {
+  tag: string;
+  isDefault: boolean;
+};
+/**
+ * Where a page sits in one locale it exists in: the locale's tag and the page's path there, under
+ * the locale's prefix. The runtime finds them for `hreflang` links and the sitemap; the
+ * alternates hook turns each into an `Alternate` a switcher links to.
+ */
+export interface AlternatePath {
+  locale: string;
+  /** The page's runtime path, with its locale's prefix and without the runtime base path. */
+  path: string;
+}
+//#endregion

package/dist/lib/locale-path.js

@@ -0,0 +1,57 @@
+import { LOCALE_HEADER } from "@camox/api-contract/drafts";
+
+//#region src/lib/locale-path.ts
+/**
+* The URL names the locale: a non-default locale's paths sit under its prefix (`/de/preise`), the
+* default locale's have none. The studio's routes follow the same rule (`/de/camox/content`).
+* Pure, so the runtime and the browser share it.
+*/
+/**
+* The default locale where nothing says its tag yet: before a render shows a locale, outside the
+* page runtime, or without an API to read the project's locales from.
+*/
+const UNNAMED_DEFAULT_LOCALE = {
+	tag: "und",
+	isDefault: true
+};
+/**
+* The headers naming `locale` in a request (`LOCALE_HEADER`). The default locale is the API's own
+* default, so only another locale is named.
+*/
+function localeHeaders(locale) {
+	return locale && !locale.isDefault ? { [LOCALE_HEADER]: locale.tag } : {};
+}
+/** A locale's URL prefix: its tag in lowercase. The default locale has none. */
+function localePrefix(locale) {
+	return locale.isDefault ? "" : `/${locale.tag.toLowerCase()}`;
+}
+/**
+* The locale a runtime path names, and the path after its prefix, without search or hash. A first
+* segment that isn't a non-default locale's prefix leaves the path the default locale's. A
+* locale's home is `/de`; `/de/` names it too.
+*/
+function parseLocalePath(pathname, locales) {
+	const path = pathname.replace(/[?#].*$/s, "") || "/";
+	const end = path.indexOf("/", 1);
+	const segment = end === -1 ? path.slice(1) : path.slice(1, end);
+	const named = locales.find((locale) => !locale.isDefault && localePrefix(locale) === `/${segment}`);
+	if (named) return {
+		locale: named,
+		path: end === -1 ? "/" : path.slice(end)
+	};
+	const fallback = locales.find((locale) => locale.isDefault);
+	if (!fallback) throw new Error("A project's locales include its default locale.");
+	return {
+		locale: fallback,
+		path
+	};
+}
+/** A locale-relative path under its locale's prefix, keeping its search and hash: `/` is `/de`. */
+function localizedPath(path, locale) {
+	const prefix = localePrefix(locale);
+	if (!prefix) return path;
+	return path === "/" || /^\/[?#]/.test(path) ? `${prefix}${path.slice(1)}` : `${prefix}${path}`;
+}
+
+//#endregion
+export { UNNAMED_DEFAULT_LOCALE, localeHeaders, localePrefix, localizedPath, parseLocalePath };