react-native-debug-toolkit 3.3.4 → 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/app.plugin.js

@@ -1,51 +0,0 @@
-'use strict';
-
-function markTestConfig(config) {
-  config.extra = config.extra || {};
-  config.extra.reactNativeDebugToolkit = {
-    ...(config.extra.reactNativeDebugToolkit || {}),
-    embedBundle: true,
-  };
-  return config;
-}
-
-function loadConfigPlugins() {
-  try {
-    return require('@expo/config-plugins');
-  } catch {
-    throw new Error(
-      'react-native-debug-toolkit/dev-client requires @expo/config-plugins during Expo prebuild.',
-    );
-  }
-}
-
-function withDebugToolkitDevClient(config, props = {}) {
-  if (!props.embedBundle) {
-    return config;
-  }
-
-  if (props._testOnly) {
-    return markTestConfig(config);
-  }
-
-  const { withDangerousMod } = loadConfigPlugins();
-  const { setupIosBundle } = require('./scripts/bundle/ios');
-  const { setupAndroidBundle } = require('./scripts/bundle/android');
-
-  config = withDangerousMod(config, ['ios', async (modConfig) => {
-    setupIosBundle({
-      cwd: modConfig.modRequest.projectRoot,
-      iosTarget: props.iosTarget,
-    });
-    return modConfig;
-  }]);
-
-  config = withDangerousMod(config, ['android', async (modConfig) => {
-    setupAndroidBundle({ cwd: modConfig.modRequest.projectRoot });
-    return modConfig;
-  }]);
-
-  return config;
-}
-
-module.exports = withDebugToolkitDevClient;

package/dev-client.js

@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./app.plugin');

package/scripts/bundle/android.js

@@ -1,101 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const { execFileSync } = require('child_process');
-
-const BEGIN = '// react-native-debug-toolkit: begin debug bundle';
-const END = '// react-native-debug-toolkit: end debug bundle';
-const REL_SCRIPT = '../../node_modules/react-native-debug-toolkit/scripts/debug-bundle.gradle';
-const EXPECTED_TASK = 'createDebugToolkitDebugJsAndAssets';
-const GRADLE_TASKS_ARGS = [':app:tasks', '--all', '--no-daemon', '--console=plain'];
-
-function findGradleFile(cwd) {
-  const groovy = path.join(cwd, 'android/app/build.gradle');
-  const kotlin = path.join(cwd, 'android/app/build.gradle.kts');
-
-  if (fs.existsSync(kotlin)) {
-    return { file: kotlin, kind: 'kotlin' };
-  }
-
-  if (fs.existsSync(groovy)) {
-    return { file: groovy, kind: 'groovy' };
-  }
-
-  throw new Error('android/app/build.gradle(.kts) not found.');
-}
-
-function block(kind) {
-  const applyLine = kind === 'kotlin'
-    ? `apply(from = "${REL_SCRIPT}")`
-    : `apply from: "${REL_SCRIPT}"`;
-
-  return `${BEGIN}\n${applyLine}\n${END}`;
-}
-
-function removeBlock(content) {
-  return content.replace(
-    /\/\/ react-native-debug-toolkit: begin debug bundle\n[\s\S]*?\/\/ react-native-debug-toolkit: end debug bundle\n?/g,
-    '',
-  );
-}
-
-function setupAndroidBundle(options) {
-  const gradle = findGradleFile(options.cwd);
-  const content = fs.readFileSync(gradle.file, 'utf8');
-
-  if (content.includes(BEGIN)) {
-    return { ok: true, changed: false, file: gradle.file };
-  }
-
-  fs.writeFileSync(gradle.file, `${content.trimEnd()}\n\n${block(gradle.kind)}\n`);
-  return { ok: true, changed: true, file: gradle.file };
-}
-
-function undoAndroidBundle(options) {
-  const gradle = findGradleFile(options.cwd);
-  const content = fs.readFileSync(gradle.file, 'utf8');
-  const next = removeBlock(content).replace(/\n{3,}/g, '\n\n');
-
-  if (next === content) {
-    return { ok: true, changed: false, file: gradle.file };
-  }
-
-  fs.writeFileSync(gradle.file, next);
-  return { ok: true, changed: true, file: gradle.file };
-}
-
-function checkAndroidBundle(options) {
-  const gradle = findGradleFile(options.cwd);
-  const content = fs.readFileSync(gradle.file, 'utf8');
-  const hasMarker = content.includes(BEGIN) && content.includes('scripts/debug-bundle.gradle');
-
-  if (!hasMarker) {
-    return { ok: false, reason: 'marker_missing', file: gradle.file };
-  }
-
-  const androidDir = path.join(options.cwd, 'android');
-  const gradlew = path.join(androidDir, 'gradlew');
-  const command = fs.existsSync(gradlew) ? gradlew : 'gradle';
-  const runGradle = options.runGradle || ((cmd, args, opts) => execFileSync(cmd, args, {
-    cwd: opts.cwd,
-    encoding: 'utf8',
-    stdio: ['ignore', 'pipe', 'pipe'],
-  }));
-  const output = runGradle(command, GRADLE_TASKS_ARGS, { cwd: androidDir });
-
-  if (!String(output).includes(EXPECTED_TASK)) {
-    return { ok: false, reason: 'gradle_task_missing', file: gradle.file };
-  }
-
-  return { ok: true, file: gradle.file };
-}
-
-module.exports = {
-  setupAndroidBundle,
-  undoAndroidBundle,
-  checkAndroidBundle,
-  BEGIN,
-  END,
-  EXPECTED_TASK,
-};

package/scripts/bundle/cli.js

@@ -1,57 +0,0 @@
-'use strict';
-
-function readOption(args, name) {
-  const index = args.indexOf(name);
-  return index >= 0 ? args[index + 1] : undefined;
-}
-
-function hasFlag(args, name) {
-  return args.includes(name);
-}
-
-function parseCommon(args, cwd) {
-  return {
-    cwd,
-    platform: readOption(args, '--platform') || 'all',
-    undo: hasFlag(args, '--undo'),
-    check: hasFlag(args, '--check'),
-    iosTarget: readOption(args, '--ios-target'),
-    yes: hasFlag(args, '--yes'),
-  };
-}
-
-async function runBundleCli(args, deps = {}) {
-  const cwd = deps.cwd || process.cwd();
-  const io = deps.io || {
-    writeOut: (value) => process.stdout.write(value),
-    writeErr: (value) => process.stderr.write(value),
-  };
-  const command = args[0];
-
-  if (command === 'setup-bundle') {
-    const setupBundle = deps.setupBundle || require('./setup').setupBundle;
-    await setupBundle(parseCommon(args.slice(1), cwd));
-    return 0;
-  }
-
-  if (command === 'doctor-bundle') {
-    const doctorBundle = deps.doctorBundle || require('./doctor').doctorBundle;
-    await doctorBundle({
-      cwd,
-      platform: readOption(args.slice(1), '--platform') || 'all',
-      app: readOption(args.slice(1), '--app'),
-      apk: readOption(args.slice(1), '--apk'),
-    });
-    return 0;
-  }
-
-  if (command === 'embed') {
-    io.writeErr('Unknown command: embed\nUse: debug-toolkit setup-bundle\n');
-    return 1;
-  }
-
-  io.writeErr(`Unknown command: ${command || '(none)'}\n`);
-  return 1;
-}
-
-module.exports = { runBundleCli };

package/scripts/bundle/doctor.js

@@ -1,38 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const { execFileSync } = require('child_process');
-
-function readZipEntriesWithUnzip(file) {
-  const output = execFileSync('unzip', ['-Z1', file], { encoding: 'utf8' });
-  return output.split(/\r?\n/).filter(Boolean);
-}
-
-async function doctorIos(options) {
-  if (!options.app) throw new Error('--app is required for iOS doctor.');
-  const bundle = path.join(options.app, 'main.jsbundle');
-  if (!fs.existsSync(bundle)) {
-    throw new Error(`main.jsbundle not found in ${options.app}`);
-  }
-  return { ok: true, platform: 'ios', bundle };
-}
-
-async function doctorAndroid(options) {
-  if (!options.apk) throw new Error('--apk is required for Android doctor.');
-  const readZipEntries = options.readZipEntries || readZipEntriesWithUnzip;
-  const entries = await readZipEntries(options.apk);
-  const bundle = entries.find((entry) => /^assets\/.+\.bundle$/.test(entry));
-  if (!bundle) {
-    throw new Error(`Android JS bundle not found in ${options.apk}`);
-  }
-  return { ok: true, platform: 'android', bundle };
-}
-
-async function doctorBundle(options) {
-  if (options.platform === 'ios') return doctorIos(options);
-  if (options.platform === 'android') return doctorAndroid(options);
-  throw new Error(`Unsupported platform for doctor-bundle: ${options.platform}`);
-}
-
-module.exports = { doctorBundle, readZipEntriesWithUnzip };