@magitch/expo-magitch-dev-connect

Metro plugin for Magitch dev environment.

Injects the preview-protocol bridge script into HTML during Expo web 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 — only active during expo start --web, does nothing during expo export or native builds
• Zero native impact — native (iOS/Android) is completely unaffected

Install

npm install -D @magitch/expo-magitch-dev-connect

Usage

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withMagitchDevConnect } = require('@magitch/expo-magitch-dev-connect');

const config = getDefaultConfig(__dirname);

module.exports = withMagitchDevConnect(config);

Options

module.exports = withMagitchDevConnect(config, {
  // Override preview-protocol script URL
  previewProtocolUrl: 'https://custom-cdn.example.com/preview-protocol.min.js',
  // Trusted hosts for postMessage (default: ["preview.magitch.app", "sandbox.magitch.app", "localhost", "supgen.ai"])
  trustedHosts: ['magitch.app', 'localhost'],
  // Enable debug logging (default: true)
  debug: false,
});

How It Works

Uses Metro's server.enhanceMiddleware to intercept HTML responses from the dev server and inject <script> tags before </head>:

1. window.TRUSTED_PREVIEW_HOSTS — config for postMessage origin validation
2. window.PREVIEW_PROTOCOL_DEBUG — debug logging toggle
3. preview-protocol.min.js — the cross-origin communication bridge

Only text/html responses are intercepted — JS bundles for native (iOS/Android) pass through untouched.

License

MIT