@cloudcannon/editable-regions 0.0.18 → 0.0.19

package/nodes/editable-text.ts

@@ -3,6 +3,12 @@ import Editable from "./editable.js";
 
 type EditableFocusEvent = CustomEvent<number>;
 
+export const hasEditableText = <T extends object>(
+	el: T,
+): el is T & { editable: EditableText } => {
+	return "editable" in el && el.editable instanceof EditableText;
+};
+
 export default class EditableText extends Editable {
 	editor?: any;
 	focused = false;

package/nodes/editable.ts

@@ -3,9 +3,14 @@ import type {
 	CloudCannonVisualEditorAPIV1Dataset,
 	CloudCannonVisualEditorAPIV1File,
 } from "@cloudcannon/visual-editor-api";
-import { hasEditable } from "../helpers/checks";
 import { apiLoadedPromise, CloudCannon } from "../helpers/cloudcannon.mjs";
 
+export const hasEditable = <T extends object>(
+	el: T,
+): el is T & { editable: Editable } => {
+	return "editable" in el && el.editable instanceof Editable;
+};
+
 declare global {
 	interface HTMLElement {
 		__pendingEditableListeners?: EditableListener[];

package/package.json

@@ -1,92 +1,122 @@
 {
-	"name": "@cloudcannon/editable-regions",
-	"version": "0.0.18",
-	"type": "module",
-	"description": "Visual Editing for the CloudCannon CMS.",
-	"keywords": [
-		"cloudcannon"
-	],
-	"license": "MIT",
-	"author": "CloudCannon <support@cloudcannon.com>",
-	"homepage": "https://github.com/CloudCannon/editable-regions#readme",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/CloudCannon/editable-regions.git"
-	},
-	"bugs": {
-		"url": "https://github.com/CloudCannon/editable-regions/issues",
-		"email": "support@cloudcannon.com"
-	},
-	"scripts": {
-		"typecheck": "tsc --noEmit",
-		"typecheck:watch": "tsc --noEmit --watch",
-		"lint-autofix": "biome check --fix",
-		"lint": "biome check"
-	},
-	"files": [
-		"components",
-		"helpers",
-		"integrations",
-		"nodes",
-		"styles",
-		"types"
-	],
-	"exports": {
-		"./*": null,
-		"./astro": {
-			"types": "./types/astro.d.ts",
-			"default": "./integrations/astro/index.mjs"
-		},
-		"./astro-react-renderer": {
-			"types": "./types/astro.d.ts",
-			"default": "./integrations/astro/react-renderer.mjs"
-		},
-		"./astro-integration": {
-			"types": "./types/astro.d.ts",
-			"default": "./integrations/astro/astro-integration.mjs"
-		},
-		"./react": {
-			"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": {
-			"require": {
-				"types": "./types/eleventy.d.cts",
-				"default": "./integrations/eleventy/index.cjs"
-			},
-			"import": {
-				"types": "./types/eleventy.d.ts",
-				"default": "./integrations/eleventy/index.mjs"
-			}
-		},
-		"./eleventy/browser": "./integrations/eleventy/browser/index.mjs",
-		"./internal/components": "./components/index.js",
-		"./internal/styles": "./styles/index.js"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "2.5.3",
-		"@cloudcannon/visual-editor-api": "0.0.19",
-		"@sindresorhus/slugify": "3.0.0",
-		"@types/js-beautify": "1.14.3",
-		"@types/node": "26.1.1",
-		"@types/react": "19.2.17",
-		"@types/react-dom": "19.2.3",
-		"astro": "7.0.7",
-		"js-beautify": "2.0.3",
-		"liquidjs": "10.27.2",
-		"slugify": "1.6.9",
-		"typescript": "6.0.3"
-	},
-	"dependencies": {
-		"esbuild": "0.28.1"
-	}
+  "name": "@cloudcannon/editable-regions",
+  "version": "0.0.19",
+  "type": "module",
+  "description": "Visual Editing for the CloudCannon CMS.",
+  "keywords": [
+    "cloudcannon"
+  ],
+  "license": "MIT",
+  "author": "CloudCannon <support@cloudcannon.com>",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "homepage": "https://github.com/CloudCannon/editable-regions#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CloudCannon/editable-regions.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CloudCannon/editable-regions/issues",
+    "email": "support@cloudcannon.com"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:watch": "tsc --noEmit --watch",
+    "lint-autofix": "biome check --fix",
+    "lint": "biome check",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:update-snapshots": "vitest run -u",
+    "test:build-fixtures": "npm run test:build-astro-fixture && npm run test:build-eleventy-fixture && npm run test:build-eleventy-plugin-config",
+    "test:build-astro-fixture": "npm --prefix test/unit/_fixtures/astro install --silent && npm --prefix test/unit/_fixtures/astro run build",
+    "test:build-eleventy-fixture": "npm --prefix test/unit/_fixtures/eleventy install --silent && npm --prefix test/unit/_fixtures/eleventy run build",
+    "test:build-eleventy-plugin-config": "npm --prefix test/unit/_fixtures/eleventy-plugin-config install --silent && npm --prefix test/unit/_fixtures/eleventy-plugin-config run build"
+  },
+  "files": [
+    "components",
+    "helpers",
+    "integrations",
+    "nodes",
+    "styles",
+    "types"
+  ],
+  "exports": {
+    "./*": null,
+    "./astro": {
+      "types": "./types/astro.d.ts",
+      "default": "./integrations/astro/index.mjs"
+    },
+    "./astro-react-renderer": {
+      "types": "./types/astro.d.ts",
+      "default": "./integrations/astro/react-renderer.mjs"
+    },
+    "./astro-svelte-renderer": {
+      "types": "./types/astro.d.ts",
+      "default": "./integrations/astro/svelte-renderer.mjs"
+    },
+    "./astro-vue-renderer": {
+      "types": "./types/astro.d.ts",
+      "default": "./integrations/astro/vue-renderer.mjs"
+    },
+    "./astro-integration": {
+      "types": "./types/astro.d.ts",
+      "default": "./integrations/astro/astro-integration.mjs"
+    },
+    "./react": {
+      "types": "./types/react.d.ts",
+      "default": "./integrations/react.mjs"
+    },
+    "./svelte": {
+      "types": "./types/svelte.d.ts",
+      "default": "./integrations/svelte.mjs"
+    },
+    "./vue": {
+      "types": "./types/vue.d.ts",
+      "default": "./integrations/vue.mjs"
+    },
+    "./liquid": "./integrations/liquid/index.mjs",
+    "./eleventy": {
+      "require": {
+        "types": "./types/eleventy.d.cts",
+        "default": "./integrations/eleventy/index.cjs"
+      },
+      "import": {
+        "types": "./types/eleventy.d.ts",
+        "default": "./integrations/eleventy/index.mjs"
+      }
+    },
+    "./eleventy/browser": "./integrations/eleventy/browser/index.mjs",
+    "./internal/components": "./components/index.js",
+    "./internal/styles": "./styles/index.js"
+  },
+  "devDependencies": {
+    "@astrojs/react": "6.0.1",
+    "@astrojs/svelte": "9.0.1",
+    "@astrojs/vue": "7.0.1",
+    "@biomejs/biome": "2.5.5",
+    "@cloudcannon/visual-editor-api": "0.0.19",
+    "@sindresorhus/slugify": "3.0.0",
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "@types/js-beautify": "1.14.3",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-vue": "6.0.8",
+    "astro": "7.1.4",
+    "happy-dom": "20.11.1",
+    "js-beautify": "2.0.3",
+    "liquidjs": "10.27.2",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "slugify": "1.6.9",
+    "svelte": "5.56.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10",
+    "vue": "3.5.40",
+    "vue-tsc": "3.3.8"
+  },
+  "dependencies": {
+    "esbuild": "0.28.1"
+  }
 }

package/types/astro.d.ts

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

package/types/eleventy.d.ts

@@ -17,10 +17,17 @@ export interface LiquidOptions {
 	configPath?: string;
 	/**
 	 * Extra bare module specifiers to stub out of the browser bundle, on top of
-	 * the 11ty toolchain and Node built-ins (always stubbed). Use this when the
-	 * config imports a native/Node-only package (e.g. `sharp`) that no
-	 * browser-bound helper actually calls at render time but that would
-	 * otherwise break bundling.
+	 * the 11ty toolchain and Node built-ins (always stubbed). Two uses:
+	 *
+	 * - a native/Node-only package (e.g. `sharp`) that would otherwise break
+	 *   bundling;
+	 * - a Node-only package the config *calls* at config time, such as a
+	 *   plugin factory in `addPlugin(pluginFoo({ … }))`. The argument is
+	 *   evaluated before `addPlugin` is reached, so stubbing the module is the
+	 *   only way to stop it aborting the auto-mirror replay.
+	 *
+	 * A stubbed module called during the replay is skipped with a warning; the
+	 * same call from a rendered helper still throws.
 	 */
 	browserStub?: string[];
 	/**

package/types/liquid.d.ts

@@ -31,7 +31,6 @@ declare module "@cloudcannon/editable-regions/liquid" {
 		name: string,
 		factory: (liquidEngine: Liquid) => any,
 	): void;
-	export function registerProcessEnv(env: Record<string, string>): void;
 	export function registerEleventyData(data: {
 		version: string;
 		generator: string;

package/types/vue.d.ts

@@ -0,0 +1,40 @@
+/// <reference path="./cloudcannon.d.ts" />
+
+import type { HTMLAttributes } from "vue";
+
+export function registerVueComponent(key: string, component: unknown): void;
+
+declare global {
+	namespace JSX {
+		interface IntrinsicElements {
+			"editable-component": HTMLAttributes & {
+				class?: string;
+				"data-prop": string;
+				"data-component": string;
+			};
+			"editable-text": HTMLAttributes & {
+				class?: string;
+				"data-prop": string;
+				"data-type"?: "block" | "text" | "span";
+			};
+			"editable-source": HTMLAttributes & {
+				class?: string;
+				"data-path": string;
+				"data-key": string;
+			};
+			"editable-array": HTMLAttributes & {
+				class?: string;
+				"data-prop": string;
+				"data-id-key"?: string;
+				"data-component-key"?: string;
+				"data-component"?: string;
+				"data-direction"?: "column" | "row" | "column-reverse" | "row-reverse";
+			};
+			"editable-array-item": HTMLAttributes & {
+				class?: string;
+				"data-id"?: string;
+				"data-component"?: string;
+			};
+		}
+	}
+}