feat: integrate react-native-brownfield (#271)

* static pod linkage and target settings

* add rn brownfield dependency

* replace swift impl with rn brownfield example

* mode -> configuration

* enlist brownfield plugin again

* upgrade rn brownfield version

* add brownfield template to tsconfig

* copy hermes and better logging

* expose ReactNativeBundle through the template

* changesets

* update docs

* remove the todo from podfile

* cleanup, format, sync fs

* Update website/docs/docs/brownfield/ios.mdx

* mention podfile changes

* support setting USE_FRAMEWORKS with brownfield option in pod install

* avoid calling xcode info twice, update swift file

* add comment

* update, simplify, add images

* typo

* use relative paths

* fix test

* fix: make e2e tests run in non-interactive mode

---------

Co-authored-by: Michał Pierzchała <[email protected]>

Author: atlj

.changeset/curvy-crabs-care.md

@@ -0,0 +1,5 @@
+---
+'@rnef/plugin-brownfield-ios': patch
+---
+
+Implement [react-native-brownfield](https://github.com/callstack/react-native-brownfield) to iOS brownfield template.

.changeset/rare-needles-accept.md

@@ -0,0 +1,5 @@
+---
+'@rnef/create-app': patch
+---
+
+List the `brownfield-ios` plugin on the plugins list shown while creating an app.

packages/create-app/package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "publish:npm": "npm publish --access public",
     "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc",
-    "e2e": "vitest --config vite.e2e.config.js"
+    "e2e": "CI=true vitest --config vite.e2e.config.js"
   },
   "bin": {
     "create-app": "./dist/src/bin.js"

packages/create-app/src/lib/templates.ts

@@ -32,7 +32,16 @@ export const TEMPLATES: TemplateInfo[] = [
   },
 ];
 
-export const PLUGINS: TemplateInfo[] = [];
+export const PLUGINS: TemplateInfo[] = [
+  {
+    type: 'npm',
+    name: 'brownfield-ios',
+    packageName: '@rnef/plugin-brownfield-ios',
+    version: 'latest',
+    directory: 'template',
+    importName: 'pluginBrownfieldIos',
+  },
+];
 
 export const BUNDLERS: TemplateInfo[] = [
   {

packages/create-app/src/lib/utils/prompts.ts

@@ -1,6 +1,7 @@
 import {
   color,
   intro,
+  isInteractive,
   note,
   outro,
   promptConfirm,
@@ -124,7 +125,7 @@ export function promptPlatforms(
 export function promptPlugins(
   plugins: TemplateInfo[]
 ): Promise<TemplateInfo[] | null> {
-  if (plugins.length === 0) {
+  if (plugins.length === 0 || !isInteractive()) {
     return Promise.resolve(null);
   }
 

packages/platform-android/src/lib/commands/buildAndroid/__tests__/buildAndroid.test.ts

@@ -2,7 +2,7 @@ import type { PathLike } from 'node:fs';
 import fs from 'node:fs';
 import type { AndroidProjectConfig } from '@react-native-community/cli-types';
 import * as tools from '@rnef/tools';
-import { color, spawn } from '@rnef/tools';
+import { spawn } from '@rnef/tools';
 import type { Mock } from 'vitest';
 import { test, vi } from 'vitest';
 import { buildAndroid, type BuildFlags } from '../buildAndroid.js';
@@ -80,9 +80,9 @@ test('buildAndroid runs gradle build with correct configuration for debug and ou
     cwd: '/android',
   });
   expect(spinnerMock.stop).toBeCalledWith(
-    `Build available at: ${color.cyan(
-      '/android/app/build/outputs/bundle/debug/app-debug.aab'
-    )}`
+    expect.stringContaining(
+      'android/app/build/outputs/bundle/debug/app-debug.aab'
+    )
   );
 });
 

packages/platform-android/src/lib/commands/buildAndroid/buildAndroid.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type { AndroidProjectConfig } from '@react-native-community/cli-types';
 import type { FingerprintSources } from '@rnef/tools';
 import {
@@ -43,7 +44,11 @@ export async function buildAndroid(
   if (outputFilePath) {
     const loader = spinner();
     loader.start('');
-    loader.stop(`Build available at: ${color.cyan(outputFilePath)}`);
+    loader.stop(
+      `Build available at: ${color.cyan(
+        path.relative(process.cwd(), outputFilePath)
+      )}`
+    );
   }
   outro('Success 🎉.');
 }

packages/platform-apple-helpers/src/lib/commands/build/createBuild.ts

@@ -27,18 +27,21 @@ export const createBuild = async ({
   projectRoot,
   reactNativePath,
   fingerprintOptions,
+  brownfield,
 }: {
   platformName: BuilderCommand['platformName'];
   projectConfig: ProjectConfig;
   args: BuildFlags;
   projectRoot: string;
   reactNativePath: string;
   fingerprintOptions: FingerprintSources;
+  brownfield?: boolean;
 }) => {
   await validateArgs(args);
 
   let xcodeProject: XcodeProjectInfo;
   let sourceDir: string;
+  let scheme: string;
   const deviceOrSimulator = args.destination
     ? // there can be multiple destinations, so we'll pick the first one
       args.destination[0].match(/simulator/i)
@@ -58,16 +61,24 @@ export const createBuild = async ({
       platformName,
       args,
       reactNativePath,
+      brownfield,
     });
     // The path may not exist when we archive
     if (!args.archive) {
       const loader = spinner();
       loader.start('');
-      loader.stop(`Build available at: ${color.cyan(appPath)}`);
+      loader.stop(
+        `Build available at: ${color.cyan(
+          path.relative(process.cwd(), appPath)
+        )}`
+      );
       saveLocalBuildCache(artifactName, appPath);
     }
     xcodeProject = buildAppResult.xcodeProject;
     sourceDir = buildAppResult.sourceDir;
+    // @ts-expect-error - scheme is not set when binaryPath is provided,
+    // which is not supported for build command (but is used by run command)
+    scheme = buildAppResult.scheme;
   } catch (error) {
     const message = `Failed to create ${args.archive ? 'archive' : 'build'}`;
     throw new RnefError(message, { cause: error });
@@ -92,6 +103,8 @@ export const createBuild = async ({
     // Save the IPA to the local build cache so it's available for remote-cache command
     saveLocalBuildCache(artifactName, ipaPath);
   }
+
+  return { scheme };
 };
 
 async function validateArgs(args: BuildFlags) {

packages/platform-apple-helpers/src/lib/utils/buildApp.ts

@@ -23,6 +23,7 @@ export async function buildApp({
   deviceName,
   reactNativePath,
   binaryPath,
+  brownfield,
 }: {
   args: RunFlags | BuildFlags;
   projectConfig: ProjectConfig;
@@ -33,6 +34,7 @@ export async function buildApp({
   projectRoot: string;
   reactNativePath: string;
   binaryPath?: string;
+  brownfield?: boolean;
 }) {
   if (binaryPath) {
     return {
@@ -53,7 +55,8 @@ export async function buildApp({
       platformName,
       sourceDir,
       args.newArch,
-      reactNativePath
+      reactNativePath,
+      brownfield
     );
     // When the project is not a workspace, we need to get the project config again,
     // because running pods install might have generated .xcworkspace project.

packages/platform-apple-helpers/src/lib/utils/pods.ts

@@ -23,7 +23,8 @@ export async function installPodsIfNeeded(
   platformName: ApplePlatform,
   sourceDir: string,
   newArch: boolean,
-  reactNativePath: string
+  reactNativePath: string,
+  brownfield?: boolean
 ) {
   const podsPath = path.join(sourceDir, 'Pods');
   const podfilePath = path.join(sourceDir, 'Podfile');
@@ -43,7 +44,13 @@ export async function installPodsIfNeeded(
 
   if (!podsDirExists || hashChanged) {
     await runCodegen({ projectRoot, platformName, reactNativePath, sourceDir });
-    await installPods({ projectRoot, sourceDir, podfilePath, newArch });
+    await installPods({
+      projectRoot,
+      sourceDir,
+      podfilePath,
+      newArch,
+      brownfield,
+    });
     cacheManager.set(
       cacheKey,
       calculateCurrentHash({ podfilePath, podsPath, nativeDependencies })
@@ -92,6 +99,7 @@ async function runPodInstall(options: {
   sourceDir: string;
   newArch: boolean;
   useBundler: boolean;
+  brownfield?: boolean;
 }) {
   if (!options.useBundler) {
     await validatePodCommand(options.sourceDir);
@@ -113,6 +121,7 @@ async function runPodInstall(options: {
       env: {
         RCT_NEW_ARCH_ENABLED: options.newArch ? '1' : '0',
         RCT_IGNORE_PODS_DEPRECATION: '1',
+        ...(options.brownfield && { USE_FRAMEWORKS: 'static' }),
         ...(process.env['USE_THIRD_PARTY_JSC'] && {
           USE_THIRD_PARTY_JSC: process.env['USE_THIRD_PARTY_JSC'],
         }),
@@ -137,6 +146,7 @@ async function runPodInstall(options: {
         sourceDir: options.sourceDir,
         newArch: options.newArch,
         useBundler: options.useBundler,
+        brownfield: options.brownfield,
       });
     } else {
       throw new RnefError(
@@ -177,6 +187,7 @@ async function installPods(options: {
   projectRoot: string;
   podfilePath: string;
   newArch: boolean;
+  brownfield?: boolean;
 }) {
   if (!fs.existsSync(options.podfilePath)) {
     logger.debug(
@@ -195,6 +206,7 @@ async function installPods(options: {
     sourceDir: options.sourceDir,
     newArch: options.newArch,
     useBundler,
+    brownfield: options.brownfield,
   });
 }