@cloudcannon/editable-regions 0.0.2

package/helpers/hydrate-editable-regions.ts

@@ -0,0 +1,71 @@
+import {
+	type Editable,
+	EditableArray,
+	EditableArrayItem,
+	EditableComponent,
+	EditableImage,
+	EditableSource,
+	EditableText,
+} from "../nodes";
+import { hasEditable } from "./checks";
+
+const editableMap: Record<string, typeof Editable | undefined> = {
+	array: EditableArray,
+	"array-item": EditableArrayItem,
+	component: EditableComponent,
+	image: EditableImage,
+	source: EditableSource,
+	text: EditableText,
+};
+
+export const dehydrateDataEditableRegions = (root: Element) => {
+	if (root instanceof HTMLElement && hasEditable(root)) {
+		root.editable.disconnect();
+	}
+
+	root.querySelectorAll("[data-editable]").forEach((element) => {
+		if (element instanceof HTMLElement && hasEditable(element)) {
+			element.editable.disconnect();
+		}
+	});
+};
+
+export const hydrateDataEditableRegions = (root: Element) => {
+	if (
+		root instanceof HTMLElement &&
+		root.dataset.editable &&
+		!("editable" in root)
+	) {
+		const Editable = editableMap[root.dataset.editable];
+		if (Editable) {
+			const editable = new Editable(root);
+			editable.connect();
+		}
+	}
+
+	root.querySelectorAll("[data-editable]").forEach((element) => {
+		if (!(element instanceof HTMLElement) || "editable" in element) {
+			return;
+		}
+
+		if (!element.dataset.editable || element.dataset.cloudcannonIgnore) {
+			return;
+		}
+
+		const Editable = editableMap[element.dataset.editable];
+		if (!Editable) {
+			const error = document.createElement("editable-region-error-card");
+			error.setAttribute("heading", "Failed to render editable region");
+			error.setAttribute(
+				"message",
+				`Unrecognized editable type: "${element.dataset.editable}". The supported types are: ${Object.keys(editableMap).join(", ")}`,
+			);
+			element.replaceWith(error);
+			return;
+		}
+
+		const editable = new Editable(element);
+
+		editable.connect();
+	});
+};

package/integrations/astro/astro-integration.mjs

@@ -0,0 +1,110 @@
+import { dirname, join } from "node:path";
+
+const SUPPORTED_VIRTUAL_MODULES = [
+	"actions",
+	"assets",
+	"content",
+	"i18n",
+	"middleware",
+	"transitions",
+];
+
+/**
+ * @return {import("astro").AstroIntegration}
+ */
+export default () => {
+	/** @type {import("astro").AstroConfig} */
+	let astroConfig;
+
+	return {
+		name: "editable-regions",
+		hooks: {
+			"astro:config:setup": ({ config, updateConfig }) => {
+				updateConfig({
+					vite: {
+						define: {
+							ENV_CLIENT: false,
+						},
+					},
+				});
+				astroConfig = config;
+			},
+			"astro:build:setup": async ({ target, vite }) => {
+				if (target === "client") {
+					vite.define ??= {};
+					vite.define.ENV_CLIENT = true;
+
+					vite.plugins?.unshift({
+						name: "vite-plugin-editable-regions",
+						enforce: "pre",
+
+						resolveId(id) {
+							if (id.startsWith("astro:")) {
+								const type = id
+									.replace("astro:", "")
+									.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;
+								} else {
+									dir = dirname(import.meta.url);
+								}
+
+								const path = join(dir, "modules", `${type}.js`).replace(
+									"file:",
+									"",
+								);
+
+								return path;
+							}
+						},
+
+						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;
+										}
+
+										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;
+							}
+						},
+					});
+				}
+			},
+		},
+	};
+};

package/integrations/astro/index.mjs

@@ -0,0 +1,193 @@
+import {
+	renderSlotToString,
+	renderToString,
+} from "astro/runtime/server/index.js";
+import { addEditableComponentRenderer } from "../../helpers/cloudcannon";
+
+/**
+ * Queue of React components waiting to be rendered
+ * @type {((node: Element) => void)[]}
+ */
+const renderRoots = [];
+
+const renderers = [
+	{
+		name: "dynamic-tags",
+		ssr: {
+			/**
+			 * Checks if the component is a string (HTML tag name).
+			 * @param {any} Component - The component to check
+			 * @returns {boolean} True if component is a string tag name
+			 */
+			check: (Component) => {
+				return typeof Component === "string";
+			},
+			/**
+			 * Renders a dynamic HTML tag with props and slots.
+			 * @param {string} Component - The HTML tag name
+			 * @param {Record<string, any>} props - Props to render as attributes
+			 * @param {Record<string, string>} slots - Slot content
+			 * @returns {Promise<string>} The rendered HTML string
+			 */
+			renderToStaticMarkup: async (Component, props, slots) => {
+				const propsString = Object.entries(props)
+					.map(([key, value]) => `${key}="${value}"`)
+					.join(" ");
+				return `<${Component} ${propsString}>${
+					slots.default ?? ""
+				}</${Component}>`;
+			},
+		},
+	},
+];
+
+/**
+ * @param {*} renderer
+ */
+export const addFrameworkRenderer = (renderer) => {
+	renderers.push(renderer);
+};
+
+/**
+ * @param {(node: Element) => void} renderFunction
+ */
+export const queueForClientSideRender = (renderFunction) => {
+	renderRoots.push(renderFunction);
+	return renderRoots.length - 1;
+};
+
+/**
+ * Registers an Astro component with the CloudCannon component system.
+ * Creates a wrapper that handles Astro SSR rendering with React hydration support.
+ *
+ * @param {string} key - Unique identifier for the component
+ * @param {unknown} component - The Astro component function to register
+ * @returns {void}
+ */
+export const registerAstroComponent = (key, component) => {
+	/**
+	 * Wrapper function that renders the Astro component with SSR and client-side hydration.
+	 *
+	 * @param {any} props - Props to pass to the Astro component
+	 * @returns {Promise<HTMLElement>} The rendered component as an HTMLElement
+	 */
+	const wrappedComponent = async (props) => {
+		/**
+		 * Encryption key for Astro server islands
+		 * @type {CryptoKey | undefined}
+		 */
+		let encryptionKey;
+		try {
+			encryptionKey = await window.crypto.subtle.generateKey(
+				{
+					name: "AES-GCM",
+					length: 256,
+				},
+				true,
+				["encrypt", "decrypt"],
+			);
+		} catch (err) {
+			console.warn(
+				"[CloudCannon] Could not generate a key for Astro component. This may cause issues with Astro components that use server-islands",
+			);
+		}
+
+		const SSRResult = {
+			styles: new Set(),
+			scripts: new Set(),
+			links: new Set(),
+			propagation: new Map(),
+			propagators: new Map(),
+			inlinedScripts: new Map(),
+			serverIslandNameMap: { get: () => "EditableRegions" },
+			key: encryptionKey,
+			base: "/",
+			extraHead: [],
+			compressHTML: false,
+			partial: false,
+			shouldInjectCspMetaTags: false,
+			componentMetadata: new Map(),
+			renderers,
+			_metadata: {
+				renderers,
+				hasHydrationScript: false,
+				hasRenderedHead: true,
+				hasRenderedServerIslandRuntime: true,
+				hasDirectives: new Set(),
+				propagators: new Set(),
+				rendererSpecificHydrationScripts: new Set(),
+				renderedScripts: new Set(),
+				extraHead: [],
+				extraStyleHashes: [],
+				extraScriptHashes: [],
+			},
+			clientDirectives: new Map([
+				["load", "editable-region-placeholder"],
+				["idle", "editable-region-placeholder"],
+				["visible", "editable-region-placeholder"],
+				["media", "editable-region-placeholder"],
+			]),
+			slots: null,
+			props,
+			resolve: () => "editable-region-placeholder",
+			/**
+			 * @param {*} astroGlobal
+			 * @param {*} props
+			 * @param {*} slots
+			 */
+			createAstro(astroGlobal, props, slots) {
+				const astroSlots = {
+					/**
+					 * @param {string} name
+					 * @returns boolean
+					 */
+					has: (name) => {
+						if (!slots) return false;
+						return Boolean(slots[name]);
+					},
+					/**
+					 * @param {string} name
+					 * @returns string
+					 */
+					render: (name) => {
+						return renderSlotToString(SSRResult, slots[name]);
+					},
+				};
+				return {
+					__proto__: astroGlobal,
+					props,
+					slots: astroSlots,
+					request: new Request(window.location.href),
+				};
+			},
+		};
+		// Render the Astro component to HTML string
+		const result = await renderToString(SSRResult, component, props, null);
+		const doc = document.implementation.createHTMLDocument();
+		doc.body.innerHTML = result;
+
+		doc.querySelectorAll("[data-editable-region-csr-id]").forEach((node) => {
+			const csrId = Number(node.getAttribute("data-editable-region-csr-id"));
+			renderRoots[csrId]?.(node);
+		});
+
+		// Clear the React roots queue
+		renderRoots.length = 0;
+
+		doc.querySelectorAll("link, [data-island-id]").forEach((node) => {
+			node.remove();
+		});
+
+		doc.querySelectorAll("astro-island").forEach((node) => {
+			for (const child of node.children) {
+				node.before(child);
+			}
+			node.remove();
+		});
+
+		return doc.body;
+	};
+
+	// Register the wrapped component in the global registry
+	addEditableComponentRenderer(key, wrappedComponent);
+};

package/integrations/astro/modules/actions.js

@@ -0,0 +1,74 @@
+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/assets.js

@@ -0,0 +1,38 @@
+import ImageInternal from "./image.astro";
+import PictureInternal from "./picture.astro";
+
+export const Image = ImageInternal;
+export const Picture = PictureInternal;
+
+/**
+ * @param {{src: any }} options
+ * @returns
+ */
+export const getImage = async (options) => {
+	const resolvedSrc =
+		typeof options.src === "object" && "then" in options.src
+			? ((await options.src).default ?? (await options.src))
+			: options.src;
+	return {
+		rawOptions: {
+			src: {
+				src: resolvedSrc,
+			},
+		},
+		options: {
+			src: {
+				src: resolvedSrc,
+			},
+		},
+		src: resolvedSrc,
+		srcSet: { values: [] },
+		attributes: {},
+	};
+};
+
+export const inferRemoteSize = async () => {
+	console.warn(
+		"[CloudCannon] inferRemoteSize is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return {};
+};

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

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

package/integrations/astro/modules/content.js

@@ -0,0 +1,116 @@
+import { CloudCannon } from "../../../helpers/cloudcannon";
+
+/**
+ * @param {string} collectionKey
+ * @param {(value: any) => boolean} [filter]
+ * @returns {Promise<Array<any>>}
+ */
+export const getCollection = async (collectionKey, filter) => {
+	const collection = CloudCannon.collection(collectionKey);
+	let files = await collection.items();
+	if (files.length === 0) {
+		const allFiles = await CloudCannon.files();
+		files = allFiles.filter((file) =>
+			file.path.startsWith(`/src/content/${collectionKey}/`),
+		);
+	}
+
+	const promises = files.map(async (file) => {
+		const data = await file.data.get();
+		let id = file.path.replace(`/src/content/${collectionKey}/`, "");
+		let slug = id.replace(/\.[^.]*$/, "");
+		if (!id.match(/\.md(x|oc)?$/)) {
+			id = slug;
+		}
+		if (data && "slug" in data) {
+			slug = data.slug;
+		}
+
+		return {
+			collection: collectionKey,
+			id: id,
+			data: data,
+			slug: slug,
+			body: await file.get(),
+		};
+	});
+
+	const result = await Promise.all(promises);
+
+	return filter ? result.filter(filter) : result;
+};
+
+/**
+ *
+ * @param {string | {collection: string, slug?: string, id?: string}} objOrString
+ * @param {string} [maybeString]
+ * @returns
+ */
+export const getEntry = async (objOrString, maybeString) => {
+	if (typeof objOrString === "object") {
+		const {
+			collection: collectionKey,
+			slug: entrySlug,
+			id: entryId,
+		} = objOrString;
+		const collection = await getCollection(collectionKey);
+		if (entryId) {
+			return collection.find(({ id }) => id === entryId);
+		}
+		if (entrySlug) {
+			return collection.find(({ slug }) => slug === entrySlug);
+		}
+		return console.warn(
+			"[CloudCannon] Failed to load entries, invalid arguments: ",
+			[objOrString, maybeString],
+		);
+	}
+
+	if (typeof objOrString === "string" && typeof maybeString === "string") {
+		const [collectionKey, entryKey] = [objOrString, maybeString];
+		const collection = await getCollection(collectionKey);
+
+		return collection.find(({ id, slug }) => entryKey === (slug ?? id));
+	}
+
+	return console.warn(
+		"[CloudCannon] Failed to load entries, invalid arguments: ",
+		[objOrString, maybeString],
+	);
+};
+
+/**
+ * @param {{collection: string, slug?: string, id?: string}[]} entries
+ * @returns
+ */
+export const getEntries = (entries) => {
+	return Promise.all(entries.map((entry) => getEntry(entry)));
+};
+
+/**
+ * @param {string} collection
+ * @param {string} slug
+ * @returns
+ */
+export const getEntryBySlug = (collection, slug) => {
+	return getEntry({ collection, slug });
+};
+
+/**
+ * @param {any} entry
+ * @returns
+ */
+export const render = async (entry) => ({
+	Content: () => entry?.body ?? "Content is not available when live editing",
+	headings: [],
+	remarkPluginFrontmatter: {},
+});
+
+export const defineCollection = () =>
+	console.warn(
+		"[CloudCannon] defineCollection is not supported in an editable component. Make sure you're not importing your config in a component file by mistake.",
+	);
+export const reference = () =>
+	console.warn(
+		"[CloudCannon] reference is not supported in an editable component. Make sure you're not importing your config in a component file by mistake.",
+	);

package/integrations/astro/modules/i18n.js

@@ -0,0 +1,76 @@
+export const getRelativeLocaleUrl = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return "";
+};
+
+export const getAbsoluteLocaleUrl = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return "";
+};
+
+export const getRelativeLocaleUrlList = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return [];
+};
+
+export const getAbsoluteLocaleUrlList = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return [];
+};
+
+export const getPathByLocale = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return "";
+};
+
+export const getLocaleByPath = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return "";
+};
+
+export const redirectToDefaultLocale = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return Promise.resolve(new Response());
+};
+
+export const redirectToFallback = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return Promise.resolve(new Response());
+};
+
+export const notFound = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return Promise.resolve(new Response());
+};
+
+export const middleware = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return () => {};
+};
+
+export const requestHasLocale = () => {
+	console.warn(
+		"[CloudCannon] i18n routing is not supported in an editable component. Please use an editing fallback instead.",
+	);
+	return false;
+};