Backend Integration

/**
 * Connects a React application to the DevTools backend
 * @param options - Connection configuration options
 */
function connectToDevTools(options?: ConnectOptions): void;

interface ConnectOptions {
  /** DevTools server host (default: 'localhost') */
  host?: string;
  /** Valid style attributes for React Native style editor */
  nativeStyleEditorValidAttributes?: string[];
  /** DevTools server port (default: 8097) */
  port?: number;
  /** Use HTTPS for connection (default: false) */
  useHttps?: boolean;
  /** Function to resolve React Native styles */
  resolveRNStyle?: (style: any) => any;
  /** Delay between connection retry attempts in ms (default: 2000) */
  retryConnectionDelay?: number;
  /** Function to check if app is active (default: () => true) */
  isAppActive?: () => boolean;
  /** Existing WebSocket connection to reuse (nullable) */
  websocket?: WebSocket | null;
  /** Callback for DevTools settings updates */
  onSettingsUpdated?: (settings: DevToolsHookSettings) => void;
  /** Whether reload and profile features are supported */
  isReloadAndProfileSupported?: boolean;
  /** Whether profiling is currently active */
  isProfiling?: boolean;
  /** Callback for reload and profile action */
  onReloadAndProfile?: (recordChangeDescriptions: boolean) => void;
  /** Callback for resetting reload and profile flags */
  onReloadAndProfileFlagsReset?: () => void;
}

import { connectToDevTools } from "react-devtools-core/backend";

// Basic connection to default localhost:8097
connectToDevTools();

// Custom server configuration
connectToDevTools({
  host: "192.168.1.100",
  port: 9090,
  useHttps: true
});

// React Native integration with style editor
connectToDevTools({
  nativeStyleEditorValidAttributes: [
    "alignItems", "backgroundColor", "borderColor", "borderRadius",
    "borderWidth", "color", "flex", "fontSize", "height", "margin",
    "padding", "textAlign", "width"
  ],
  resolveRNStyle: (style) => {
    // Custom style resolution logic
    return processReactNativeStyle(style);
  }
});

// Advanced configuration with callbacks
connectToDevTools({
  retryConnectionDelay: 5000,
  isAppActive: () => document.hasFocus(),
  onSettingsUpdated: (settings) => {
    console.log("DevTools settings updated:", settings);
  },
  onReloadAndProfile: (recordChanges) => {
    console.log("Reloading with profiling:", recordChanges);
    // Implement app reload logic
  }
});

/**
 * Initializes the DevTools hook in the target application
 * @param settings - DevTools hook settings or promise resolving to settings
 * @param shouldStartProfilingNow - Whether to start profiling immediately
 * @param profilingSettings - Profiling configuration options
 */
function initialize(
  settings?: DevToolsHookSettings | Promise<DevToolsHookSettings>,
  shouldStartProfilingNow?: boolean,
  profilingSettings?: ProfilingSettings
): void;

interface DevToolsHookSettings {
  /** Enable console patching for component logging */
  appendComponentStack?: boolean;
  /** Show inline warnings and errors in DevTools */
  breakOnConsoleErrors?: boolean;
  /** Hide console logs in strict mode */
  hideConsoleLogsInStrictMode?: boolean;
  /** Component filters for hiding/showing components */
  componentFilters?: ComponentFilter[];
}

interface ProfilingSettings {
  /** Record component change descriptions */
  recordChangeDescriptions?: boolean;
}

interface ComponentFilter {
  type: number;
  value: string;
  isEnabled: boolean;
}

import { initialize } from "react-devtools-core/backend";

// Basic initialization
initialize();

// Initialize with immediate profiling
initialize(null, true);

// Custom settings
initialize({
  appendComponentStack: true,
  breakOnConsoleErrors: false,
  hideConsoleLogsInStrictMode: true,
  componentFilters: [
    { type: 1, value: "MyComponent", isEnabled: true }
  ]
});

// Async settings loading
initialize(
  fetch("/api/devtools-settings").then(res => res.json()),
  false,
  { recordChangeDescriptions: true }
);

import { initialize, connectToDevTools } from "react-devtools-core/backend";
import React from "react";
import ReactDOM from "react-dom";

// Initialize DevTools hook first
initialize();

// Connect to DevTools server
connectToDevTools();

// Then render your React app
ReactDOM.render(<App />, document.getElementById("root"));

// In your index.js or App.js
import { connectToDevTools } from "react-devtools-core/backend";

// Connect with React Native specific options
connectToDevTools({
  nativeStyleEditorValidAttributes: [
    "alignItems", "backgroundColor", "borderColor",
    "borderRadius", "borderWidth", "color", "flex",
    "flexDirection", "fontSize", "height", "justifyContent",
    "margin", "padding", "position", "textAlign", "width"
  ],
  resolveRNStyle: (style) => {
    // Resolve React Native styles for editor
    return style;
  }
});

// webpack.config.js
module.exports = {
  entry: {
    app: [
      // Add DevTools backend first in development
      ...(process.env.NODE_ENV === "development" ? ["react-devtools-core/backend"] : []),
      "./src/index.js"
    ]
  }
};

import { connectToDevTools } from "react-devtools-core/backend";

// Custom WebSocket connection
const ws = new WebSocket("ws://custom-server:8080");

connectToDevTools({
  websocket: ws,
  retryConnectionDelay: 1000
});