Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fabric: working podspecs & works in RNTester #23803

Closed
wants to merge 32 commits into from

Conversation

ericlewis
Copy link
Contributor

@ericlewis ericlewis commented Mar 7, 2019

Summary

This is the couple of hacks I used after I finished #23802 in order to get fabric working on RNTester. This is inspired from prior work by @kmagiera.

The goal of this PR is to show others what I’m struggling with, and to eventually merge it sans hacks.

Directions to use

  • Yarn Install
  • Uncomment the commented out pods in RNTester's pod file
  • Open RNTesterPods workspace
  • Run App

Notes

  • this is only for pods, the non-pod RNTester will no longer work until updated with fabric too.
  • SurfaceHostingView & SurfaceHostingProxyRootView both try to start the surface immediately, this leads to a race condition due to the javascript not having loaded yet, the hack here is:
    1. Swizzle the start method on RCTFabricSurface to no-op when called.
    2. Add observer for RCTJavaScriptDidLoadNotification
    3. Call private method _startAllSurfaces on _surfacePresenter in AppDelegate when we receive RCTJavaScriptDidLoadNotification.

Changelog

[General] [Added] - Use Fabric in RNTester

Test Plan

Pod install, and run RNTester.

@ericlewis ericlewis requested a review from fkgozali March 7, 2019 06:45
@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 7, 2019
@ericlewis

This comment has been minimized.

@JoshuaGross
Copy link
Contributor

Wow! Clearly a lot of work went into this. This is awesome, thanks for doing it.

Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • eslint found some issues. Run yarn lint --fix to automatically fix problems.
  • flow found some issues.

ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
ReactCommon/fabric/components/rncore/ViewConfigs.js Outdated Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Outdated Show resolved Hide resolved
scripts/generate-rncore.sh Outdated Show resolved Hide resolved
@pull-bot
Copy link

pull-bot commented Mar 8, 2019

Warnings
⚠️ 🔒 package.json - Changes were made to package.json. This will require a manual import by a Facebook employee.

Generated by 🚫 dangerJS against 31c110c

Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Outdated Show resolved Hide resolved
Libraries/Renderer/shims/ReactNative.js Outdated Show resolved Hide resolved
Libraries/StyleSheet/StyleSheetTypes.js Outdated Show resolved Hide resolved
RNTester/Podfile Outdated Show resolved Hide resolved
ReactCommon/jsi/JSCRuntime.cpp Show resolved Hide resolved
third-party-podspecs/Folly.podspec Outdated Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
@ericlewis
Copy link
Contributor Author

The react-native side of things is now hack free! RNTester implements the RCTSurface race condition hack itself, so no need to dirty react native code :)

The podspecs are complete, I am not sure if it is optimal to have a Folly Fabric podspec, but it is easiest without breaking existing users. We can converge once fabric is "done". I think it is fairly safe to import everything except for the changes to RNTester- as they are hacks.

@ericlewis ericlewis marked this pull request as ready for review March 13, 2019 01:02
@ericlewis ericlewis mentioned this pull request Mar 13, 2019
@ericlewis ericlewis changed the title Fabric: works in RNTester Fabric: working podspecs & works in RNTester Mar 13, 2019
@ericlewis

This comment has been minimized.

Copy link
Contributor

@fkgozali fkgozali left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the hard work! I put some comments, but at high level:

  • RNTester Fabric mode needs to be configurable
  • Let's find out how to not depend on libevent
  • You probably should split this PR into a few parts: React.xcodeproj changes, pod file changes, then RNTester changes

@@ -127,6 +127,7 @@
"eslint-plugin-react-native": "3.5.0",
"eslint-plugin-relay": "0.0.28",
"flow-bin": "^0.94.0",
"flow-remove-types": "^1.2.3",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is this for? is it to run the codegen?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, for codegen.

scripts/generate-rncore.sh Show resolved Hide resolved
third-party-podspecs/libevent.podspec Outdated Show resolved Hide resolved
}
@end

// FIXME: this is a hack, remove when surfaces start correctly
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you open an issue then link that issue here? We'll look into it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, will do that shortly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's put this link in the FIXME comment: https://github.com/facebook/react-native/issues/23910

RNTester/RNTester/AppDelegate.m Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

  • shellcheck found some issues.

scripts/generate-rncore.sh Show resolved Hide resolved
@fkgozali
Copy link
Contributor

One other note:

I think in general we want to make Fabric (including compiling it) optional at the moment, because if you include it the core React.xcodeproj or React podspec, then every app has to pay the extra cost of having fabric even if they don't use it (they shouldn't use it for now). This means extra app size or latent bugs for them. So let's split it in this PR.

Given that, I think the ideal place I'd like to go to is:

  • Having fabric-only configuration (in podspec, or separate ReactFabric.xcodeproj, etc) that apps can pull in if they decide to activate fabric
  • Having these configurations define a compiler flag, e.g. FABRIC_ENABLED, so that apps can choose to activate Fabric surface vs old RootView in their AppDelegate

Now, re: .xcodeproj vs podspec, I'd rather just maintain 1 thing going forward. So if the general community is moving towards CocoaPods, we can just drop support for the fabric in .xcodeproj setup.

Long-long term, I recognize it's tedious to manually "sync" these configurations across BUCK/podspec/gradle, so we can have a separate discussion about either utilizing buck project, or even simple parsing of BUCK files to generate the relevant podspec/gradle files.

@@ -17,7 +17,9 @@
3D13F84A1D6F6AFD00E69E0E /* OtherImages.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 3D13F8451D6F6AF200E69E0E /* OtherImages.xcassets */; };
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unrelated: I thought we're not supposed to check in .xcodeproj/.xcworkspace file when using cocoapods? should probably remove this in different PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally you check in the xcodeproj but not the xcworkspace when working with pods.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok sounds good

@msand
Copy link
Contributor

msand commented Mar 15, 2019

Great work! (sorry for the noise, just wanted to thank you :)

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fkgozali has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @ericlewis in 97e6ea1.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label Mar 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Type: Enhancement A new feature or enhancement of an existing feature.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants