@cloudcannon/editable-regions 0.0.15 → 0.0.17

package/integrations/astro/react-renderer.mjs

@@ -10,10 +10,25 @@ addFrameworkRenderer({
 	clientEntrypoint: "@astrojs/react/client.js",
 	ssr: {
 		/**
-		 * Always returns true to handle all remaining components as React.
-		 * @returns {boolean} Always true
+		 * @param {any} Component
+		 * @returns {boolean}
 		 */
-		check: () => true,
+		check: (Component) => {
+			if (typeof Component !== "function") return false;
+
+			// React class components have render on the prototype
+			if (typeof Component.prototype?.render === "function") return true;
+
+			// React functional components return vnodes with $$typeof
+			try {
+				const vnode = Component({});
+				return (
+					vnode != null && typeof vnode === "object" && "$$typeof" in vnode
+				);
+			} catch {
+				return false;
+			}
+		},
 		/**
 		 * Renders a React component to static markup or queues for client-side rendering.
 		 * @param {any} Component - The React component function

package/integrations/astro/svelte-renderer.mjs

@@ -0,0 +1,65 @@
+import { addFrameworkRenderer, queueForClientSideRender } from "./index.mjs";
+
+/** @type{((component: any, args: { target: HTMLElement, props: unknown }) => void) | undefined} */
+let mount;
+/** @type{() => void} */
+let flushSync;
+try {
+	({ mount, flushSync } = await import("svelte"));
+} catch {
+	// Svelte 4 — no mount export
+}
+
+addFrameworkRenderer({
+	name: "@astrojs/svelte",
+	clientEntrypoint: "@astrojs/svelte/client.js",
+	ssr: {
+		/**
+		 * @param {any} Component
+		 * @returns {boolean}
+		 */
+		check: (Component) => {
+			if (typeof Component !== "function") return false;
+
+			// Svelte 5: compiled components reference $$payload or $$renderer
+			const str = Component.toString();
+			if (
+				str.includes("$$payload") ||
+				str.includes("$$renderer") ||
+				str.includes("$$anchor")
+			) {
+				return true;
+			}
+
+			// Svelte 4: class-based components have a render static method
+			if (typeof Component.render === "function") {
+				return true;
+			}
+
+			return false;
+		},
+		/**
+		 * @param {any} Component
+		 * @param {unknown} props
+		 * @returns {Promise<{html: string}>}
+		 */
+		renderToStaticMarkup: async (Component, props) => {
+			const id = queueForClientSideRender((node) => {
+				if (mount) {
+					mount(Component, {
+						target: /** @type{any}*/ (node),
+						props,
+					});
+				} else {
+					new Component({ target: node, props });
+				}
+
+				flushSync();
+			});
+
+			return {
+				html: `<div data-editable-region-csr-id=${id}></div>`,
+			};
+		},
+	},
+});

package/integrations/svelte.mjs

@@ -0,0 +1,40 @@
+import { addEditableComponentRenderer } from "../helpers/cloudcannon.mjs";
+
+/** @type{((component: any, args: { target: HTMLElement, props: unknown }) => void) | undefined} */
+let mount;
+/** @type{() => void} */
+let flushSync;
+try {
+	({ mount, flushSync } = await import("svelte"));
+} catch {
+	// Svelte 4 — no mount export
+}
+
+/**
+ * @param {string} key
+ * @param {any} component
+ */
+export const registerSvelteComponent = (key, component) => {
+	/**
+	 * @param {unknown} props
+	 * @returns
+	 */
+	const wrappedComponent = (props) => {
+		const rootEl = document.createElement("div");
+
+		if (mount) {
+			mount(component, {
+				target: rootEl,
+				props,
+			});
+		} else {
+			new component({ target: rootEl, props });
+		}
+
+		flushSync();
+
+		return rootEl;
+	};
+
+	addEditableComponentRenderer(key, wrappedComponent);
+};

package/nodes/editable-component.ts

@@ -215,6 +215,12 @@ export default class EditableComponent extends Editable {
 				continue;
 			}
 
+			// Both children are the same subclass (node/element) but are of different types (e.g. text -> comment)
+			if (renderChild.nodeName !== targetChild.nodeName) {
+				targetChild.replaceWith(renderChild);
+				continue;
+			}
+
 			// Both existing and rendered children are nodes (i.e. some text)
 			if (
 				!(renderChild instanceof Element) &&
@@ -225,12 +231,6 @@ export default class EditableComponent extends Editable {
 				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

package/nodes/editable-source.ts

@@ -247,6 +247,12 @@ export default class EditableSource extends EditableText {
 
 	onChange(value?: string | null) {
 		this.file?.get().then((source) => {
+			if (!source) {
+				throw new Error(
+					"Source editable region tried to update a non-existent file",
+				);
+			}
+
 			value = beautifyHtml(value ?? "", {
 				indent_char: this.format.indentChar,
 				indent_size: this.format.indentSize,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"type": "module",
 	"description": "Visual Editing for the CloudCannon CMS.",
 	"keywords": [
@@ -49,25 +49,33 @@
 			"types": "./types/react.d.ts",
 			"default": "./integrations/react.mjs"
 		},
+		"./svelte": {
+			"types": "./types/svelte.d.ts",
+			"default": "./integrations/svelte.mjs"
+		},
+		"./astro-svelte-renderer": {
+			"types": "./types/astro.d.ts",
+			"default": "./integrations/astro/svelte-renderer.mjs"
+		},
 		"./liquid": "./integrations/liquid/index.mjs",
 		"./eleventy": "./integrations/eleventy.mjs",
 		"./internal/components": "./components/index.js",
 		"./internal/styles": "./styles/index.js"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.14",
-		"@cloudcannon/visual-editor-api": "0.0.15",
+		"@biomejs/biome": "2.5.1",
+		"@cloudcannon/visual-editor-api": "0.0.19",
 		"@sindresorhus/slugify": "3.0.0",
 		"@types/js-beautify": "1.14.3",
-		"@types/node": "25.6.0",
-		"@types/react": "19.2.14",
+		"@types/node": "25.9.4",
+		"@types/react": "19.2.17",
 		"@types/react-dom": "19.2.3",
-		"astro": "6.2.1",
+		"astro": "6.4.8",
 		"js-beautify": "1.15.4",
-		"liquidjs": "10.25.7",
+		"liquidjs": "10.27.1",
 		"typescript": "6.0.3"
 	},
 	"dependencies": {
-		"esbuild": "0.28.0"
+		"esbuild": "0.28.1"
 	}
 }

package/types/astro.d.ts

@@ -17,3 +17,7 @@ declare module "@cloudcannon/editable-regions/astro" {
 declare module "@cloudcannon/editable-regions/astro-react-renderer" {
 	// Side-effect only module that registers React renderer
 }
+
+declare module "@cloudcannon/editable-regions/astro-svelte-renderer" {
+	// Side-effect only module that registers Svelte renderer
+}

package/types/modules.d.ts

@@ -10,3 +10,11 @@ declare module "astro/runtime/server/index.js" {
 declare module "react-dom/server.browser" {
 	export function renderToStaticMarkup(element: any): string;
 }
+declare module "svelte" {
+	export function mount(
+		component: any,
+		args: { target: HTMLElement; props: unknown },
+	): void;
+
+	export function flushSync(): void;
+}

package/types/svelte.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="./cloudcannon.d.ts" />
+
+export function registerSvelteComponent(key: string, component: unknown): void;