react-native-debug-toolkit 3.3.4 → 3.5.0

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 };

package/scripts/bundle/ios.js

@@ -1,179 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const xcode = require('xcode');
-
-const PHASE_NAME = 'Bundle React Native code and images';
-const BEGIN = '# react-native-debug-toolkit: begin debug bundle';
-const END = '# react-native-debug-toolkit: end debug bundle';
-const BLOCK = `${BEGIN}\nexport FORCE_BUNDLING=1\n${END}`;
-
-function stripQuotes(value) {
-  return String(value || '').replace(/^"|"$/g, '');
-}
-
-function findProjects(cwd) {
-  const iosDir = path.join(cwd, 'ios');
-  if (!fs.existsSync(iosDir)) {
-    return [];
-  }
-
-  return fs.readdirSync(iosDir)
-    .filter((entry) => entry.endsWith('.xcodeproj') && entry !== 'Pods.xcodeproj')
-    .map((entry) => path.join(iosDir, entry, 'project.pbxproj'))
-    .filter((file) => fs.existsSync(file));
-}
-
-function decodeScript(value) {
-  if (!value) {
-    return '';
-  }
-
-  try {
-    return JSON.parse(value);
-  } catch {
-    return stripQuotes(value);
-  }
-}
-
-function encodeScript(value) {
-  return JSON.stringify(value);
-}
-
-function phaseName(phase) {
-  return stripQuotes(phase.name || phase.comment);
-}
-
-function isAppTarget(target) {
-  return stripQuotes(target.productType) === 'com.apple.product-type.application';
-}
-
-function targetName(target) {
-  return stripQuotes(target.name || target.productName || target.comment);
-}
-
-function targetBuildPhaseIds(target) {
-  return (target.buildPhases || []).map((phaseRef) => {
-    if (typeof phaseRef === 'string') {
-      return phaseRef;
-    }
-    return phaseRef.value;
-  });
-}
-
-function sectionEntries(objects, sectionName, isaName) {
-  const section = objects[sectionName];
-  if (section) {
-    return Object.entries(section)
-      .filter(([key]) => !key.endsWith('_comment'));
-  }
-
-  return Object.entries(objects)
-    .filter(([key, value]) => !key.endsWith('_comment') && value && value.isa === isaName)
-    .map(([key, value]) => [key, { ...value, comment: objects[`${key}_comment`] }]);
-}
-
-function loadTarget(cwd, iosTarget) {
-  const projects = findProjects(cwd);
-  if (projects.length !== 1) {
-    throw new Error(`Expected one Xcode project, found ${projects.length}. Pass --ios-target after selecting the app project.`);
-  }
-
-  const pbxFile = projects[0];
-  const proj = xcode.project(pbxFile).parseSync();
-  const objects = proj.hash.project.objects;
-  const nativeTargets = sectionEntries(objects, 'PBXNativeTarget', 'PBXNativeTarget');
-  const shellPhases = new Map(sectionEntries(objects, 'PBXShellScriptBuildPhase', 'PBXShellScriptBuildPhase'));
-
-  const appTargets = nativeTargets
-    .filter(([, target]) => isAppTarget(target));
-
-  const matches = iosTarget
-    ? appTargets.filter(([, target]) => targetName(target) === iosTarget)
-    : appTargets;
-
-  if (matches.length !== 1) {
-    throw new Error(`Expected one iOS app target, found ${matches.length}. Pass --ios-target <name>.`);
-  }
-
-  const [, target] = matches[0];
-  for (const phaseId of targetBuildPhaseIds(target)) {
-    const phase = shellPhases.get(phaseId);
-    if (!phase || phaseName(phase) !== PHASE_NAME) {
-      continue;
-    }
-
-    const script = decodeScript(phase.shellScript);
-    if (!script.includes('react-native-xcode.sh') && !script.includes('with-environment.sh')) {
-      throw new Error(`${PHASE_NAME} does not call React Native bundling script.`);
-    }
-
-    return { pbxFile, proj, phase };
-  }
-
-  throw new Error(`${PHASE_NAME} phase not found on iOS app target.`);
-}
-
-function insertBlock(script) {
-  if (script.includes(BEGIN)) {
-    return script;
-  }
-  return `${BLOCK}\n${script}`;
-}
-
-function removeBlock(script) {
-  return script.replace(
-    /# react-native-debug-toolkit: begin debug bundle\r?\nexport FORCE_BUNDLING=1\r?\n# react-native-debug-toolkit: end debug bundle\r?\n?/g,
-    '',
-  );
-}
-
-function writeProject(ctx, script) {
-  ctx.phase.shellScript = encodeScript(script);
-  fs.writeFileSync(ctx.pbxFile, ctx.proj.writeSync());
-}
-
-function setupIosBundle(options) {
-  const ctx = loadTarget(options.cwd, options.iosTarget);
-  const script = decodeScript(ctx.phase.shellScript);
-  const next = insertBlock(script);
-
-  if (next === script) {
-    return { ok: true, changed: false };
-  }
-
-  writeProject(ctx, next);
-  return { ok: true, changed: true };
-}
-
-function undoIosBundle(options) {
-  const ctx = loadTarget(options.cwd, options.iosTarget);
-  const script = decodeScript(ctx.phase.shellScript);
-  const next = removeBlock(script);
-
-  if (next === script) {
-    return { ok: true, changed: false };
-  }
-
-  writeProject(ctx, next);
-  return { ok: true, changed: true };
-}
-
-function checkIosBundle(options) {
-  const ctx = loadTarget(options.cwd, options.iosTarget);
-  const script = decodeScript(ctx.phase.shellScript);
-
-  return {
-    ok: script.includes(BLOCK),
-    changed: false,
-  };
-}
-
-module.exports = {
-  setupIosBundle,
-  undoIosBundle,
-  checkIosBundle,
-  BEGIN,
-  END,
-};

package/scripts/bundle/setup.js

@@ -1,39 +0,0 @@
-'use strict';
-
-const { setupIosBundle, undoIosBundle, checkIosBundle } = require('./ios');
-const { setupAndroidBundle, undoAndroidBundle, checkAndroidBundle } = require('./android');
-
-async function setupBundle(options) {
-  const platforms = options.platform === 'all' ? ['ios', 'android'] : [options.platform];
-  const results = [];
-
-  for (const platform of platforms) {
-    if (platform === 'ios') {
-      if (options.undo) {
-        results.push(undoIosBundle(options));
-      } else if (options.check) {
-        results.push(checkIosBundle(options));
-      } else {
-        results.push(setupIosBundle(options));
-      }
-      continue;
-    }
-
-    if (platform === 'android') {
-      if (options.undo) {
-        results.push(undoAndroidBundle(options));
-      } else if (options.check) {
-        results.push(checkAndroidBundle(options));
-      } else {
-        results.push(setupAndroidBundle(options));
-      }
-      continue;
-    }
-
-    throw new Error(`Unsupported platform: ${platform}`);
-  }
-
-  return results;
-}
-
-module.exports = { setupBundle };

package/scripts/debug-bundle.gradle

@@ -1,147 +0,0 @@
-// react-native-debug-toolkit: persistent debug/development bundle generation
-
-import java.util.Locale
-import javax.inject.Inject
-import org.gradle.api.DefaultTask
-import org.gradle.api.GradleException
-import org.gradle.api.file.DirectoryProperty
-import org.gradle.api.file.RegularFileProperty
-import org.gradle.api.provider.ListProperty
-import org.gradle.api.provider.Property
-import org.gradle.api.tasks.Input
-import org.gradle.api.tasks.InputDirectory
-import org.gradle.api.tasks.InputFile
-import org.gradle.api.tasks.Optional
-import org.gradle.api.tasks.OutputDirectory
-import org.gradle.api.tasks.TaskAction
-import org.gradle.process.ExecOperations
-
-abstract class DebugToolkitBundleTask extends DefaultTask {
-  @Inject
-  abstract ExecOperations getExecOperations()
-
-  @InputDirectory
-  abstract DirectoryProperty getRoot()
-
-  @InputFile
-  abstract RegularFileProperty getCliFile()
-
-  @InputFile
-  @Optional
-  abstract RegularFileProperty getEntryFile()
-
-  @InputFile
-  @Optional
-  abstract RegularFileProperty getBundleConfig()
-
-  @Input
-  abstract ListProperty<String> getNodeExecutableAndArgs()
-
-  @Input
-  abstract Property<String> getBundleCommand()
-
-  @Input
-  abstract Property<String> getBundleAssetName()
-
-  @Input
-  abstract ListProperty<String> getExtraPackagerArgs()
-
-  @OutputDirectory
-  abstract DirectoryProperty getJsBundleDir()
-
-  @OutputDirectory
-  abstract DirectoryProperty getResourcesDir()
-
-  @TaskAction
-  void run() {
-    def rootFile = root.get().asFile
-    def bundleOutput = new File(jsBundleDir.get().asFile, bundleAssetName.get())
-    def entry = resolveEntryFile(rootFile)
-    jsBundleDir.get().asFile.mkdirs()
-    resourcesDir.get().asFile.mkdirs()
-
-    def command = []
-    command.addAll(nodeExecutableAndArgs.get())
-    command.add(cliFile.get().asFile.absolutePath)
-    command.add(bundleCommand.get())
-    command.addAll([
-      "--platform", "android",
-      "--dev", "true",
-      "--entry-file", entry.absolutePath,
-      "--bundle-output", bundleOutput.absolutePath,
-      "--assets-dest", resourcesDir.get().asFile.absolutePath,
-    ])
-
-    if (bundleConfig.isPresent()) {
-      command.add("--config")
-      command.add(bundleConfig.get().asFile.absolutePath)
-    }
-
-    command.addAll(extraPackagerArgs.get())
-
-    execOperations.exec {
-      workingDir(rootFile)
-      commandLine(command)
-    }
-  }
-
-  private File resolveEntryFile(File rootFile) {
-    if (entryFile.isPresent()) {
-      return entryFile.get().asFile
-    }
-
-    def androidEntry = new File(rootFile, "index.android.js")
-    return androidEntry.exists() ? androidEntry : new File(rootFile, "index.js")
-  }
-}
-
-def toolkitCapitalize = { String value ->
-  value.length() == 0 ? value : value.substring(0, 1).toUpperCase(Locale.ROOT) + value.substring(1)
-}
-
-def toolkitReactExt = project.extensions.findByName("react")
-def toolkitAndroidComponents = project.extensions.findByName("androidComponents")
-
-if (toolkitAndroidComponents == null) {
-  throw new GradleException("react-native-debug-toolkit debug-bundle.gradle requires the Android Gradle Plugin.")
-}
-
-def toolkitDefaultRoot = project.rootProject.layout.projectDirectory.dir("../")
-def toolkitDebuggableVariants = toolkitReactExt?.debuggableVariants?.getOrElse(["debug"]) ?: ["debug"]
-
-toolkitAndroidComponents.onVariants(toolkitAndroidComponents.selector().all()) { variant ->
-  def variantName = variant.name
-  def isDebuggable = toolkitDebuggableVariants.any { it.equalsIgnoreCase(variantName) }
-
-  if (!isDebuggable) {
-    return
-  }
-
-  def capName = toolkitCapitalize(variantName)
-  def bundleTask = tasks.register("createDebugToolkit${capName}JsAndAssets", DebugToolkitBundleTask) {
-    group = "react"
-    description = "Generate embedded React Native JS bundle for ${variantName} debug build."
-
-    root.set(toolkitReactExt?.root ?: toolkitDefaultRoot)
-    cliFile.set(toolkitReactExt?.cliFile ?: root.file("node_modules/react-native/cli.js"))
-    if (toolkitReactExt?.entryFile?.isPresent()) {
-      entryFile.set(toolkitReactExt.entryFile)
-    }
-    if (toolkitReactExt?.bundleConfig?.isPresent()) {
-      bundleConfig.set(toolkitReactExt.bundleConfig)
-    }
-    nodeExecutableAndArgs.set(toolkitReactExt?.nodeExecutableAndArgs ?: ["node"])
-    bundleCommand.set(toolkitReactExt?.bundleCommand ?: "bundle")
-    bundleAssetName.set(toolkitReactExt?.bundleAssetName ?: "index.android.bundle")
-    extraPackagerArgs.set(toolkitReactExt?.extraPackagerArgs ?: [])
-    jsBundleDir.set(project.layout.buildDirectory.dir("generated/assets/react-native-debug-toolkit/${variantName}"))
-    resourcesDir.set(project.layout.buildDirectory.dir("generated/res/react-native-debug-toolkit/${variantName}"))
-  }
-
-  variant.sources.assets?.addGeneratedSourceDirectory(bundleTask) { task ->
-    task.jsBundleDir
-  }
-  variant.sources.res?.addGeneratedSourceDirectory(bundleTask) { task ->
-    task.resourcesDir
-  }
-}

package/src/ui/panel/FeatureTabBar.tsx

@@ -1,204 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Animated,
-  ScrollView,
-  TouchableOpacity,
-} from 'react-native';
-import { Colors } from '../theme/colors';
-
-export interface TabItem {
-  id: string;
-  label: string;
-}
-
-interface FeatureTabBarProps {
-  tabs: TabItem[];
-  activeIndex: number;
-  onSelectTab: (index: number) => void;
-}
-
-export function FeatureTabBar({ tabs, activeIndex, onSelectTab }: FeatureTabBarProps) {
-  const [underlineWidth, setUnderlineWidth] = useState(0);
-  const underlineTranslateX = useRef(new Animated.Value(0)).current;
-  const tabScrollViewRef = useRef<ScrollView>(null);
-  const tabLayouts = useRef<Array<{ x: number; width: number }>>([]);
-  const tabScrollOffset = useRef(0);
-  const tabViewportWidth = useRef(0);
-  const tabContentWidth = useRef(0);
-  const underlineInit = useRef(false);
-  const isSwitching = useRef(false);
-
-  const maxTabScroll = useCallback(
-    () => Math.max(0, tabContentWidth.current - tabViewportWidth.current),
-    [],
-  );
-  const clampScroll = useCallback(
-    (offset: number) => Math.min(Math.max(0, offset), maxTabScroll()),
-    [maxTabScroll],
-  );
-  const getTabScrollTarget = useCallback(
-    (index: number) => {
-      const layout = tabLayouts.current[index];
-      return layout ? clampScroll(layout.x - 60) : clampScroll(tabScrollOffset.current);
-    },
-    [clampScroll],
-  );
-
-  const animateUnderline = useCallback(
-    (index: number, scrollOffset?: number) => {
-      const layout = tabLayouts.current[index];
-      if (!layout) return;
-      const offsetX = clampScroll(scrollOffset ?? tabScrollOffset.current);
-      setUnderlineWidth(layout.width);
-      Animated.spring(underlineTranslateX, {
-        toValue: layout.x - offsetX,
-        friction: 7,
-        tension: 50,
-        useNativeDriver: true,
-      }).start();
-    },
-    [clampScroll, underlineTranslateX],
-  );
-
-  const syncUnderlineToActiveTab = useCallback(() => {
-    const layout = tabLayouts.current[activeIndex];
-    if (!layout) return;
-    const clamped = clampScroll(tabScrollOffset.current);
-    if (clamped !== tabScrollOffset.current) tabScrollOffset.current = clamped;
-    underlineTranslateX.setValue(layout.x - clamped);
-    setUnderlineWidth(layout.width);
-  }, [activeIndex, clampScroll, underlineTranslateX]);
-
-  const tryInit = useCallback(() => {
-    if (underlineInit.current || tabViewportWidth.current <= 0 || tabContentWidth.current <= 0)
-      return;
-    const layout = tabLayouts.current[activeIndex];
-    if (!layout) return;
-    const target = getTabScrollTarget(activeIndex);
-    tabScrollOffset.current = target;
-    tabScrollViewRef.current?.scrollTo({ x: target, animated: false });
-    underlineTranslateX.setValue(layout.x - target);
-    setUnderlineWidth(layout.width);
-    underlineInit.current = true;
-  }, [activeIndex, getTabScrollTarget, underlineTranslateX]);
-
-  const handleSelectTab = useCallback(
-    (index: number) => {
-      if (isSwitching.current || index === activeIndex) return;
-      isSwitching.current = true;
-
-      const layout = tabLayouts.current[index];
-      if (layout) {
-        const target = getTabScrollTarget(index);
-        tabScrollOffset.current = target;
-        tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
-        animateUnderline(index, target);
-      }
-
-      onSelectTab(index);
-      setTimeout(() => {
-        isSwitching.current = false;
-      }, 350);
-    },
-    [activeIndex, animateUnderline, getTabScrollTarget, onSelectTab],
-  );
-
-  // React to external activeIndex changes (e.g. swipe-to-switch)
-  useEffect(() => {
-    if (!underlineInit.current) return;
-    const layout = tabLayouts.current[activeIndex];
-    if (!layout) return;
-    const target = getTabScrollTarget(activeIndex);
-    tabScrollOffset.current = target;
-    tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
-    animateUnderline(activeIndex, target);
-  }, [activeIndex, animateUnderline, getTabScrollTarget]);
-
-  return (
-    <View style={styles.container}>
-      <ScrollView
-        ref={tabScrollViewRef}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.scrollContent}
-        onLayout={(e) => {
-          tabViewportWidth.current = e.nativeEvent.layout.width;
-          tryInit();
-        }}
-        onContentSizeChange={(width) => {
-          tabContentWidth.current = width;
-          tryInit();
-        }}
-        onScroll={(e) => {
-          tabScrollOffset.current = clampScroll(e.nativeEvent.contentOffset.x);
-          if (!isSwitching.current) syncUnderlineToActiveTab();
-        }}
-        scrollEventThrottle={16}
-      >
-        {tabs.map((tab, index) => (
-          <TouchableOpacity
-            key={tab.id}
-            style={styles.tab}
-            onPress={() => handleSelectTab(index)}
-            activeOpacity={0.7}
-            onLayout={(e) => {
-              const { x, width } = e.nativeEvent.layout;
-              tabLayouts.current[index] = { x, width };
-              if (index === activeIndex) tryInit();
-            }}
-          >
-            <Text
-              style={[styles.tabText, activeIndex === index && styles.activeTabText]}
-              numberOfLines={1}
-            >
-              {tab.label}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-      <Animated.View
-        style={[
-          styles.underline,
-          { width: underlineWidth, transform: [{ translateX: underlineTranslateX }] },
-        ]}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: Colors.surface,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.border,
-  },
-  scrollContent: {
-    paddingHorizontal: 20,
-    flexDirection: 'row',
-  },
-  tab: {
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    marginRight: 8,
-  },
-  tabText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: Colors.textLight,
-  },
-  activeTabText: {
-    color: Colors.primary,
-    fontWeight: '600',
-  },
-  underline: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    height: 2.5,
-    borderRadius: 1.25,
-    backgroundColor: Colors.primary,
-  },
-});