@cloudcannon/editable-regions 0.0.9 → 0.0.11

package/nodes/editable-array.ts

@@ -37,13 +37,16 @@ export default class EditableArray extends Editable {
 	private updatePromise: Promise<void> | undefined;
 	private needsReupdate = false;
 	private addButton?: EditableRegionButton;
+	private pendingPartialSubtree?: ChildNode | null;
 
 	async registerListener(listener: EditableListener): Promise<void> {
 		if (!this.value) {
 			return;
 		}
 
-		const __base_context = { ...this.contextBase };
+		const __base_context = {
+			...this.contextBase,
+		};
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
@@ -90,7 +93,7 @@ export default class EditableArray extends Editable {
 		}
 
 		if (listener.path) {
-			listener.editable.pushValue(value, listener, {
+			listener.editable.pushValue(value, this.specialProps, listener, {
 				__base_context,
 			});
 		}
@@ -147,24 +150,29 @@ export default class EditableArray extends Editable {
 		return value;
 	}
 
-	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;
 	}
 
-	private async _update(): Promise<void> {
+	private async _update(partialSubtree?: ChildNode | null): Promise<void> {
 		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
-		const __base_context = { ...this.contextBase };
+		const __base_context = {
+			...this.contextBase,
+		};
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
 		} else if (CloudCannon.isAPIDataset(this.value)) {
@@ -186,6 +194,24 @@ export default class EditableArray extends Editable {
 			value = [];
 		}
 
+		const partialChildren: (HTMLElement & { editable?: EditableArrayItem })[] =
+			[];
+		if (partialSubtree instanceof HTMLElement) {
+			for (const child of partialSubtree.querySelectorAll(
+				"editable-array-item,[data-editable='array-item']",
+			)) {
+				let parent = child.parentElement;
+				while (parent instanceof HTMLElement && !isEditableElement(parent)) {
+					parent = parent.parentElement;
+				}
+				if (parent !== partialSubtree) {
+					continue;
+				}
+
+				partialChildren.push(child as any);
+			}
+		}
+
 		const templates: {
 			keyed: Record<
 				string,
@@ -241,23 +267,6 @@ export default class EditableArray extends Editable {
 			children.push(child as any);
 		}
 
-		if (
-			children.length === 0 &&
-			!this.element.dataset.component &&
-			!this.element.dataset.componentKey &&
-			!templates.unkeyed &&
-			Object.keys(templates.keyed).length === 0
-		) {
-			const error = document.createElement("editable-region-error-card");
-			error.setAttribute("heading", "Failed to render array editable region");
-			error.setAttribute(
-				"message",
-				"Array editable regions with no child array items must have either a 'data-component' attribute or a 'data-component-key' attribute. Please add an item to this array then save and rebuild to see your changes or add a 'data-component' or 'data-component-key' attribute to this element.",
-			);
-			this.element.replaceChildren(error);
-			return;
-		}
-
 		const key = this.element.dataset.idKey ?? this.element.dataset.componentKey;
 
 		if (!key) {
@@ -274,8 +283,14 @@ export default class EditableArray extends Editable {
 
 			for (let i = 0; i < value.length; i++) {
 				let child = children[i];
+				const partialChild = partialChildren[i];
+
 				if (!child) {
-					if (templates.unkeyed) {
+					if (partialChild) {
+						child = partialChild.cloneNode(true) as HTMLElement & {
+							editable?: EditableArrayItem;
+						};
+					} else if (templates.unkeyed) {
 						child = templates.unkeyed.cloneNode(true) as HTMLElement & {
 							editable?: EditableArrayItem;
 						};
@@ -284,11 +299,22 @@ export default class EditableArray extends Editable {
 						child = document.createElement(
 							"editable-array-item",
 						) as EditableArrayItemComponent;
-					} else {
-						// Empty arrays should be caught by the error case above so children[0] should always exist
+					} else if (children[0]) {
 						child = children[0].cloneNode(true) as HTMLElement & {
 							editable?: EditableArrayItem;
 						};
+					} else {
+						const error = document.createElement("editable-region-error-card");
+						error.setAttribute(
+							"heading",
+							"Failed to render array editable region",
+						);
+						error.setAttribute(
+							"message",
+							"Array editable region contains an array item that cannot be rendered. Either a 'data-component' attribute or a 'data-component-key' attribute is required to render array items that weren't previously on the page. Please save and rebuild to see your changes or add a 'data-component' or 'data-component-key' attribute to this element.",
+						);
+						this.element.replaceChildren(error);
+						return;
 					}
 					this.element.appendChild(child);
 				}
@@ -300,8 +326,10 @@ export default class EditableArray extends Editable {
 				child.dataset.length = `${children.length}`;
 				child.editable?.pushValue(
 					value,
+					this.specialProps,
 					{ path: `${i}`, editable: child.editable },
 					{ __base_context },
+					partialChild,
 				);
 			}
 			return;
@@ -351,8 +379,10 @@ export default class EditableArray extends Editable {
 
 				child.editable?.pushValue(
 					value,
+					this.specialProps,
 					{ path: `${index}`, editable: child.editable },
 					{ __base_context },
+					partialChildren[index],
 				);
 			});
 
@@ -380,6 +410,7 @@ export default class EditableArray extends Editable {
 			const existingElement = children[i];
 			const templateElement = templates.keyed[key] ?? templates.unkeyed;
 			const componentKey = componentKeys[i] || this.element.dataset.component;
+			const partialChild = partialChildren[i];
 
 			const matchingChildIndex = children.findIndex(
 				(child, i) => child.dataset.id === key && !moved[i],
@@ -388,7 +419,9 @@ export default class EditableArray extends Editable {
 			let matchingChild = children[matchingChildIndex];
 			if (!matchingChild) {
 				const clone = children.find((child) => child.dataset.id === key);
-				if (templateElement) {
+				if (partialChild) {
+					matchingChild = partialChild.cloneNode(true) as any;
+				} else if (templateElement) {
 					matchingChild = templateElement.cloneNode(true) as any;
 					matchingChild.dataset.editable = "array-item";
 				} else if (componentKey) {
@@ -448,8 +481,10 @@ export default class EditableArray extends Editable {
 				matchingChild.editable.parent = this;
 				matchingChild.editable.pushValue(
 					value,
+					this.specialProps,
 					{ path: `${i}`, editable: matchingChild.editable },
 					{ __base_context },
+					partialChild,
 				);
 			}
 		});
@@ -502,4 +537,15 @@ export default class EditableArray extends Editable {
 			);
 		});
 	}
+
+	getSpecialProps(
+		incomingSpecialProps: Record<string, unknown> = {},
+	): Record<string, unknown> {
+		return {
+			...super.getSpecialProps(incomingSpecialProps),
+			"@length": Array.isArray(this.propsBase)
+				? this.propsBase.length
+				: undefined,
+		};
+	}
 }

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");
@@ -120,94 +171,112 @@ export default class EditableComponent extends Editable {
 		targetNode?: ChildNode | null,
 		renderNode?: ChildNode | null,
 	): void {
-		let targetChild: ChildNode | null | undefined =
+		let nextTargetChild: ChildNode | null | undefined =
 			targetNode?.firstChild ?? undefined;
-		let renderChild: ChildNode | null | undefined =
+		let nextRenderChild: ChildNode | null | undefined =
 			renderNode?.firstChild ?? undefined;
-		while (renderChild || targetChild) {
-			const nextTargetChild: ChildNode | null | undefined =
-				targetChild?.nextSibling ?? undefined;
-			const nextRenderChild: ChildNode | null | undefined =
-				renderChild?.nextSibling ?? undefined;
 
-			if (
-				targetChild instanceof Element &&
-				renderChild &&
-				!(renderChild instanceof Element)
-			) {
+		while (nextRenderChild || nextTargetChild) {
+			const targetChild: ChildNode | null | undefined = nextTargetChild;
+			const renderChild: ChildNode | null | undefined = nextRenderChild;
+
+			nextTargetChild = targetChild?.nextSibling ?? undefined;
+			nextRenderChild = renderChild?.nextSibling ?? undefined;
+
+			// There is an existing node in the DOM but no rendered node in it's place
+			if (!renderChild && targetChild) {
+				targetNode?.removeChild(targetChild);
+				continue;
+			}
+
+			// There is a node to be rendered, but no existing node in the DOM in it's place
+			if (renderChild && !targetChild) {
+				targetNode?.appendChild(renderChild);
+				continue;
+			}
+
+			if (!targetChild || !renderChild) {
+				throw new Error("Illegal rendering state, both children should exist ");
+			}
+
+			// The existing child is an element and the rendered child is a node (i.e. some text)
+			if (targetChild instanceof Element && !(renderChild instanceof Element)) {
+				// Render the (text) node before the element and skip to the next rendered child
 				targetChild.before(renderChild);
-				renderChild = nextRenderChild;
+				nextTargetChild = targetChild;
 				continue;
 			}
 
-			if (
-				renderChild instanceof Element &&
-				targetChild &&
-				!(targetChild instanceof Element)
-			) {
+			// The existing child is a node (i.e. some text) and the rendered child is an element
+			if (renderChild instanceof Element && !(targetChild instanceof Element)) {
+				// Delete the (text) node and skip to the next existing child
 				targetChild.remove();
-				targetChild = nextTargetChild;
+				nextRenderChild = renderChild;
 				continue;
 			}
 
+			// Both existing and rendered children are nodes (i.e. some text)
 			if (
-				renderChild &&
-				targetChild &&
 				!(renderChild instanceof Element) &&
 				!(targetChild instanceof Element)
 			) {
+				// Render the offscreen node's content into the existing node.
 				targetChild.nodeValue = renderChild.nodeValue;
-			} else if (
-				targetChild instanceof HTMLElement &&
-				renderChild instanceof HTMLElement &&
-				isEditableElement(renderChild) &&
-				isEditableElement(targetChild)
+				continue;
+			}
+
+			// Both children are elements but are different types
+			if (renderChild.nodeName !== targetChild.nodeName) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
+			// Both existing and rendered children are the same kind of element, and neither is editable
+			if (!isEditableElement(renderChild) && !isEditableElement(targetChild)) {
+				// Update the existing element to match the rendered element and recurse their subtrees
+				this.updateNode(targetChild, renderChild);
+				this.updateTree(targetChild, renderChild);
+				continue;
+			}
+
+			if (
+				!(renderChild instanceof HTMLElement) ||
+				!(targetChild instanceof HTMLElement)
 			) {
-				if (!areEqualEditables(renderChild, targetChild)) {
-					targetChild.replaceWith(renderChild);
-				} else if (isEditableText(renderChild) && isEditableText(targetChild)) {
-					if (
-						hasEditableText(targetChild) &&
-						!targetChild.editable.focused &&
-						!targetChild?.isEqualNode(renderChild) &&
-						hasEditable(renderChild)
-					) {
-						targetChild.replaceWith(renderChild);
-						for (let i = 0; i < this.listeners.length; i++) {
-							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 ?? {},
-								});
-							}
-						}
-					} else if (hasEditable(targetChild)) {
-						this.updateEditable(renderChild, targetChild);
-					}
-				} else if (hasEditable(targetChild)) {
-					this.updateEditable(renderChild, targetChild);
-				}
-			} else if (renderChild && targetChild) {
-				if (
-					renderChild.nodeName !== targetChild.nodeName ||
-					isEditableElement(renderChild) ||
-					isEditableElement(targetChild)
-				) {
-					targetChild.replaceWith(renderChild);
-				} else {
-					this.updateNode(targetChild, renderChild);
-					this.updateTree(targetChild, renderChild);
-				}
-			} else if (renderChild) {
-				targetNode?.appendChild(renderChild);
-			} else if (targetChild) {
-				targetNode?.removeChild(targetChild);
+				throw new Error("Illegal state, both children should be elements");
+			}
+
+			// The existing and rendered child either aren't both editable or are different kinds of editables
+			if (!areEqualEditables(renderChild, targetChild)) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
+			if (!isEditableElement(renderChild) || !isEditableElement(targetChild)) {
+				throw new Error("Illegal state, both children should be editable");
+			}
+
+			// Both elements are editable but the existing element hasn't hydrated
+			if (!hasEditable(targetChild)) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
+			// The existing and rendered child are the same kind of non-text editable.
+			if (!isEditableText(targetChild)) {
+				this.updateEditable(renderChild, targetChild);
+				continue;
 			}
 
-			targetChild = nextTargetChild;
-			renderChild = nextRenderChild;
+			// The existing element is currently focused or is already the same as the rendered element
+			if (
+				(hasEditableText(targetChild) && targetChild.editable.focused) ||
+				targetChild?.isEqualNode(renderChild)
+			) {
+				this.updateEditable(renderChild, targetChild);
+			} else {
+				targetChild.replaceWith(renderChild);
+			}
 		}
 	}
 
@@ -259,10 +328,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,
+				);
 			}
 		}
 	}
@@ -288,23 +363,6 @@ export default class EditableComponent extends Editable {
 		);
 	}
 
-	setupListeners(): void {
-		super.setupListeners();
-		const key = this.element.dataset.component;
-		if (!key) {
-			return;
-		}
-
-		const component = this.getComponents()?.[key];
-		if (!component) {
-			document.addEventListener(
-				`editable-regions:registered-${key}`,
-				() => this.update(),
-				{ once: true },
-			);
-		}
-	}
-
 	mount(): void {
 		if (!this.controlsElement) {
 			let editPath: string | undefined;

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 {