@rozenite/plugin-bridge

A communication layer for React Native DevTools plugins across React Native and web environments.

The Rozenite Plugin Bridge provides an isomorphic communication layer that enables seamless message passing between React Native DevTools plugins running in different environments. It abstracts the complexity of Chrome DevTools Protocol (CDP) and browser messaging, providing a unified API for plugin communication.

Features

• Isomorphic Communication: Works seamlessly across React Native and web environments
• Type-Safe Messaging: Full TypeScript support with generic event maps
• React Integration: React hooks for easy integration with React components
• Message Routing: Plugin-specific message routing and filtering
• Connection Management: Automatic connection handling and cleanup

Installation

Install the plugin bridge as a dependency:

npm install @rozenite/plugin-bridge

Quick Start

Using the React Hook

import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';

// Define your event types
type MyEventMap = {
  'data-updated': { value: number };
  'status-changed': { status: 'connected' | 'disconnected' };
};

function MyPlugin() {
  const client = useRozeniteDevToolsClient<MyEventMap>({
    pluginId: 'my-plugin',
  });

  useEffect(() => {
    if (!client) return;

    // Listen for messages
    const subscription = client.onMessage('data-updated', (payload) => {
      console.log('Data updated:', payload.value);
    });

    // Send messages
    client.send('status-changed', { status: 'connected' });

    return () => subscription.remove();
  }, [client]);

  return <div>My Plugin</div>;
}

Using the Client Directly

import { getRozeniteDevToolsClient } from '@rozenite/plugin-bridge';

type MyEventMap = {
  'custom-event': { message: string };
};

async function setupClient() {
  const client = await getRozeniteDevToolsClient<MyEventMap>('my-plugin');

  // Send a message
  client.send('custom-event', { message: 'Hello from plugin!' });

  // Listen for messages
  const subscription = client.onMessage('custom-event', (payload) => {
    console.log('Received:', payload.message);
  });

  // Clean up when done
  subscription.remove();
  client.close();
}

Testing

Both getRozeniteDevToolsClient and useRozeniteDevToolsClient accept an optional channel, letting a test supply its own Channel instead of resolving one from the environment. This is the seam @rozenite/testing builds on to run a plugin's panel and device code against each other in Node, without Metro or a simulator:

const client = await getRozeniteDevToolsClient('my-plugin', { channel: fakeChannel });

Production callers should never need this — leave it unset and a real channel is resolved and cached as before.

Made with at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it .

Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!

Like the project? Join the team who does amazing stuff for clients and drives React Native Open Source!