@magitch/vite-plugin-dev-connect 1.0.0

package/README.md

@@ -0,0 +1,48 @@
+# @magitch/vite-plugin-dev-connect
+
+Vite plugin for [Magitch](https://magitch.app) dev environment.
+
+Injects the **preview-protocol** bridge script into HTML during development, enabling cross-origin communication between the IDE and the sandbox preview iframe.
+
+## Features
+
+- **Navigation** — back, forward, reload, navigate-to-url
+- **Element Inspector** — select, highlight, get bounds
+- **Readiness Detection** — PING/PONG handshake
+- **Dev-only** — does nothing during `vite build`
+
+## Install
+
+```bash
+npm install -D @magitch/vite-plugin-dev-connect
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { magitchDevConnect } from '@magitch/vite-plugin-dev-connect'
+
+export default defineConfig({
+  plugins: [react(), magitchDevConnect()],
+})
+```
+
+## Options
+
+```ts
+magitchDevConnect({
+  // Override preview-protocol script URL
+  previewProtocolUrl: 'https://custom-cdn.example.com/preview-protocol.min.js',
+  // Trusted hosts for postMessage (default: ["*"])
+  trustedHosts: ['magitch.app', 'localhost'],
+  // Enable debug logging (default: false)
+  debug: true,
+})
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import { Plugin } from 'vite';
+
+interface MagitchDevConnectOptions {
+    /**
+     * Override the preview-protocol script URL.
+     * @default S3 CDN URL
+     */
+    previewProtocolUrl?: string;
+    /**
+     * Trusted hosts for postMessage communication.
+     * Use ["*"] to allow all origins (default — safe because preview-protocol
+     * only sends non-sensitive UI state like navigation, element bounds, etc.)
+     * @default ["*"]
+     */
+    trustedHosts?: string[];
+    /**
+     * Enable debug logging in preview-protocol.
+     * @default false
+     */
+    debug?: boolean;
+}
+/**
+ * Vite plugin for Magitch dev environment.
+ *
+ * Injects the preview-protocol bridge script into HTML during development.
+ * This enables the IDE to communicate with the sandbox preview via postMessage:
+ * - Navigation (back/forward/reload/navigate-to-url)
+ * - Element Inspector (select, highlight, get bounds)
+ * - Readiness detection (PING/PONG)
+ *
+ * Only runs in dev mode (`vite dev`). Does nothing during `vite build`.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { magitchDevConnect } from '@magitch/vite-plugin-dev-connect'
+ *
+ * export default defineConfig({
+ *   plugins: [react(), magitchDevConnect()],
+ * })
+ * ```
+ */
+declare function magitchDevConnect(options?: MagitchDevConnectOptions): Plugin;
+
+export { type MagitchDevConnectOptions, magitchDevConnect as default, magitchDevConnect };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import { Plugin } from 'vite';
+
+interface MagitchDevConnectOptions {
+    /**
+     * Override the preview-protocol script URL.
+     * @default S3 CDN URL
+     */
+    previewProtocolUrl?: string;
+    /**
+     * Trusted hosts for postMessage communication.
+     * Use ["*"] to allow all origins (default — safe because preview-protocol
+     * only sends non-sensitive UI state like navigation, element bounds, etc.)
+     * @default ["*"]
+     */
+    trustedHosts?: string[];
+    /**
+     * Enable debug logging in preview-protocol.
+     * @default false
+     */
+    debug?: boolean;
+}
+/**
+ * Vite plugin for Magitch dev environment.
+ *
+ * Injects the preview-protocol bridge script into HTML during development.
+ * This enables the IDE to communicate with the sandbox preview via postMessage:
+ * - Navigation (back/forward/reload/navigate-to-url)
+ * - Element Inspector (select, highlight, get bounds)
+ * - Readiness detection (PING/PONG)
+ *
+ * Only runs in dev mode (`vite dev`). Does nothing during `vite build`.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { magitchDevConnect } from '@magitch/vite-plugin-dev-connect'
+ *
+ * export default defineConfig({
+ *   plugins: [react(), magitchDevConnect()],
+ * })
+ * ```
+ */
+declare function magitchDevConnect(options?: MagitchDevConnectOptions): Plugin;
+
+export { type MagitchDevConnectOptions, magitchDevConnect as default, magitchDevConnect };

package/dist/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
+  magitchDevConnect: () => magitchDevConnect
+});
+module.exports = __toCommonJS(index_exports);
+var DEFAULT_PREVIEW_PROTOCOL_URL = "https://magitch.s3.eu-north-1.amazonaws.com/assets/js/preview-protocol.min.js?v=1.2.2";
+function magitchDevConnect(options = {}) {
+  const {
+    previewProtocolUrl = DEFAULT_PREVIEW_PROTOCOL_URL,
+    trustedHosts = ["*"],
+    debug = false
+  } = options;
+  return {
+    name: "magitch-dev-connect",
+    apply: "serve",
+    // Only during dev server — not in production builds
+    transformIndexHtml() {
+      return [
+        // Preview Protocol Configuration
+        {
+          tag: "script",
+          children: [
+            `window.TRUSTED_PREVIEW_HOSTS=${JSON.stringify(trustedHosts)};`,
+            `window.PREVIEW_PROTOCOL_DEBUG=${debug};`
+          ].join(""),
+          injectTo: "head"
+        },
+        // Preview Protocol Script — cross-origin communication & element inspector
+        {
+          tag: "script",
+          attrs: { src: previewProtocolUrl },
+          injectTo: "head"
+        }
+      ];
+    }
+  };
+}
+var index_default = magitchDevConnect;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  magitchDevConnect
+});

package/dist/index.mjs

@@ -0,0 +1,38 @@
+// src/index.ts
+var DEFAULT_PREVIEW_PROTOCOL_URL = "https://magitch.s3.eu-north-1.amazonaws.com/assets/js/preview-protocol.min.js?v=1.2.2";
+function magitchDevConnect(options = {}) {
+  const {
+    previewProtocolUrl = DEFAULT_PREVIEW_PROTOCOL_URL,
+    trustedHosts = ["*"],
+    debug = false
+  } = options;
+  return {
+    name: "magitch-dev-connect",
+    apply: "serve",
+    // Only during dev server — not in production builds
+    transformIndexHtml() {
+      return [
+        // Preview Protocol Configuration
+        {
+          tag: "script",
+          children: [
+            `window.TRUSTED_PREVIEW_HOSTS=${JSON.stringify(trustedHosts)};`,
+            `window.PREVIEW_PROTOCOL_DEBUG=${debug};`
+          ].join(""),
+          injectTo: "head"
+        },
+        // Preview Protocol Script — cross-origin communication & element inspector
+        {
+          tag: "script",
+          attrs: { src: previewProtocolUrl },
+          injectTo: "head"
+        }
+      ];
+    }
+  };
+}
+var index_default = magitchDevConnect;
+export {
+  index_default as default,
+  magitchDevConnect
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@magitch/vite-plugin-dev-connect",
+  "version": "1.0.0",
+  "description": "Vite plugin for Magitch dev environment — injects preview bridge (preview-protocol) for cross-origin communication between IDE and sandbox preview.",
+  "keywords": [
+    "vite-plugin",
+    "magitch",
+    "preview",
+    "dev-tools",
+    "iframe",
+    "postmessage"
+  ],
+  "author": "Magitch",
+  "license": "MIT",
+  "homepage": "https://magitch.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magitch/vite-plugin-dev-connect"
+  },
+  "bugs": {
+    "url": "https://github.com/magitch/vite-plugin-dev-connect/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "vite": ">=4.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  }
+}