@cloudcannon/editable-regions 0.0.8 → 0.0.10

package/nodes/editable-component.ts

@@ -19,6 +19,7 @@ export default class EditableComponent extends Editable {
 
 	private updatePromise: Promise<void> | undefined;
 	private needsReupdate = false;
+	private pendingPartialSubtree?: ChildNode | null;
 
 	getComponents() {
 		return getEditableComponentRenderers();
@@ -51,31 +52,81 @@ export default class EditableComponent extends Editable {
 		return true;
 	}
 
-	update(): Promise<void> {
+	update(partialSubtree?: ChildNode | null): Promise<void> {
 		if (this.updatePromise) {
 			this.needsReupdate = true;
+			this.pendingPartialSubtree = partialSubtree;
 			return this.updatePromise;
 		}
-		this.updatePromise = this._update().then(() => {
+		this.updatePromise = this._update(partialSubtree).then(() => {
 			this.updatePromise = undefined;
 			if (this.needsReupdate) {
 				this.needsReupdate = false;
-				return this.update();
+				const savedPartialSubtree = this.pendingPartialSubtree;
+				this.pendingPartialSubtree = undefined;
+				return this.update(savedPartialSubtree);
 			}
 		});
 		return this.updatePromise;
 	}
 
-	async _update(): Promise<void> {
+	santiseComponentOutput(el: HTMLElement): HTMLElement {
+		el.querySelectorAll("noscript").forEach((el) => el.remove());
+		return el;
+	}
+
+	async _update(partialSubtree?: ChildNode | null): Promise<void> {
+		if (partialSubtree) {
+			if (this.controlsElement) {
+				this.controlsElement.remove();
+			}
+			this.updateTree(this.element, partialSubtree);
+			if (this.controlsElement) {
+				this.element.appendChild(this.controlsElement);
+			}
+			return;
+		}
+
 		this.element.classList.remove("errored");
 
 		const key = this.element.dataset.component;
 		if (!key) {
 			return super.update();
 		}
-		const component = this.getComponents()?.[key];
+
+		let component = this.getComponents()?.[key];
+		for (let i = 0; !component && i < 20; i++) {
+			await new Promise((resolve) => setTimeout(resolve, 200));
+			component = this.getComponents()?.[key];
+		}
+
 		if (!component) {
-			return super.update();
+			this.element.classList.add("errored");
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render component");
+			error.setAttribute(
+				"message",
+				`Failed to find a registered component with the key "${key}". This may mean that the provided "data-component" attribute is incorrect or that the component hasn't been registered.`,
+			);
+
+			const caseMatch = Object.keys(this.getComponents()).find(
+				(k) => k.toLowerCase() === key.toLowerCase(),
+			);
+
+			if (Object.keys(this.getComponents()).length === 0) {
+				error.setAttribute(
+					"hint",
+					"There are no registered components currently available. Please check that you've included your registration script and that it's running correctly.",
+				);
+			} else if (caseMatch) {
+				error.setAttribute(
+					"hint",
+					`The component key "${key}" is not case-sensitive. Did you mean "${caseMatch}"?`,
+				);
+			}
+
+			this.element.replaceChildren(error);
+			return;
 		}
 
 		const value = await realizeAPIValue(this.value);
@@ -87,7 +138,7 @@ export default class EditableComponent extends Editable {
 
 		let rootEl: HTMLElement;
 		try {
-			rootEl = await component(value);
+			rootEl = this.santiseComponentOutput(await component(value));
 		} catch (err: unknown) {
 			this.element.classList.add("errored");
 			const error = document.createElement("editable-region-error-card");
@@ -177,10 +228,16 @@ export default class EditableComponent extends Editable {
 							const listener = this.listeners[i];
 							if (listener.editable.element === targetChild) {
 								listener.editable.element = renderChild;
-								renderChild.editable.pushValue(this.value, listener, {
-									...this.contexts,
-									__base_context: this.contextBase ?? {},
-								});
+								renderChild.editable.pushValue(
+									this.value,
+									this.specialProps,
+									listener,
+									{
+										...this.contexts,
+										__base_context: this.contextBase ?? {},
+									},
+									renderChild,
+								);
 							}
 						}
 					} else if (hasEditable(targetChild)) {
@@ -259,10 +316,16 @@ export default class EditableComponent extends Editable {
 		for (let i = 0; i < this.listeners.length; i++) {
 			const listener = this.listeners[i];
 			if (listener.editable.element === targetChild) {
-				targetChild.editable.pushValue(this.value, listener, {
-					...this.contexts,
-					__base_context: this.contextBase ?? {},
-				});
+				targetChild.editable.pushValue(
+					this.value,
+					this.specialProps,
+					listener,
+					{
+						...this.contexts,
+						__base_context: this.contextBase ?? {},
+					},
+					renderChild,
+				);
 			}
 		}
 	}

package/nodes/editable-source.ts

@@ -45,9 +45,15 @@ export default class EditableSource extends EditableText {
 
 		this.file = CloudCannon.file(this.element.dataset.path);
 		this.file.addEventListener("change", () => {
-			this.file?.get().then(this.pushValue.bind(this));
+			this.file
+				?.get()
+				.then((source) =>
+					this.pushValue(source, {}, { path: "", editable: this }),
+				);
+		});
+		this.file.get().then((source) => {
+			this.pushValue(source, {}, { path: "", editable: this });
 		});
-		this.file.get().then(this.pushValue.bind(this));
 	}
 
 	validateConfiguration(): boolean {

package/nodes/editable.ts

@@ -4,8 +4,13 @@ import type {
 	CloudCannonJavaScriptV1APIFile,
 } from "@cloudcannon/javascript-api";
 import { hasEditable } from "../helpers/checks";
-import { CloudCannon } from "../helpers/cloudcannon.mjs";
-import { loadingPromise } from "../helpers/loading";
+import { apiLoadedPromise, CloudCannon } from "../helpers/cloudcannon.mjs";
+
+declare global {
+	interface HTMLElement {
+		__pendingEditableListeners?: EditableListener[];
+	}
+}
 
 export interface EditableListener {
 	editable: Editable;
@@ -41,12 +46,15 @@ export default class Editable {
 	domListeners: DOMListener[] = [];
 	value: unknown = undefined;
 	parent: Editable | null = null;
+	pendingParentElement: HTMLElement | null = null;
 	element: HTMLElement;
 	mounted = false;
 	connected = false;
 	disconnecting = false;
 	needsReconnect = false;
 
+	specialPropListeners: EditableListener[] = [];
+	specialProps: Record<string, unknown> = {};
 	propsBase: unknown;
 	contextBase?: EditableContext;
 	props: Record<string, unknown> = {};
@@ -150,7 +158,10 @@ export default class Editable {
 					: key;
 			}
 		}
-		return { value, context: context ?? {} };
+		return {
+			value,
+			context: context ?? {},
+		};
 	}
 
 	shouldUpdate(_value: unknown) {
@@ -161,45 +172,126 @@ export default class Editable {
 		return this.value !== undefined;
 	}
 
+	getLiteralProps() {
+		let literalPropsBase: unknown;
+		const literalProps: Record<string, unknown> = {};
+		Object.entries(this.element.dataset).forEach(([propName, propPath]) => {
+			if (!propName.startsWith("literal") || typeof propPath !== "string") {
+				return;
+			}
+
+			const key =
+				propName === "prop" ? undefined : propName.substring(7).toLowerCase();
+			let value = propPath;
+			try {
+				value = JSON.parse(value);
+			} catch (_error) {
+				// Error intentionally ignored
+			}
+
+			if (key) {
+				literalProps[key] = value;
+			} else {
+				literalPropsBase = value;
+			}
+		});
+		return { literalPropsBase, literalProps };
+	}
+
 	async getNewValue(
 		value: unknown,
+		specialProps: Record<string, unknown>,
 		listener?: EditableListener,
 		contexts?: { [key: string]: EditableContext },
 	): Promise<unknown> {
 		const { key, path } = listener ?? {};
 
-		const { value: resolvedValue, context: newContext } =
-			await this.lookupPathAndContext(path, value, contexts);
+		if (typeof path === "string") {
+			const { value: resolvedValue, context: newContext } =
+				await this.lookupPathAndContext(path, value, contexts);
 
-		if (!key) {
-			this.propsBase = resolvedValue;
-			this.contextBase = newContext;
-		} else {
-			this.props[key] = resolvedValue;
-			this.contexts[key] = newContext;
+			if (!key) {
+				this.propsBase = resolvedValue;
+				this.contextBase = newContext;
+			} else {
+				this.props[key] = resolvedValue;
+				this.contexts[key] = newContext;
+			}
 		}
 
-		if (Object.entries(this.props).length === 0) {
-			return this.validateValue(this.propsBase);
+		this.specialProps = this.getSpecialProps(specialProps);
+		const { literalPropsBase, literalProps } = this.getLiteralProps();
+
+		let newValue: unknown;
+		const specialPropsBase = this.specialPropListeners.find(({ key }) => !key);
+
+		if (this.propsBase !== undefined) {
+			newValue = this.propsBase;
+		} else if (specialPropsBase?.path) {
+			newValue = structuredClone(this.specialProps[specialPropsBase.path]);
+		} else if (literalPropsBase !== undefined) {
+			newValue = literalPropsBase;
 		}
 
-		const newValue = Object.entries(this.props).reduce(
-			(acc, [key, val]) => {
-				(acc as any)[key] = structuredClone(val);
-				return acc;
-			},
-			structuredClone(this.propsBase ?? {}),
+		if (Object.entries(this.props).length > 0) {
+			newValue = Object.entries(this.props).reduce(
+				(acc, [key, val]) => {
+					(acc as any)[key] = structuredClone(val);
+					return acc;
+				},
+				newValue && typeof newValue === "object"
+					? structuredClone(newValue)
+					: {},
+			);
+		}
+
+		const filteredSpecialPropsListener = this.specialPropListeners.filter(
+			({ key }) => !!key,
 		);
+		if (filteredSpecialPropsListener.length > 0) {
+			newValue = filteredSpecialPropsListener.reduce(
+				(acc, { key, path }) => {
+					if (key && path) {
+						(acc as any)[key] = structuredClone(this.specialProps[path]);
+					}
+					return acc;
+				},
+				structuredClone(
+					newValue && typeof newValue === "object"
+						? structuredClone(newValue)
+						: {},
+				),
+			);
+		}
+
+		if (Object.entries(literalProps).length > 0) {
+			newValue = Object.entries(literalProps).reduce(
+				(acc, [key, val]) => {
+					(acc as any)[key] = structuredClone(val);
+					return acc;
+				},
+				newValue && typeof newValue === "object"
+					? structuredClone(newValue)
+					: {},
+			);
+		}
 
 		return this.validateValue(newValue);
 	}
 
 	async pushValue(
 		value: unknown,
+		specialProps: Record<string, unknown>,
 		listener?: EditableListener,
 		contexts?: { [key: string]: EditableContext },
+		partialSubtree?: ChildNode | null,
 	): Promise<void> {
-		const newValue = await this.getNewValue(value, listener, contexts);
+		const newValue = await this.getNewValue(
+			value,
+			specialProps,
+			listener,
+			contexts,
+		);
 
 		if (typeof newValue === "undefined" || !this.shouldUpdate(newValue)) {
 			return;
@@ -209,17 +301,17 @@ export default class Editable {
 		if (this.connected && !this.mounted) {
 			this.mounted = true;
 			this.mount();
-			return this.update();
+			return this.update(partialSubtree);
 		}
 
 		if (this.mounted) {
-			return this.update();
+			return this.update(partialSubtree);
 		}
 	}
 
-	update(): void {
+	update(_partialSubtree?: ChildNode | null): void {
 		this.listeners.forEach((listener) =>
-			listener.editable.pushValue(this.value, listener, {
+			listener.editable.pushValue(this.value, this.specialProps, listener, {
 				...this.contexts,
 				__base_context: this.contextBase ?? {},
 			}),
@@ -232,7 +324,7 @@ export default class Editable {
 
 	registerListener(listener: EditableListener): void {
 		if (this.value !== undefined) {
-			listener.editable.pushValue(this.value, listener, {
+			listener.editable.pushValue(this.value, this.specialProps, listener, {
 				...this.contexts,
 				__base_context: this.contextBase ?? {},
 			});
@@ -256,6 +348,29 @@ export default class Editable {
 		);
 	}
 
+	private queueListenerOnParent(
+		parentElement: HTMLElement,
+		listener: EditableListener,
+	): void {
+		if (!parentElement.__pendingEditableListeners) {
+			parentElement.__pendingEditableListeners = [];
+		}
+		parentElement.__pendingEditableListeners.push(listener);
+	}
+
+	private replayPendingListeners(): void {
+		const pending = this.element.__pendingEditableListeners;
+		if (!pending || pending.length === 0) {
+			return;
+		}
+		this.element.__pendingEditableListeners = [];
+		for (const listener of pending) {
+			listener.editable.parent = this;
+			listener.editable.pendingParentElement = null;
+			this.registerListener(listener);
+		}
+	}
+
 	async disconnect(): Promise<void> {
 		if (this.disconnecting) {
 			return;
@@ -268,6 +383,15 @@ export default class Editable {
 
 		this.parent?.deregisterListener(this);
 		this.parent = null;
+		if (this.pendingParentElement) {
+			const pending = this.pendingParentElement.__pendingEditableListeners;
+			if (pending) {
+				this.pendingParentElement.__pendingEditableListeners = pending.filter(
+					(listener) => listener.editable !== this,
+				);
+			}
+			this.pendingParentElement = null;
+		}
 		this.APIListeners.forEach(({ obj, fn }) => {
 			obj.removeEventListener("change", fn);
 			obj.removeEventListener("delete", fn);
@@ -277,6 +401,7 @@ export default class Editable {
 			this.element.removeEventListener(event, fn);
 		});
 		this.domListeners = [];
+		this.specialPropListeners = [];
 		this.connected = false;
 		this.connectPromise = undefined;
 		this.disconnecting = false;
@@ -299,7 +424,7 @@ export default class Editable {
 		if (this.connectPromise) {
 			return;
 		}
-		this.connectPromise = loadingPromise.then(() => {
+		this.connectPromise = apiLoadedPromise.then(() => {
 			this.setupListeners();
 			this.connected = true;
 			if (!this.mounted && this.shouldMount()) {
@@ -316,11 +441,14 @@ export default class Editable {
 	}
 
 	setupListeners(): void {
-		let parentEditable: Editable | undefined;
+		let parentElement: HTMLElement | null = null;
 		let parent = this.element.parentElement;
 		while (parent) {
-			if (hasEditable(parent) && !parentEditable) {
-				parentEditable = parent.editable;
+			if (
+				parent.tagName.startsWith("EDITABLE-") ||
+				"editable" in parent.dataset
+			) {
+				parentElement ??= parent;
 			}
 
 			if (parent.tagName === "A") {
@@ -329,7 +457,13 @@ export default class Editable {
 			parent = parent.parentElement;
 		}
 
-		this.parent = parentEditable || null;
+		let hasParentListener = false;
+
+		if (parentElement && hasEditable(parentElement)) {
+			this.parent = parentElement.editable;
+		} else if (parentElement) {
+			this.pendingParentElement = parentElement;
+		}
 
 		Object.entries(this.element.dataset).forEach(([propName, propPath]) => {
 			if (!propName.startsWith("prop") || typeof propPath !== "string") {
@@ -346,8 +480,20 @@ export default class Editable {
 				path: source,
 			};
 
-			if (!absolute && parentEditable) {
-				parentEditable.registerListener(listener);
+			if (!absolute && source.startsWith("@") && source !== "@content") {
+				this.specialPropListeners.push(listener);
+				return;
+			}
+
+			if (!absolute && this.parent) {
+				hasParentListener = true;
+				this.parent.registerListener(listener);
+				return;
+			}
+
+			if (!absolute && this.pendingParentElement) {
+				hasParentListener = true;
+				this.queueListenerOnParent(this.pendingParentElement, listener);
 				return;
 			}
 
@@ -362,7 +508,9 @@ export default class Editable {
 							? undefined
 							: `@file[${file?.path}]`;
 				const handleAPIChange = () => {
-					this.pushValue(obj, listener, { __base_context: { fullPath } });
+					this.pushValue(obj, {}, listener, {
+						__base_context: { fullPath },
+					});
 				};
 				this.APIListeners.push({
 					obj,
@@ -374,7 +522,14 @@ export default class Editable {
 			}
 		});
 
+		if (this.parent && !hasParentListener) {
+			this.parent.registerListener({ editable: this });
+		} else if (this.pendingParentElement && !hasParentListener) {
+			this.queueListenerOnParent(this.pendingParentElement, { editable: this });
+		}
+
 		this.addEventListener("cloudcannon-api", this.handleApiEvent.bind(this));
+		this.replayPendingListeners();
 	}
 
 	handleApiEvent(e: any): void {
@@ -597,4 +752,13 @@ export default class Editable {
 			currentFile,
 		};
 	}
+
+	getSpecialProps(
+		incomingSpecialProps: Record<string, unknown> = {},
+	): Record<string, unknown> {
+		return {
+			...this.specialProps,
+			...incomingSpecialProps,
+		};
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.8",
+	"version": "0.0.10",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -56,7 +56,7 @@
 		"@biomejs/biome": "2.3.6",
 		"@cloudcannon/javascript-api": "0.0.10",
 		"@types/js-beautify": "1.14.3",
-		"@types/react": "19.2.6",
+		"@types/react": "19.2.8",
 		"@types/react-dom": "18.3.1",
 		"astro": "^5.14.1",
 		"js-beautify": "^1.15.4",

package/helpers/loading.ts

@@ -1,7 +0,0 @@
-let completeLoading: () => void;
-
-export const loadingPromise = new Promise<void>((resolve) => {
-	completeLoading = resolve;
-});
-
-export { completeLoading };

package/integrations/astro/modules/actions.js

@@ -1,74 +0,0 @@
-export const actions = new Proxy(
-	{},
-	{
-		get() {
-			console.warn(
-				"[CloudCannon] actions is not supported in an editable component. Please use an editing fallback instead.",
-			);
-			return () => {};
-		},
-	},
-);
-
-export const defineAction = () => {
-	console.warn(
-		"[CloudCannon] defineAction is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {
-		handler: () => {},
-		input: null,
-	};
-};
-
-export const isInputError = () => {
-	console.warn(
-		"[CloudCannon] isInputError is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return false;
-};
-
-export const isActionError = () => {
-	console.warn(
-		"[CloudCannon] isActionError is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return false;
-};
-
-export class ActionError extends Error {
-	/**
-	 * @param {any} code
-	 * @param {any} message
-	 */
-	constructor(code, message) {
-		super(message);
-		console.warn(
-			"[CloudCannon] ActionError is not supported in an editable component. Please use an editing fallback instead.",
-		);
-		this.code = code;
-	}
-}
-
-export const getActionContext = () => {
-	console.warn(
-		"[CloudCannon] getActionContext is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {
-		action: undefined,
-		setActionResult: () => {},
-		serializeActionResult: () => ({}),
-	};
-};
-
-export const deserializeActionResult = () => {
-	console.warn(
-		"[CloudCannon] deserializeActionResult is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return {};
-};
-
-export const getActionPath = () => {
-	console.warn(
-		"[CloudCannon] getActionPath is not supported in an editable component. Please use an editing fallback instead.",
-	);
-	return "";
-};

package/integrations/astro/modules/client-router.astro

@@ -1,5 +0,0 @@
----
-console.warn(
-	"[CloudCannon] view transitions are not supported in an editable component. Please use an editing fallback instead.",
-);
----