@bacons/apple-targets 0.0.5 → 0.0.7

package/README.md

@@ -3,12 +3,10 @@
 > [!WARNING]
 > This is highly experimental and not part of any official Expo workflow.
 
-
 <img width="1061" alt="Screenshot 2023-06-10 at 1 59 26 PM" src="https://github.com/EvanBacon/expo-apple-targets/assets/9664363/4cd8399d-53aa-401a-9caa-3a1432a0640c">
 
 An experimental Expo Config Plugin that generates native Apple Targets like Widgets or App Clips, and links them outside the `/ios` directory. You can open Xcode and develop the targets inside the virtual `expo:targets` folder and the changes will be saved outside of the `ios` directory. This pattern enables building things that fall outside of the scope of React Native while still obtaining all the benefits of Continuous Native Generation.
 
-
 ## 🚀 How to use
 
 - Add targets to `targets/` directory with an `expo-target.config.json` file.
@@ -95,6 +93,41 @@ There are certain values that are shared across targets. We use a predefined con
 | `$accent`           | `ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME`     | Sets the global accent color, in widgets this is used for the tint color of buttons when editing the widget. |
 | `$widgetBackground` | `ASSETCATALOG_COMPILER_WIDGET_BACKGROUND_COLOR_NAME` | Sets the background color of the widget.                                                                     |
 
+## CocoaPods
+
+Adding a file `pods.rb` in the root of the repo will enable you to modify the target settings for the project.
+
+The ruby module evaluates with global access to the property `podfile_properties` and the method `use_native_modules`.
+
+For example, the following is useful for enabling React Native in an App Clip target:
+
+```rb
+exclude = []
+use_expo_modules!(exclude: exclude)
+config = use_native_modules!
+
+use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
+use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
+
+use_react_native!(
+  :path => config[:reactNativePath],
+  :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
+  # An absolute path to your application root.
+  :app_path => "#{Pod::Config.instance.installation_root}/..",
+  :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
+)
+```
+
+This block executes at the end of the Podfile in a block like:
+
+```rb
+target "target_dir_name" do
+   target_file
+end
+```
+
+The name of the target must match the name of the target directory.
+
 ## Examples
 
 ### `widget`

package/build/colorset/customColorFromCSS.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.customColorFromCSS = void 0;
 // @ts-expect-error
-const normalize_color_1 = __importDefault(require("@react-native/normalize-color"));
+const normalize_colors_1 = __importDefault(require("@react-native/normalize-colors"));
 function customColorFromCSS(color) {
-    let colorInt = (0, normalize_color_1.default)(color);
+    let colorInt = (0, normalize_colors_1.default)(color);
     colorInt = ((colorInt << 24) | (colorInt >>> 8)) >>> 0;
     const red = ((colorInt >> 16) & 255) / 255;
     const green = ((colorInt >> 8) & 255) / 255;

package/build/config.d.ts

@@ -49,6 +49,7 @@ export type Entitlements = Partial<{
     "com.apple.developer.driverkit.allow-third-party-userclients": boolean;
     "com.apple.developer.weatherkit": boolean;
     "com.apple.developer.on-demand-install-capable": boolean;
+    "com.apple.developer.parent-application-identifiers": string[];
     "com.apple.developer.driverkit.family.scsicontroller": boolean;
     "com.apple.developer.driverkit.family.serial": boolean;
     "com.apple.developer.driverkit.family.networking": boolean;
@@ -100,4 +101,6 @@ export type Config = {
         "2x"?: string;
         "3x"?: string;
     }>;
+    /** Should the release build export the JS bundle and embed. Intended for App Clips and Share Extensions where you may want to use React Native. */
+    exportJs?: boolean;
 };

package/build/icon/withImageAsset.js

@@ -238,8 +238,8 @@ async function generateWatchIconsInternalAsync(icon, projectRoot, iosNamedProjec
     imagesJson.push({
         filename: getAppleIconName(size, 1),
         idiom: "universal",
-        platform: "watchos",
         size: `${size}x${size}`,
+        platform: "watchos",
     });
     return imagesJson;
 }

package/build/icon/withIosIcon.js

@@ -199,8 +199,8 @@ async function generateWatchIconsInternalAsync(icon, projectRoot, iosNamedProjec
     imagesJson.push({
         filename: getAppleIconName(size, 1),
         idiom: "universal",
-        platform: "watchos",
         size: `${size}x${size}`,
+        platform: "watchos",
     });
     return imagesJson;
 }

package/build/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withTargetsDir = void 0;
 const glob_1 = require("glob");
 const path_1 = __importDefault(require("path"));
+const withPodTargetExtension_1 = require("./withPodTargetExtension");
 const withWidget_1 = __importDefault(require("./withWidget"));
 const withXcparse_1 = require("./withXcparse");
 const withTargetsDir = (config, { appleTeamId, root = "./targets", match = "*" }) => {
@@ -22,6 +23,7 @@ const withTargetsDir = (config, { appleTeamId, root = "./targets", match = "*" }
             directory: path_1.default.relative(projectRoot, path_1.default.dirname(configPath)),
         });
     });
+    (0, withPodTargetExtension_1.withPodTargetExtension)(config);
     return (0, withXcparse_1.withXcodeProjectBetaBaseMod)(config);
 };
 exports.withTargetsDir = withTargetsDir;

package/build/withPodTargetExtension.d.ts

@@ -0,0 +1,3 @@
+import { ConfigPlugin } from "expo/config-plugins";
+/** Inject a helper which matches `pods.rb` files in the target root directory and invokes it as a way to extend the Podfile. */
+export declare const withPodTargetExtension: ConfigPlugin;

package/build/withPodTargetExtension.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withPodTargetExtension = void 0;
+const config_plugins_1 = require("expo/config-plugins");
+// TODO: This won't always match the correct target name. Need to pull the same algo in.
+const extension = `# Dynamic loading of target configurations
+Dir.glob(File.join(__dir__, '..', 'targets', '**', 'pods.rb')).each do |target_file|
+  target_name = File.basename(File.dirname(target_file))
+  target target_name do
+    # Create a new binding with access to necessary methods and variables
+    target_binding = binding
+    target_binding.local_variable_set(:podfile_properties, podfile_properties)
+    target_binding.local_variable_set(:config, use_native_modules!)
+
+    # Evaluate the target file content in the new binding
+    eval(File.read(target_file), target_binding, target_file)
+  end
+end
+`;
+/** Inject a helper which matches `pods.rb` files in the target root directory and invokes it as a way to extend the Podfile. */
+const withPodTargetExtension = (config) => (0, config_plugins_1.withPodfile)(config, (config) => {
+    if (config.modResults.contents.includes("apple-targets-extension-loader")) {
+        return config;
+    }
+    config.modResults.contents += "\n\n" + extension;
+    return config;
+});
+exports.withPodTargetExtension = withPodTargetExtension;

package/build/withWidget.js

@@ -22,7 +22,7 @@ function kebabToCamelCase(str) {
 }
 const withWidget = (config, props) => {
     // TODO: Magically based on the top-level folders in the `ios-widgets/` folder
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (props.icon && !/https?:\/\//.test(props.icon)) {
         props.icon = path_1.default.join(props.directory, props.icon);
     }
@@ -40,8 +40,22 @@ const withWidget = (config, props) => {
         throw new Error(`Found multiple entitlements files in ${widgetFolderAbsolutePath}`);
     }
     let entitlementsJson = props.entitlements;
+    // Apply default entitlements that must be present for a target to work.
+    function applyDefaultEntitlements(entitlements) {
+        if (props.type === "clip") {
+            entitlements["com.apple.developer.parent-application-identifiers"] = [
+                `$(AppIdentifierPrefix)${config.ios.bundleIdentifier}`,
+            ];
+            // NOTE: This doesn't seem to be required anymore (Oct 12 2024):
+            // entitlements["com.apple.developer.on-demand-install-capable"] = true;
+        }
+        return entitlements;
+    }
+    if (entitlementsJson) {
+        entitlementsJson = applyDefaultEntitlements(entitlementsJson);
+    }
     // If the user defined entitlements, then overwrite any existing entitlements file
-    if (props.entitlements) {
+    if (entitlementsJson) {
         (0, config_plugins_1.withDangerousMod)(config, [
             "ios",
             async (config) => {
@@ -52,7 +66,7 @@ const withWidget = (config, props) => {
                 if (entitlementsFiles[0]) {
                     console.log(`[${widget}] Replacing ${path_1.default.relative(widgetFolderAbsolutePath, entitlementsFiles[0])} with entitlements JSON from config`);
                 }
-                fs_1.default.writeFileSync(entitlementsFilePath, plist_1.default.build(props.entitlements));
+                fs_1.default.writeFileSync(entitlementsFilePath, plist_1.default.build(entitlementsJson));
                 return config;
             },
         ]);
@@ -111,6 +125,9 @@ const withWidget = (config, props) => {
         frameworks: (0, target_1.getFrameworksForType)(props.type).concat(props.frameworks || []),
         type: props.type,
         teamId: props.appleTeamId,
+        exportJs: (_g = props.exportJs) !== null && _g !== void 0 ? _g : 
+        // Assume App Clips are used for React Native.
+        props.type === "clip",
     });
     config = (0, withEasCredentials_1.withEASTargets)(config, {
         targetName,

package/build/withXcodeChanges.d.ts

@@ -13,5 +13,6 @@ export type XcodeSettings = {
     colors?: Record<string, string>;
     teamId?: string;
     icon?: string;
+    exportJs?: boolean;
 };
 export declare const withXcodeChanges: ConfigPlugin<XcodeSettings>;

package/build/withXcodeChanges.js

@@ -687,6 +687,36 @@ async function applyXcodeChanges(config, project, props) {
         }
         return assets;
     }
+    function configureJsExport(target) {
+        if (props.exportJs) {
+            const shellScript = mainAppTarget.props.buildPhases.find((phase) => xcode_1.PBXShellScriptBuildPhase.is(phase) &&
+                phase.props.name === "Bundle React Native code and images");
+            if (!shellScript) {
+                throw new Error('Failed to find the "Bundle React Native code and images" build phase in the main app target.');
+            }
+            const currentShellScript = target.props.buildPhases.find((phase) => xcode_1.PBXShellScriptBuildPhase.is(phase) &&
+                phase.props.name === "Bundle React Native code and images");
+            if (!currentShellScript) {
+                target.createBuildPhase(xcode_1.PBXShellScriptBuildPhase, {
+                    ...shellScript.props,
+                });
+            }
+            else {
+                for (const key in shellScript.props) {
+                    // @ts-expect-error
+                    currentShellScript.props[key] = shellScript.props[key];
+                }
+            }
+        }
+        else {
+            // Remove the shell script build phase if it exists from a subsequent build.
+            const shellScript = target.props.buildPhases.findIndex((phase) => xcode_1.PBXShellScriptBuildPhase.is(phase) &&
+                phase.props.name === "Bundle React Native code and images");
+            if (shellScript !== -1) {
+                target.props.buildPhases.splice(shellScript, 1);
+            }
+        }
+    }
     if (targetToUpdate) {
         // Remove existing build phases
         targetToUpdate.props.buildConfigurationList.props.buildConfigurations.forEach((config) => {
@@ -708,6 +738,7 @@ async function applyXcodeChanges(config, project, props) {
         configureTargetWithEntitlements(targetToUpdate);
         configureTargetWithPreview(targetToUpdate);
         configureTargetWithKnownSettings(targetToUpdate);
+        configureJsExport(targetToUpdate);
         applyDevelopmentTeamIdToTargets();
         syncMarketingVersions();
         return project;
@@ -760,6 +791,34 @@ async function applyXcodeChanges(config, project, props) {
     }))
         .flat();
     const resAssets = [];
+    // Support for LaunchScreen files
+    const baseProj = path_1.default.join(magicCwd, "Base.lproj");
+    if (fs_1.default.existsSync(baseProj)) {
+        // Link LaunchScreen.storyboard
+        fs_1.default.readdirSync(baseProj).forEach((file) => {
+            if (file === ".DS_Store")
+                return;
+            const stat = fs_1.default.statSync(path_1.default.join(baseProj, file));
+            if (stat.isFile()) {
+                if (file.endsWith(".storyboard")) {
+                    assetFiles.push(xcode_1.PBXBuildFile.create(project, {
+                        fileRef: xcode_1.PBXVariantGroup.create(project, {
+                            name: file,
+                            sourceTree: "<group>",
+                            children: [
+                                xcode_1.PBXFileReference.create(project, {
+                                    lastKnownFileType: "file.storyboard",
+                                    name: "Base",
+                                    path: path_1.default.join("Base.lproj", file),
+                                    sourceTree: "<group>",
+                                }),
+                            ],
+                        }),
+                    }));
+                }
+            }
+        });
+    }
     // TODO: Maybe just limit this to Safari?
     if (fs_1.default.existsSync(path_1.default.join(magicCwd, "assets"))) {
         // get top-level directories in `assets/` and append them to assetFiles as folder types
@@ -838,6 +897,7 @@ async function applyXcodeChanges(config, project, props) {
     widgetTarget.createBuildPhase(xcode_1.PBXResourcesBuildPhase, {
         files: [...assetFiles, ...resAssets],
     });
+    configureJsExport(widgetTarget);
     const containerItemProxy = xcode_1.PBXContainerItemProxy.create(project, {
         containerPortal: project.rootObject,
         proxyType: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacons/apple-targets",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Generate Apple Targets with Expo Prebuild",
   "main": "build/index.js",
   "files": [
@@ -28,7 +28,7 @@
   "author": "Evan Bacon",
   "license": "MIT",
   "dependencies": {
-    "@react-native/normalize-color": "^2.1.0",
+    "@react-native/normalize-colors": "^0.75.4",
     "glob": "^10.2.6",
     "@bacons/xcode": "^1.0.0-alpha.13",
     "fs-extra": "^11.2.0"