react-native-debug-toolkit 3.3.3 → 3.3.8

package/src/features/devConnect/index.ts

@@ -1,7 +1,7 @@
 import { DevConnectTab } from './DevConnectTab';
 import { loadDevConnectPreferences } from './devConnectPreferences';
-import { DEFAULT_DAEMON_PORT, DEFAULT_METRO_PORT, extractSubnetPrefix } from './devConnectUtils';
-import { getDeviceLocalIp, isNativeDevConnectAvailable } from './nativeDevConnect';
+import { DEFAULT_DAEMON_PORT, extractSubnetPrefix } from './devConnectUtils';
+import { getDeviceLocalIp } from './nativeDevConnect';
 import { isSimulator } from './platformDetect';
 import { daemonClient } from '../../utils/DaemonClient';
 import type { DebugFeature, DebugFeatureListener } from '../../types';
@@ -9,11 +9,9 @@ import type { DevConnectFeatureControls, DevConnectSettingsPatch, DevConnectStat
 
 export type { DevConnectState } from './types';
 export {
-  buildMetroUrls,
   normalizeComputerHost,
   normalizePort,
   parseComputerTarget,
-  parseMetroQrPayload,
 } from './devConnectUtils';
 export {
   loadDevConnectPreferences,
@@ -21,7 +19,6 @@ export {
   saveComputerHost,
   saveComputerTarget,
   saveDaemonPort,
-  saveMetroPort,
 } from './devConnectPreferences';
 export { nativeIsDebugBuild } from './nativeDevConnect';
 
@@ -30,9 +27,7 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
   let state: DevConnectState = {
     isSimulator: isSimulator(),
     computerHost: '',
-    metroPort: DEFAULT_METRO_PORT,
     daemonPort: DEFAULT_DAEMON_PORT,
-    nativeMetroAvailable: isNativeDevConnectAvailable(),
     streaming: daemonClient.isConnected(),
   };
 
@@ -62,9 +57,7 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
         state = {
           ...state,
           computerHost: preferences.computerHost,
-          metroPort: preferences.metroPort,
           daemonPort: preferences.daemonPort,
-          nativeMetroAvailable: isNativeDevConnectAvailable(),
         };
 
         if (!state.isSimulator) {

package/src/features/devConnect/nativeDevConnect.ts

@@ -1,55 +1,14 @@
 import { NativeModules } from 'react-native';
 
-import { buildMetroTarget } from './devConnectUtils';
-
-export interface NativeDiagnostics {
-  persistedMetroHost: string | null;
-  appDelegateClass: string;
-  // Metro host switching only works in Debug builds (RN strips the packager machinery in
-  // Release). False means the Remote JS Bundle controls should be disabled.
-  isDebugBuild: boolean;
-  hasEmbeddedBundle?: boolean;
-  embeddedFirstHookInstalled?: boolean;
-  packagerHookInstalled?: boolean;
-  bundleRootHookInstalled?: boolean;
-}
-
 interface DebugToolkitDevConnectNativeModule {
-  applyMetroHost: (hostPort: string) => Promise<{ hostPort?: string } | void>;
-  resetMetroHost: () => Promise<void>;
-  getMetroHost?: () => Promise<string | null>;
   getLocalIp?: () => Promise<string | null>;
   isDebugBuild?: () => Promise<boolean>;
   getPreference?: (key: string) => Promise<string | null>;
-  getDiagnostics?: () => Promise<NativeDiagnostics>;
 }
 
-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'
-  ) {
+  if (nativeModule && typeof nativeModule.isDebugBuild === 'function') {
     return nativeModule as DebugToolkitDevConnectNativeModule;
   }
   return null;
@@ -59,88 +18,6 @@ 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),
-    };
-  }
-}
-
 export async function getDeviceLocalIp(): Promise<string | null> {
   const nativeModule = getNativeModule();
   if (!nativeModule?.getLocalIp) {
@@ -166,15 +43,3 @@ export async function nativeIsDebugBuild(): Promise<boolean | null> {
     return null;
   }
 }
-
-export async function getNativeDiagnostics(): Promise<NativeDiagnostics | null> {
-  const nativeModule = getNativeModule();
-  if (!nativeModule?.getDiagnostics) {
-    return null;
-  }
-  try {
-    return await nativeModule.getDiagnostics();
-  } catch {
-    return null;
-  }
-}

package/src/features/devConnect/types.ts

@@ -1,15 +1,13 @@
 export interface DevConnectState {
   isSimulator: boolean;
   computerHost: string;
-  metroPort: string;
   daemonPort: string;
   subnetPrefix?: string;
-  nativeMetroAvailable: boolean;
   streaming: boolean;
 }
 
 export type DevConnectSettingsPatch = Partial<
-  Pick<DevConnectState, 'computerHost' | 'metroPort' | 'daemonPort'>
+  Pick<DevConnectState, 'computerHost' | 'daemonPort'>
 >;
 
 export interface DevConnectFeatureControls {

package/src/index.ts

@@ -28,6 +28,8 @@ export { useNavigationLogger } from './features/navigation/useNavigationLogger';
 
 // Utilities
 export { safeStringify } from './utils/safeStringify';
+export { createDebugTab } from './utils/createDebugTab';
+export type { CreateDebugTabOptions } from './utils/createDebugTab';
 export { copyToComputer, logToComputer, fmt } from './utils/copyToComputer';
 export type { CopyResult, CopyOptions, CopyMethod } from './utils/copyToComputer';
 export { createDebugDeviceReport } from './utils/deviceReport';

package/src/ui/DebugView.tsx

@@ -3,7 +3,7 @@ import { DebugToolkitProvider } from '../core/DebugToolkitProvider';
 import { initializeDebugToolkit } from '../core/initialize';
 import type { FeatureConfigs } from '../core/initialize';
 import { useNavigationLogger } from '../features/navigation/useNavigationLogger';
-import type { EnvironmentConfig, NavigationContainerRef } from '../types';
+import type { AnyDebugFeature, EnvironmentConfig, NavigationContainerRef } from '../types';
 
 // --- Types ---
 
@@ -14,6 +14,8 @@ export interface DebugViewProps {
    * Set to `false` to disable a feature.
    */
   features?: Partial<FeatureConfigs>;
+  /** Custom tabs/features appended after built-in features. */
+  customFeatures?: AnyDebugFeature[];
   /** Navigation container ref for route tracking. */
   navigationRef?: React.RefObject<NavigationContainerRef | null>;
   /** Environment configs for runtime host switching. */
@@ -38,6 +40,7 @@ function NavigationLoggerInner({
 export function DebugView({
   children,
   features,
+  customFeatures,
   navigationRef,
   environments,
   enabled,
@@ -66,6 +69,7 @@ export function DebugView({
     let cancelled = false;
     initializeDebugToolkit({
       features: resolvedFeatures,
+      customFeatures,
       enabled,
     }).then((toolkit) => {
       if (!cancelled) {

package/src/ui/panel/FloatPanelView.tsx

@@ -11,6 +11,7 @@ import { FloatIcon } from '../floating/FloatIcon';
 import { DebugPanel } from './DebugPanel';
 import { FeatureTabBar } from './FeatureTabBar';
 import type { TabItem } from './FeatureTabBar';
+import { resolveStoredTabIndex } from './tabPersistence';
 import { useTabAnimation } from './useTabAnimation';
 
 // ─── Error Boundary ────────────────────────────────────
@@ -53,25 +54,32 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
 
   // Restore last tab on mount
   useEffect(() => {
+    if (tabLoaded.current || features.length === 0) return;
     let mounted = true;
     getPreference(KEYS.lastTab).then((val) => {
-      if (!mounted || !val) return;
-      const idx = parseInt(val, 10);
-      if (!isNaN(idx) && idx >= 0) {
-        setActiveTab(idx);
-        tabLoaded.current = true;
+      if (!mounted || tabLoaded.current) return;
+      const idx = resolveStoredTabIndex(features, val);
+      setActiveTab(idx);
+      const featureName = features[idx]?.name;
+      if (featureName && featureName !== val) {
+        setPreference(KEYS.lastTab, featureName);
       }
+      tabLoaded.current = true;
     });
     return () => { mounted = false; };
-  }, []);
+  }, [features]);
 
   const { contentOpacity, contentTranslateX, panHandlers, switchTab } = useTabAnimation({
     activeTab,
     tabCount: features.length,
     onTabChange: useCallback((index: number) => {
+      tabLoaded.current = true;
       setActiveTab(index);
-      setPreference(KEYS.lastTab, String(index));
-    }, []),
+      const featureName = features[index]?.name;
+      if (featureName) {
+        setPreference(KEYS.lastTab, featureName);
+      }
+    }, [features]),
   });
 
   // Feature subscription → re-render on data changes
@@ -96,10 +104,14 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
   // Clamp activeTab if features shrink
   useEffect(() => {
     if (features.length > 0 && activeTab >= features.length) {
+      tabLoaded.current = true;
       setActiveTab(0);
-      setPreference(KEYS.lastTab, '0');
+      const featureName = features[0]?.name;
+      if (featureName) {
+        setPreference(KEYS.lastTab, featureName);
+      }
     }
-  }, [features.length, activeTab]);
+  }, [features, activeTab]);
 
   // Badge (first feature that returns one)
   const envBadge = features.map((f) => f.badge?.()).find((b) => b != null) ?? null;

package/src/ui/panel/tabPersistence.ts

@@ -0,0 +1,22 @@
+import type { AnyDebugFeature } from '../../types';
+
+export function resolveStoredTabIndex(
+  features: AnyDebugFeature[],
+  storedTab: string | null,
+): number {
+  if (!storedTab) return 0;
+
+  const nameIndex = features.findIndex((feature) => feature.name === storedTab);
+  if (nameIndex >= 0) return nameIndex;
+
+  const legacyIndex = Number(storedTab);
+  if (
+    Number.isInteger(legacyIndex) &&
+    legacyIndex >= 0 &&
+    legacyIndex < features.length
+  ) {
+    return legacyIndex;
+  }
+
+  return 0;
+}

package/src/utils/createDebugTab.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from 'react';
+import type { DebugFeature, DebugFeatureListener, DebugFeatureRenderProps } from '../types';
+
+export interface CreateDebugTabOptions<TSnapshot> {
+  name: string;
+  label: string;
+  getSnapshot: () => TSnapshot;
+  render?: ComponentType<DebugFeatureRenderProps<TSnapshot>>;
+  setup?: () => void;
+  cleanup?: () => void;
+  clear?: () => void;
+  subscribe?: (listener: DebugFeatureListener) => () => void;
+  badge?: () => { label: string; color: string } | null;
+}
+
+const noop = () => {};
+
+export function createDebugTab<TSnapshot>(
+  options: CreateDebugTabOptions<TSnapshot>,
+): DebugFeature<TSnapshot> {
+  return {
+    name: options.name,
+    label: options.label,
+    setup: options.setup ?? noop,
+    cleanup: options.cleanup ?? noop,
+    getSnapshot: options.getSnapshot,
+    clear: options.clear,
+    subscribe: options.subscribe,
+    renderContent: options.render,
+    badge: options.badge,
+  };
+}

package/src/utils/debugPreferences.ts

@@ -89,6 +89,5 @@ 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;

package/scripts/android-debug-bundle.gradle

@@ -1,23 +0,0 @@
-// react-native-debug-toolkit: Debug bundle generation for Android
-// Applied via: apply from: "../../node_modules/react-native-debug-toolkit/scripts/android-debug-bundle.gradle"
-
-tasks.register('generateDebugBundle', Exec) {
-    commandLine 'npx', 'react-native', 'bundle',
-        '--platform', 'android',
-        '--dev', 'true',
-        '--entry-file', project.ext.has('debugToolkitEntryFile')
-            ? project.ext.debugToolkitEntryFile : 'index.js',
-        '--bundle-output', "${projectDir}/src/main/assets/index.android.bundle",
-        '--assets-dest', "${projectDir}/src/main/res"
-}
-
-afterEvaluate {
-    // Disable for release variants
-    tasks.matching { it.name.contains('Release') }.configureEach {
-        tasks.named('generateDebugBundle').get().enabled = false
-    }
-    // Wire as preBuild dependency for debug variants
-    android.applicationVariants.matching { it.buildType.name == 'debug' }.configureEach {
-        preBuildProvider.configure { dependsOn 'generateDebugBundle' }
-    }
-}

package/scripts/eas-postinstall.sh

@@ -1,6 +0,0 @@
-#!/usr/bin/env bash
-# react-native-debug-toolkit: EAS Build postInstall hook
-# Usage in eas.json:
-#   "postInstall": "bash node_modules/react-native-debug-toolkit/scripts/eas-postinstall.sh"
-set -e
-npx debug-toolkit embed --yes

package/scripts/embed-android.js

@@ -1,116 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-const APPLY_FROM_MARKER =
-  '// react-native-debug-toolkit: debug bundle embed';
-const APPLY_FROM_LINE =
-  APPLY_FROM_MARKER +
-  '\napply from: "../../node_modules/react-native-debug-toolkit/scripts/android-debug-bundle.gradle"';
-
-function findBuildGradle(projectRoot) {
-  const gradlePath = path.join(projectRoot, 'android', 'app', 'build.gradle');
-  const gradleKtsPath = path.join(
-    projectRoot,
-    'android',
-    'app',
-    'build.gradle.kts'
-  );
-
-  if (fs.existsSync(gradleKtsPath)) {
-    return 'android/app/build.gradle.kts';
-  }
-  if (fs.existsSync(gradlePath)) {
-    return 'android/app/build.gradle';
-  }
-  return null;
-}
-
-function ensureAssetsDir(projectRoot) {
-  const assetsDir = path.join(
-    projectRoot,
-    'android',
-    'app',
-    'src',
-    'main',
-    'assets'
-  );
-  if (!fs.existsSync(assetsDir)) {
-    fs.mkdirSync(assetsDir, { recursive: true });
-    console.log('  Created android/app/src/main/assets/');
-  }
-}
-
-function injectGradleApply(projectRoot, buildGradleRelPath, entryFile, options) {
-  const fullPath = path.join(projectRoot, buildGradleRelPath);
-  let content = fs.readFileSync(fullPath, 'utf-8');
-
-  // Idempotent check
-  if (content.includes(APPLY_FROM_MARKER)) {
-    console.log(
-      `  ${buildGradleRelPath}: apply-from already present. Skipping.`
-    );
-    return { buildGradle: buildGradleRelPath, entryFile };
-  }
-
-  // Set entry file as ext property if non-default
-  let entryFileExt = '';
-  if (entryFile && entryFile !== 'index.js') {
-    entryFileExt = `\nproject.ext.debugToolkitEntryFile = '${entryFile}'`;
-  }
-
-  content += '\n\n' + APPLY_FROM_LINE + entryFileExt + '\n';
-  fs.writeFileSync(fullPath, content);
-
-  ensureAssetsDir(projectRoot);
-  console.log(`  ${buildGradleRelPath}: Injected apply-from for debug bundle.`);
-
-  return { buildGradle: buildGradleRelPath, entryFile };
-}
-
-function undoGradleApply(projectRoot, config) {
-  if (!config.android) {
-    console.log('  No Android configuration found. Skipping.');
-    return;
-  }
-
-  const fullPath = path.join(projectRoot, config.android.buildGradle);
-  if (!fs.existsSync(fullPath)) {
-    console.log(`  ${config.android.buildGradle} not found. Skipping.`);
-    return;
-  }
-
-  let content = fs.readFileSync(fullPath, 'utf-8');
-  if (!content.includes(APPLY_FROM_MARKER)) {
-    console.log('  apply-from not found. Skipping.');
-    return;
-  }
-
-  // Remove the marker line, apply-from line, and optional entryFile ext
-  const lines = content.split('\n');
-  const filtered = lines.filter((line) => {
-    if (line === APPLY_FROM_MARKER) return false;
-    if (
-      line.startsWith('apply from:') &&
-      line.includes('react-native-debug-toolkit/scripts/android-debug-bundle.gradle')
-    )
-      return false;
-    if (line.startsWith("project.ext.debugToolkitEntryFile = '")) return false;
-    return true;
-  });
-
-  // Trim trailing empty lines introduced by our injection
-  while (filtered.length > 0 && filtered[filtered.length - 1].trim() === '') {
-    filtered.pop();
-  }
-
-  fs.writeFileSync(fullPath, filtered.join('\n') + '\n');
-  console.log('  Removed apply-from from build.gradle.');
-}
-
-module.exports = {
-  findBuildGradle,
-  injectGradleApply,
-  undoGradleApply,
-};

package/scripts/embed-expo.js

@@ -1,109 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-function isExpoProject(projectRoot) {
-  // app.json with expo field
-  const appJsonPath = path.join(projectRoot, 'app.json');
-  if (fs.existsSync(appJsonPath)) {
-    try {
-      const appJson = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
-      if (appJson.expo) return true;
-    } catch (_) {}
-  }
-
-  // app.config.js or app.config.ts
-  if (
-    fs.existsSync(path.join(projectRoot, 'app.config.js')) ||
-    fs.existsSync(path.join(projectRoot, 'app.config.ts'))
-  ) {
-    return true;
-  }
-
-  // expo in package.json dependencies
-  const pkgPath = path.join(projectRoot, 'package.json');
-  if (fs.existsSync(pkgPath)) {
-    try {
-      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
-      const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-      if (deps.expo) return true;
-    } catch (_) {}
-  }
-
-  return false;
-}
-
-function isExpoGo(projectRoot) {
-  // Expo Go doesn't support embedded bundles
-  // If no ios/ or android/ dirs, likely Expo Go
-  const hasNativeDirs =
-    fs.existsSync(path.join(projectRoot, 'ios')) ||
-    fs.existsSync(path.join(projectRoot, 'android'));
-
-  if (!hasNativeDirs) {
-    return true;
-  }
-  return false;
-}
-
-function isPrebuilt(projectRoot) {
-  // Dev client / bare workflow after prebuild
-  return (
-    fs.existsSync(path.join(projectRoot, 'ios')) &&
-    fs.existsSync(path.join(projectRoot, 'android'))
-  );
-}
-
-function getExpoEntryPoint(projectRoot) {
-  const appJsonPath = path.join(projectRoot, 'app.json');
-  if (fs.existsSync(appJsonPath)) {
-    try {
-      const appJson = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
-      if (appJson.expo && appJson.expo.entryPoint) {
-        return appJson.expo.entryPoint;
-      }
-    } catch (_) {}
-  }
-
-  // Expo default with .expo virtual entry
-  const virtualEntry = path.join(
-    projectRoot,
-    '.expo',
-    '.virtual-metro-entry'
-  );
-  if (fs.existsSync(virtualEntry)) {
-    return '.expo/.virtual-metro-entry';
-  }
-
-  return null;
-}
-
-function checkExpo(projectRoot, options) {
-  const expo = isExpoProject(projectRoot);
-  if (!expo) {
-    return { expo: false, skip: false };
-  }
-
-  if (isExpoGo(projectRoot)) {
-    return {
-      expo: true,
-      skip: true,
-      reason:
-        'Expo Go does not support embedded bundles. Use expo-dev-client or run npx expo prebuild first.',
-    };
-  }
-
-  if (!isPrebuilt(projectRoot)) {
-    return {
-      expo: true,
-      skip: true,
-      reason:
-        'Native directories not found. Run npx expo prebuild first, then retry.',
-    };
-  }
-
-  return { expo: true, skip: false, entryPoint: getExpoEntryPoint(projectRoot) };
-}
-
-module.exports = { isExpoProject, checkExpo, getExpoEntryPoint };