react-native-debug-toolkit 3.2.1 → 3.2.3

package/src/features/devConnect/devConnectUtils.ts

@@ -1,21 +1,39 @@
-const METRO_PORT = '8081';
+export const DEFAULT_METRO_PORT = '8081';
+export const DEFAULT_DAEMON_PORT = '3799';
 
 export interface MetroUrls {
   expUrl: string;
   httpUrl: string;
 }
 
+export interface MetroTarget {
+  host: string;
+  port: string;
+  hostPort: string;
+  statusUrl: string;
+}
+
+export interface ParsedComputerTarget {
+  computerHost: string;
+  metroPort: string;
+}
+
 export interface ParsedMetroQrPayload {
   computerHost: string;
+  metroPort: string;
   source: string;
 }
 
 function isValidIpv4(host: string): boolean {
   const parts = host.split('.');
-  if (parts.length !== 4) return false;
+  if (parts.length !== 4) {
+    return false;
+  }
 
   return parts.every((part) => {
-    if (!/^\d{1,3}$/.test(part)) return false;
+    if (!/^\d{1,3}$/.test(part)) {
+      return false;
+    }
     const value = Number(part);
     return value >= 0 && value <= 255 && String(value) === part;
   });
@@ -29,31 +47,120 @@ function toUrlInput(raw: string): string {
   return `http://${trimmed}`;
 }
 
-export function normalizeComputerHost(raw: string): string | null {
+function parseHostAndPort(raw: string): { host: string; port: string } | null {
   const trimmed = raw.trim();
-  if (!trimmed) return null;
+  if (!trimmed) {
+    return null;
+  }
 
   try {
     const parsed = new URL(toUrlInput(trimmed));
-    const host = parsed.hostname.trim();
-    return isValidIpv4(host) ? host : null;
+    return {
+      host: parsed.hostname.trim(),
+      port: parsed.port.trim(),
+    };
   } catch {
     return null;
   }
 }
 
-export function buildMetroUrls(rawHost: string): MetroUrls | null {
-  const host = normalizeComputerHost(rawHost);
-  if (!host) return null;
+export function normalizeComputerHost(raw: string): string | null {
+  const parsed = parseHostAndPort(raw);
+  if (!parsed) {
+    return null;
+  }
+
+  return isValidIpv4(parsed.host) ? parsed.host : null;
+}
+
+export function normalizePort(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!/^\d+$/.test(trimmed)) {
+    return null;
+  }
+
+  const value = Number(trimmed);
+  if (!Number.isInteger(value) || value < 1 || value > 65535) {
+    return null;
+  }
+  return String(value);
+}
+
+export function parseComputerTarget(raw: string): ParsedComputerTarget | null {
+  const parsed = parseHostAndPort(raw);
+  if (!parsed || !isValidIpv4(parsed.host)) {
+    return null;
+  }
+
+  const metroPort = parsed.port
+    ? normalizePort(parsed.port)
+    : DEFAULT_METRO_PORT;
+  if (!metroPort) {
+    return null;
+  }
+
+  return {
+    computerHost: parsed.host,
+    metroPort,
+  };
+}
+
+function normalizeMetroHost(rawHost: string): string | null {
+  const parsed = parseHostAndPort(rawHost);
+  if (!parsed) {
+    return null;
+  }
+  if (parsed.host === 'localhost') {
+    return parsed.host;
+  }
+  return isValidIpv4(parsed.host) ? parsed.host : null;
+}
+
+export function buildMetroTarget(rawHost: string, rawPort = DEFAULT_METRO_PORT): MetroTarget | null {
+  const host = normalizeMetroHost(rawHost);
+  if (!host) {
+    return null;
+  }
+
+  const port = normalizePort(rawPort);
+  if (!port) {
+    return null;
+  }
+
+  return {
+    host,
+    port,
+    hostPort: `${host}:${port}`,
+    statusUrl: `http://${host}:${port}/status`,
+  };
+}
+
+export function buildMetroUrls(rawHost: string, rawPort = DEFAULT_METRO_PORT): MetroUrls | null {
+  const target = buildMetroTarget(rawHost, rawPort);
+  if (!target) {
+    return null;
+  }
 
   return {
-    expUrl: `exp://${host}:${METRO_PORT}`,
-    httpUrl: `http://${host}:${METRO_PORT}`,
+    expUrl: `exp://${target.hostPort}`,
+    httpUrl: `http://${target.hostPort}`,
   };
 }
 
 export function parseMetroQrPayload(payload: string): ParsedMetroQrPayload | null {
-  const computerHost = normalizeComputerHost(payload);
-  if (!computerHost) return null;
-  return { computerHost, source: payload };
+  const target = parseComputerTarget(payload);
+  if (!target) {
+    return null;
+  }
+  return { ...target, source: payload };
+}
+
+export function buildDaemonDeviceHost(computerHost: string, daemonPort: string): string {
+  const host = normalizeComputerHost(computerHost);
+  if (!host) {
+    return '';
+  }
+
+  const port = normalizePort(daemonPort) ?? DEFAULT_DAEMON_PORT;
+  return port === DEFAULT_DAEMON_PORT ? host : `${host}:${port}`;
 }

package/src/features/devConnect/index.ts

@@ -1,6 +1,8 @@
 import { DevConnectTab } from './DevConnectTab';
 import { isCameraKitAvailable } from './cameraKit';
 import { loadDevConnectPreferences } from './devConnectPreferences';
+import { DEFAULT_DAEMON_PORT, DEFAULT_METRO_PORT } from './devConnectUtils';
+import { isNativeDevConnectAvailable } from './nativeDevConnect';
 import { isSimulator } from './platformDetect';
 import { daemonClient } from '../../utils/DaemonClient';
 import type { DebugFeature, DebugFeatureListener } from '../../types';
@@ -10,12 +12,17 @@ export type { DevConnectState } from './types';
 export {
   buildMetroUrls,
   normalizeComputerHost,
+  normalizePort,
+  parseComputerTarget,
   parseMetroQrPayload,
 } from './devConnectUtils';
 export {
   loadDevConnectPreferences,
   restoreDevConnectSettingsToDaemon,
   saveComputerHost,
+  saveComputerTarget,
+  saveDaemonPort,
+  saveMetroPort,
 } from './devConnectPreferences';
 
 export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
@@ -23,7 +30,10 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
   let state: DevConnectState = {
     isSimulator: isSimulator(),
     computerHost: '',
+    metroPort: DEFAULT_METRO_PORT,
+    daemonPort: DEFAULT_DAEMON_PORT,
     qrAvailable: isCameraKitAvailable(),
+    nativeMetroAvailable: isNativeDevConnectAvailable(),
     streaming: daemonClient.isConnected(),
   };
 
@@ -44,6 +54,9 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
         state = {
           ...state,
           computerHost: preferences.computerHost,
+          metroPort: preferences.metroPort,
+          daemonPort: preferences.daemonPort,
+          nativeMetroAvailable: isNativeDevConnectAvailable(),
         };
         notify();
       }).catch(() => {

package/src/features/devConnect/nativeDevConnect.ts

@@ -0,0 +1,126 @@
+import { NativeModules } from 'react-native';
+
+import { buildMetroTarget } from './devConnectUtils';
+
+interface DebugToolkitDevConnectNativeModule {
+  applyMetroHost: (hostPort: string) => Promise<{ hostPort?: string } | void>;
+  resetMetroHost: () => Promise<void>;
+  getMetroHost?: () => Promise<string | null>;
+}
+
+type MetroBundleFailureReason =
+  | 'invalid_target'
+  | 'native_unavailable'
+  | 'fetch_unavailable'
+  | 'metro_unreachable'
+  | 'native_error';
+
+export type MetroBundleResult =
+  | { ok: true; hostPort: string }
+  | { ok: false; reason: MetroBundleFailureReason; error?: string; statusUrl?: string };
+
+type FetchLike = (
+  url: string,
+  init: { method: string },
+) => Promise<{
+  ok?: boolean;
+  text?: () => Promise<string>;
+}>;
+
+function getNativeModule(): DebugToolkitDevConnectNativeModule | null {
+  const nativeModule = NativeModules.DebugToolkitDevConnect as Partial<DebugToolkitDevConnectNativeModule> | undefined;
+  if (
+    nativeModule &&
+    typeof nativeModule.applyMetroHost === 'function' &&
+    typeof nativeModule.resetMetroHost === 'function'
+  ) {
+    return nativeModule as DebugToolkitDevConnectNativeModule;
+  }
+  return null;
+}
+
+export function isNativeDevConnectAvailable(): boolean {
+  return getNativeModule() !== null;
+}
+
+async function checkMetroStatus(statusUrl: string): Promise<MetroBundleResult | null> {
+  const fetchImpl = globalThis.fetch as FetchLike | undefined;
+  if (!fetchImpl) {
+    return {
+      ok: false,
+      reason: 'fetch_unavailable',
+      statusUrl,
+      error: 'global fetch is not available',
+    };
+  }
+
+  try {
+    const response = await fetchImpl(statusUrl, { method: 'GET' });
+    const body = typeof response.text === 'function' ? await response.text() : '';
+    if (response.ok === false || !body.includes('packager-status:running')) {
+      return {
+        ok: false,
+        reason: 'metro_unreachable',
+        statusUrl,
+        error: body || 'Metro status endpoint did not report running',
+      };
+    }
+    return null;
+  } catch (error) {
+    return {
+      ok: false,
+      reason: 'metro_unreachable',
+      statusUrl,
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export async function applyMetroBundle(host: string, port: string): Promise<MetroBundleResult> {
+  const target = buildMetroTarget(host, port);
+  if (!target) {
+    return { ok: false, reason: 'invalid_target' };
+  }
+
+  const nativeModule = getNativeModule();
+  if (!nativeModule) {
+    return { ok: false, reason: 'native_unavailable' };
+  }
+
+  const statusError = await checkMetroStatus(target.statusUrl);
+  if (statusError) {
+    return statusError;
+  }
+
+  try {
+    const result = await nativeModule.applyMetroHost(target.hostPort);
+    return {
+      ok: true,
+      hostPort: result && typeof result.hostPort === 'string' ? result.hostPort : target.hostPort,
+    };
+  } catch (error) {
+    return {
+      ok: false,
+      reason: 'native_error',
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export async function resetMetroBundle(): Promise<MetroBundleResult | { ok: true }> {
+  const nativeModule = getNativeModule();
+  if (!nativeModule) {
+    return { ok: false, reason: 'native_unavailable' };
+  }
+
+  try {
+    await nativeModule.resetMetroHost();
+    return { ok: true };
+  } catch (error) {
+    return {
+      ok: false,
+      reason: 'native_error',
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}

package/src/features/devConnect/platformDetect.ts

@@ -1,25 +1,20 @@
-import { NativeModules, Platform } from 'react-native';
+import { Platform } from 'react-native';
 
 export function isSimulator(): boolean {
   const { OS } = Platform;
+  const constants = (Platform.constants ?? {}) as Record<string, unknown>;
 
   if (OS === 'android') {
-    const constants = Platform.constants as Record<string, unknown>;
-    if (constants.isEmulator === true) return true;
-    const model = String(constants.Model ?? '').toLowerCase();
+    if (constants.isEmulator === true) {
+      return true;
+    }
+    const model = String(constants.Model ?? 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;
+    const model = String(constants.model ?? '').toLowerCase();
+    return model.includes('simulator');
   }
 
   return false;

package/src/features/devConnect/types.ts

@@ -1,6 +1,9 @@
 export interface DevConnectState {
   isSimulator: boolean;
   computerHost: string;
+  metroPort: string;
+  daemonPort: string;
   qrAvailable: boolean;
+  nativeMetroAvailable: boolean;
   streaming: boolean;
 }

package/src/utils/debugPreferences.ts

@@ -1,13 +1,31 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AsyncStorageLike = { getItem: (k: string) => Promise<string | null>; setItem: (k: string, v: string) => Promise<void> };
+type NativePreferencesLike = { getPreference: (k: string) => Promise<string | null>; setPreference: (k: string, v: string) => Promise<void> };
 
 const memoryStore = new Map<string, string>();
 
 function loadAsyncStorage(): AsyncStorageLike | null {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const mod = require('@react-native-async-storage/async-storage');
-    if (mod && typeof mod.getItem === 'function') return mod;
+    if (mod && typeof mod.getItem === 'function') {
+      return mod;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function loadNativePreferences(): NativePreferencesLike | null {
+  try {
+    const { NativeModules } = require('react-native') as { NativeModules?: { DebugToolkitDevConnect?: Partial<NativePreferencesLike> } };
+    const mod = NativeModules?.DebugToolkitDevConnect;
+    if (
+      mod &&
+      typeof mod.getPreference === 'function' &&
+      typeof mod.setPreference === 'function'
+    ) {
+      return mod as NativePreferencesLike;
+    }
     return null;
   } catch {
     return null;
@@ -20,6 +38,16 @@ export async function setPreference(key: string, value: string): Promise<void> {
   if (AsyncStorage) {
     try {
       await AsyncStorage.setItem(key, value);
+      return;
+    } catch {
+      // degrade to memory only
+    }
+  }
+
+  const nativePreferences = loadNativePreferences();
+  if (nativePreferences) {
+    try {
+      await nativePreferences.setPreference(key, value);
     } catch {
       // degrade to memory only
     }
@@ -31,11 +59,26 @@ export async function getPreference(key: string): Promise<string | null> {
   if (AsyncStorage) {
     try {
       const val = await AsyncStorage.getItem(key);
-      if (val !== null) return val;
+      if (val !== null) {
+        return val;
+      }
     } catch {
       // fall through to memory
     }
   }
+
+  const nativePreferences = loadNativePreferences();
+  if (nativePreferences) {
+    try {
+      const val = await nativePreferences.getPreference(key);
+      if (val !== null) {
+        return val;
+      }
+    } catch {
+      // fall through to memory
+    }
+  }
+
   return memoryStore.get(key) ?? null;
 }
 
@@ -46,4 +89,6 @@ export const KEYS = {
   networkLogs: '@react_native_debug_toolkit/network_logs',
   trackLogs: '@react_native_debug_toolkit/track_logs',
   computerHost: '@react_native_debug_toolkit/computer_host',
+  metroPort: '@react_native_debug_toolkit/metro_port',
+  daemonPort: '@react_native_debug_toolkit/daemon_port',
 } as const;