@cloudcannon/editable-regions 0.0.17 → 0.0.19

package/helpers/checks.ts

@@ -1,7 +1,3 @@
-import Editable from "../nodes/editable.js";
-import EditableArrayItem from "../nodes/editable-array-item.js";
-import EditableText from "../nodes/editable-text.js";
-
 const getEditableType = (el: HTMLElement): string | undefined => {
 	if (el.tagName.startsWith("EDITABLE-")) {
 		return el.tagName.slice(9).toLowerCase();
@@ -9,24 +5,6 @@ const getEditableType = (el: HTMLElement): string | undefined => {
 	return el.dataset.editable;
 };
 
-export const hasEditable = <T extends object>(
-	el: T,
-): el is T & { editable: Editable } => {
-	return "editable" in el && el.editable instanceof Editable;
-};
-
-export const hasEditableText = <T extends object>(
-	el: T,
-): el is T & { editable: EditableText } => {
-	return "editable" in el && el.editable instanceof EditableText;
-};
-
-export const hasEditableArrayItem = <T extends object>(
-	el: T,
-): el is T & { editable: EditableArrayItem } => {
-	return "editable" in el && el.editable instanceof EditableArrayItem;
-};
-
 export const isEditableWebcomponent = (el: unknown): boolean => {
 	if (!(el instanceof HTMLElement)) {
 		return false;

package/helpers/cloudcannon.mjs

@@ -20,10 +20,7 @@ const extendedWindow = /** @type {any} */ (window);
 /** @type {CloudCannonVisualEditorAPIV1} */
 let _cloudcannon;
 
-/**
- * Promise that resolves when the CloudCannon API is loaded
- * @type {Promise<void>}
- */
+/** @type {Promise<void>} */
 export const apiLoadedPromise = new Promise((resolve) => {
 	if (extendedWindow.CloudCannonAPI) {
 		_cloudcannon = /** @type {any} */ (
@@ -47,10 +44,8 @@ export const apiLoadedPromise = new Promise((resolve) => {
 });
 
 /**
- * Add a renderer for editable components
- * @param {string} key - The component key
- * @param {ComponentRenderer} renderer - The component renderer function
- * @returns {void}
+ * @param {string} key
+ * @param {ComponentRenderer} renderer
  */
 export const addEditableComponentRenderer = (key, renderer) => {
 	extendedWindow.cc_components = extendedWindow.cc_components || {};
@@ -58,33 +53,23 @@ export const addEditableComponentRenderer = (key, renderer) => {
 };
 
 /**
- * Add a renderer for editable snippets
- * @param {string} key - The snippet key
- * @param {ComponentRenderer} renderer - The snippet renderer function
- * @returns {void}
+ * @param {string} key
+ * @param {ComponentRenderer} renderer
  */
 export const addEditableSnippetRenderer = (key, renderer) => {
 	extendedWindow.cc_snippets = extendedWindow.cc_snippets || {};
 	extendedWindow.cc_snippets[key] = renderer;
 };
 
-/**
- * Get all registered editable component renderers
- * @returns {Record<string, ComponentRenderer>}
- */
 export const getEditableComponentRenderers = () =>
 	extendedWindow.cc_components ?? {};
 
-/**
- * Get all registered editable snippet renderers
- * @returns {Record<string, ComponentRenderer>}
- */
 export const getEditableSnippetRenderers = () =>
 	extendedWindow.cc_snippets ?? {};
 
 /**
- * Realize API values by converting CloudCannon API objects to their data representations
- * @param {unknown} value - The value to realize
+ * Resolves CloudCannon API objects (collections, files, datasets) to plain data.
+ * @param {unknown} value
  * @returns {Promise<unknown>}
  */
 export const realizeAPIValue = async (value) => {

package/helpers/hydrate-editable-regions.ts

@@ -7,7 +7,8 @@ import {
 	EditableSource,
 	EditableText,
 } from "../nodes";
-import { hasEditable, isEditableWebcomponent } from "./checks";
+import { hasEditable } from "../nodes/editable.js";
+import { isEditableWebcomponent } from "./checks";
 
 const baseEditableMap: Record<string, typeof Editable | undefined> = {
 	array: EditableArray,

package/integrations/astro/astro-integration.mjs

@@ -4,10 +4,7 @@ import { fileURLToPath } from "node:url";
 /** @type{string[]} */
 const SUPPORTED_VIRTUAL_MODULES = ["assets", "content"];
 
-/**
- * @param {*} original
- * @returns
- */
+/** @param {*} original */
 function wrapTransform(original) {
 	/**
 	 * @this {*}

package/integrations/astro/index.mjs

@@ -4,30 +4,21 @@ import {
 } from "astro/runtime/server/index.js";
 import { addEditableComponentRenderer } from "../../helpers/cloudcannon.mjs";
 
-/**
- * Queue of React components waiting to be rendered
- * @type {((node: Element) => void)[]}
- */
+/** @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
-			 */
+			/** @param {any} Component */
 			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
+			 * @param {string} Component - HTML tag name
+			 * @param {Record<string, any>} props
+			 * @param {Record<string, string>} slots
 			 */
 			renderToStaticMarkup: async (Component, props, slots) => {
 				const propsString = Object.entries(props)
@@ -57,25 +48,19 @@ export const queueForClientSideRender = (renderFunction) => {
 };
 
 /**
- * Registers an Astro component with the CloudCannon component system.
- * Creates a wrapper that handles Astro SSR rendering with React hydration support.
+ * Registers an Astro component, wrapping it to render via Astro SSR with
+ * React hydration support.
  *
- * @param {string} key - Unique identifier for the component
- * @param {unknown} component - The Astro component function to register
- * @returns {void}
+ * @param {string} key
+ * @param {unknown} component
  */
 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
+	 * @param {any} props
+	 * @returns {Promise<HTMLElement>}
 	 */
 	const wrappedComponent = async (props) => {
-		/**
-		 * Encryption key for Astro server islands
-		 * @type {CryptoKey | undefined}
-		 */
+		/** @type {CryptoKey | undefined} Encryption key for Astro server islands */
 		let encryptionKey;
 		try {
 			encryptionKey = await window.crypto.subtle.generateKey(
@@ -130,9 +115,7 @@ export const registerAstroComponent = (key, component) => {
 			slots: {},
 			props,
 			resolve: () => "editable-region-placeholder",
-			/**
-			 * @param {*} args
-			 */
+			/** @param {*} args */
 			createAstro(...args) {
 				if (args.length < 2 || args.length > 3) {
 					console.warn(
@@ -150,18 +133,12 @@ export const registerAstroComponent = (key, component) => {
 				}
 
 				const astroSlots = {
-					/**
-					 * @param {string} name
-					 * @returns boolean
-					 */
+					/** @param {string} name */
 					has: (name) => {
 						if (!componentSlots) return false;
 						return Boolean(componentSlots[name]);
 					},
-					/**
-					 * @param {string} name
-					 * @returns string
-					 */
+					/** @param {string} name */
 					render: (name) => {
 						return renderSlotToString(SSRResult, componentSlots[name]);
 					},
@@ -174,7 +151,6 @@ export const registerAstroComponent = (key, component) => {
 				};
 			},
 		};
-		// Render the Astro component to HTML string
 		const result = await renderToString(SSRResult, component, props, {});
 		const doc = document.implementation.createHTMLDocument();
 		doc.body.innerHTML = result;
@@ -184,7 +160,6 @@ export const registerAstroComponent = (key, component) => {
 			renderRoots[csrId]?.(node);
 		});
 
-		// Clear the React roots queue
 		renderRoots.length = 0;
 
 		doc.querySelectorAll("link, [data-island-id]").forEach((node) => {
@@ -201,6 +176,5 @@ export const registerAstroComponent = (key, component) => {
 		return doc.body;
 	};
 
-	// Register the wrapped component in the global registry
 	addEditableComponentRenderer(key, wrappedComponent);
 };

package/integrations/astro/modules/assets.js

@@ -4,10 +4,7 @@ import PictureInternal from "./picture.astro";
 export const Image = ImageInternal;
 export const Picture = PictureInternal;
 
-/**
- * @param {{src: any }} options
- * @returns
- */
+/** @param {{src: any }} options */
 export const getImage = async (options) => {
 	const resolvedSrc =
 		typeof options.src === "object" && "then" in options.src

package/integrations/astro/modules/content.js

@@ -47,10 +47,8 @@ export const getCollection = async (collectionKey, filter) => {
 };
 
 /**
- *
  * @param {string | {collection: string, slug?: string, id?: string}} objOrString
  * @param {string} [maybeString]
- * @returns
  */
 export const getEntry = async (objOrString, maybeString) => {
 	if (typeof objOrString === "object") {
@@ -85,10 +83,7 @@ export const getEntry = async (objOrString, maybeString) => {
 	);
 };
 
-/**
- * @param {{collection: string, slug?: string, id?: string}[]} entries
- * @returns
- */
+/** @param {{collection: string, slug?: string, id?: string}[]} entries */
 export const getEntries = (entries) => {
 	return Promise.all(entries.map((entry) => getEntry(entry)));
 };
@@ -96,16 +91,12 @@ export const getEntries = (entries) => {
 /**
  * @param {string} collection
  * @param {string} slug
- * @returns
  */
 export const getEntryBySlug = (collection, slug) => {
 	return getEntry({ collection, slug });
 };
 
-/**
- * @param {any} entry
- * @returns
- */
+/** @param {any} entry */
 export const render = async (entry) => ({
 	Content: () => entry?.body ?? "Content is not available when live editing",
 	headings: [],

package/integrations/astro/react-renderer.mjs

@@ -1,55 +1,129 @@
-import { createElement } from "react";
+/** biome-ignore-all lint/suspicious/noPrototypeBuiltins: Matches the behaviour of @astrojs/react */
+import ssr from "@astrojs/react/server.js";
+import * as React from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { renderToStaticMarkup } from "react-dom/server.browser";
-
 import { addFrameworkRenderer, queueForClientSideRender } from "./index.mjs";
 
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+const slotName = (str) =>
+	str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const reactTypeof = Symbol.for("react.element");
+const reactTransitionalTypeof = Symbol.for("react.transitional.element");
+
 addFrameworkRenderer({
 	name: "@astrojs/react",
 	clientEntrypoint: "@astrojs/react/client.js",
 	ssr: {
 		/**
 		 * @param {any} Component
-		 * @returns {boolean}
+		 * @param {any} props
+		 * @param {Record<string, string>} children
+		 * @returns {Promise<boolean>}
 		 */
-		check: (Component) => {
+		check: async (Component, props, children) => {
+			if (typeof Component === "object") {
+				return !!Component.$$typeof
+					?.toString()
+					.slice("Symbol(".length)
+					.startsWith("react");
+			}
 			if (typeof Component !== "function") return false;
+			if (Component.name === "QwikComponent") return false;
 
-			// React class components have render on the prototype
-			if (typeof Component.prototype?.render === "function") return true;
+			if (
+				typeof Component === "function" &&
+				Component.$$typeof === Symbol.for("react.forward_ref")
+			)
+				return false;
 
-			// React functional components return vnodes with $$typeof
-			try {
-				const vnode = Component({});
+			if (
+				Component.prototype != null &&
+				typeof Component.prototype.render === "function"
+			) {
 				return (
-					vnode != null && typeof vnode === "object" && "$$typeof" in vnode
+					React.Component.isPrototypeOf(Component) ||
+					React.PureComponent.isPrototypeOf(Component)
 				);
-			} catch {
-				return false;
 			}
+
+			let isReactComponent = false;
+			/** @param  {...any} args */
+			function Tester(...args) {
+				try {
+					const vnode = Component(...args);
+					if (
+						vnode &&
+						(vnode.$$typeof === reactTypeof ||
+							vnode.$$typeof === reactTransitionalTypeof)
+					) {
+						isReactComponent = true;
+					}
+				} catch {}
+
+				return React.createElement("div");
+			}
+
+			await ssr.renderToStaticMarkup.call(this, Tester, props, children);
+
+			return isReactComponent;
 		},
 		/**
-		 * Renders a React component to static markup or queues for client-side rendering.
-		 * @param {any} Component - The React component function
-		 * @param {any} props - Props to pass to the component
-		 * @returns {Promise<{ html: string }>} Object containing the rendered HTML
+		 * Renders to static markup, falling back to a client-side render queue.
+		 * @param {any} Component
+		 * @param {any} props
+		 * @param {Record<string, string>} inputSlotted
+		 * @param {any} metadata
+		 * @returns {Promise<{ html: string }>}
 		 */
-		renderToStaticMarkup: async (Component, props) => {
-			try {
-				const reactNode = Component(props);
-				return { html: renderToStaticMarkup(reactNode) };
-			} catch (_err) {
+		renderToStaticMarkup: async (Component, props, inputSlotted, metadata) => {
+			if (metadata?.hydrate) {
+				const { default: children, ...slotted } = inputSlotted;
+				/** @type{Record<string, React.ReactNode>} */
+				const slots = {};
+				for (const [key, value] of Object.entries(slotted)) {
+					const name = slotName(key);
+					slots[name] = React.createElement("astro-static-slot", {
+						suppressHydrationWarning: true,
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: Intentionally rendering static html
+						dangerouslySetInnerHTML: { __html: value },
+					});
+				}
+
+				const newProps = {
+					...props,
+					...slots,
+				};
+				const newChildren = children ?? props.children;
+				if (newChildren != null) {
+					newProps.children = React.createElement("astro-static-slot", {
+						suppressHydrationWarning: true,
+						// biome-ignore lint/security/noDangerouslySetInnerHtml: Intentionally rendering static html
+						dangerouslySetInnerHTML: { __html: newChildren },
+					});
+				}
+
 				const id = queueForClientSideRender((node) => {
-					const reactNode = createElement(Component, props, null);
+					const reactNode = React.createElement(Component, newProps);
 					const root = createRoot(node);
 					flushSync(() => root.render(reactNode));
 				});
-				// Queue for client-side rendering if SSR fails
+
 				return {
 					html: `<div data-editable-region-csr-id=${id}></div>`,
 				};
 			}
+
+			return ssr.renderToStaticMarkup.call(
+				this,
+				Component,
+				props,
+				inputSlotted,
+				{ ...metadata, astroStaticSlot: true, hydrate: false },
+			);
 		},
 	},
 });

package/integrations/astro/svelte-renderer.mjs

@@ -1,3 +1,4 @@
+import { createRawSnippet } from "svelte";
 import { addFrameworkRenderer, queueForClientSideRender } from "./index.mjs";
 
 /** @type{((component: any, args: { target: HTMLElement, props: unknown }) => void) | undefined} */
@@ -39,27 +40,83 @@ addFrameworkRenderer({
 			return false;
 		},
 		/**
+		 * Renders to static markup, falling back to a client-side render queue.
 		 * @param {any} Component
-		 * @param {unknown} props
-		 * @returns {Promise<{html: string}>}
+		 * @param {any} props
+		 * @param {Record<string, string>} slots
+		 * @param {any} metadata
+		 * @returns {Promise<{ html: string }>}
 		 */
-		renderToStaticMarkup: async (Component, props) => {
-			const id = queueForClientSideRender((node) => {
-				if (mount) {
-					mount(Component, {
-						target: /** @type{any}*/ (node),
-						props,
-					});
+		renderToStaticMarkup: async (Component, props, slots, metadata) => {
+			/** @type{Record<string, any>} */
+			const renderProps = {};
+			/** @type{Record<string, any> | undefined} */
+			let $$slots;
+			/** @type{import("svelte").Snippet | undefined} */
+			let children;
+			for (const [key, value] of Object.entries(slots)) {
+				$$slots ??= {};
+				if (key === "default") {
+					$$slots.default = true;
+					children = createRawSnippet(() => ({
+						render: () => value,
+					}));
 				} else {
-					new Component({ target: node, props });
+					$$slots[key] = createRawSnippet(() => ({
+						render: () => value,
+					}));
 				}
+				const slotName = key === "default" ? "children" : key;
+				renderProps[slotName] = createRawSnippet(() => ({
+					render: () => value,
+				}));
+			}
 
-				flushSync();
-			});
-
-			return {
-				html: `<div data-editable-region-csr-id=${id}></div>`,
+			const newProps = {
+				...props,
+				children,
+				$$slots,
+				...renderProps,
 			};
+
+			if (metadata?.hydrate) {
+				const id = queueForClientSideRender((node) => {
+					if (mount) {
+						mount(Component, {
+							target: /** @type{any}*/ (node),
+							props: newProps,
+						});
+					} else {
+						new Component({
+							target: node,
+							props: newProps,
+						});
+					}
+
+					flushSync();
+				});
+
+				return {
+					html: `<div data-editable-region-csr-id=${id}></div>`,
+				};
+			}
+
+			const doc = document.implementation.createHTMLDocument();
+			if (mount) {
+				mount(Component, {
+					target: /** @type{any}*/ (doc.body),
+					props: newProps,
+				});
+			} else {
+				new Component({
+					target: doc.body,
+					props: newProps,
+				});
+			}
+
+			flushSync();
+
+			return { html: doc.body.innerHTML };
 		},
 	},
 });

package/integrations/astro/vue-renderer.mjs

@@ -0,0 +1,61 @@
+import { createApp, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+
+import { addFrameworkRenderer, queueForClientSideRender } from "./index.mjs";
+
+addFrameworkRenderer({
+	name: "@astrojs/vue",
+	clientEntrypoint: "@astrojs/vue/client.js",
+	ssr: {
+		/**
+		 * Checks if the component is a Vue component (object with Vue-specific markers).
+		 * @param {any} Component - The component to check
+		 * @returns {boolean} True if component looks like a Vue component
+		 */
+		check: (Component) => {
+			return (
+				typeof Component === "object" &&
+				Component !== null &&
+				("render" in Component ||
+					"setup" in Component ||
+					"template" in Component ||
+					"ssrRender" in Component ||
+					"__ssrInlineRender" in Component ||
+					"__file" in Component)
+			);
+		},
+
+		/**
+		 * Renders to static markup, falling back to a client-side render queue.
+		 * @param {any} Component
+		 * @param {any} inputProps
+		 * @param {Record<string, string>} slotted
+		 * @param {any} metadata
+		 * @returns {Promise<{ html: string }>}
+		 */
+		renderToStaticMarkup: async (Component, inputProps, slotted, metadata) => {
+			/** @type{Record<string, Function>} */
+			const slots = {};
+			const props = { ...inputProps };
+			delete props.slot;
+			for (const [key, value] of Object.entries(slotted)) {
+				slots[key] = () => h("astro-static-slot", { innerHTML: value });
+			}
+
+			if (metadata?.hydrate) {
+				const id = queueForClientSideRender((node) => {
+					const app = createApp({ render: () => h(Component, props, slots) });
+					app.mount(node);
+				});
+
+				return {
+					html: `<div data-editable-region-csr-id=${id}></div>`,
+				};
+			}
+
+			const app = createApp({ render: () => h(Component, props, slots) });
+			const html = await renderToString(app);
+			return { html };
+		},
+	},
+});