DOCSEARCHbyAlgolia
Submit Docs

Rozenite Plugin Framework

repository·main·Indexed 20 days ago

https://github.com/callstackincubator/rozenite

A plugin framework for extending React Native DevTools with plug-and-play debugging panels. It supports Expo, bare React Native, Metro, and Re.Pack. The ecosystem includes @rozenite/agent-bridge for registering in-app and plugin tools, @rozenite/agent-sdk for programmatic automation of agent sessions, and @rozenite/agent-shared for standardized tool types and message protocols.

Tokens
107.5K
Snippets
335
Records
489
Agent score
70%

What's inside Rozenite

  1. Overview of the TanStack Query Plugin Domain

    main
    The @rozenite/tanstack-query-plugin is a Rozenite plugin designed for inspecting and managing TanStack Query caches within React Native DevTools. It allows developers to monitor query and mutation states, paginate through large caches, and perform management tasks like refetching, invalidating, or clearing specific queries and mutations.

  2. Overview of the Rozenite Runtime

    main
    The Rozenite Runtime is the core framework responsible for orchestrating React Native DevTools plugins within a browser environment. It serves as the foundation for plugin execution, managing the lifecycle of multiple plugins, handling panel integration into the React Native DevTools UI, and facilitating communication via message routing. It also provides secure plugin isolation through iframe management.

  3. Overview of Rozenite for Agents

    main

    Rozenite for Agents provides a specialized interface for AI and coding agents to interact with React Native DevTools and Rozenite plugins. It allows agents to inspect running React Native applications, including logs, network activity, React profiling data, and plugin-specific tools, without requiring custom instrumentation.

    Access Methods

    • CLI (Recommended): Use the rozenite agent command via npx rozenite.
    • Programmatic: Use the @rozenite/agent-sdk for direct script-based or automated access.

    Important Limitations

    • Experimental: This functionality is experimental and may contain bugs.
    • Debugger Disconnection: Due to React Native limitations, starting an agent session will disconnect any currently attached React Native DevTools. They cannot currently coexist.

  4. Overview of Rozenite

    main

    Rozenite is a framework for adding plug-and-play debugging panels directly into React Native DevTools. It provides a toolkit for extending DevTools with custom capabilities like network monitoring, performance tracking, state management, and storage inspection.

    Key benefits include:

    • Seamless Integration: Plugins auto-discover and load within existing React Native DevTools, eliminating the need for extra windows or servers.
    • Standardization: Allows teams to standardize debugging tools across multiple projects.
    • Production Safety: Plugins are automatically disabled in production builds, ensuring no debugging code is shipped to end-users.
    • Extensibility: Provides a type-safe development experience and a proven communication layer for building custom plugins.

  5. Overview of @rozenite/expo-atlas-plugin features

    main

    The Expo Atlas plugin integrates Expo Atlas capabilities directly into the React Native DevTools environment. Key features include:

    • Expo Atlas Integration: Direct access to Atlas features within DevTools.
    • Asset Management: A visual asset browser and management tools.
    • Dependency Analysis: Comprehensive visualization of the dependency tree.
    • Project Insights: Detailed analysis of project structure and configuration.

  6. Overview of available Rozenite official plugins

    main

    Rozenite maintains several official plugins to provide essential debugging tools for React Native development.

    Bundle & Performance

    • Expo Atlas: Bundle visualization, module analysis, size optimization, and dependency mapping.
    • Performance Monitor: Real-time tracking of performance marks, measures, and metrics. Automatically disabled in production.

    Data & State Management

    • TanStack Query: Real-time query/mutation monitoring, cache management, and query actions (refetch, invalidate, etc.).
    • Redux DevTools: Real-time Redux store inspection, action history, and state diff viewing. Automatically disabled in production.
    • MMKV: Inspect and manage MMKV storage instances with real-time data type detection and management.
    • Storage: A multi-adapter panel for MMKV, AsyncStorage, and Expo SecureStore.

    System & Network

    • Network Activity Inspector: Real-time HTTP/HTTPS request monitoring, including request/response details and Nitro Coverage support.
    • File System: Runtime file explorer for document, cache, temp, library, and bundle directories. Supports Expo FileSystem or RNFS.

    UI & Workflow

    • Controls: Expose app-defined controls (toggles, inputs, buttons) directly in DevTools to manipulate app state without extra in-app debug screens.

  7. Overview of @rozenite/agent-shared

    main

    The @rozenite/agent-shared package provides the foundational type definitions and message contracts for Rozenite Agent packages. It is intended for use by bridge and runtime packages that implement Agent support to ensure consistent communication between Agents and frontends.

    Key capabilities include:

    • Shared Tool Types: Standardized AgentTool and JSON-schema-like input definitions.
    • Paginated Tool Contracts: Typed row fields and a shared PageEnvelope for handling large datasets.
    • Row Shaping: Utilities like shapePaginatedRows and shapeToolResult for frontend-neutral columnar/row-keyed encoding.
    • Message Contracts: Typed payloads for register, unregister, call, and result messages.
    • Single Protocol Constant: The AGENT_PLUGIN_ID constant used for Agent transport identification.

  8. Overview of Rozenite Overlay Plugin features

    main

    The Rozenite Overlay Plugin provides visual debugging tools for React Native development, including:

    • Grid Overlay: Customizable grid patterns for layout alignment.
    • Image Overlay: Overlay reference designs for visual comparison.
    • Slider Comparison: Interactive side-by-side image comparison.
    • Real-time Configuration: Adjust grid size, color, opacity, and image settings via DevTools.
    • Multiple Resize Modes: Support for contain, cover, stretch, and center positioning.
    • Clipboard Integration: Paste images directly from the clipboard.
    • Production Safety: The plugin is automatically disabled in production builds.

  9. What is the Rozenite Chrome extension?

    main

    The Rozenite Chrome extension acts as a bridge between your browser and the React Native debugger server. It relays Chrome DevTools Protocol (CDP) messages, enabling you to use the familiar Chrome DevTools interface to inspect and debug React Native Web applications.

    Key capabilities include:

    • DevTools Bridge: Establishes WebSocket connections between browser tabs and the debugger server.
    • CDP Relay: Provides full support for debugging, profiling, and inspection via the Chrome DevTools Protocol.
    • Automatic Page Detection: Automatically discovers and manages connections for Rozenite-enabled localhost tabs.
    • Manifest V3: Built using modern Chrome extension architecture with a service worker.

  10. Features of the TanStack Query Plugin

    main

    The plugin provides several debugging and management capabilities within the React Native DevTools interface:

    • Query Monitoring: Real-time monitoring of all queries and mutations.
    • Cache Management: Visual cache inspection and management tools.
    • Query Actions: Refetch, invalidate, reset, and remove queries.
    • State Manipulation: Trigger loading states and error conditions for testing.
    • Mutation Tracking: Monitor mutation states and progress.
    • Agent Tools: Expose query and mutation inspection plus cache-management tools to coding agents.
    • Bidirectional Communication: Real-time sync between device and DevTools.
    • Production Safety: Automatically disabled in production builds.

  11. Use the MMKV Plugin for React Native DevTools

    main

    The MMKV Plugin (@rozenite/mmkv-plugin) allows for real-time inspection and management of react-native-mmkv instances within React Native DevTools. It supports data visualization with type detection (string, number, boolean, buffer) and provides tools to list, read, create, edit, and remove entries.

    To use this plugin, your React Native application must use react-native-mmkv and explicitly expose its instances via the useMMKVDevTools hook.

  12. Use the File System Plugin to inspect app files

    main

    The @rozenite/file-system-plugin allows you to browse app files and preview their contents within React Native DevTools. It provides read-only filesystem inspection using either Expo FileSystem or an RNFS-compatible provider. This is useful for discovering root directories, inspecting directory structures, and previewing file contents without mutating app data.

    Domain Details:

    • Plugin ID: @rozenite/file-system-plugin
    • Domain token: file-system