@callstack/react-native-brownfield 2.2.0 → 3.0.0-rc.1

package/src/expo-config-plugin/android/withAndroidModuleFiles.ts

@@ -0,0 +1,139 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+import { withDangerousMod, type ConfigPlugin } from '@expo/config-plugins';
+
+import type {
+  RenderedTemplateFile,
+  ResolvedBrownfieldPluginConfigWithAndroid,
+} from '../types';
+import { Logger } from '../logging';
+import { renderTemplate } from '../template/engine';
+
+/**
+ * Creates the Android library module directory structure and files
+ */
+export function createAndroidModule({
+  androidDir,
+  config,
+  rnVersion,
+}: {
+  /**
+   * The root Android directory path
+   */
+  androidDir: string;
+
+  /**
+   * The resolved RN version
+   */
+  rnVersion: string;
+
+  /**
+   * The resolved Brownfield plugin configuration
+   */
+  config: ResolvedBrownfieldPluginConfigWithAndroid;
+}): void {
+  const { android } = config;
+  const moduleDir = path.join(androidDir, android.moduleName);
+
+  Logger.logDebug(`Creating Android module in: ${androidDir}`);
+
+  // generate module files
+  const files: RenderedTemplateFile[] = [
+    {
+      relativePath: 'build.gradle.kts',
+      content: renderTemplate('android', 'build.gradle.kts', {
+        '{{PACKAGE_NAME}}': android.packageName,
+        '{{MIN_SDK_VERSION}}': android.minSdkVersion.toString(),
+        '{{COMPILE_SDK_VERSION}}': android.compileSdkVersion.toString(),
+        '{{GROUP_ID}}': android.groupId,
+        '{{ARTIFACT_ID}}': android.artifactId,
+        '{{ARTIFACT_VERSION}}': android.version,
+        '{{RN_VERSION}}': rnVersion,
+      }),
+    },
+    {
+      relativePath: 'gradle.properties',
+      content: renderTemplate('android', 'gradle.properties', {}),
+    },
+    {
+      relativePath: 'src/main/AndroidManifest.xml',
+      content: renderTemplate('android', 'AndroidManifest.xml', {}),
+    },
+    {
+      relativePath: `src/main/java/${config.android.packageName.replace(/\./g, '/')}/ReactNativeHostManager.kt`,
+      content: renderTemplate('android', 'ReactNativeHostManager.kt', {
+        '{{PACKAGE_NAME}}': android.packageName,
+      }),
+    },
+    {
+      relativePath: 'consumer-rules.pro',
+      content: renderTemplate('android', 'consumer-rules.pro', {}),
+    },
+    {
+      relativePath: 'proguard-rules.pro',
+      content: renderTemplate('android', 'proguard-rules.pro', {}),
+    },
+  ];
+
+  // write files, possibly creating directories
+  for (const file of files) {
+    const filePath = path.join(moduleDir, file.relativePath);
+    const fileDir = path.dirname(filePath);
+
+    // create directory if it doesn't exist
+    if (!fs.existsSync(fileDir)) {
+      fs.mkdirSync(fileDir, { recursive: true });
+    }
+
+    fs.writeFileSync(filePath, file.content, 'utf8');
+
+    Logger.logDebug(`Created file: ${filePath}`);
+  }
+
+  Logger.logDebug(
+    `Android module "${android.moduleName}" created at ${moduleDir}`
+  );
+}
+
+/**
+ * Dangerous mod that creates the Android module directory and files
+ */
+export const withAndroidModuleFiles: ConfigPlugin<
+  ResolvedBrownfieldPluginConfigWithAndroid
+> = (config, props) => {
+  return withDangerousMod(config, [
+    'android',
+    async (dangerousConfig) => {
+      const androidDir = path.join(
+        dangerousConfig.modRequest.projectRoot,
+        'android'
+      );
+
+      let rnVersion: string;
+      try {
+        const rnPkgPath = require.resolve('react-native/package.json', {
+          paths: [dangerousConfig.modRequest.projectRoot],
+        });
+
+        const rnPkg = require(rnPkgPath);
+
+        rnVersion = rnPkg.version;
+
+        Logger.logDebug(`Resolved react-native version: ${rnVersion}`);
+      } catch {
+        throw new Error(
+          'Could not resolve react-native package version. Please ensure you have installed dependencies.'
+        );
+      }
+
+      createAndroidModule({
+        androidDir,
+        config: props,
+        rnVersion,
+      });
+
+      return dangerousConfig;
+    },
+  ]);
+};

package/src/expo-config-plugin/android/withBrownfieldAndroid.ts

@@ -0,0 +1,48 @@
+import {
+  withProjectBuildGradle,
+  withSettingsGradle,
+  type ConfigPlugin,
+} from '@expo/config-plugins';
+
+import { modifyRootBuildGradle, modifySettingsGradle } from './gradleHelpers';
+import { withAndroidModuleFiles } from './withAndroidModuleFiles';
+import type { ResolvedBrownfieldPluginConfigWithAndroid } from '../types';
+
+/**
+ * Android Config Plugin for integration with @callstack/react-native-brownfield.
+ *
+ * This plugin:
+ * 1. Creates a new Android Library module for the Brownfield AAR
+ * 3. Modifies settings.gradle to include the new module
+ * 4. Modifies root build.gradle to add Brownfield Gradle plugin
+ * 5. Generates the ReactNativeHostManager class inside the module
+ */
+export const withBrownfieldAndroid: ConfigPlugin<
+  ResolvedBrownfieldPluginConfigWithAndroid
+> = (config, props) => {
+  const androidConfig = props.android;
+
+  // Step 1: modify root build.gradle to add Brownfield Gradle plugin dependency
+  config = withProjectBuildGradle(config, (gradleConfig) => {
+    gradleConfig.modResults.contents = modifyRootBuildGradle(
+      gradleConfig.modResults.contents
+    );
+
+    return gradleConfig;
+  });
+
+  // Step 2: modify settings.gradle to include the new module
+  config = withSettingsGradle(config, (settingsConfig) => {
+    settingsConfig.modResults.contents = modifySettingsGradle(
+      settingsConfig.modResults.contents,
+      androidConfig.moduleName
+    );
+
+    return settingsConfig;
+  });
+
+  // Step 3: create the Android module files using dangerous mod
+  config = withAndroidModuleFiles(config, props);
+
+  return config;
+};

package/src/expo-config-plugin/app.plugin.ts

@@ -0,0 +1,10 @@
+/**
+ * Expo config plugin entry point
+ *
+ * This file is the entry point for the Expo config plugin.
+ * It's referenced in the package.json under "./app.plugin" export.
+ */
+
+import withBrownfield from './withBrownfield';
+
+export default withBrownfield;

package/src/expo-config-plugin/errors/SourceModificationError.ts

@@ -0,0 +1 @@
+export class SourceModificationError extends Error {}

package/src/expo-config-plugin/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Expo Config Plugin for integration with @callstack/react-native-brownfield.
+ * This plugin configures your Expo project to be packaged as an AAR (Android) or XCFramework (iOS).
+ */
+
+import withBrownfield from './withBrownfield';
+
+export default withBrownfield;

package/src/expo-config-plugin/ios/index.ts

@@ -0,0 +1,7 @@
+export { withBrownfieldIos } from './withBrownfieldIos';
+export {
+  withIosFrameworkFiles,
+  createIosFramework,
+} from './withIosFrameworkFiles';
+export { addFrameworkTarget } from './xcodeHelpers';
+export { modifyPodfile } from './podfileHelpers';

package/src/expo-config-plugin/ios/podfileHelpers.ts

@@ -0,0 +1,104 @@
+import { SourceModificationError } from '../errors/SourceModificationError';
+import { Logger } from '../logging';
+import { renderTemplate } from '../template/engine';
+
+const BROWNFIELD_POD_HOOK_MARKER_START =
+  '# >>> react-native-brownfield expo phase ordering >>>';
+const BROWNFIELD_POD_HOOK_MARKER_END =
+  '# <<< react-native-brownfield expo phase ordering <<<';
+
+function ensureExpoPhaseOrderingHook(podfile: string): string {
+  if (podfile.includes(BROWNFIELD_POD_HOOK_MARKER_START)) {
+    return podfile;
+  }
+
+  const hook = `
+${BROWNFIELD_POD_HOOK_MARKER_START}
+def reorder_brownfield_expo_patch_phase!(installer)
+  projects = installer.aggregate_targets.map(&:user_project).compact.uniq
+  projects.each do |project|
+    modified = false
+
+    project.native_targets.each do |target|
+      phases = target.build_phases
+      expo_idx = phases.index { |p| p.respond_to?(:name) && p.name == '[Expo] Configure project' }
+      patch_idx = phases.index { |p| p.respond_to?(:name) && p.name == 'Patch ExpoModulesProvider' }
+
+      next if expo_idx.nil? || patch_idx.nil?
+      next if patch_idx > expo_idx
+
+      patch = phases.delete_at(patch_idx)
+      expo_idx = phases.index { |p| p.respond_to?(:name) && p.name == '[Expo] Configure project' }
+      phases.insert(expo_idx + 1, patch)
+      modified = true
+    end
+
+    project.save if modified
+  end
+end
+
+post_integrate do |installer|
+  reorder_brownfield_expo_patch_phase!(installer)
+end
+${BROWNFIELD_POD_HOOK_MARKER_END}
+`;
+
+  return `${podfile.trimEnd()}\n\n${hook}\n`;
+}
+
+/**
+ * Modifies the Podfile to include the Brownfield framework target
+ * @param podfile The original Podfile content
+ * @param frameworkName The name of the framework target to add
+ * @returns The modified Podfile content
+ */
+export function modifyPodfile(
+  podfile: string,
+  frameworkName: string,
+  isExpoPre55: boolean
+): string {
+  // check if the framework target is already included
+  if (podfile.includes(`target '${frameworkName}'`)) {
+    Logger.logDebug(
+      `Framework target "${frameworkName}" already in Podfile, skipping modification`
+    );
+    return podfile;
+  }
+
+  Logger.logDebug(`Modifying Podfile for framework: ${frameworkName}`);
+
+  // insert the framework target after the main target's "do"
+  const frameworkTargetBlock = renderTemplate('ios', 'PodfileTargetBlock.rb', {
+    '{{FRAMEWORK_NAME}}': frameworkName,
+  });
+
+  // find insertion point after the first target's content begins, before the end of the target block
+  const mainTargetMatch = podfile.match(
+    /(target\s+['"][^'"]+['"]\s+do\s*\n)([\s\S]*?)(^end\s*$)/m
+  );
+
+  if (!mainTargetMatch) {
+    throw new SourceModificationError(
+      'Could not find main target in Podfile. Please manually add the framework target.'
+    );
+  }
+
+  const [, targetStart, targetContent] = mainTargetMatch;
+  const insertIndex =
+    podfile.indexOf(mainTargetMatch[0]) +
+    targetStart.length +
+    targetContent.length;
+
+  let modifiedPodfile =
+    podfile.slice(0, insertIndex) +
+    frameworkTargetBlock +
+    podfile.slice(insertIndex);
+
+  Logger.logDebug(`Added framework target "${frameworkName}" to Podfile`);
+
+  if (isExpoPre55) {
+    modifiedPodfile = ensureExpoPhaseOrderingHook(modifiedPodfile);
+  }
+
+  return modifiedPodfile;
+}

package/src/expo-config-plugin/ios/withBrownfieldIos.ts

@@ -0,0 +1,95 @@
+import {
+  withXcodeProject,
+  withPodfile,
+  type ConfigPlugin,
+} from '@expo/config-plugins';
+
+import {
+  addExpoPre55ShellPatchScriptPhase,
+  addFrameworkTarget,
+  addSourceFilesBuildPhase,
+  copyBundleReactNativePhase,
+} from './xcodeHelpers';
+import { modifyPodfile } from './podfileHelpers';
+import { withIosFrameworkFiles } from './withIosFrameworkFiles';
+import type { ResolvedBrownfieldPluginConfigWithIos } from '../types';
+import { Logger } from '../logging';
+
+/**
+ * iOS Config Plugin for integration with @callstack/react-native-brownfield.
+ *
+ * This plugin:
+ * 1. Creates a new Framework target in the Xcode project
+ * 2. Configures the Podfile to include the framework target
+ * 3. Adds necessary build configuration
+ * 4. Adds script phase to patch `ExpoModulesProvider.swift`
+ * 5. Adds the "Bundle React Native code and images" phase of Expo app target to the framework target
+ */
+export const withBrownfieldIos: ConfigPlugin<
+  ResolvedBrownfieldPluginConfigWithIos
+> = (config, props) => {
+  const expoMajor = config.sdkVersion
+    ? parseInt(config.sdkVersion.split('.')[0], 10)
+    : -1;
+  const isExpoPre55 = expoMajor < 55;
+
+  // Step 1: modify the Xcode project to add framework target &
+  config = withXcodeProject(config, (xcodeConfig) => {
+    const { modResults: project, modRequest } = xcodeConfig;
+
+    const { frameworkTargetUUID, targetAlreadyExists } = addFrameworkTarget(
+      project,
+      modRequest,
+      props.ios
+    );
+
+    if (targetAlreadyExists) {
+      Logger.logDebug(
+        `Skipping further Xcode modifications as framework target was already present`
+      );
+
+      return xcodeConfig;
+    }
+
+    // copy the "Bundle React Native code and images" build phase from the main target to the framework target
+    copyBundleReactNativePhase(project, frameworkTargetUUID);
+
+    // for Expo SDK versions < 55, add a script phase to patch ExpoModulesProvider.swift
+    if (isExpoPre55) {
+      Logger.logDebug(
+        `Adding ExpoModulesProvider patch phase for Expo SDK ${config.sdkVersion}`
+      );
+
+      addExpoPre55ShellPatchScriptPhase(project, {
+        frameworkName: props.ios.frameworkName,
+        frameworkTargetUUID: frameworkTargetUUID,
+      });
+    } else {
+      Logger.logDebug(
+        `Skipping ExpoModulesProvider patch phase for Expo SDK ${config.sdkVersion}`
+      );
+    }
+
+    addSourceFilesBuildPhase(project, frameworkTargetUUID, props.ios);
+
+    return xcodeConfig;
+  });
+
+  // Step 2: modify Podfile to include the framework target
+  config = withPodfile(config, (podfileConfig) => {
+    const { frameworkName } = props.ios;
+
+    podfileConfig.modResults.contents = modifyPodfile(
+      podfileConfig.modResults.contents,
+      frameworkName,
+      isExpoPre55
+    );
+
+    return podfileConfig;
+  });
+
+  // Step 3: create the iOS framework files using dangerous mod
+  config = withIosFrameworkFiles(config, props);
+
+  return config;
+};

package/src/expo-config-plugin/ios/withIosFrameworkFiles.ts

@@ -0,0 +1,95 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+import { withDangerousMod, type ConfigPlugin } from '@expo/config-plugins';
+
+import type {
+  RenderedTemplateFile,
+  ResolvedBrownfieldPluginConfigWithIos,
+} from '../types';
+import { Logger } from '../logging';
+import { renderTemplate } from '../template/engine';
+
+/**
+ * Returns rendered source files for the iOS framework
+ * @param ios The iOS Brownfield plugin configuration
+ * @returns The list of framework source files
+ */
+export function getFrameworkSourceFiles(
+  ios: ResolvedBrownfieldPluginConfigWithIos['ios']
+): RenderedTemplateFile[] {
+  return [
+    {
+      relativePath: `${ios.frameworkName}.swift`,
+      content: renderTemplate('ios', 'FrameworkInterface.swift', {}),
+    },
+    {
+      relativePath: 'Info.plist',
+      content: renderTemplate('ios', 'Info.plist', {
+        '{{BUNDLE_IDENTIFIER}}': ios.bundleIdentifier,
+      }),
+    },
+    {
+      relativePath: 'ReactNativeHostManager.swift',
+      content: renderTemplate('ios', 'ReactNativeHostManager.swift', {}),
+    },
+  ];
+}
+
+/**
+ * Creates the iOS framework directory structure and files
+ * @param iosDir The root iOS directory path
+ * @param config The resolved Brownfield plugin configuration
+ */
+export function createIosFramework(
+  iosDir: string,
+  config: ResolvedBrownfieldPluginConfigWithIos
+) {
+  const { ios } = config;
+  const frameworkDir = path.join(iosDir, ios.frameworkName);
+
+  // check if framework directory if it exists
+  if (fs.existsSync(frameworkDir)) {
+    Logger.logDebug(`Framework directory already exists: ${frameworkDir}`);
+
+    return;
+  }
+
+  Logger.logDebug(`Creating iOS framework in: ${frameworkDir}`);
+
+  // create framework directory
+  if (!fs.existsSync(frameworkDir)) {
+    fs.mkdirSync(frameworkDir, { recursive: true });
+
+    Logger.logDebug(`Created directory: ${frameworkDir}`);
+  }
+
+  // write files
+  for (const file of getFrameworkSourceFiles(ios)) {
+    const filePath = path.join(frameworkDir, file.relativePath);
+
+    fs.writeFileSync(filePath, file.content, 'utf8');
+  }
+
+  Logger.logDebug(
+    `iOS framework "${ios.frameworkName}" files created at ${frameworkDir}`
+  );
+}
+
+/**
+ * Dangerous mod that creates the iOS framework directory and files
+ */
+export const withIosFrameworkFiles: ConfigPlugin<
+  ResolvedBrownfieldPluginConfigWithIos
+> = (config, props) => {
+  return withDangerousMod(config, [
+    'ios',
+    async (dangerousConfig) => {
+      const iosDir = path.join(dangerousConfig.modRequest.projectRoot, 'ios');
+
+      createIosFramework(iosDir, props);
+
+      return dangerousConfig;
+    },
+  ]);
+};