@bacons/apple-targets 0.1.6 → 0.1.8

package/README.md

@@ -9,14 +9,30 @@ An experimental Expo Config Plugin that generates native Apple Targets like Widg
 
 ## 🚀 How to use
 
-> This plugin requires at least CocoaPods 1.16.2 and Xcode 16.
+> This plugin requires at least CocoaPods 1.16.2, Xcode 16, and Expo SDK +52.
+
+Run the following command in your Expo project:
+
+```
+npx create-target
+```
+
+Select a target to generate, I recommend starting with a `widget`.
+
+This will generate the required widget files in the `targets` directory.
+
+Ensure the `ios.appleTeamId` property is set in your `app.json`, then run `npx expo prebuild -p ios --clean` to generate the Xcode project.
+
+You can now open Xcode and develop the widget inside the `expo:targets` folder. When you're ready to build, run:
+
+### Manual usage
 
 - Add targets to `targets/` directory with an `expo-target.config.json` file.
-- Currently, if you don't have an `Info.plist`, it'll be generated on `npx expo prebuild`. This may be changed in the future so if you have an `Info.plist` it'll be used, otherwise, it'll be generated.
+- If you don't have an `Info.plist`, it'll be generated on `npx expo prebuild`. This may be changed in the future so if you have an `Info.plist` it'll be used, otherwise, it'll be generated.
 - Any files in a top-level `target/*/assets` directory will be linked as resources of the target. This was added to support Safari Extensions.
 - A single top-level `*.entitlements` file will be linked as the entitlements of the target. This is not currently used in EAS Capability signing, but may be in the future.
 - All Swift files will be linked as build sources of the target. There is currently no support for storyboard or `.xib` files because I can't be bothered.
-- All top-level `*.xcassets` will be linked as resources, and accessible in the targets. If you add files outside of Xcode, you'll need to re-run `npx expo prebuild` to link them.
+- All `*.xcassets` files will be linked as resources, and accessible in the targets. If you add files outside of Xcode, you'll need to re-run `npx expo prebuild` to link them.
 - In Expo SDK +52, set the `ios.appleTeamId`, for SDK 51 and below, set the `appleTeamId` prop in the Config Plugin in `app.config.js`:
 
 ```json
@@ -32,49 +48,43 @@ An experimental Expo Config Plugin that generates native Apple Targets like Widg
 }
 ```
 
-You can change the root directory from `./targets` to something else with `root: "./src/targets"`. Avoid doing this.
-
-## Using React Native in Targets
-
-I'm not sure, that's not the purpose of this plugin. I built this so I could easily build iOS widgets and other minor targets with SwiftUI. I imagine it would be straightforward to use React Native in share, notification, iMessage, Safari, and photo editing extensions, you can build that on top of this plugin if you want. Look at the App Clip example for a starting point.
-
-## `expo-target.config.json`
+## `expo-target.config.js`
 
 This file can have the following properties:
 
-```json
-{
-  "type": "widget",
+```js
+module.exports = {
+  type: "widget",
 
   // Name of the target/product. Defaults to the directory name.
-  "name": "My Widget",
+  name: "My Widget",
 
   // Generates colorset files for the target.
-  "colors": {
+  colors: {
     // or "$accent": "red",
-    "$accent": { "color": "red", "darkColor": "blue" }
+    $accent: { color: "red", darkColor: "blue" },
   },
-  "icon": "../assets/icon.png",
+  icon: "../assets/icon.png",
   // Can also be a URL
-  "frameworks": [
+  frameworks: [
     // Frameworks without the extension, these will be added to the target.
-    "SwiftUI"
+    "SwiftUI",
   ],
-  "entitlements": {
+  entitlements: {
     // Serialized entitlements. Useful for configuring with environment variables.
   },
   // Generates xcassets for the target.
-  "images": {
-    "thing": "../assets/thing.png"
+  images: {
+    thing: "../assets/thing.png",
   },
 
   // The iOS version fot the target.
-  "deploymentTarget": "13.4",
+  deploymentTarget: "13.4",
 
   // Optional bundle identifier for the target. Will default to a sanitized version of the root project bundle id + target name.
   // If the specified bundle identifier is prefixed with a dot (.), the bundle identifier will be appended to the main app's bundle identifier.
-  "bundleIdentifier": ".mywidget"
-}
+  bundleIdentifier: ".mywidget",
+};
 ```
 
 You can also use `.js` with the typedoc for autocomplete:
@@ -312,3 +322,86 @@ Some workarounds:
 
 - Prebuild without React Native: `npx expo prebuild --template node_modules/@bacons/apple-targets/prebuild-blank.tgz --clean`
 - If the widget doesn't show on the home screen when building the app, use iOS 18. You can long press the app icon and select the widget display options to transform the app icon into the widget.
+
+## Sharing data between targets
+
+To share values between the app and the target, you must use App Groups and NSUserDefaults. I've added a native module to make the React Native API a bit easier.
+
+### Configuring App Groups
+
+Start by defining an App Group, a good default is `group.<bundle identifier>`. App Groups can be used across apps so you may want something more generic or less generic if you plan on having multiple extensions.
+
+First, define your main App Group entitlement in your `app.json`:
+
+```json
+{
+  "expo": {
+    "ios": {
+      "entitlements": {
+        "com.apple.security.application-groups": ["group.bacon.data"]
+      }
+    },
+    "plugins": ["@bacons/apple-targets"]
+  }
+}
+```
+
+Second, define the same App Group in your target's `expo-target.config.js`:
+
+```js
+/** @type {import('@bacons/apple-targets').ConfigFunction} */
+module.exports = (config) => ({
+  type: "widget",
+  entitlements: {
+    // Use the same app groups:
+    "com.apple.security.application-groups":
+      config.ios.entitlements["com.apple.security.application-groups"],
+  },
+});
+```
+
+Now you can prebuild to generate the entitlements. You may need to create an EAS Build or open Xcode to sync the entitlements.
+
+### Setting shared data
+
+To define shared data, we'll use a native module (`ExtensionStorage`) that interacts with `NSUserDefaults`.
+
+Somewhere in your Expo app, you can set a value:
+
+```js
+import { ExtensionStorage } from "@bacons/apple-targets";
+
+// Create a storage object with the App Group.
+const storage = new ExtensionStorage(
+  // Your app group identifier. Should match the values in the app.json and expo-target.config.json.
+  "group.bacon.data"
+);
+
+// Then you can set data:
+storage.set("myKey", "myValue");
+
+// Finally, you can reload the widget:
+ExtensionStorage.reloadWidget();
+```
+
+`ExtensionStorage` has the following API:
+
+- `set(key: string, value: string | number | Record<string, string | number> | Array<Record<string, string | number>> | undefined): void` - Sets a value in the shared storage for a given key. Setting `undefined` will remove the key.
+- `ExtensionStorage.reloadWidget(name?: string): void` - A static method for reloading the widget. Behind the scenes, this calls `WidgetCenter.shared.reloadAllTimelines()`. If given a name, it will reload a specific widget using `WidgetCenter.shared.reloadTimelines(ofKind: timeline)`.
+
+### Accessing shared data
+
+Assuming this is done using Swift code, you'll access data using `NSUserDefaults` directly. Here's an example of how you might access the data in a widget:
+
+```swift
+let defaults = UserDefaults(suiteName:
+  // Use the App Group from earlier.
+  "group.bacon.data"
+)
+// Access the value you set:
+let index = defaults?.string(forKey: "myKey")
+```
+
+## Using React Native in Targets
+
+I'm not sure, that's not the purpose of this plugin. I built this so I could easily build iOS widgets and other minor targets with SwiftUI. I imagine it would be straightforward to use React Native in share, notification, iMessage, Safari, and photo editing extensions, you can build that on top of this plugin if you want. Look at the App Clip example for a starting point.

package/app.plugin.js

@@ -1 +1 @@
-module.exports = require('./build')
+module.exports = require("./build/config-plugin");

package/build/ExtensionStorage.d.ts

@@ -0,0 +1,6 @@
+export declare class ExtensionStorage {
+    private readonly appGroup;
+    static reloadWidget(name?: string): void;
+    constructor(appGroup: string);
+    set(key: string, value?: string | number | Record<string, string | number> | Array<Record<string, string | number>>): void;
+}

package/build/ExtensionStorage.js

@@ -0,0 +1,48 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtensionStorage = void 0;
+// @ts-expect-error
+const ExtensionStorageModule = (_a = expo === null || expo === void 0 ? void 0 : expo.modules) === null || _a === void 0 ? void 0 : _a.ExtensionStorage;
+const nativeModule = ExtensionStorageModule !== null && ExtensionStorageModule !== void 0 ? ExtensionStorageModule : {
+    setInt() { },
+    setString() { },
+    reloadWidget() { },
+    setObject() { },
+    remove() { },
+    setArray() { },
+};
+const originalSetObject = nativeModule.setObject;
+// Sweet API doesn't support doing this natively.
+nativeModule.setObject = (key, value, suite) => {
+    if (Array.isArray(value)) {
+        return nativeModule.setArray(key, value, suite);
+    }
+    return originalSetObject(key, value, suite);
+};
+class ExtensionStorage {
+    static reloadWidget(name) {
+        nativeModule.reloadWidget(name);
+    }
+    constructor(appGroup) {
+        this.appGroup = appGroup;
+    }
+    set(key, value) {
+        if (typeof value === "number") {
+            nativeModule.setInt(key, value, this.appGroup);
+        }
+        else if (Array.isArray(value)) {
+            nativeModule.setArray(key, value, this.appGroup);
+        }
+        else if (typeof value === "string") {
+            nativeModule.setString(key, value, this.appGroup);
+        }
+        else if (value == null) {
+            nativeModule.remove(key, this.appGroup);
+        }
+        else {
+            nativeModule.setObject(key, value, this.appGroup);
+        }
+    }
+}
+exports.ExtensionStorage = ExtensionStorage;

package/build/cli/cli.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cli/cli.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/target.js

@@ -23,6 +23,7 @@ exports.KNOWN_EXTENSION_POINT_IDENTIFIERS = {
     "com.apple.authentication-services-account-authentication-modification-ui": "account-auth",
     "com.apple.services": "action",
     "com.apple.appintents-extension": "app-intent",
+    "com.apple.deviceactivity.monitor-extension": "device-activity-monitor",
     // "com.apple.intents-service": "intents",
 };
 // TODO: Maybe we can replace `NSExtensionPrincipalClass` with the `@main` annotation that newer extensions use?
@@ -53,7 +54,14 @@ function getTargetInfoPlistForType(type) {
             },
         });
     }
-    if (type === "clip") {
+    else if (type === "app-intent") {
+        return plist_1.default.build({
+            EXAppExtensionAttributes: {
+                EXExtensionPointIdentifier: "com.apple.appintents-extension",
+            },
+        });
+    }
+    else if (type === "clip") {
         return plist_1.default.build({
             CFBundleName: "$(PRODUCT_NAME)",
             CFBundleIdentifier: "$(PRODUCT_BUNDLE_IDENTIFIER)",
@@ -66,6 +74,13 @@ function getTargetInfoPlistForType(type) {
                 NSAppClipRequestEphemeralUserNotification: false,
                 NSAppClipRequestLocationConfirmation: false,
             },
+            NSAppTransportSecurity: {
+                NSAllowsArbitraryLoads: false,
+                NSAllowsLocalNetworking: true,
+            },
+            UILaunchStoryboardName: "SplashScreen",
+            UIUserInterfaceStyle: "Automatic",
+            UIViewControllerBasedStatusBarAppearance: false,
         });
     }
     const NSExtensionPointIdentifier = Object.keys(exports.KNOWN_EXTENSION_POINT_IDENTIFIERS).find((key) => exports.KNOWN_EXTENSION_POINT_IDENTIFIERS[key] === type);

package/build/withXcodeChanges.js

@@ -653,9 +653,14 @@ async function applyXcodeChanges(config, project, props) {
         console.log(`Target "${targetToUpdate.props.productName}" already exists, updating instead of creating a new one`);
     }
     const magicCwd = path_1.default.join(config._internal.projectRoot, "ios", props.cwd);
-    const developmentTeamId = (_b = props.teamId) !== null && _b !== void 0 ? _b : mainAppTarget.getDefaultBuildSetting("DEVELOPMENT_TEAM");
+    let developmentTeamId = (_b = props.teamId) !== null && _b !== void 0 ? _b : mainAppTarget.getDefaultBuildSetting("DEVELOPMENT_TEAM");
     if (!developmentTeamId) {
-        throw new Error("Couldn't find DEVELOPMENT_TEAM in Xcode project and none were provided in the Expo config.");
+        console.error("Couldn't find DEVELOPMENT_TEAM in Xcode project and none were provided in the Expo config. Using placeholder value.");
+        // Using a placeholder gives users a chance to see the value in Xcode.
+        developmentTeamId = "XXXXXXXXXX";
+        // throw new Error(
+        //   "Couldn't find DEVELOPMENT_TEAM in Xcode project and none were provided in the Expo config."
+        // );
     }
     function applyDevelopmentTeamIdToTargets() {
         var _a, _b;

package/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["ios"],
+  "ios": {
+    "modules": ["ExtensionStorageModule"]
+  }
+}

package/ios/ExtensionStorage.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExtensionStorage'
+  s.version        = '1.0.0'
+  s.summary        = 'A sample project summary'
+  s.description    = 'A sample project description'
+  s.author         = ''
+  s.homepage       = 'https://docs.expo.dev/modules/'
+  s.platform       = :ios, '15.1'
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+  
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/ExtensionStorageModule.swift

@@ -0,0 +1,53 @@
+import ExpoModulesCore
+import WidgetKit
+
+public class ExtensionStorageModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("ExtensionStorage")
+        
+        Function("remove") { (forKey: String, suiteName: String?) in
+            UserDefaults(suiteName: suiteName)?.removeObject(forKey: forKey)
+        }
+        
+        Function("reloadWidget") { (timeline: String?) in
+            if let timeline = timeline {
+                WidgetCenter.shared.reloadTimelines(ofKind: timeline)
+            } else {
+                WidgetCenter.shared.reloadAllTimelines()
+            }
+        }
+        
+        Function("setArray") { (forKey: String, data: [[String: Any]], suiteName: String?) -> Bool in
+            // Convert the incoming array of dictionaries directly to JSON data
+            do {
+                let jsonData = try JSONSerialization.data(withJSONObject: data, options: [])
+                UserDefaults(suiteName: suiteName)?.set(jsonData, forKey: forKey)
+                return true
+            } catch {
+                // If encoding fails for some reason, return false
+                return false
+            }
+        }
+        
+        Function("setObject") { (forKey: String, data: [String: Any], suiteName: String?) -> Bool in
+            do {
+                let jsonData = try JSONSerialization.data(withJSONObject: data, options: [])
+                UserDefaults(suiteName: suiteName)?.set(jsonData, forKey: forKey)
+                return true
+            } catch {
+                // If encoding fails for some reason, return false
+                return false
+            }
+        }
+        
+        Function("setInt") { (key: String, value: Int, group: String?) in
+            let userDefaults = UserDefaults(suiteName: group)
+            userDefaults?.set(value, forKey: key)
+        }
+        
+        Function("setString") { (key: String, value: String, group: String?) in
+            let userDefaults = UserDefaults(suiteName: group)
+            userDefaults?.set(value, forKey: key)
+        }
+    }
+}

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@bacons/apple-targets",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Generate Apple Targets with Expo Prebuild",
-  "main": "build/index.js",
+  "main": "build/ExtensionStorage.js",
+  "types": "build/ExtensionStorage.d.ts",
   "files": [
     "app.plugin.js",
     "build",
+    "ios",
+    "expo-module.config.json",
     "prebuild-blank.tgz"
   ],
   "scripts": {