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();
}

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 [email protected] 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! 🔥