react-native-debug-toolkit 3.1.5 → 3.2.0

package/src/features/devConnect/devConnectUtils.ts

@@ -0,0 +1,59 @@
+const METRO_PORT = '8081';
+
+export interface MetroUrls {
+  expUrl: string;
+  httpUrl: string;
+}
+
+export interface ParsedMetroQrPayload {
+  computerHost: string;
+  source: string;
+}
+
+function isValidIpv4(host: string): boolean {
+  const parts = host.split('.');
+  if (parts.length !== 4) return false;
+
+  return parts.every((part) => {
+    if (!/^\d{1,3}$/.test(part)) return false;
+    const value = Number(part);
+    return value >= 0 && value <= 255 && String(value) === part;
+  });
+}
+
+function toUrlInput(raw: string): string {
+  const trimmed = raw.trim();
+  if (/^[a-zA-Z][a-zA-Z\d+.-]*:\/\//.test(trimmed)) {
+    return trimmed;
+  }
+  return `http://${trimmed}`;
+}
+
+export function normalizeComputerHost(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  try {
+    const parsed = new URL(toUrlInput(trimmed));
+    const host = parsed.hostname.trim();
+    return isValidIpv4(host) ? host : null;
+  } catch {
+    return null;
+  }
+}
+
+export function buildMetroUrls(rawHost: string): MetroUrls | null {
+  const host = normalizeComputerHost(rawHost);
+  if (!host) return null;
+
+  return {
+    expUrl: `exp://${host}:${METRO_PORT}`,
+    httpUrl: `http://${host}:${METRO_PORT}`,
+  };
+}
+
+export function parseMetroQrPayload(payload: string): ParsedMetroQrPayload | null {
+  const computerHost = normalizeComputerHost(payload);
+  if (!computerHost) return null;
+  return { computerHost, source: payload };
+}

package/src/features/devConnect/index.ts

@@ -0,0 +1,64 @@
+import { DevConnectTab } from './DevConnectTab';
+import { isCameraKitAvailable } from './cameraKit';
+import { loadDevConnectPreferences } from './devConnectPreferences';
+import { isSimulator } from './platformDetect';
+import { daemonClient } from '../../utils/DaemonClient';
+import type { DebugFeature, DebugFeatureListener } from '../../types';
+import type { DevConnectState } from './types';
+
+export type { DevConnectState } from './types';
+export {
+  buildMetroUrls,
+  normalizeComputerHost,
+  parseMetroQrPayload,
+} from './devConnectUtils';
+export {
+  loadDevConnectPreferences,
+  restoreDevConnectSettingsToDaemon,
+  saveComputerHost,
+} from './devConnectPreferences';
+
+export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
+  const listeners = new Set<DebugFeatureListener>();
+  let state: DevConnectState = {
+    isSimulator: isSimulator(),
+    computerHost: '',
+    qrAvailable: isCameraKitAvailable(),
+    streaming: daemonClient.isConnected(),
+  };
+
+  const notify = () => {
+    state = {
+      ...state,
+      streaming: daemonClient.isConnected(),
+    };
+    listeners.forEach((listener) => listener());
+  };
+
+  return {
+    name: 'devConnect',
+    label: 'DevConnect',
+    renderContent: DevConnectTab,
+    setup() {
+      loadDevConnectPreferences().then((preferences) => {
+        state = {
+          ...state,
+          computerHost: preferences.computerHost,
+        };
+        notify();
+      }).catch(() => {
+        notify();
+      });
+    },
+    getSnapshot: () => state,
+    cleanup() {
+      listeners.clear();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+};

package/src/features/devConnect/platformDetect.ts

@@ -0,0 +1,26 @@
+import { NativeModules, Platform } from 'react-native';
+
+export function isSimulator(): boolean {
+  const { OS } = Platform;
+
+  if (OS === 'android') {
+    const constants = Platform.constants as Record<string, unknown>;
+    if (constants.isEmulator === true) return true;
+    const model = String(constants.Model ?? '').toLowerCase();
+    return model.includes('sdk') || model.includes('emulator') || model.includes('google_sdk');
+  }
+
+  if (OS === 'ios') {
+    // NativeModules.KCKFCSupportManager is absent on simulator,
+    // but the most reliable check is the DeviceInfo model name.
+    const deviceInfo = NativeModules.DeviceInfo
+      ?? NativeModules.PlatformConstants;
+    if (deviceInfo) {
+      const model = String(deviceInfo.model ?? '').toLowerCase();
+      if (model.includes('simulator')) return true;
+    }
+    return false;
+  }
+
+  return false;
+}

package/src/features/devConnect/types.ts

@@ -0,0 +1,6 @@
+export interface DevConnectState {
+  isSimulator: boolean;
+  computerHost: string;
+  qrAvailable: boolean;
+  streaming: boolean;
+}

package/src/index.ts

@@ -20,6 +20,8 @@ export type { TrackFeatureConfig, TrackEventData } from './features/track';
 export { createEnvironmentFeature } from './features/environment';
 export type { EnvironmentFeatureAPI } from './features/environment';
 export { createClipboardFeature } from './features/clipboard';
+export { createDevConnectFeature } from './features/devConnect';
+export type { DevConnectState } from './features/devConnect';
 
 // Hooks
 export { useNavigationLogger } from './features/navigation/useNavigationLogger';

package/src/types/feature.ts

@@ -9,7 +9,8 @@ export type BuiltInFeatureName =
   | 'navigation'
   | 'track'
   | 'environment'
-  | 'clipboard';
+  | 'clipboard'
+  | 'devConnect';
 
 export interface DebugFeatureRenderProps<TSnapshot = unknown> {
   snapshot: TSnapshot;

package/src/ui/DebugView.tsx

@@ -51,6 +51,7 @@ export function DebugView({
       navigation: true,
       track: true,
       clipboard: true,
+      devConnect: true,
       ...features,
     };
 

package/src/ui/panel/DebugPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -10,7 +10,6 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import { Colors } from '../theme/colors';
-import { StreamingSettingsModal } from './StreamingSettingsModal';
 
 interface DebugPanelProps {
   onClose: () => void;
@@ -22,7 +21,6 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
   const { height: screenHeight } = useWindowDimensions();
   const panelTranslateY = useRef(new Animated.Value(screenHeight)).current;
   const backdropOpacity = useRef(new Animated.Value(0)).current;
-  const [settingsVisible, setSettingsVisible] = useState(false);
 
   useEffect(() => {
     requestAnimationFrame(() => {
@@ -103,13 +101,6 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
           <View style={styles.header}>
             <Text style={styles.headerTitle}>Debug Toolkit</Text>
             <View style={styles.headerButtons}>
-              <TouchableOpacity
-                onPress={() => setSettingsVisible(true)}
-                style={styles.settingsButton}
-                activeOpacity={0.6}
-              >
-                <Text style={styles.settingsButtonText}>⚙</Text>
-              </TouchableOpacity>
               <TouchableOpacity
                 onPress={() => {
                   onClearAll();
@@ -128,7 +119,6 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
         </View>
         <View style={styles.panelContent}>{children}</View>
       </Animated.View>
-      <StreamingSettingsModal visible={settingsVisible} onClose={() => setSettingsVisible(false)} />
     </View>
   );
 }
@@ -208,18 +198,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '500',
   },
-  settingsButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: Colors.background,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  settingsButtonText: {
-    fontSize: 16,
-    color: Colors.textSecondary,
-  },
   closeButton: {
     width: 30,
     height: 30,

package/src/utils/debugPreferences.ts

@@ -45,4 +45,5 @@ export const KEYS = {
   consoleLogs: '@react_native_debug_toolkit/console_logs',
   networkLogs: '@react_native_debug_toolkit/network_logs',
   trackLogs: '@react_native_debug_toolkit/track_logs',
+  computerHost: '@react_native_debug_toolkit/computer_host',
 } as const;