@cloudcannon/editable-regions 0.0.8 → 0.0.10

package/components/editable-snippet-component.ts

@@ -9,7 +9,7 @@ export default class EditableSnippetComponent extends HTMLElement {
 	}
 
 	set snippetData(value: unknown) {
-		this.editable.pushValue(value);
+		this.editable.pushValue(value, {}, { path: "", editable: this.editable });
 	}
 
 	connectedCallback(): void {

package/components/index.ts

@@ -6,12 +6,10 @@ export { default as EditableSnippetComponent } from "./editable-snippet-componen
 export { default as EditableSourceComponent } from "./editable-source-component.js";
 export { default as EditableTextComponent } from "./editable-text-component.js";
 
-import { apiLoadedPromise } from "../helpers/cloudcannon.mjs";
 import {
 	dehydrateDataEditableRegions,
 	hydrateDataEditableRegions,
 } from "../helpers/hydrate-editable-regions";
-import { completeLoading } from "../helpers/loading.js";
 
 const observer = new MutationObserver((mutations) => {
 	mutations.forEach((mutation) => {
@@ -32,14 +30,3 @@ const observer = new MutationObserver((mutations) => {
 hydrateDataEditableRegions(document.body);
 
 observer.observe(document, { childList: true, subtree: true });
-
-Promise.all([
-	apiLoadedPromise,
-	customElements.whenDefined("editable-array-item"),
-	customElements.whenDefined("editable-array"),
-	customElements.whenDefined("editable-text"),
-	customElements.whenDefined("editable-component"),
-	customElements.whenDefined("editable-image"),
-	customElements.whenDefined("editable-source"),
-	customElements.whenDefined("editable-snippet"),
-]).then(() => completeLoading());

package/helpers/checks.ts

@@ -2,32 +2,11 @@ import Editable from "../nodes/editable.js";
 import EditableArrayItem from "../nodes/editable-array-item.js";
 import EditableText from "../nodes/editable-text.js";
 
-const TAG_NAMES = [
-	"EDITABLE-TEXT",
-	"EDITABLE-COMPONENT",
-	"EDITABLE-ARRAY-ITEM",
-	"EDITABLE-ARRAY",
-	"EDITABLE-IMAGE",
-	"EDITABLE-SOURCE",
-	"EDITABLE-SNIPPET",
-];
-
-const EDITABLE_REGION_TYPES = [
-	"text",
-	"component",
-	"array",
-	"array-item",
-	"image",
-	"source",
-];
-
-const CORRESPONDING_NAME: Record<string, string> = {
-	"EDITABLE-TEXT": "text",
-	"EDITABLE-COMPONENT": "component",
-	"EDITABLE-ARRAY-ITEM": "array-item",
-	"EDITABLE-ARRAY": "array",
-	"EDITABLE-IMAGE": "image",
-	"EDITABLE-SOURCE": "source",
+const getEditableType = (el: HTMLElement): string | undefined => {
+	if (el.tagName.startsWith("EDITABLE-")) {
+		return el.tagName.slice(9).toLowerCase();
+	}
+	return el.dataset.editable;
 };
 
 export const hasEditable = <T extends object>(
@@ -53,7 +32,7 @@ export const isEditableWebcomponent = (el: unknown): boolean => {
 		return false;
 	}
 
-	return TAG_NAMES.includes(el.tagName);
+	return el.tagName.startsWith("EDITABLE-");
 };
 
 export const isEditableElement = (el: unknown): boolean => {
@@ -62,19 +41,13 @@ export const isEditableElement = (el: unknown): boolean => {
 	}
 
 	return (
-		TAG_NAMES.includes(el.tagName) ||
-		(!!el.dataset.editable &&
-			EDITABLE_REGION_TYPES.includes(el.dataset.editable))
+		el.tagName.startsWith("EDITABLE-") ||
+		typeof el.dataset.editable === "string"
 	);
 };
 
 export const areEqualEditables = (a: HTMLElement, b: HTMLElement) => {
-	if (
-		a.tagName !== b.tagName &&
-		a.dataset.editable !== b.dataset.editable &&
-		CORRESPONDING_NAME[a.tagName] !== b.dataset.editable &&
-		CORRESPONDING_NAME[b.tagName] !== a.dataset.editable
-	) {
+	if (getEditableType(a) !== getEditableType(b)) {
 		return false;
 	}
 

package/helpers/cloudcannon.d.mts

@@ -0,0 +1,20 @@
+/**
+ * Promise that resolves when the CloudCannon API is loaded
+ * @type {Promise<void>}
+ */
+export const apiLoadedPromise: Promise<void>;
+export function addEditableComponentRenderer(key: string, renderer: ComponentRenderer): void;
+export function addEditableSnippetRenderer(key: string, renderer: ComponentRenderer): void;
+export function getEditableComponentRenderers(): Record<string, ComponentRenderer>;
+export function getEditableSnippetRenderers(): Record<string, ComponentRenderer>;
+export function realizeAPIValue(value: unknown): Promise<unknown>;
+export { _cloudcannon as CloudCannon };
+export type CloudCannonEditorWindow = import("@cloudcannon/javascript-api").CloudCannonEditorWindow;
+export type CloudCannonJavaScriptV1API = import("@cloudcannon/javascript-api").CloudCannonJavaScriptV1API;
+export type ComponentRenderer = (props: any) => HTMLElement | Promise<HTMLElement>;
+export type ExtendedWindow = CloudCannonEditorWindow & {
+    cc_components?: Record<string, ComponentRenderer>;
+    cc_snippets?: Record<string, ComponentRenderer>;
+};
+/** @type {CloudCannonJavaScriptV1API} */
+declare let _cloudcannon: CloudCannonJavaScriptV1API;

package/helpers/cloudcannon.mjs

@@ -107,4 +107,14 @@ export const realizeAPIValue = async (value) => {
 	return value;
 };
 
+export const addCustomEditableRegion = (key, region) => {
+	extendedWindow.editableRegionMap ??= {};
+	extendedWindow.editableRegionMap[key] = region;
+	extendedWindow.hydrateDataEditableRegions(document.body);
+};
+
+export const getCustomEditableRegions = () => {
+	return extendedWindow.editableRegionMap ?? {};
+};
+
 export { _cloudcannon as CloudCannon };

package/helpers/hydrate-editable-regions.ts

@@ -9,7 +9,7 @@ import {
 } from "../nodes";
 import { hasEditable, isEditableWebcomponent } from "./checks";
 
-const editableMap: Record<string, typeof Editable | undefined> = {
+const baseEditableMap: Record<string, typeof Editable | undefined> = {
 	array: EditableArray,
 	"array-item": EditableArrayItem,
 	component: EditableComponent,
@@ -31,6 +31,10 @@ export const dehydrateDataEditableRegions = (root: Element) => {
 };
 
 export const hydrateDataEditableRegions = (root: Element) => {
+	const editableMap: Record<string, typeof Editable | undefined> = {
+		...baseEditableMap,
+		...((window as any).editableRegionMap ?? {}),
+	};
 	if (
 		root instanceof HTMLElement &&
 		root.dataset.editable &&
@@ -89,3 +93,5 @@ export const hydrateDataEditableRegions = (root: Element) => {
 		}
 	});
 };
+
+(window as any).hydrateDataEditableRegions = hydrateDataEditableRegions;

package/integrations/astro/astro-integration.mjs

@@ -1,26 +1,17 @@
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
-const SUPPORTED_VIRTUAL_MODULES = [
-	"actions",
-	"assets",
-	"content",
-	"i18n",
-	"middleware",
-	"transitions",
-];
+/** @type{string[]} */
+const SUPPORTED_VIRTUAL_MODULES = ["assets", "content"];
 
 /**
  * @return {import("astro").AstroIntegration}
  */
 export default () => {
-	/** @type {import("astro").AstroConfig} */
-	let astroConfig;
-
 	return {
 		name: "editable-regions",
 		hooks: {
-			"astro:config:setup": ({ config, updateConfig }) => {
+			"astro:config:setup": ({ updateConfig }) => {
 				updateConfig({
 					vite: {
 						define: {
@@ -28,7 +19,6 @@ export default () => {
 						},
 					},
 				});
-				astroConfig = config;
 			},
 			"astro:build:setup": async ({ target, vite }) => {
 				if (target === "client") {
@@ -68,14 +58,6 @@ export default () => {
 									.replace("/client", "")
 									.replace("/server", "");
 
-								if (type === "env") {
-									return "\0editable-region:env";
-								}
-
-								if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
-									return;
-								}
-
 								let dir = "";
 								if (typeof __dirname !== "undefined") {
 									dir = __dirname;
@@ -83,41 +65,15 @@ export default () => {
 									dir = dirname(fileURLToPath(import.meta.url));
 								}
 
-								return join(dir, "modules", `${type}.js`);
-							}
-						},
+								if (type === "env" && id.endsWith("/server")) {
+									return join(dir, "modules", "secrets.js");
+								}
 
-						load(id) {
-							if (id === "\0editable-region:env") {
-								let contents = "";
-								Object.entries(astroConfig?.env?.schema ?? {}).forEach(
-									([key, schema]) => {
-										if (
-											schema.context !== "client" ||
-											schema.access !== "public"
-										) {
-											return;
-										}
+								if (!SUPPORTED_VIRTUAL_MODULES.includes(type)) {
+									return;
+								}
 
-										try {
-											switch (schema.type) {
-												case "boolean":
-													contents += `export const ${key} = ${!!process.env[key]};\n`;
-													break;
-												case "number":
-													contents += `export const ${key} = ${Number(process.env[key])};\n`;
-													break;
-												default:
-													contents += `export const ${key} = ${JSON.stringify(process.env[key] ?? "")};\n`;
-											}
-										} catch (_e) {
-											//Error intentionally ignored
-										}
-									},
-								);
-								contents +=
-									'export const getSecret = () => console.log("[CloudCannon] getSecret is not supported in an editable component. Please use an editing fallback instead.");';
-								return contents;
+								return join(dir, "modules", `${type}.js`);
 							}
 						},
 					});

package/integrations/astro/modules/content.js

@@ -26,12 +26,18 @@ export const getCollection = async (collectionKey, filter) => {
 			slug = data.slug;
 		}
 
+		const body = await file.get();
 		return {
 			collection: collectionKey,
 			id: id,
 			data: data,
 			slug: slug,
-			body: await file.get(),
+			body: body,
+			render: () => ({
+				Content: () => body ?? "Content is not available when live editing",
+				headings: [],
+				remarkPluginFrontmatter: {},
+			}),
 		};
 	});
 

package/integrations/astro/modules/secrets.js

@@ -0,0 +1,4 @@
+export const getSecret = () =>
+	console.log(
+		"[CloudCannon] getSecret is not supported in an editable component. Please use an editing fallback instead.",
+	);

package/nodes/editable-array-item.ts

@@ -249,8 +249,8 @@ export default class EditableArrayItem extends EditableComponent {
 		);
 	}
 
-	async update(): Promise<void> {
-		await super.update();
+	async update(partialSubtree?: ChildNode | null): Promise<void> {
+		await super.update(partialSubtree);
 		this.updateControls();
 	}
 
@@ -485,12 +485,12 @@ export default class EditableArrayItem extends EditableComponent {
 		}
 	}
 
-	setupListeners(): void {
-		super.setupListeners();
-		if (!this.element.dataset.prop) {
-			this.parent?.registerListener({
-				editable: this,
-			});
-		}
+	getSpecialProps(
+		incomingSpecialProps: Record<string, unknown> = {},
+	): Record<string, unknown> {
+		return {
+			...super.getSpecialProps(incomingSpecialProps),
+			"@index": Number(this.element.dataset.prop),
+		};
 	}
 }

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,
+		};
+	}
 }