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

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.

[kasperisager]

I’m having a similar issue in https://github.com/facebook/react-native/issues/32813#issuecomment-1020021633. 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.

[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