react-native-debug-toolkit 3.3.2 → 3.3.4

package/src/features/devConnect/DevConnectTab.tsx

@@ -37,7 +37,6 @@ import {
 } from './devConnectPreferences';
 import {
   applyMetroBundle,
-  clearNativeDiagnostics,
   getNativeDiagnostics,
   resetMetroBundle,
   type NativeDiagnostics,
@@ -80,7 +79,6 @@ export function DevConnectTab({ snapshot, feature }: DebugFeatureRenderProps<Dev
   const [metroBusy, setMetroBusy] = useState(false);
   const [diagData, setDiagData] = useState<NativeDiagnostics | null>(null);
   const [diagOpen, setDiagOpen] = useState(false);
-  const [diagBusy, setDiagBusy] = useState(false);
 
   const isSim = snapshot.isSimulator;
 
@@ -88,6 +86,23 @@ export function DevConnectTab({ snapshot, feature }: DebugFeatureRenderProps<Dev
     (feature as unknown as DevConnectFeatureControls).updateSettings?.(patch);
   }, [feature]);
 
+  useEffect(() => {
+    getNativeDiagnostics().then((result) => {
+      if (result) {
+        setDiagData(result);
+        console.info(
+          `[DevConnect] debugBuild=${result.isDebugBuild} appDelegate=${result.appDelegateClass} persistedHost=${result.persistedMetroHost ?? 'none'}`,
+        );
+      }
+    }).catch(() => {});
+  }, []);
+
+  const refreshDiag = useCallback(() => {
+    getNativeDiagnostics().then((result) => {
+      if (result) setDiagData(result);
+    }).catch(() => {});
+  }, []);
+
   useEffect(() => {
     setComputerHost(snapshot.computerHost);
   }, [snapshot.computerHost]);
@@ -381,24 +396,11 @@ export function DevConnectTab({ snapshot, feature }: DebugFeatureRenderProps<Dev
     }
   }, [snapshot.nativeMetroAvailable]);
 
-  const readDiag = useCallback(async () => {
-    setDiagBusy(true);
-    try {
-      const result = await getNativeDiagnostics();
-      setDiagData(result);
-      setDiagOpen(true);
-    } finally {
-      setDiagBusy(false);
-    }
-  }, []);
-
-  const clearDiag = useCallback(async () => {
-    await clearNativeDiagnostics();
-    setDiagData(null);
-  }, []);
-
+  // Metro host switching only works in Debug builds. diagData is iOS-populated; when we know
+  // it's a Release build, disable the controls (Android reports null → stays enabled).
+  const metroReleaseBlocked = diagData ? !diagData.isDebugBuild : false;
   const canConnect = isSim || (Boolean(normalizeComputerHost(computerHost)) && Boolean(normalizePort(daemonPort)));
-  const canUseMetro = Boolean(metroTarget) && snapshot.nativeMetroAvailable && !metroBusy;
+  const canUseMetro = Boolean(metroTarget) && snapshot.nativeMetroAvailable && !metroBusy && !metroReleaseBlocked;
   const busy = sending || syncState === 'checking';
   const subnetPrefix = snapshot.subnetPrefix;
   const ipPlaceholder = subnetPrefix ? `${subnetPrefix}...` : '192.168.1.10';
@@ -505,9 +507,20 @@ export function DevConnectTab({ snapshot, feature }: DebugFeatureRenderProps<Dev
         {message ? <Text style={styles.message}>{message}</Text> : null}
 
         <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Remote JS Bundle</Text>
+          <View style={styles.sectionTitleRow}>
+            <Text style={styles.sectionTitle}>Remote JS Bundle</Text>
+            {diagData ? (
+              <View style={styles.swizzleBadge}>
+                <View style={[styles.swizzleDot, diagData.isDebugBuild ? styles.dotGreen : styles.dotRed]} />
+                <Text style={styles.swizzleBadgeText}>
+                  {diagData.isDebugBuild ? 'debug build' : 'release: disabled'}
+                </Text>
+              </View>
+            ) : null}
+          </View>
           <Text style={styles.sectionDesc}>
-            Apply this Metro host to React Native dev settings and reload the app.
+            Starts from the embedded bundle. After you apply a computer IP, hot-reloads from that
+            Metro. Debug builds only — use Reset to go back to the embedded bundle.
           </Text>
 
           {!metroUrls ? (
@@ -551,70 +564,66 @@ export function DevConnectTab({ snapshot, feature }: DebugFeatureRenderProps<Dev
           {!snapshot.nativeMetroAvailable ? (
             <Text style={styles.hint}>Native DevConnect requires pod install / Gradle sync and app rebuild.</Text>
           ) : null}
+
+          {metroReleaseBlocked ? (
+            <Text style={styles.diagWarning}>
+              ⚠ This is a Release build. Metro host switching is disabled — RN loads the embedded
+              bundle and strips the packager machinery in Release. Run a Debug build to switch hosts.
+            </Text>
+          ) : null}
         </View>
 
-        {snapshot.nativeMetroAvailable ? (
+        {snapshot.nativeMetroAvailable && diagData ? (
           <View style={styles.section}>
             <TouchableOpacity
               style={styles.diagHeader}
-              onPress={() => setDiagOpen((v) => !v)}
+              onPress={() => { setDiagOpen((v) => !v); refreshDiag(); }}
               activeOpacity={0.7}
             >
-              <Text style={styles.sectionTitle}>Swizzle Diagnostics</Text>
+              <Text style={styles.sectionTitle}>iOS Bundle Status</Text>
               <Text style={styles.diagChevron}>{diagOpen ? '▲' : '▼'}</Text>
             </TouchableOpacity>
 
             {diagOpen ? (
               <View style={styles.diagCard}>
-                {diagData ? (
-                  <>
-                    <View style={styles.diagRow}>
-                      <Text style={styles.diagKey}>swizzleInstalled</Text>
-                      <Text style={[styles.diagVal, diagData.swizzleInstalled ? styles.diagGood : styles.diagBad]}>
-                        {diagData.swizzleInstalled ? 'YES' : 'NO'}
-                      </Text>
-                    </View>
-                    <View style={styles.diagRow}>
-                      <Text style={styles.diagKey}>swizzleInvoked</Text>
-                      <Text style={[styles.diagVal, diagData.swizzleInvoked ? styles.diagGood : styles.diagWarn]}>
-                        {diagData.swizzleInvoked ? 'YES' : 'NO'}
-                      </Text>
-                    </View>
-                    <View style={styles.diagRow}>
-                      <Text style={styles.diagKey}>persistedHost</Text>
-                      <Text style={styles.diagVal}>{diagData.persistedMetroHost ?? '—'}</Text>
-                    </View>
-                    {diagData.log.length > 0 ? (
-                      <View style={styles.diagLog}>
-                        {diagData.log.map((entry, i) => (
-                          <Text key={i} style={styles.diagLogEntry}>{entry}</Text>
-                        ))}
-                      </View>
-                    ) : (
-                      <Text style={styles.diagEmpty}>No log entries yet.</Text>
-                    )}
-                  </>
-                ) : (
-                  <Text style={styles.diagEmpty}>Tap Read to fetch diagnostics.</Text>
-                )}
-
-                <View style={styles.diagActions}>
-                  <TouchableOpacity
-                    style={[styles.diagBtn, diagBusy && styles.buttonDisabled]}
-                    onPress={readDiag}
-                    disabled={diagBusy}
-                    activeOpacity={0.75}
-                  >
-                    <Text style={styles.diagBtnText}>{diagBusy ? 'Reading…' : 'Read'}</Text>
-                  </TouchableOpacity>
-                  <TouchableOpacity
-                    style={[styles.diagBtn, styles.diagBtnSecondary]}
-                    onPress={clearDiag}
-                    activeOpacity={0.75}
-                  >
-                    <Text style={[styles.diagBtnText, styles.diagBtnSecondaryText]}>Clear</Text>
-                  </TouchableOpacity>
+                <View style={styles.diagRow}>
+                  <Text style={styles.diagKey}>AppDelegate</Text>
+                  <Text style={styles.diagVal}>{diagData.appDelegateClass}</Text>
+                </View>
+                <View style={styles.diagRow}>
+                  <Text style={styles.diagKey}>packagerHost</Text>
+                  <Text style={styles.diagVal}>{diagData.persistedMetroHost ?? '—'}</Text>
+                </View>
+                <View style={styles.diagRow}>
+                  <Text style={styles.diagKey}>embedded</Text>
+                  <Text style={[styles.diagVal, diagData.hasEmbeddedBundle ? styles.diagGood : styles.diagWarn]}>
+                    {diagData.hasEmbeddedBundle ? 'main.jsbundle' : 'missing'}
+                  </Text>
+                </View>
+                <View style={styles.diagRow}>
+                  <Text style={styles.diagKey}>build</Text>
+                  <Text style={[styles.diagVal, diagData.isDebugBuild ? styles.diagGood : styles.diagWarn]}>
+                    {diagData.isDebugBuild ? 'Debug' : 'Release'}
+                  </Text>
                 </View>
+                <View style={styles.diagRow}>
+                  <Text style={styles.diagKey}>embedded-first</Text>
+                  <Text style={[styles.diagVal, diagData.embeddedFirstHookInstalled ? styles.diagGood : styles.diagWarn]}>
+                    {diagData.embeddedFirstHookInstalled ? 'active' : 'inactive'}
+                  </Text>
+                </View>
+                {!diagData.embeddedFirstHookInstalled ? (
+                  <Text style={styles.diagWarning}>
+                    ⚠ Embedded-first hook not active (bundleRoot=
+                    {diagData.bundleRootHookInstalled ? 'Y' : 'N'}). Rebuild after pod install.
+                    Without it, Debug may still try Metro on launch.
+                  </Text>
+                ) : diagData.hasEmbeddedBundle === false ? (
+                  <Text style={styles.diagWarning}>
+                    ⚠ main.jsbundle is missing from the app package. Build with an embedded bundle
+                    (e.g. export/bundle) or cold start cannot use offline JS.
+                  </Text>
+                ) : null}
               </View>
             ) : null}
           </View>
@@ -723,6 +732,12 @@ const styles = StyleSheet.create({
     paddingVertical: 7,
   },
   urlText: { flex: 1, fontSize: 13, fontFamily: 'Courier', color: Colors.text },
+  sectionTitleRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 },
+  swizzleBadge: { flexDirection: 'row', alignItems: 'center', gap: 4, paddingHorizontal: 7, paddingVertical: 3, borderRadius: 10, backgroundColor: Colors.surface, borderWidth: 1, borderColor: Colors.border },
+  swizzleDot: { width: 6, height: 6, borderRadius: 3 },
+  dotGreen: { backgroundColor: '#34C759' },
+  dotRed: { backgroundColor: '#FF3B30' },
+  swizzleBadgeText: { fontSize: 11, color: Colors.textSecondary, fontFamily: 'Courier' },
   diagHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 },
   diagChevron: { fontSize: 12, color: Colors.textSecondary },
   diagCard: {
@@ -736,26 +751,11 @@ const styles = StyleSheet.create({
   diagKey: { fontSize: 12, color: Colors.textSecondary, fontFamily: 'Courier' },
   diagVal: { fontSize: 12, color: Colors.text, fontFamily: 'Courier', fontWeight: '600' },
   diagGood: { color: '#34C759' },
-  diagBad: { color: '#FF3B30' },
   diagWarn: { color: '#FF9500' },
-  diagLog: {
-    marginTop: 8,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: Colors.border,
-    paddingTop: 8,
-    gap: 4,
-  },
-  diagLogEntry: { fontSize: 11, fontFamily: 'Courier', color: Colors.textSecondary, lineHeight: 16 },
-  diagEmpty: { fontSize: 12, color: Colors.textLight, fontStyle: 'italic', paddingVertical: 4 },
-  diagActions: { flexDirection: 'row', gap: 8, marginTop: 10 },
-  diagBtn: {
-    flex: 1,
-    alignItems: 'center',
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: Colors.primary,
+  diagWarning: {
+    marginTop: 10,
+    fontSize: 11,
+    color: '#FF9500',
+    lineHeight: 16,
   },
-  diagBtnSecondary: { backgroundColor: 'transparent', borderWidth: 1, borderColor: Colors.border },
-  diagBtnText: { fontSize: 13, fontWeight: '600', color: '#fff' },
-  diagBtnSecondaryText: { color: Colors.primary },
 });

package/src/features/devConnect/nativeDevConnect.ts

@@ -3,10 +3,15 @@ import { NativeModules } from 'react-native';
 import { buildMetroTarget } from './devConnectUtils';
 
 export interface NativeDiagnostics {
-  log: string[];
-  swizzleInstalled: boolean;
-  swizzleInvoked: boolean;
   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 {
@@ -17,7 +22,6 @@ interface DebugToolkitDevConnectNativeModule {
   isDebugBuild?: () => Promise<boolean>;
   getPreference?: (key: string) => Promise<string | null>;
   getDiagnostics?: () => Promise<NativeDiagnostics>;
-  clearDiagnostics?: () => Promise<void>;
 }
 
 type MetroBundleFailureReason =
@@ -174,15 +178,3 @@ export async function getNativeDiagnostics(): Promise<NativeDiagnostics | null>
     return null;
   }
 }
-
-export async function clearNativeDiagnostics(): Promise<void> {
-  const nativeModule = getNativeModule();
-  if (!nativeModule?.clearDiagnostics) {
-    return;
-  }
-  try {
-    await nativeModule.clearDiagnostics();
-  } catch {
-    // best-effort
-  }
-}