How do I write a JSI and Codegen based TurboModule?

[hsjoberg]

Hi, I have been studying #10909 and the JSI TurboModule stuff in vnext/Microsoft.ReactNative.IntegrationTests for some time and finally decided to give a shot at making a TurboModule with Codegen and JSI.

I made a lib using create-react-native-library (#13884 (comment)):

npx --yes create-react-native-library@latest --slug rnwturbo --description rnwturbo --author-name "rnwturbo" --author-email [email protected] --author-url http://example.com --repo-url http://example.com --languages kotlin-objc --type module-new --react-native-version 0.76.0-rc.0 --example test-app rnwturbo

cd rnwturbo

yarn add [email protected]

yarn react-native init-windows --template cpp-lib --overwrite --logging

yarn example windows # twice if you run into #13599

Ran react-native-windows-codgen with flag --modulesCxx to get the JSI codegen:

npx react-native-windows-codegen --libraryName "rnwturbo" --file .\src\NativeRnwturbo.ts --outputDirectory .\windows\rnwturbo\codegen-jsi --modulesCxx
Writing  windows\rnwturbo\codegen-jsi\.clang-format
Writing  windows\rnwturbo\codegen-jsi\rnwturboJSI.h
Writing  windows\rnwturbo\codegen-jsi\rnwturboJSI-generated.cpp

and made a simple implementation.

windows\rnwturbo\rnwturbo.{h|cpp}:

#include "codegen-jsi/rnwturboJSI.h"

#include <winrt/Microsoft.ReactNative.h>
#include <winrt/Windows.Foundation.Collections.h>

#include <TurboModuleProvider.h>

namespace facebook::react {

class Rnwturbo : react::NativeRnwturboCxxSpecJSI {
public:
Rnwturbo(std::shared_ptr<react::CallInvoker> jsInvoker);

double multiply(jsi::Runtime &rt, double a, double b);
};

struct RnwturboPackageProvider
    : winrt::implements<RnwturboPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider> {
  void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept {
    winrt::Microsoft::ReactNative::AddTurboModuleProvider<Rnwturbo>(packageBuilder, L"RnwturboCxx");
  }
};

}

#include "rnwturbo.h"

namespace facebook::react {

Rnwturbo::Rnwturbo(std::shared_ptr<react::CallInvoker> jsInvoker)
    : NativeRnwturboCxxSpecJSI(std::move(jsInvoker)) {}

double Rnwturbo::multiply(double a, double b) {
    return a * b;
}

}

---

I don't know how to autolink JSI TurboModules, but as a quick hack I changed example\windows\rnwturboExample\rnwturboExample.cpp in the example app to manually link with the RnwturboPackageProvider, as shown in

react-native-windows/vnext/Microsoft.ReactNative.IntegrationTests/JsiTurboModuleTests.cpp

Line 155 in a3fc8a9

host.PackageProviders().Append(winrt::make<MySimpleTurboModulePackageProvider>());

:

#include "../../../windows/rnwturbo/rnwturbo.h"

[...]

// RegisterAutolinkedNativeModulePackages(host.PackageProviders());

host.PackageProviders().Append(winrt::make<facebook::react::RnwturboPackageProvider>());

Now, everything is set as far as I understand. I also later found the very helpful comments in #13886 confirming my understanding of things.

But when running yarn example windows --no-autolink I get this:

 ✖ Build failed with message 2:10>C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\codegen-jsi\rnwturboJSI.h(13,10): error C1083: Cannot open include file: 'react/bridging/Bridging.h': No such file or directory [C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\rnwturbo.vcxproj]. Check your build configuration.

So this is coming from the JSI codegen file that react-native-windows-codegen creates and it's failing to import Meta's JSI file(s).
I've tried changing the import path to some other variants but cannot get the file to be imported.

For clarity, the file just looks like normal JSI codegen code:

#pragma once

#include <ReactCommon/TurboModule.h>
#include <react/bridging/Bridging.h>

namespace facebook::react {


  class JSI_EXPORT NativeRnwturboCxxSpecJSI : public TurboModule {
protected:
  NativeRnwturboCxxSpecJSI(std::shared_ptr<CallInvoker> jsInvoker);

public:
  virtual double multiply(jsi::Runtime &rt, double a, double b) = 0;

};

// etc

Any suggestions on how I would fix this?
And also, is autolink supported for JSI TurboModules?

---

Sidenote: I could not get latest canary 0.0.0-canary.877 or 0.76.0-preview.2 to work. That's why I'm using 0.76.0-preview.1:

[email protected]:
 Build failed with message 1>C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\rnwturbo.vcxproj : error NU1102: Unable to find package Microsoft.ReactNative with version (>= 0.76.0-preview.2-Fabric) [C:\Users\CocoT1\Projects\rnwturbo\example\windows\rnwturboExample.sln]. Check your build configuration.


[email protected]:
 ✖ Build failed with message 2:10>C:\Users\CocoT1\.nuget\packages\microsoft.reactnative.cxx\0.0.1-0\build\native\Microsoft.ReactNative.VersionCheck.targets(96,5): error : Mismatch detected between npm package versions and nuget package version. [C:\Users\CocoT1\Projects\rnwturbo\windows\rnwturbo\rnwturbo.vcxproj]. Check your build configuration.

---

I've uploaded a repro here:
https://github.com/hsjoberg/rnwturbo-jsi-test

Best
Hampus

[chrisglein]

While 0.76 is in preview there have been some packaging gaps, that's why preview.2 didn't work but preview.1 got further.

There seems to be a gap with the JSI codegen for cpp/winrt that you're hitting here. So I think this is actually a gap and should be converted into a bug.

#13999

[chrisglein]

Also, take a look at this discussion: #13886

[hsjoberg]

Thanks for making it into an issue @chrisglein.

There seems to be a gap with the JSI codegen for cpp/winrt that you're hitting here

Oh yeah I had my suspicion that something like this was the case, by looking around in the vnext folder.

There's this TEMP_UntilReactCommonUpdate folder I can't fully make sense of. Bridging.h is there, although other JSI files like for example Promise.h is missing.
So presumably that file and other needs to be synced from react-native core and moved out from the temp folder so it's accessible.

Also, take a look at this discussion: #13886

Indeed it's a great resource for anyone that wants to learn about this stuff.