[iOS] Enabling RCTWebSocket on UIKitForMac (macOS Catalyst)

[andymatuschak]

Summary

In #25427, @radex added initial support for running React Native projects on macOS via Catalyst. However, RCTWebSocket was disabled for that target because of some compilation issues. This meant that running projects via a connection to the packager wasn't possible: no live reload, and projects must be run in "Release" mode. It also meant making manual changes to Xcode projects deploying to macOS and scattering a number of conditional checks throughout the codebase.

In this change, I've implemented support for RCTWebSocket on the macOS target and re-enabled the affected features. Live reload and the inspector now work for macOS targets. Manual modifications of Xcode build settings are no longer necessary for react-native projects running on macOS.

Limitations

There's no binding which displays the developer menu (since there's no shake event on macOS). We'll probably want to add one, perhaps to the menu bar.

I've chosen not to commit the modifications to RNTester which enable macOS support, since that would imply more "official" support for this target than I suspect you all would like to convey. I'm happy to add those chunks if it would be helpful.

Changelog

[iOS] [Added] - Added web socket support for macOS (Catalyst), enabling debug builds and live reload

Test Plan

• Open RNTester/RNTester.xcodeproj with Xcode 11.2.1, run it like a normal iOS app -- make sure it compiles and runs correctly (no regression)
• Select "My Mac" as device target, and run. You may need to configure a valid development team to make signing work.
• RNTester should run fine with no additional configuration. Modify a file in RNTester, note that live reload is now working.
• Test the developer inspector. To display the developer menu, you'll need to manually show it; here's an example diff which does that:

diff --git a/RNTester/js/RNTesterApp.ios.js b/RNTester/js/RNTesterApp.ios.js
index 8245a68d12..a447ad3b1b 100644
--- a/RNTester/js/RNTesterApp.ios.js
+++ b/RNTester/js/RNTesterApp.ios.js
@@ -19,6 +19,8 @@ const React = require('react');
 const SnapshotViewIOS = require('./examples/Snapshot/SnapshotViewIOS.ios');
 const URIActionMap = require('./utils/URIActionMap');
 
+import NativeDevMenu from '../../Libraries/NativeModules/specs/NativeDevMenu';
+
 const {
   AppRegistry,
   AsyncStorage,
@@ -143,6 +145,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
 
   UNSAFE_componentWillMount() {
     BackHandler.addEventListener('hardwareBackPress', this._handleBack);
+    NativeDevMenu.show();
   }
 
   componentDidMount() {

[facebook-github-bot]

Hi andymatuschak! Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[andymatuschak]

ci/circleci: js_coverage failed with this error:

Test Suites: 127 passed, 127 total
Tests:       1 skipped, 1192 passed, 1193 total
Snapshots:   555 passed, 555 total
Time:        106.245s
Ran all test suites.
Done in 107.11s.

/home/circleci/react-native/node_modules/coveralls/bin/coveralls.js:18
        throw err;
        ^
Bad response: 422 {"message":"Couldn't find a repository matching this job.","error":true}

Exited with code exit status 1

That's mysterious to me and strikes me as possibly spurious. If there's something actually broken, a pointer would be helpful!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[radex]

It's so simple! I wish I spent 10 more minutes on the problem ;)

[radex]

Thank you @andymatuschak for this!

[charpeni]

Thanks for sending that!

I was currently looking at this. I would have loved to see your PR before digging into it. 😅

<Endian.h> is not available on Mac (deprecated in macOS 10.8), and <Machine/Endian.h> doesn't expose the methods we want.

I ended up using CFSwapInt16BigToHost & CFSwapInt64BigToHost in my branch. But it looks like they achieved the same thing!

At some point, we should probably update our SRWebSocket based on the latest version of SocketRocket. 🤷‍♂ Out of scope anyway.

[TheSavior]

This is awesome! I'll give @shergin a chance to review before landing

Does CMD+D on the app bring up the dev menu? (@rickhanlonii reminded me this is the shortcut)

[fungilation]

Awesome work indeed!

[charpeni]

@TheSavior CMD+D doesn't bring up the dev menu. I know what's up, sending a PR in a few minutes.

[hramos]

I'm going to import these in order to get a head start with our internal test suite, as well as to get it onto @shergin's review queue.

[facebook-github-bot]

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

[react-native-bot]

This pull request was successfully merged by @andymatuschak in f21fa4e.

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