feat(macos): add macOS support for config plugins

[tido64]

Description

I had this branch lying around for about a year or so. Rebased, and brushed up a bit.

Platforms affected

• Android
• iOS
• macOS
• visionOS
• Windows

Test plan

1. Enable config plugins:

   diff --git a/example/app.json b/example/app.json
   index 3b8992ea..8be080e1 100644
   --- a/example/app.json
   +++ b/example/app.json
   @@ -13,6 +13,9 @@
          "presentationStyle": "modal"
        }
      ],
   +  "plugins": [
   +    "./test-plugin.js"
   +  ],
      "resources": {
        "android": [
          "dist/res",
   diff --git a/example/package.json b/example/package.json
   index 35447f2e..b02cc291 100644
   --- a/example/package.json
   +++ b/example/package.json
   @@ -29,6 +29,7 @@
      "devDependencies": {
        "@babel/core": "^7.1.6",
        "@babel/preset-env": "^7.1.6",
   +    "@expo/config-plugins": "^8.0.0",
        "@react-native/babel-preset": "^0.73.19",
        "@react-native/metro-config": "^0.73.3",
        "@rnx-kit/metro-config": "^1.3.15",

2. Create example/test-plugin.js:

   const { createRunOncePlugin, } = require("@expo/config-plugins");
   const { mergeContents } = require("@expo/config-plugins/build/utils/generateCode");
   const { macos } = require("react-native-test-app/plugins/index");
   
   function withCustomAppDelegate(config) {
     return macos.withAppDelegate(config, (config) => {
       config.modResults.contents = mergeContents({
         tag: "test-plugin.js",
         src: config.modResults.contents,
         newSrc: "// added by test-plugin.js",
         anchor: /import Cocoa/,
         offset: 1,
         comment: "//",
       }).contents;
       return config;
     });
   }
   
   module.exports = createRunOncePlugin(
     withCustomAppDelegate,
     "test-plugin.js",
     "UNVERSIONED"
   );

3. Under example folder, run pod install --project-directory=macos
4. Verify that AppDelegate.swift was written to:

   diff --git a/macos/ReactTestApp/AppDelegate.swift b/macos/ReactTestApp/AppDelegate.swift
   index 73a7288e..95f936ae 100644
   --- a/macos/ReactTestApp/AppDelegate.swift
   +++ b/macos/ReactTestApp/AppDelegate.swift
   @@ -1,4 +1,7 @@
    import Cocoa
   +// @generated begin test-plugin.js - expo prebuild (DO NOT MODIFY) sync-bf0d29fe87baaf78ed9ffca2f64bacb7c675534f
   +// added by test-plugin.js
   +// @generated end test-plugin.js
    import ReactTestApp_DevSupport
   
    @main

[shirakaba]

Unfortunately, Expo config plugins hard-code the string "ios" all over the place, consequentially searching in the ios folder and reading values from config.ios, so I'm not sure which plugins will work and which ones won't with this approach.

I opened a big PR last weekend to add macOS support to Expo config plugins, but I am not optimistic about it being reviewed anytime soon.

[tido64]

If I understand this correctly, this part just registers what's available for the macos platform. We need to explicitly implement the mods separately, using withMod, as in plugins/macos.js.

[shirakaba]

This is really clever. 👏

Given RNTA has a predictable structure, a lot of the complexity in the plugins (e.g. searching for all possible locations for an Info.plist or Xcodeproj) can be totally sidestepped, as you've done here. And that side-steps a lot of the coupling to ios.

I am not sure to what extent this sidesteps all of their hard-coding of the ios platform, though. But given how your test passes, maybe it's quite a lot. Surely at least one of these will end up referring to config.ios or the ios folder at some point, though? Do you have an impression of the extent to which Expo config plugins will work?

[tido64]

As far as I've understood, the providers are just functions for making modifications. They don't have props that are platform specific, but may be pointing to some iOS specific paths as you're suggesting. We should be overwriting all the props here (TypeScript would complain otherwise). Save for the null providers, I think we can say we are complete.

That said, these providers aren't supposed to be platform specific. The with* functions (e.g. withAppDelegate) are platform specific, and we need a separate set for macOS. That's what I've done here:

react-native-test-app/plugins/macos.js

Lines 35 to 79 in 622a257

	function withAppDelegate(config, action) {
	return withMod(config, {
	platform: macosPlatform,
	mod: "appDelegate",
	action,
	});
	}
	/**
	* Provides the `Info.plist` file for modification.
	* @see {@link https://github.com/expo/expo/blob/sdk-51/packages/%40expo/config-plugins/src/plugins/ios-plugins.ts#L116}
	* @param {ExportedConfig} config Exported config
	* @param {Mod} action Method to run on the mod when the config is compiled
	* @returns {ExportedConfig} Modified config
	*/
	function withInfoPlist(config, action) {
	return withMod(config, {
	platform: macosPlatform,
	mod: "infoPlist",
	async action(cfg) {
	/** @type {ExportedConfigWithPropsMac} */
	const config = await action(cfg);
	if (!config.macos) {
	config.macos = {};
	}
	config.macos.infoPlist = config.modResults;
	return config;
	},
	});
	}
	/**
	* Provides the main `.xcodeproj` for modification.
	* @see {@link https://github.com/expo/expo/blob/sdk-51/packages/%40expo/config-plugins/src/plugins/ios-plugins.ts#L173}
	* @param {ExportedConfig} config Exported config
	* @param {Mod} action Method to run on the mod when the config is compiled
	* @returns {ExportedConfig} Modified config
	*/
	function withXcodeProject(config, action) {
	return withMod(config, {
	platform: macosPlatform,
	mod: "xcodeproj",
	action,
	});
	}

Which means that for now, we only support these four functions. And you will need to import them from react-native-test-app/plugins/macos.js.