@cloudcannon/editable-regions 0.0.14 → 0.0.16

package/helpers/cloudcannon.d.mts

@@ -9,12 +9,12 @@ export function getEditableComponentRenderers(): Record<string, ComponentRendere
 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 CloudCannonVisualEditorWindow = import("@cloudcannon/visual-editor-api").CloudCannonVisualEditorWindow;
+export type CloudCannonVisualEditorAPIV1 = import("@cloudcannon/visual-editor-api").CloudCannonVisualEditorAPIV1;
 export type ComponentRenderer = (props: any) => HTMLElement | Promise<HTMLElement>;
-export type ExtendedWindow = CloudCannonEditorWindow & {
+export type ExtendedWindow = CloudCannonVisualEditorWindow & {
     cc_components?: Record<string, ComponentRenderer>;
     cc_snippets?: Record<string, ComponentRenderer>;
 };
-/** @type {CloudCannonJavaScriptV1API} */
-declare let _cloudcannon: CloudCannonJavaScriptV1API;
+/** @type {CloudCannonVisualEditorAPIV1} */
+declare let _cloudcannon: CloudCannonVisualEditorAPIV1;

package/helpers/cloudcannon.mjs

@@ -1,6 +1,6 @@
 /**
- * @typedef {import("@cloudcannon/javascript-api").CloudCannonEditorWindow} CloudCannonEditorWindow
- * @typedef {import("@cloudcannon/javascript-api").CloudCannonJavaScriptV1API} CloudCannonJavaScriptV1API
+ * @typedef {import("@cloudcannon/visual-editor-api").CloudCannonVisualEditorWindow} CloudCannonVisualEditorWindow
+ * @typedef {import("@cloudcannon/visual-editor-api").CloudCannonVisualEditorAPIV1} CloudCannonVisualEditorAPIV1
  */
 
 /**
@@ -8,7 +8,7 @@
  */
 
 /**
- * @typedef {CloudCannonEditorWindow & {
+ * @typedef {CloudCannonVisualEditorWindow & {
  *   cc_components?: Record<string, ComponentRenderer>;
  *   cc_snippets?: Record<string, ComponentRenderer>;
  * }} ExtendedWindow
@@ -17,7 +17,7 @@
 /** @type {ExtendedWindow} */
 const extendedWindow = /** @type {any} */ (window);
 
-/** @type {CloudCannonJavaScriptV1API} */
+/** @type {CloudCannonVisualEditorAPIV1} */
 let _cloudcannon;
 
 /**

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-array.ts

@@ -1,8 +1,8 @@
 import type {
-	CloudCannonJavaScriptV1APICollection,
-	CloudCannonJavaScriptV1APIDataset,
-	CloudCannonJavaScriptV1APIFile,
-} from "@cloudcannon/javascript-api";
+	CloudCannonVisualEditorAPIV1Collection,
+	CloudCannonVisualEditorAPIV1Dataset,
+	CloudCannonVisualEditorAPIV1File,
+} from "@cloudcannon/visual-editor-api";
 import type EditableArrayItemComponent from "../components/editable-array-item-component.js";
 import type EditableRegionButton from "../components/ui/editable-region-button.js";
 import { isEditableElement } from "../helpers/checks.js";
@@ -27,9 +27,9 @@ function isArrayDirection(value: unknown): value is ArrayDirection {
 export default class EditableArray extends Editable {
 	arrayDirection?: ArrayDirection;
 	value:
-		| CloudCannonJavaScriptV1APICollection
-		| CloudCannonJavaScriptV1APIDataset
-		| CloudCannonJavaScriptV1APIFile
+		| CloudCannonVisualEditorAPIV1Collection
+		| CloudCannonVisualEditorAPIV1Dataset
+		| CloudCannonVisualEditorAPIV1File
 		| unknown[]
 		| null
 		| undefined = undefined;
@@ -47,7 +47,7 @@ export default class EditableArray extends Editable {
 		const __base_context = {
 			...this.contextBase,
 		};
-		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
+		let value: unknown[] | CloudCannonVisualEditorAPIV1File[];
 		if (CloudCannon.isAPICollection(this.value)) {
 			value = await this.value.items();
 		} else if (CloudCannon.isAPIDataset(this.value)) {
@@ -169,7 +169,7 @@ export default class EditableArray extends Editable {
 	}
 
 	private async _update(partialSubtree?: ChildNode | null): Promise<void> {
-		let value: unknown[] | CloudCannonJavaScriptV1APIFile[];
+		let value: unknown[] | CloudCannonVisualEditorAPIV1File[];
 		const __base_context = {
 			...this.contextBase,
 		};

package/nodes/editable-source.ts

@@ -1,4 +1,4 @@
-import type { CloudCannonJavaScriptV1APIFile } from "@cloudcannon/javascript-api";
+import type { CloudCannonVisualEditorAPIV1File } from "@cloudcannon/visual-editor-api";
 import { html as beautifyHtml } from "js-beautify";
 import { CloudCannon } from "../helpers/cloudcannon.mjs";
 import EditableText from "./editable-text.js";
@@ -25,7 +25,7 @@ const HTML_VOID_ELEMENT: Record<string, boolean> = {
 };
 
 export default class EditableSource extends EditableText {
-	file?: CloudCannonJavaScriptV1APIFile;
+	file?: CloudCannonVisualEditorAPIV1File;
 	format = {
 		leading: "",
 		trailing: "",
@@ -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/nodes/editable.ts

@@ -1,8 +1,8 @@
 import type {
-	CloudCannonJavaScriptV1APICollection,
-	CloudCannonJavaScriptV1APIDataset,
-	CloudCannonJavaScriptV1APIFile,
-} from "@cloudcannon/javascript-api";
+	CloudCannonVisualEditorAPIV1Collection,
+	CloudCannonVisualEditorAPIV1Dataset,
+	CloudCannonVisualEditorAPIV1File,
+} from "@cloudcannon/visual-editor-api";
 import { hasEditable } from "../helpers/checks";
 import { apiLoadedPromise, CloudCannon } from "../helpers/cloudcannon.mjs";
 
@@ -22,9 +22,9 @@ export interface EditableContext {
 	fullPath?: string;
 	filePath?: string;
 	isContent?: boolean;
-	file?: CloudCannonJavaScriptV1APIFile;
-	collection?: CloudCannonJavaScriptV1APICollection;
-	dataset?: CloudCannonJavaScriptV1APIDataset;
+	file?: CloudCannonVisualEditorAPIV1File;
+	collection?: CloudCannonVisualEditorAPIV1Collection;
+	dataset?: CloudCannonVisualEditorAPIV1Dataset;
 }
 
 export interface DOMListener {
@@ -35,9 +35,9 @@ export interface DOMListener {
 export interface APIListener {
 	fn: (e: any) => void;
 	obj:
-		| CloudCannonJavaScriptV1APIFile
-		| CloudCannonJavaScriptV1APICollection
-		| CloudCannonJavaScriptV1APIDataset;
+		| CloudCannonVisualEditorAPIV1File
+		| CloudCannonVisualEditorAPIV1Collection
+		| CloudCannonVisualEditorAPIV1Dataset;
 }
 
 export default class Editable {
@@ -598,7 +598,7 @@ export default class Editable {
 			options.source,
 		);
 
-		let filePromise: Promise<CloudCannonJavaScriptV1APIFile | undefined>;
+		let filePromise: Promise<CloudCannonVisualEditorAPIV1File | undefined>;
 		if (!file) {
 			if (collection && source) {
 				const parts = source.split(".");
@@ -734,9 +734,9 @@ export default class Editable {
 	}
 
 	parseSource(source?: string) {
-		let collection: CloudCannonJavaScriptV1APICollection | undefined;
-		let file: CloudCannonJavaScriptV1APIFile | undefined;
-		let dataset: CloudCannonJavaScriptV1APIDataset | undefined;
+		let collection: CloudCannonVisualEditorAPIV1Collection | undefined;
+		let file: CloudCannonVisualEditorAPIV1File | undefined;
+		let dataset: CloudCannonVisualEditorAPIV1Dataset | undefined;
 		let absolute = false;
 		let currentFile = false;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.14",
+	"version": "0.0.16",
 	"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.10",
-		"@cloudcannon/javascript-api": "0.0.14",
+		"@biomejs/biome": "2.5.0",
+		"@cloudcannon/visual-editor-api": "0.0.18",
 		"@sindresorhus/slugify": "3.0.0",
 		"@types/js-beautify": "1.14.3",
-		"@types/node": "25.5.0",
-		"@types/react": "19.2.14",
+		"@types/node": "25.9.4",
+		"@types/react": "19.2.17",
 		"@types/react-dom": "19.2.3",
-		"astro": "6.1.2",
+		"astro": "6.4.8",
 		"js-beautify": "1.15.4",
-		"liquidjs": "10.25.5",
-		"typescript": "6.0.2"
+		"liquidjs": "10.27.0",
+		"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/cloudcannon.d.ts

@@ -3,9 +3,9 @@ export {};
 declare global {
 	var ENV_CLIENT: boolean;
 	var inEditorMode: boolean;
-	var CloudCannonAPI: CloudCannonJavascriptApiRouter | undefined;
+	var CloudCannonAPI: CloudCannonVisualEditorAPIRouter | undefined;
 	var CloudCannon:
-		| CloudCannonJavaScriptV0API
-		| CloudCannonJavaScriptV1API
+		| CloudCannonVisualEditorAPIV0
+		| CloudCannonVisualEditorAPIV1
 		| undefined;
 }

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;