[generator-macos] Use CocoaPods to build iOS and macOS targets (#298)

* [generator-macos] Import upstream v0.62 template and add macOS target

* [generator-macos] Make targets build using CP

* [generator-macos] Give macOS app localhost access

* [generator-macos] Update pbxproj after pod install

* [generator-macos] Remove last refs to Flipper

* [generator-macos] Revert some unneeded changes

* [CI] Run pod install before run-macos

* [CLI] No longer use legacy build system

* [CLI] Don't try to parse build output

Author: alloy

.ado/templates/react-native-macos-init.yml

@@ -96,6 +96,12 @@ steps:
       script: npx react-native-macos-init --version latest --overwrite --prerelease
       workingDirectory: $(Agent.BuildDirectory)/testcli
 
+  - task: CmdLine@2
+    displayName: Install pods
+    inputs:
+      script: pod install
+      workingDirectory: $(Agent.BuildDirectory)/testcli/macos
+
   - task: CmdLine@2
     displayName: Run macos
     inputs:

React/Modules/RCTUIManager.m

@@ -37,8 +37,10 @@
 #endif // TODO(macOS ISS#2323203)
 #import "RCTShadowView+Internal.h"
 #import "RCTShadowView.h"
+#if !TARGET_OS_OSX // TODO(macOS ISS#2323203)
 #import "RCTSurfaceRootShadowView.h"
 #import "RCTSurfaceRootView.h"
+#endif // TODO(macOS ISS#2323203)
 #import "RCTUIManagerObserverCoordinator.h"
 #import "RCTUIManagerUtils.h"
 #import "RCTUtils.h"

React/React-Core.podspec

@@ -39,11 +39,11 @@ Pod::Spec.new do |s|
 # TODO(macOS GH#214)
                              "**/MacOS/*"
   s.osx.exclude_files      = "Modules/RCTRedBoxExtraDataViewController.{h,m}",
-                             "Modules/RCTStatusBarManager.*",
                              "UIUtils/*",
                              "Profiler/{RCTFPSGraph,RCTPerfMonitor}.*",
                              "Profiler/RCTProfileTrampoline-{arm,arm64,i386}.S",
-                             "Base/{RCTPlatform,RCTKeyCommands}.*",
+                             "Base/RCTKeyCommands.*",
+                             "Base/RCTPlatform.m",
                              "Base/Surface/SurfaceHostingView/*",
                              "Base/Surface/RCTSurface{,Delegate,Root*}.*",
                              "Base/RCTTV*.*",

local-cli/generator-common/index.js

@@ -1,16 +1,35 @@
+// @ts-check
+
 const fs = require('fs');
 const chalk = require('chalk');
 const path = require('path');
 const copyAndReplace = require('@react-native-community/cli/build/tools/copyAndReplace').default;
 const walk = require('@react-native-community/cli/build/tools/walk').default;
 const prompt = require('@react-native-community/cli/build/tools/generator/promptSync').default();
 
+/**
+ * @param {string} destPath
+ */
 function createDir(destPath) {
   if (!fs.existsSync(destPath)) {
-    fs.mkdirSync(destPath);
+    fs.mkdirSync(destPath, { recursive: true });
   }
 }
 
+/**
+ * @todo Move this upstream to @react-native-community/cli
+ *
+ * @param {string} templatePath 
+ * @param {Record<string, string>} replacements 
+ */
+function replaceInPath(templatePath, replacements) {
+  let result = templatePath;
+  Object.keys(replacements).forEach(key => {
+    result = result.replace(key, replacements[key]);
+  });
+  return result;
+}
+
 function copyAndReplaceWithChangedCallback(srcPath, destRoot, relativeDestPath, replacements, alwaysOverwrite) {
   if (!replacements) {
     replacements = {};
@@ -35,15 +54,23 @@ function copyAndReplaceWithChangedCallback(srcPath, destRoot, relativeDestPath,
   );
 }
 
+/**
+ * @param {string} srcPath
+ * @param {string} destPath
+ * @param {string} relativeDestDir
+ * @param {Record<string, string>} replacements
+ * @param {boolean} alwaysOverwrite 
+ */
 function copyAndReplaceAll(srcPath, destPath, relativeDestDir, replacements, alwaysOverwrite) {
   walk(srcPath).forEach(absoluteSrcFilePath => {
     const filename = path.relative(srcPath, absoluteSrcFilePath);
-    const relativeDestPath = path.join(relativeDestDir, filename);
+    const relativeDestPath = path.join(relativeDestDir, replaceInPath(filename, replacements));
     copyAndReplaceWithChangedCallback(absoluteSrcFilePath, destPath, relativeDestPath, replacements, alwaysOverwrite);
   });
 }
 
-function alwaysOverwriteContentChangedCallback(  absoluteSrcFilePath,
+function alwaysOverwriteContentChangedCallback(
+  absoluteSrcFilePath,
   relativeDestPath,
   contentChanged
 ) {

local-cli/generator-macos/index.js

@@ -1,4 +1,7 @@
+// @ts-check
+
 'use strict';
+
 const chalk = require('chalk');
 const path = require('path');
 const childProcess = require('child_process');
@@ -10,7 +13,14 @@ const {
 } = require('../generator-common');
 
 const macOSDir = 'macos';
+const oldProjectName = 'HelloWorld';
 
+/**
+ * @param {string} srcRootPath
+ * @param {string} destPath
+ * @param {string} newProjectName
+ * @param {{ overwrite?: boolean }} options 
+ */
 function copyProjectTemplateAndReplace(
   srcRootPath,
   destPath,
@@ -29,29 +39,23 @@ function copyProjectTemplateAndReplace(
     throw new Error('Need a project name');
   }
 
-  const projectNameMacOS = newProjectName + '-macOS';
-  const projectNameIOS = newProjectName;
-  const xcodeProjName = newProjectName + '.xcodeproj';
-  const schemeNameMacOS = newProjectName + '-macOS.xcscheme';
-  const schemeNameIOS = newProjectName + '.xcscheme';
-
   createDir(path.join(destPath, macOSDir));
-  createDir(path.join(destPath, macOSDir, projectNameIOS));
-  createDir(path.join(destPath, macOSDir, projectNameMacOS));
-  createDir(path.join(destPath, macOSDir, xcodeProjName));
-  createDir(path.join(destPath, macOSDir, xcodeProjName, 'xcshareddata'));
-  createDir(path.join(destPath, macOSDir, xcodeProjName, 'xcshareddata/xcschemes'));
+  createDir(path.join(destPath, srcDirPath(newProjectName, 'iOS')));
+  createDir(path.join(destPath, srcDirPath(newProjectName, 'macOS')));
+  createDir(path.join(destPath, xcodeprojPath(newProjectName)));
+  createDir(path.join(destPath, schemesPath(newProjectName)));
 
   const templateVars = {
-    'HelloWorld': newProjectName,
+    [oldProjectName]: newProjectName,
   };
 
   [
-    { from: path.join(srcRootPath, 'macos/HelloWorld'), to: path.join(macOSDir, projectNameIOS) },
-    { from: path.join(srcRootPath, 'macos/HelloWorld-macOS'), to: path.join(macOSDir, projectNameMacOS) },
-    { from: path.join(srcRootPath, 'macos/HelloWorld.xcodeproj'), to: path.join(macOSDir, xcodeProjName) },
-    { from: path.join(srcRootPath, 'macos/xcschemes/HelloWorld-macOS.xcscheme'), to: path.join(macOSDir, xcodeProjName, 'xcshareddata/xcschemes', schemeNameMacOS) },
-    { from: path.join(srcRootPath, 'macos/xcschemes/HelloWorld.xcscheme'), to: path.join(macOSDir, xcodeProjName, 'xcshareddata/xcschemes', schemeNameIOS) },
+    { from: path.join(srcRootPath, macOSDir, 'Podfile'), to: path.join(macOSDir, 'Podfile') },
+    { from: path.join(srcRootPath, srcDirPath(oldProjectName, 'iOS')), to: srcDirPath(newProjectName, 'iOS') },
+    { from: path.join(srcRootPath, srcDirPath(oldProjectName, 'macOS')), to: srcDirPath(newProjectName, 'macOS') },
+    { from: path.join(srcRootPath, pbxprojPath(oldProjectName)), to: pbxprojPath(newProjectName) },
+    { from: path.join(srcRootPath, schemePath(oldProjectName, 'iOS')), to: schemePath(newProjectName, 'iOS') },
+    { from: path.join(srcRootPath, schemePath(oldProjectName, 'macOS')), to: schemePath(newProjectName, 'macOS') },
   ].forEach((mapping) => copyAndReplaceAll(mapping.from, destPath, mapping.to, templateVars, options.overwrite));
 
   [
@@ -61,14 +65,70 @@ function copyProjectTemplateAndReplace(
 
   console.log(`
   ${chalk.blue(`Run instructions for ${chalk.bold('macOS')}`)}:
+    • cd macos && pod install && cd ..
     • npx react-native run-macos
     ${chalk.dim('- or -')}
-    • Open ${macOSDir}/${xcodeProjName} in Xcode or run "xed -b ${macOSDir}"
+    • Open ${xcworkspacePath(newProjectName)} in Xcode or run "xed -b ${macOSDir}"
     • yarn start:macos
     • Hit the Run button
 `);
 }
 
+/**
+ * @param {string} basename 
+ * @param {"iOS" | "macOS"} platform 
+ */
+function projectName(basename, platform) {
+  return basename + '-' + platform;
+}
+
+/**
+ * @param {string} basename 
+ * @param {"iOS" | "macOS"} platform 
+ */
+function srcDirPath(basename, platform) {
+  return path.join(macOSDir, projectName(basename, platform));
+}
+
+/**
+ * @param {string} basename
+ */
+function xcodeprojPath(basename) {
+  return path.join(macOSDir, basename + '.xcodeproj');
+}
+
+/**
+ * @param {string} basename
+ */
+function xcworkspacePath(basename) {
+  return path.join(macOSDir, basename + '.xcworkspace');
+}
+
+/**
+ * @param {string} basename
+ */
+function pbxprojPath(basename) {
+  return path.join(xcodeprojPath(basename), 'project.pbxproj');
+}
+
+/**
+ * @param {string} basename
+ */
+function schemesPath(basename) {
+  return path.join(xcodeprojPath(basename), 'xcshareddata', 'xcschemes');
+}
+
+/**
+ * @param {string} basename
+ * @param {"iOS" | "macOS"} platform 
+ */
+function schemePath(basename, platform) {
+  return path.join(schemesPath(basename), projectName(basename, platform) + '.xcscheme');
+}
+
+/**
+ * @param {{ verbose?: boolean }=} options
+ */
 function installDependencies(options) {
   const cwd = process.cwd();
 
@@ -80,6 +140,8 @@ function installDependencies(options) {
 
   // Install dependencies using correct package manager
   const isYarn = fs.existsSync(path.join(cwd, 'yarn.lock'));
+
+  /** @type {{ stdio?: 'inherit' }} */
   const execOptions = options && options.verbose ? { stdio: 'inherit' } : {};
   childProcess.execSync(isYarn ? 'yarn' : 'npm i', execOptions);
 }

local-cli/generator-macos/templates/macos/HelloWorld/AppDelegate.h renamed to local-cli/generator-macos/templates/macos/HelloWorld-iOS/AppDelegate.h

@@ -1,15 +1,5 @@
 {
   "images" : [
-    {
-      "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "3x"
-    },
     {
       "idiom" : "iphone",
       "size" : "29x29",
@@ -39,11 +29,6 @@
       "idiom" : "iphone",
       "size" : "60x60",
       "scale" : "3x"
-    },
-    {
-      "idiom" : "ios-marketing",
-      "size" : "1024x1024",
-      "scale" : "1x"
     }
   ],
   "info" : {