Skip to content

Commit

Permalink
fix: Changes Flipper includes for React Native 0.69.2+
Browse files Browse the repository at this point in the history
* fix: Changes SDK46 podfile to use new URN args
* refactor: Removes old sdk43 tests
* docs: Adds changelog notes
* fix: Removes linking checks for sdk46
* fix: Changes env check to an explicit hard-check to mirror the production check code
* refactor: Rebuilds plugin\

Closes #18. Closes #19
  • Loading branch information
jakobo authored Aug 24, 2022
1 parent 54fa71e commit 6b3969a
Show file tree
Hide file tree
Showing 29 changed files with 571 additions and 907 deletions.
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,19 @@

# 46.x.x (Expo SDK 46)

### 46.0.1

**Migration** If you were using individual pod specifications (folly, etc), you can remove all of that now. The Flipper team recommends using only the Flipper version, relying on the pod and maven to pull down the necessary dependencies.

##### 🛠️ Fixes

- Fixes a breaking issue with Podfile generation introduced in react-native 0.69.2 [ref](https://github.com/jakobo/expo-community-flipper/pull/20)
- Removes the legacy `use_flipper` declaration
- Removes the `post_install` flipper code
- Removes the `AppDelegate` code as the RCTAppSetupUtils already exist and this was redundant [ref](https://github.com/expo/expo/blob/d6b89ab435b534bb9bb560d0c1bb15bb0abdfcfa/templates/expo-template-bare-minimum/ios/HelloWorld/AppDelegate.mm#L9)
- Removes individual pod configs as those are no longer encouraged by the FB Flipper Team
- Removed old SDK tests

### 46.0.0

##### 💥 BREAKING CHANGES
Expand Down
66 changes: 12 additions & 54 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ Flipper Support for Expo Apps

# Usage (Quick Guide)

**1.** Install the module along with [react-native-flipper](https://www.npmjs.com/package/react-native-flipper): `yarn add expo-community-flipper react-native-flipper`
**1.** Install this module: `yarn add expo-community-flipper`

**2.** Add `expo-community-flipper` configuration to the `plugins` section of your `app.json`, as per the examples below. You have the option to specify the version of Flipper and the pods that you want to use. In React Native, the Android SDK is derived from the main Flipper configuration.
**2.** Add `expo-community-flipper` configuration to the `plugins` section of your `app.json`, as per the examples below. You have the option to specify the version of Flipper, though the one built in with React Native is (usually) sufficient.

If you don't specify anything, `expo-community-flipper` will default to the version of Flipper bundled with the version of React Native you're currently using.

Not sure what Flipper version you need? [Check the Official Flipper Podfile](https://github.com/facebook/flipper/blob/main/react-native/ReactNativeFlipperExample/ios/Podfile) if you are specifying all of Flipper's pods, or the latest version of [react-native-flipper](https://www.npmjs.com/package/react-native-flipper) if you are just specifying a flipper version.

# Configuration

## Disabling Flipper in CI (>= 45.1.0)

To disable Flipper in CI builds, set the env value of `FLIPPER_DISABLE` to `1`. We specifically do not use the `CI` env value, as EAS identifies itself as a CI environment which would remove the ability to generate a development client containing flipper. Instead, the ENV value should be provided for your production builds.
In some scenarios such as CI builds, it may be desirable to disable Flipper to improve build times. `expo-community-flipper` checks `ENV['FLIPPER_DISABLE'] == "1"` to determine if Flipper is disabled. This ENV value can be set in your EAS Secrets, your `app.json`, or your CI environment variables configuration.

In production, Flipper is automatically disabled by the react-native framework.

## Flipper (React Native Default Version)

Expand Down Expand Up @@ -44,45 +44,15 @@ To disable Flipper in CI builds, set the env value of `FLIPPER_DISABLE` to `1`.
}
```

## Flipper with all Pod dependencies included

_note: Android uses the same version as specified in the primary `Flipper` pod and does not require additional configuration_

```json
{
"expo": {
"..."
"plugins": [
["expo-community-flipper", {
"Flipper": "0.123.0",
"ios": {
"Flipper-Folly": "2.6.10",
"Flipper-RSocket": "1.4.3",
"Flipper-DoubleConversion": "3.1.7",
"Flipper-Glog": "0.3.9",
"Flipper-PeerTalk": "0.0.4"
}
}]
]
}
}
```

# Windows Users + Hermes

> As of right now, using Windows with the Hermes engine requires you to run your app inside of a WSL environment. [The tracked issue is here](https://github.com/jakobo/expo-community-flipper/issues/4) and if you have a `Podfile`, please let me know. It's likely an upstream issue, but we need a Podfile to confirm.
# Verified Versions
> As of right now, using Windows with the Hermes engine requires you to run your app inside of a WSL environment. [The tracked issue is here](https://github.com/jakobo/expo-community-flipper/issues/4) and if you have a `Podfile`, please let me know. It's likely an upstream issue, but we're continuing to look at build artifacts in case we spot something that may resolve this issue.
The following Flipper versions were verified against EAS. If you have another working combination, open a ticket or PR. Thank you!
# Versions

| Expo SDK Version | Flipper |
| :--------------- | :--------------------------- |
| 45 | 0.123.0, builtin (rn 0.68.1) |
| 44 | 0.123.0 |
| 43 | 0.123.0 |
Starting with Expo SDK 46, Flipper manages its own compatibility layer (though it can be upgraded by specifying a version of Flipper that you want). Prior to SDK 46, we recommended running Flipper @ `0.123.0` as it had the widest range of compatibility with devices and simulators.

(note, we follow [expo's policy for the deprecation of old SDKs](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/))
This package follows [expo's policy for the deprecation of old SDKs](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/). It's **MAJOR** version tracks against the Expo SDK version, making it easy to spot compatibility differences in your package.json file.

# Testing

Expand Down Expand Up @@ -110,21 +80,7 @@ An `/example` directory is built with `expo init example` for each major SDK rel
{
"expo": {
"...": "... standard app.json entries ...",
"plugins": [
[
"./../build/withFlipper",
{
"Flipper": "0.123.0",
"ios": {
"Flipper-Folly": "2.6.10",
"Flipper-RSocket": "1.4.3",
"Flipper-DoubleConversion": "3.1.7",
"Flipper-Glog": "0.3.9",
"Flipper-PeerTalk": "0.0.4"
}
}
]
]
"plugins": [["./../build/withFlipper", "0.158.0"]]
}
}
```
Expand All @@ -133,3 +89,5 @@ An `/example` directory is built with `expo init example` for each major SDK rel

- This code is based on the [Flipper Getting Started Guide](https://fbflipper.com/docs/getting-started/react-native/)
- [Expo Config Plugins](https://docs.expo.dev/guides/config-plugins/)
- [Using the latest Flipper SDK](https://fbflipper.com/docs/getting-started/react-native/#using-the-latest-flipper-sdk)
- [React Native Community's Typescript Template](https://github.com/react-native-community/react-native-template-typescript/tree/main/template)
2 changes: 1 addition & 1 deletion example/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@
"web": {
"favicon": "./assets/favicon.png"
},
"plugins": [["./../plugin/build/withFlipper.js", "0.158.0"]]
"plugins": ["./../plugin/build/withFlipper.js"]
}
}
7 changes: 4 additions & 3 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"clean": "shx rm -rf .expo android ios index.js metro.config.js"
"clean": "shx rm -rf .expo android ios index.js metro.config.js",
"expo": "expo"
},
"dependencies": {
"expo": "~46.0.2",
"expo-splash-screen": "~0.16.1",
"expo": "~46.0.9",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-dom": "17.0.1",
Expand Down
12 changes: 12 additions & 0 deletions plugin/build/constants.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/** Base expo tag for dangerous mods */
export declare const EXPO_FLIPPER_TAG = "expo-community-flipper";
/** The gradle property containing flipper version info */
export declare const ANDROID_FLIPPER_KEY = "FLIPPER_VERSION";
/** If all else fails, try this flipper version */
export declare const FLIPPER_FALLBACK = "0.125.0";
/** In iOS, this is the line we anchor to for adding args to use_react_native!() */
export declare const IOS_URN_ARG_ANCHOR: RegExp;
/** In a Podfile, this regex tells us the :production arg is already there */
export declare const IOS_HAS_PRODUCTION_ARG: RegExp;
/** In a Podfile, this regex tells us the :flipper_configuration arg is already there */
export declare const IOS_HAS_FLIPPER_ARG: RegExp;
15 changes: 15 additions & 0 deletions plugin/build/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IOS_HAS_FLIPPER_ARG = exports.IOS_HAS_PRODUCTION_ARG = exports.IOS_URN_ARG_ANCHOR = exports.FLIPPER_FALLBACK = exports.ANDROID_FLIPPER_KEY = exports.EXPO_FLIPPER_TAG = void 0;
/** Base expo tag for dangerous mods */
exports.EXPO_FLIPPER_TAG = "expo-community-flipper";
/** The gradle property containing flipper version info */
exports.ANDROID_FLIPPER_KEY = "FLIPPER_VERSION";
/** If all else fails, try this flipper version */
exports.FLIPPER_FALLBACK = "0.125.0";
/** In iOS, this is the line we anchor to for adding args to use_react_native!() */
exports.IOS_URN_ARG_ANCHOR = /:fabric_enabled => flags\[:fabric_enabled\],/;
/** In a Podfile, this regex tells us the :production arg is already there */
exports.IOS_HAS_PRODUCTION_ARG = /use_react_native!\([\s\S]*:production\s+=>/gm;
/** In a Podfile, this regex tells us the :flipper_configuration arg is already there */
exports.IOS_HAS_FLIPPER_ARG = /use_react_native!\([\s\S]*:flipper_configuration\s+=>/gm;
8 changes: 8 additions & 0 deletions plugin/build/types.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export declare type FlipperConfig = {
version: string | undefined;
};
export declare type WithFlipperOptions = FlipperOptions | string;
declare type FlipperOptions = {
version: string;
};
export {};
2 changes: 2 additions & 0 deletions plugin/build/types.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
2 changes: 2 additions & 0 deletions plugin/build/util.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import { FlipperConfig, WithFlipperOptions } from "./types";
export declare function getConfiguration(options?: WithFlipperOptions): FlipperConfig;
18 changes: 18 additions & 0 deletions plugin/build/util.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getConfiguration = void 0;
function getConfiguration(options) {
let flipperVersion;
if (typeof options === "string") {
flipperVersion = options;
}
else if (typeof options === "object") {
if (options.version) {
flipperVersion = options.version;
}
}
return {
version: flipperVersion,
};
}
exports.getConfiguration = getConfiguration;
3 changes: 3 additions & 0 deletions plugin/build/withFlipper.android.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { ExpoConfig } from "@expo/config-types";
import { FlipperConfig } from "./types";
export declare function withFlipperAndroid(config: ExpoConfig, cfg: FlipperConfig): ExpoConfig;
32 changes: 32 additions & 0 deletions plugin/build/withFlipper.android.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use strict";
/*
Exports functions to make a set of changes to enable flipper
withFlipper
(1) gradle.properties
Set FLIPPER_VERSION if required
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.withFlipperAndroid = void 0;
const config_plugins_1 = require("@expo/config-plugins");
const constants_1 = require("./constants");
function withFlipperAndroid(config, cfg) {
return (0, config_plugins_1.withGradleProperties)(config, (c) => {
var _a, _b, _c;
// check for flipper version in package. If set, use that
let existing;
const found = (_a = c.modResults.filter((item) => item.type === "property" && item.key === constants_1.ANDROID_FLIPPER_KEY)) === null || _a === void 0 ? void 0 : _a[0];
if (found && found.type === "property") {
existing = found.value;
}
// strip flipper key and re-add
c.modResults = c.modResults.filter((item) => !(item.type === "property" && item.key === constants_1.ANDROID_FLIPPER_KEY));
c.modResults.push({
type: "property",
key: constants_1.ANDROID_FLIPPER_KEY,
value: (_c = (_b = cfg.version) !== null && _b !== void 0 ? _b : existing) !== null && _c !== void 0 ? _c : constants_1.FLIPPER_FALLBACK,
});
return c;
});
}
exports.withFlipperAndroid = withFlipperAndroid;
23 changes: 2 additions & 21 deletions plugin/build/withFlipper.d.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,5 @@
import { ConfigPlugin } from "@expo/config-plugins";
export declare type withFlipperOptions = flipperOptions | string;
declare type flipperOptions = {
Flipper?: string;
ios?: {
"Flipper-Folly": string;
"Flipper-RSocket": string;
"Flipper-DoubleConversion": string;
"Flipper-Glog": string;
"Flipper-PeerTalk": string;
};
};
export declare type flipperConfig = {
ios: {
[key: string]: string | null;
Flipper: string | null;
};
android: string | null;
};
/** Adds the flipper lines to the podfile */
export declare function addFlipperToPodfile(contents: string, options: flipperConfig): string;
import { WithFlipperOptions } from "./types";
/** Enable flipper on this application */
export declare const withFlipper: ConfigPlugin<withFlipperOptions>;
export declare const withFlipper: ConfigPlugin<WithFlipperOptions>;
export default withFlipper;
3 changes: 3 additions & 0 deletions plugin/build/withFlipper.ios.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { ExpoConfig } from "@expo/config-types";
import { FlipperConfig } from "./types";
export declare function withFlipperIOS(config: ExpoConfig, cfg: FlipperConfig): ExpoConfig;
114 changes: 114 additions & 0 deletions plugin/build/withFlipper.ios.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
"use strict";
/*
exports the following config file changes for iOS Apps
withFlipper
(1) Inside use_react_native, after :fabric_enabled => flags[:fabric_enabled],
:flipper_configuration => FlipperConfiguration.enabled,
:flipper_configuration => FlipperConfiguration.disabled,
Depending on the ENV variable
withProductionEnv
(1) BEFORE target line
production = ENV["PRODUCTION"] == "1"
(2) Inside use_react_native, after :path => config[:reactNativePath],
:production => production,
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.withFlipperIOS = void 0;
const config_plugins_1 = require("@expo/config-plugins");
const generateCode_1 = require("@expo/config-plugins/build/utils/generateCode");
const constants_1 = require("./constants");
const path_1 = __importDefault(require("path"));
const fs_1 = __importDefault(require("fs"));
/** Create a namepaced tag */
const tag = (s) => `${constants_1.EXPO_FLIPPER_TAG}-${s}`;
/** Return the flipper enabling line for use inside of use_react_native */
const createFlipperArgument = (version) => {
const active = version
? `FlipperConfiguration.enabled(["Debug"], { 'Flipper' => '${version}' }),`
: `FlipperConfiguration.enabled,`;
const inactive = `FlipperConfiguration.disabled`;
return `:flipper_configuration => ENV['FLIPPER_DISABLE'] == "1" ? ${inactive} : ${active}`;
};
/** Removes content by its tag */
const removeTaggedContent = (contents, ns) => {
return (0, generateCode_1.removeContents)({ src: contents, tag: tag(ns) });
};
/** Add the production arg to the use_react_native block */
function withEnvProductionPodfile(config) {
config = (0, config_plugins_1.withDangerousMod)(config, [
"ios",
async (c) => {
const filePath = path_1.default.join(c.modRequest.platformProjectRoot, "Podfile");
const contents = fs_1.default.readFileSync(filePath, "utf-8");
// #3 We cannot tell if a merge failed because of a malformed podfile or it was a noop
// so instead, remove the content first, then attempt the insert
let result = removeTaggedContent(contents, "isprod");
const preexisting = constants_1.IOS_HAS_PRODUCTION_ARG.test(result.contents);
if (!preexisting) {
result = (0, generateCode_1.mergeContents)({
tag: tag("isprod"),
src: result.contents,
newSrc: `
# https://www.npmjs.com/package/expo-community-flipper
:production => ENV["PRODUCTION"] == "1" ? true : false,`,
anchor: constants_1.IOS_URN_ARG_ANCHOR,
offset: -1,
comment: "#",
});
// couldn't remove and couldn't add. Treat the operation as failed
if (!result.didMerge) {
throw new Error("Cannot add use_flipper to the project's ios/Podfile. Please report this with a copy of your project Podfile. You can generate this with the `expo prebuild` command.");
}
}
fs_1.default.writeFileSync(filePath, result.contents);
return c;
},
]);
return config;
}
/** Add flipper to the podfile, behind an ENV flag */
function withFlipperPodfile(config, cfg) {
config = (0, config_plugins_1.withDangerousMod)(config, [
"ios",
async (c) => {
const filePath = path_1.default.join(c.modRequest.platformProjectRoot, "Podfile");
const contents = fs_1.default.readFileSync(filePath, "utf-8");
// #3 We cannot tell if a merge failed because of a malformed podfile or it was a noop
// so instead, remove the content first, then attempt the insert
let result = removeTaggedContent(contents, "urn");
const preexisting = constants_1.IOS_HAS_FLIPPER_ARG.test(result.contents);
if (!preexisting) {
result = (0, generateCode_1.mergeContents)({
tag: tag("urn"),
src: result.contents,
newSrc: `
# https://www.npmjs.com/package/expo-community-flipper
${createFlipperArgument(cfg.version)}`,
anchor: constants_1.IOS_URN_ARG_ANCHOR,
offset: 1,
comment: "#",
});
// couldn't remove and couldn't add. Treat the operation as failed
if (!result.didMerge) {
throw new Error("Cannot add use_flipper to the project's ios/Podfile. Please report this with a copy of your project Podfile. You can generate this with the `expo prebuild` command.");
}
}
fs_1.default.writeFileSync(filePath, result.contents);
return c;
},
]);
return config;
}
function withFlipperIOS(config, cfg) {
config = withEnvProductionPodfile(config);
config = withFlipperPodfile(config, cfg);
return config;
}
exports.withFlipperIOS = withFlipperIOS;
Loading

0 comments on commit 6b3969a

Please sign in to comment.