feat: use RNC CLI explicitly when bundling the project (#869)

* fix: add --config-cmd to bundle options

* feat: replace whole shellScript instead of modifying it

* feat: remove modification of old Android configs for RN < 0.71

* feat: modify cliPath when modyfing android

* feat: add autolinking conditionionaly, better messages

* fix: properly escape shell script for iOS

* fix: remove extra dquote from modifyAndroid cliFile

* chore: add changeset

* refactor: expand RNC CLI

* fix: drop replacing bundleCommand on iOS

* chore: drop modyfing Android altogether

* chore: update changeset

Author: jbroma

.changeset/curvy-cars-pretend.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Add `--config-cmd` to options for bundle command for compatibility with RN >= 0.76

.changeset/rare-planes-lie.md

@@ -0,0 +1,8 @@
+---
+"@callstack/repack": minor
+"@callstack/repack-init": minor
+---
+
+Use `@react-native-community/cli` explictly iOS project settings (through `CLI_PATH`).
+
+Drop (unofficial) support for modyfing Android config for RN versions < 0.71.

packages/init/src/index.ts

@@ -4,7 +4,6 @@ import checkReactNative from './tasks/checkReactNative.js';
 import createBundlerConfig from './tasks/createBundlerConfig.js';
 import ensureProjectExists from './tasks/ensureProjectExists.js';
 import handleReactNativeConfig from './tasks/handleReactNativeConfig.js';
-import modifyAndroid from './tasks/modifyAndroid.js';
 import modifyIOS from './tasks/modifyIOS.js';
 
 import logger, { enableVerboseLogging } from './utils/logger.js';
@@ -31,16 +30,15 @@ export default async function run({
   try {
     const { cwd, rootDir } = await ensureProjectExists();
     const packageManager = await checkPackageManager(rootDir);
-    const reactNativeVersion = checkReactNative(cwd);
+
+    checkReactNative(cwd);
 
     await addDependencies(bundler, cwd, packageManager, repackVersion);
 
     await createBundlerConfig(bundler, cwd, templateType, entry);
 
     handleReactNativeConfig(bundler, cwd);
 
-    modifyAndroid(cwd, reactNativeVersion);
-
     modifyIOS(cwd);
 
     logger.done('Setup complete. Thanks for using Re.Pack!');

packages/init/src/tasks/modifyAndroid.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import dedent from 'dedent';
 import xcode from 'xcode';
 
 import logger from '../utils/logger.js';
@@ -41,24 +42,29 @@ function getBundleReactNativePhase(
   return bundleReactNative;
 }
 
-function modifyBundleReactNativeShellScript(
+function replaceBundleReactNativeShellScript(
   phase: ShellScriptBuildPhase
 ): ShellScriptBuildPhase {
-  const shellScriptContent = phase.shellScript;
-  const shellScriptContentLines = shellScriptContent.split('\\n');
+  const script = dedent`
+    set -e
 
-  const bundleCommand = 'export BUNDLE_COMMAND=webpack-bundle';
+    if [[ -f "$PODS_ROOT/../.xcode.env" ]]; then
+    source "$PODS_ROOT/../.xcode.env"
+    fi
+    if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
+    source "$PODS_ROOT/../.xcode.env.local"
+    fi
 
-  if (shellScriptContentLines.includes(bundleCommand)) {
-    logger.info(
-      `${phase.name} phase in project.pbxproj already contains ${bundleCommand}`
-    );
-    return phase;
-  }
+    export CLI_PATH="$("$NODE_BINARY" --print "require('path').dirname(require.resolve('@react-native-community/cli/package.json')) + '/build/bin.js'")"
+
+    WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+    REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
 
-  shellScriptContentLines.splice(1, 0, '', bundleCommand);
+    /bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+  `;
+
+  phase.shellScript = `"${script.replace(/"/g, '\\"').split('\n').join('\\n')}\\n"`;
 
-  phase.shellScript = shellScriptContentLines.join('\\n');
   return phase;
 }
 
@@ -67,7 +73,7 @@ function modifyPbxprojConfig(pbxprojPath: string) {
   project.parseSync();
 
   const bundleReactNativePhase = getBundleReactNativePhase(project);
-  modifyBundleReactNativeShellScript(bundleReactNativePhase);
+  replaceBundleReactNativeShellScript(bundleReactNativePhase);
 
   return project.writeSync();
 }
@@ -93,7 +99,10 @@ export default function modifyIOS(cwd: string) {
   const updatedConfig = modifyPbxprojConfig(projectPbxProjPath);
 
   fs.writeFileSync(projectPbxProjPath, updatedConfig);
-  logger.success(
-    `Added "webpack-bundle" as BUNDLE_COMMAND to build phase shellScript in ${relativeProjectPbxProjPath}`
+
+  logger.info(
+    `Added "@react-native-community/cli" as CLI_PATH to build phase shellScript in ${relativeProjectPbxProjPath}`
   );
+
+  logger.success('Successfully modified iOS project files');
 }

packages/init/src/tasks/modifyIOS.ts

@@ -113,11 +113,16 @@ export const bundleCommandOptions = [
     description:
       'Directory name where to store assets referenced in the bundle',
   },
-  // noop, but kept for compatibility
+  // noop, needed for compatibility
   {
     name: '--reset-cache',
     description: '(unsupported) Resets the transformation cache',
   },
+  // noop, needed for compatibility
+  {
+    name: '--config-cmd',
+    description: '(unsupported) Command to generate a JSON project config',
+  },
   // options specific to Re.Pack
   {
     name: '--json <statsFile>',