feat(expo-config-plugin): create config plugin for react-native-performance

docs/docs/fundamentals/getting-started.md

@@ -18,7 +18,7 @@ Since this package contains code that needs to be natively linked, you'll have t
 npx pod-install
 ```
 
-## Usage
+## Vanilla React-Native Setup
 
 The Performance profiler library needs to be initialized in all 3 parts of your app: Android Native, iOS Native, and TS.
 
@@ -59,6 +59,34 @@ Similarly, add this snipped in your iOS `AppDelegate.m`. Again, ensure that the
 }
 ```
 
+## Expo Setup
+
+To use the `@shopify/react-native-performance` library in your project you'll need to set up the `app.json` to contain the following contents under the `plugins` section
+
+```json
+"plugins": [
+  "@shopify/react-native-performance/app.plugin.js"
+],
+```
+
+The above setup will allow you to use most of the other performance plugins as well. If you want to use the Flipper plugins you'll need to install `react-native-flipper` and `expo-build-properties` and set flipper to true for iOS. See the example below.
+
+```json
+"plugins": [
+  "@shopify/react-native-performance/app.plugin.js",
+  [
+    "expo-build-properties",
+    {
+      "ios": {
+        "flipper": true
+      }
+    }
+  ]
+],
+```
+
+Finally run `npx expo prebuild` and the project will be set up for you. Keep in mind that, if a third-party library uses `"useFrameworks": "static"` for iOS, integrating Flipper will not work since it is incompatible. See the [Expo Documentation](https://docs.expo.dev/guides/using-flipper/#limitations) on this subject
+
 ### TS Initialization
 
 Mount the `<PerformanceProfiler/>` component somewhere high up in your App tree. For example:

package.json

@@ -4,7 +4,7 @@
   "description": "This monorepo contains the packages related to profiling performance of React Native apps.",
   "private": true,
   "scripts": {
-    "build": "tsc -b && cd packages/flipper-plugin-react-native-performance && yarn build",
+    "build": "tsc -b && cd packages/flipper-plugin-react-native-performance && yarn build && cd ../react-native-performance && yarn build plugin",
     "version": "bin/version.mjs",
     "release": "lerna version --conventional-commits",
     "generate": "plop",

packages/react-native-performance/app.plugin.js

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

packages/react-native-performance/ios/ReactNativePerformance/ReactNativePerformance.m

@@ -1,5 +1,5 @@
 #import "ReactNativePerformance.h"
-#import <ReactNativePerformance/ReactNativePerformance-Swift.h>
+#import "ReactNativePerformance-Swift.h"
 
 static NSTimeInterval startupTimestamp = -1.0;
 

packages/react-native-performance/package.json

@@ -33,9 +33,11 @@
     "react-native": "*"
   },
   "devDependencies": {
+    "@expo/config-plugins": "6.0.1",
     "@quilted/react-testing": "^0.5.11",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^9.0.0",
+    "expo-module-scripts": "3.0.7",
     "jest-extended": "^2.0.0",
     "react-test-renderer": "17.0.2"
   },

packages/react-native-performance/plugin/src/index.ts

@@ -0,0 +1,101 @@
+import {
+  ConfigPlugin,
+  withAppDelegate,
+  withMainApplication,
+  withPlugins,
+  withProjectBuildGradle,
+} from '@expo/config-plugins';
+import {mergeContents} from '@expo/config-plugins/build/utils/generateCode';
+import {addImports} from '@expo/config-plugins/build/android/codeMod';
+
+const MATCH_DID_FINISH_LAUNCHING_IOS =
+  /-\s*\(BOOL\)\s*application:\s*\(UIApplication\s*\*\s*\)\s*\w+\s+didFinishLaunchingWithOptions:/g;
+
+const MATCH_ON_CREATE = /super\.onCreate\(\);/;
+const MATCH_DEPENDANCIES = /dependencies {/;
+
+const withRequiredIOSSetup: ConfigPlugin = expoConfig => {
+  const importStatement = '#import <ReactNativePerformance/ReactNativePerformance.h>';
+  const newLine = '  [ReactNativePerformance onAppStarted];\n';
+
+  return withAppDelegate(expoConfig, iosConfig => {
+    if (!['objc', 'objcpp'].includes(iosConfig.modResults.language)) {
+      throw new Error(
+        "@shopify/react-native-performance config plugin does not support AppDelegate' that aren't Objective-C(++) yet.",
+      );
+    }
+
+    iosConfig.modResults.contents = mergeContents({
+      tag: 'react-native-performance-import-ios',
+      src: iosConfig.modResults.contents,
+      newSrc: importStatement,
+      offset: 0,
+      comment: '//',
+      anchor: '',
+    }).contents;
+
+    iosConfig.modResults.contents = mergeContents({
+      tag: 'react-native-performance-didFinishLaunchingWithOptions-ios',
+      src: iosConfig.modResults.contents,
+      newSrc: newLine,
+      offset: 2,
+      comment: '//',
+      anchor: MATCH_DID_FINISH_LAUNCHING_IOS,
+    }).contents;
+
+    return iosConfig;
+  });
+};
+
+const withRequiredAndroidMainApplicationSetup: ConfigPlugin = expoConfig => {
+  const importStatement = 'com.shopify.reactnativeperformance.ReactNativePerformance';
+  const newLine = '    ReactNativePerformance.onAppStarted();\n';
+  return withMainApplication(expoConfig, async androidConfig => {
+    if (androidConfig.modResults.language !== 'java') {
+      throw new Error('@shopify/react-native-performance config plugin does not support kotlin MainActivity yet.');
+    }
+
+    const srcWithNewImport = addImports(
+      androidConfig.modResults.contents,
+      [importStatement],
+      androidConfig.modResults.language === 'java',
+    );
+
+    androidConfig.modResults.contents = mergeContents({
+      tag: 'react-native-performance-onCreate-android',
+      src: srcWithNewImport,
+      newSrc: newLine,
+      anchor: MATCH_ON_CREATE,
+      offset: 0,
+      comment: '//',
+    }).contents;
+
+    return androidConfig;
+  });
+};
+
+const withRequiredAndroidBuildGradleSetup: ConfigPlugin = expoConfig => {
+  const newLine = "        classpath('org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0+')";
+  return withProjectBuildGradle(expoConfig, async androidConfig => {
+    androidConfig.modResults.contents = mergeContents({
+      tag: 'react-native-performance-appBuildGradle-android',
+      src: androidConfig.modResults.contents,
+      newSrc: newLine,
+      anchor: MATCH_DEPENDANCIES,
+      offset: 1,
+      comment: '//',
+    }).contents;
+
+    return androidConfig;
+  });
+};
+
+const withReactNativePerformanceSetup: ConfigPlugin = config => {
+  return withPlugins(config, [
+    withRequiredIOSSetup,
+    withRequiredAndroidBuildGradleSetup,
+    withRequiredAndroidMainApplicationSetup,
+  ]);
+};
+
+export default withReactNativePerformanceSetup;

packages/react-native-performance/plugin/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "expo-module-scripts/tsconfig.plugin",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}