microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.31k stars 1.14k forks source link

Unable to include <react/bridging/Bridging.h> #13999

Open chrisglein opened 4 days ago

chrisglein commented 4 days ago

From this discussion: https://github.com/microsoft/react-native-windows/discussions/13985

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 (https://github.com/microsoft/react-native-windows/issues/13884#issuecomment-2388653591):

npx --yes create-react-native-library@latest --slug rnwturbo --description rnwturbo --author-name "rnwturbo" --author-email rnwturbo@rnwturbo.com --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 react-native-windows@0.76.0-preview.1

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 https://github.com/microsoft/react-native-windows/blob/a3fc8a9c0893ced961677523820060f3df8947fb/vnext/Microsoft.ReactNative.IntegrationTests/JsiTurboModuleTests.cpp#L155:

#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
chrisglein commented 1 day ago

Previously there had been issues with compilation of this particular area with MSVC vs. Clang. But we believe that has been resolved (and in fact the file has a patch override) and is used in the integration tests. Should be a trivial change to add the header to the nuget project.