How to install HostFunction into `jsi::Runtime` (`JSIModule`?)

[mrousavy]

Description

Hi!

This is either a question, bug report or feature request, depending on if it's possible or not.

I've created the react-native-mmkv library which provides sync JSI bindings to the MMKV library by Tencent.

This means, you can do something like this:

const lastUserToken = MMKV.getString('lastUserToken')

to synchronously get a value from the MMKV database. As you can probably already guess, these functions have to be available immediately so that when you use them inside index.js they should already exist. Just like how console.log already exists.

To achieve this, I have installed Host Functions into the jsi::Runtime here. To call that installer function, I have created a Native Module (ReactContextBaseJavaModule) which overrides the initialize function to dispatch the call to my HostFunction installer function on the JS thread.

As you can probably already guess, this leads to race conditions. It can happen that the JS code already tries to access one of those HostFunctions when they're not yet installed. This is exactly the problem I have right now.

I have tried three other approaches:

1. Immediately calling the installer function without dispatching to JS thread -> leads to a native threading/race condition error in the Hermes/JSC runtime because we're not on the JS thread but on the native modules thread.
2. I have tried to use the JSI Module system (JSIModule + JSIModuleSpec + JSIModuleProvider + JSIModulePackage) (see code here) but that didn't call the JSIModule.initialize function I have overridden. Looking at the RN code, it looks like this gets only called when FeatureFlags.useTurboModules is true, so I tried to enable it but that immediately crashed because in my spec I say that my JSIModule is a TurboModuleManager - which it isn't. But there's only UIManager as a second option, which it also isn't.
3. I have tried to override JSIModulePackage.getJSIModules like in approach 2, but instead of initializing a JSIModule I just call the static HostFunction installer function directly (see code here). While I think that worked and initialized on the correct Thread (JS thread), this is not a scalable solution because react-native-reanimated does the same thing, and since ReactApplication.getJSIModulePackage can only return a single JSIModulePackage, users cannot have both my MMKV library and Reanimated installed in there. (see code here).

So my question is; how do I correctly install HostFunctions into the jsi::Runtime?

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 11.2.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 6.89 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.21.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 25, 26, 27, 28, 29, 30
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.0, 30.0.1, 30.0.2, 30.0.3
      System Images: android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.3.6528147
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Create module that installs HostFunctions into jsi::Runtime
2. Get confused on where to actually call that HostFunction installer function

Expected Results

I expect to be able to override a function which I can then use to call my HostFunction installer function.

Snack, code example, screenshot, or link to a repository:

https://github.com/mrousavy/react-native-mmkv

iOS

While I mainly had problems with threading/race conditions on Android, the same question also applies to iOS. How do I correctly install JSI Modules (HostFunction installer) on iOS? The Native Module approach seems to be wrong.

[Ashoat]

@mrousavy, did you end up figuring out what the best path forward on this would be? We're seeing the same sort of race conditions on Android...

Regarding dispatching the binding code on the JS thread, I grepped around the react-native codebase and here are some things I think might be relevant:

• Android: reactContext.runOnJSQueueThread
• iOS: dispatch_async(_jsQueue

[mrousavy]

@Ashoat yep, I found a workaround.

If you take a look at my MMKV library, I require the user to take some additional steps (edit the MainActivity.java file), which will be used to correctly install a JSI module on the correct thread. Because Reanimated already does this, you have to make it compatible with Reanimated as well, which quickly gets messy. The real solution is waiting until TurboModules are released, then just create your Modules like that. Those funcs can be synchronous.

[Ashoat]

Ooh I just figured out this solution: https://gist.github.com/Ashoat/0a348a5a278e477927fcd889f0ba0ce9

Will take a look to see if you did the same thing :)

(This doesn't work, it compiles and doesn't crash but the module is not visible on the JS side...)

[Ashoat]

Thanks so much for your help @mrousavy! I was able to get things working following your approach. Here's the patch that worked for us, in case it's helpful to anybody else: https://gist.github.com/Ashoat/602838b86bfbf712c1d81eaca751ae65

[kasperisager]

I'm having a similar issue in #32813 (comment). To summarise:

1. MyModule.initialize() synchronously installs JSI bindings using a combination of RuntimeExecutor and executeSynchronously_CAN_DEADLOCK(). As such, when MyModule.initialize() returns the bindings have been installed.

2. The application runs before MyModule.initialize() has returned and so the bindings aren't available. Waiting a single event loop tick works, but is obviously not a solution. This only happens on Android; on iOS, the application only runs after RCTMyModule.initialize() has returned.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.