@thebes/cadmea 1.4.0 → 1.6.0

package/dist/tanstack-start/server.js

@@ -1,16 +1,16 @@
 import { createComponent, escape, ssr, ssrAttribute } from "solid-js/web";
 import { createMutation, createQuery, useQueryClient } from "@tanstack/solid-query";
-import { For, Index, Show, Suspense, createEffect, createSignal, lazy, onCleanup } from "solid-js";
+import { For, Index, Show, Suspense, createEffect, createSignal, lazy, onCleanup, onMount } from "solid-js";
 import { createForm } from "@tanstack/solid-form";
-import { validateDocument } from "@thebes/cadmus/cms";
+import { VISUAL_EDIT_MESSAGE, validateDocument } from "@thebes/cadmus/cms";
 import { Link, useBlocker } from "@tanstack/solid-router";
 import { createSolidTable, flexRender, getCoreRowModel } from "@tanstack/solid-table";
 //#region src/CollectionEdit.tsx
-var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmpl$2$3 = "<span class=\"loading loading-spinner loading-sm\"></span>", _tmpl$3$1 = [
+var _tmpl$$5 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmpl$2$3 = "<span class=\"loading loading-spinner loading-sm\"></span>", _tmpl$3$2 = [
 	"<button type=\"button\" class=\"btn flex-1\"",
 	">",
 	"</button>"
-], _tmpl$4$1 = [
+], _tmpl$4$2 = [
 	"<button type=\"button\" class=\"btn btn-primary flex-1\"",
 	">",
 	"</button>"
@@ -172,6 +172,7 @@ function CollectionEdit(props) {
 	const isDefaultValue = form.useStore((s) => s.isDefaultValue);
 	createEffect(() => props.onDirtyChange?.(!isDefaultValue()));
 	const formValues = form.useStore((s) => s.values);
+	createEffect(() => props.onValuesChange?.(editablePayload(formValues())));
 	function editablePayload(value) {
 		return Object.fromEntries(Object.entries(value).filter(([key]) => props.config.fields[key]?.type !== "date"));
 	}
@@ -215,7 +216,7 @@ function CollectionEdit(props) {
 			return props.error;
 		},
 		get children() {
-			return ssr(_tmpl$$4, escape(props.error));
+			return ssr(_tmpl$$5, escape(props.error));
 		}
 	})), escape(createComponent(For, {
 		each: fieldGroups,
@@ -254,7 +255,7 @@ function CollectionEdit(props) {
 					return props.capabilities?.canUpdate !== false;
 				},
 				get children() {
-					return ssr(_tmpl$4$1, ssrAttribute("disabled", props.saving, true), escape(createComponent(Show, {
+					return ssr(_tmpl$4$2, ssrAttribute("disabled", props.saving, true), escape(createComponent(Show, {
 						get when() {
 							return props.saving;
 						},
@@ -270,7 +271,7 @@ function CollectionEdit(props) {
 		},
 		get children() {
 			return [
-				ssr(_tmpl$3$1, ssrAttribute("disabled", props.draftActions?.saving, true), escape(createComponent(Show, {
+				ssr(_tmpl$3$2, ssrAttribute("disabled", props.draftActions?.saving, true), escape(createComponent(Show, {
 					get when() {
 						return props.draftActions?.saving;
 					},
@@ -281,7 +282,7 @@ function CollectionEdit(props) {
 						return ssr(_tmpl$2$3);
 					}
 				}))),
-				ssr(_tmpl$4$1, ssrAttribute("disabled", !props.draftActions?.canPublish || props.draftActions?.publishing, true), escape(createComponent(Show, {
+				ssr(_tmpl$4$2, ssrAttribute("disabled", !props.draftActions?.canPublish || props.draftActions?.publishing, true), escape(createComponent(Show, {
 					get when() {
 						return props.draftActions?.publishing;
 					},
@@ -635,7 +636,7 @@ function formatDateValue(value) {
 }
 //#endregion
 //#region src/tanstack-start/create.tsx
-var _tmpl$$3 = [
+var _tmpl$$4 = [
 	"<div class=\"flex flex-col gap-4\"><h1 class=\"text-xl font-semibold\">",
 	"</h1>",
 	"</div>"
@@ -657,7 +658,7 @@ function createCollectionCreatePage(options) {
 			},
 			onError: (e) => setError(e.message)
 		}));
-		return ssr(_tmpl$$3, escape(options.label ?? `New ${options.collection.slug}`), escape(createComponent(CollectionEdit, {
+		return ssr(_tmpl$$4, escape(options.label ?? `New ${options.collection.slug}`), escape(createComponent(CollectionEdit, {
 			get config() {
 				return options.collection;
 			},
@@ -678,13 +679,44 @@ function createCollectionCreatePage(options) {
 	};
 }
 //#endregion
+//#region src/VisualEditingPane.tsx
+var _tmpl$$3 = ["<iframe", "></iframe>"];
+function originOf(url) {
+	try {
+		return new URL(url).origin;
+	} catch {
+		return;
+	}
+}
+function VisualEditingPane(props) {
+	onMount(() => {
+		const expected = props.allowedOrigin ?? originOf(props.src);
+		const handler = (event) => {
+			if (expected && event.origin !== expected) return;
+			const data = event.data;
+			if (data?.type === VISUAL_EDIT_MESSAGE && data.ref) props.onEdit?.(data.ref);
+		};
+		window.addEventListener("message", handler);
+		onCleanup(() => window.removeEventListener("message", handler));
+	});
+	createEffect(() => {
+		props.previewValues;
+		props.previewTarget;
+	});
+	return ssr(_tmpl$$3, ssrAttribute("src", escape(props.src, true), false) + ssrAttribute("title", escape(props.title ?? "Preview", true), false) + ssrAttribute("class", escape(props.class ?? "h-full w-full border-0", true), false));
+}
+//#endregion
 //#region src/tanstack-start/edit.tsx
 var _tmpl$$2 = ["<button type=\"button\" class=\"btn btn-error btn-outline btn-sm self-start\">", "</button>"], _tmpl$2$2 = [
 	"<div class=\"flex flex-col gap-4\"><h1 class=\"text-xl font-semibold\">",
 	"</h1>",
 	"",
 	"</div>"
-];
+], _tmpl$3$1 = [
+	"<div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">",
+	"",
+	"</div>"
+], _tmpl$4$1 = ["<div class=\"lg:sticky lg:top-4 lg:h-[calc(100vh-2rem)]\">", "</div>"];
 /**
 * Builds an edit-page component for a collection — fetch, update, and
 * delete, all wired together, plus a router-level unsaved-changes guard
@@ -698,6 +730,7 @@ function createCollectionEditPage(options) {
 		const [error, setError] = createSignal();
 		const [dirty, setDirty] = createSignal(false);
 		const [latestDraftId, setLatestDraftId] = createSignal();
+		const [previewValues, setPreviewValues] = createSignal({});
 		useBlocker({
 			shouldBlockFn: () => dirty(),
 			enableBeforeUnload: () => dirty()
@@ -754,7 +787,7 @@ function createCollectionEditPage(options) {
 			},
 			onError: (e) => setError(e.message)
 		}));
-		return ssr(_tmpl$2$2, escape(options.label ?? `Edit ${options.collection.slug}`), escape(createComponent(Show, {
+		const EditorPane = () => ssr(_tmpl$2$2, escape(options.label ?? `Edit ${options.collection.slug}`), escape(createComponent(Show, {
 			get when() {
 				return row.data;
 			},
@@ -783,6 +816,7 @@ function createCollectionEditPage(options) {
 						return options.fieldWidgets;
 					},
 					onDirtyChange: setDirty,
+					onValuesChange: setPreviewValues,
 					get capabilities() {
 						return options.capabilities?.();
 					},
@@ -798,7 +832,8 @@ function createCollectionEditPage(options) {
 							canPreview: latestDraftId() !== void 0,
 							saveDraftLabel: options.draftActions.saveDraftLabel,
 							publishLabel: options.draftActions.publishLabel,
-							previewLabel: options.draftActions.previewLabel
+							previewLabel: options.draftActions.previewLabel,
+							autosave: options.draftActions.autosave
 						};
 					}
 				});
@@ -811,6 +846,40 @@ function createCollectionEditPage(options) {
 				return ssr(_tmpl$$2, escape(options.deleteLabel ?? `Delete ${options.collection.slug}`));
 			}
 		})));
+		return createComponent(Show, {
+			get when() {
+				return options.preview;
+			},
+			get fallback() {
+				return createComponent(EditorPane, {});
+			},
+			get children() {
+				return ssr(_tmpl$3$1, escape(createComponent(EditorPane, {})), escape(createComponent(Show, {
+					get when() {
+						return options.preview?.url();
+					},
+					children: (url) => ssr(_tmpl$4$1, escape(createComponent(VisualEditingPane, {
+						get src() {
+							return url();
+						},
+						get allowedOrigin() {
+							return options.preview?.allowedOrigin?.();
+						},
+						get previewValues() {
+							return previewValues();
+						},
+						get previewTarget() {
+							return {
+								collection: options.collection.slug,
+								id: Number(row.data?.id)
+							};
+						},
+						"class": "border-base-300 rounded-box h-full w-full border",
+						title: "Live preview"
+					})))
+				})));
+			}
+		});
 	};
 }
 //#endregion