@magitch/vite-plugin-dev-connect

Vite plugin for Magitch 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

npm install -D @magitch/vite-plugin-dev-connect

Usage

// 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

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