feat(windows): add New Architecture support #1147

Yajur-Grover · 2024-09-25T18:08:54Z

Summary

Adds support for the New Architecture to async-storage. Currently, windows support for the New Architecture is experimental and may not be complete.

Test Plan

On a Windows machine, run the following:

yarn
cd packages/default-storage
yarn
yarn start:windows:fabric

changeset-bot · 2024-09-25T18:08:59Z

⚠️ No Changeset found

Latest commit: dd1dbac

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

tido64

There are some changes here that seem incompatible with old architecture. Have you checked that it still works?
There are a lot of unrelated changes that need to be reverted. Especially after chore: bump react-native to 0.75 #1146 lands.

packages/default-storage/example/examples/MergeItem.tsx

tido64 · 2024-09-26T06:52:30Z

packages/default-storage/babel.config.js

This should be reverted.

packages/default-storage/example/android/gradlew

packages/default-storage/example/babel.config.js

packages/default-storage/windows/ReactTestApp.sln

packages/default-storage/windows/code/ReactPackageProvider.cpp

tido64 · 2024-09-26T07:00:01Z

packages/default-storage/windows/code/codegen/.clang-format

Do we need to check in generated code?

This looks like a duplicate of what's in packages/default-storage/windows/ReactNativeAsyncStorage/codegen - are both copies necessary?

clang-format travels up from the current path looking for a config file. These two are in different paths so I'd say we need both:

packages/default-storage/windows/ReactNativeAsyncStorage/codegen/.clang-format packages/default-storage/windows/code/codegen/.clang-format ^~~ first common dir

Something seems up if we have two copies of the generated code. hats not right.

Looking at the commit history, I think the two copies came from two different commits. The first one was from when I think I ran codegen-windows independently: codegen-windows commit

The second one was from this commit where I I ran it again: second codegen commit. I think this was user error vs an issue with the template.

tido64 · 2024-09-26T07:00:16Z

packages/default-storage/windows/code/ReactPackageProvider.h

@@ -20,4 +20,4 @@ namespace winrt::ReactNativeAsyncStorage::factory_implementation
    struct ReactPackageProvider
        : ReactPackageProviderT<ReactPackageProvider, implementation::ReactPackageProvider> {
    };
-}  // namespace winrt::ReactNativeAsyncStorage::factory_implementation
+}  // namespace winrt::ReactNativeAsyncStorage::factory_implementation


...ges/default-storage/windows/packages/Microsoft.Windows.CppWinRT.2.0.200316.3/.nupkg.metadata

Yajur-Grover · 2024-09-27T23:03:54Z

There are some changes here that seem incompatible with old architecture. Have you checked that it still works?

I tried building with the old architecture following the below steps, and was able to successfully deploy the example app (after removing the generated code from yarn start:windows:fabric:

cd packages/default-storage
yarn start:windows

I changed the call to AddAttributedModules() depending on the value of USE_FABRIC - I think that should maintain the same behaviour when using the old architecture.

tido64 · 2024-10-03T19:40:53Z

The 0.75 bump just merged. This PR should reduce in size significantly if you rebase now.

tido64 · 2024-10-09T10:16:50Z

packages/default-storage/example/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
  presets: ["module:@react-native/babel-preset"],
+  plugins: ["@babel/plugin-transform-runtime"]


Is this really needed? It should already be included by the preset.

tido64 · 2024-10-09T10:18:06Z

packages/default-storage/example/examples/MergeItem.tsx

          }
        />
        <Button
          testID="unsetDelegate_button"
          title="Unset native delegate"
          disabled={
-            !NativeModules["AsyncStorageTestSupport"] ||
-            !NativeModules["AsyncStorageTestSupport"].test_unsetDelegate
+            TurboModuleRegistry.get('AsyncStorageTestSupport')?.test_unsetDelegate


This check needs to be inverted back:

Suggested change

TurboModuleRegistry.get('AsyncStorageTestSupport')?.test_unsetDelegate

!TurboModuleRegistry.get('AsyncStorageTestSupport')?.test_unsetDelegate

tido64 · 2024-10-09T10:18:35Z

...lt-storage/example/ios/AsyncStorageExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

This is unrelated to the Windows changes. Please revert.

tido64 · 2024-10-09T10:18:38Z

...-storage/example/macos/AsyncStorageExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

This is unrelated to the Windows changes. Please revert.

tido64 · 2024-10-09T10:18:44Z

packages/default-storage/metro.config.js

This is unrelated to the Windows changes. Please revert.

tido64 · 2024-10-09T10:29:30Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

  <ItemDefinitionGroup>
    <ClCompile>
      <PrecompiledHeader>Use</PrecompiledHeader>
      <PrecompiledHeaderFile>pch.h</PrecompiledHeaderFile>
      <PrecompiledHeaderOutputFile>$(IntDir)pch.pch</PrecompiledHeaderOutputFile>
-      <WarningLevel>Level4</WarningLevel>
+      <WarningLevel>Level3</WarningLevel>


Why did we lower the warning level?

I think this was automatically done when running the cpp-lib template - should we raise it back?

Yes, let's not make any unnecessary changes.

tido64 · 2024-10-09T11:23:04Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

  <ItemGroup>
-    <ClInclude Include="..\code\pch.h" />
+    <ClInclude Include="pch.h" />


Did we include another set of pch.*? What are we doing about the old ones?

The new pch.* files were generated when I ran the cpp-lib template. The old ones are just there, I haven't included them in the project file. Should they be okay to delete?

If they're no longer used, we should clean up.

tido64 · 2024-10-09T11:25:10Z

packages/default-storage/windows/ReactNativeAsyncStorage/resource.h

Do we really need this file? It doesn't look like it provides anything.

It's used by the ReactNativeAsyncStorage.rc file - doesn't show up in the diff, but it looks like this:

But it's basically an empty file. Can we delete both? I don't think AsyncStorage is ever going to include any resources.

...ages/default-storage/windows/packages/Microsoft.Windows.CppWinRT.2.0.200316.3/.signature.p7s

yarn.lock

tido64 · 2024-10-10T09:17:03Z

packages/default-storage/metro.config.js

This should also be reverted. Please note that all text files must end with an EOL: https://www.baeldung.com/linux/files-end-with-newlines

tido64 · 2024-10-10T09:17:29Z

packages/default-storage/src/shouldFallbackToLegacyNativeModule.ts

Revert this file. Now we have an unused import and a formatting issue.

tido64 · 2024-10-10T09:17:54Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

  <ItemGroup>
-    <ClInclude Include="..\code\pch.h" />
+    <ClInclude Include="pch.h" />


If they're no longer used, we should clean up.

tido64 · 2024-10-10T09:18:46Z

packages/default-storage/windows/code/codegen/.clang-format

@@ -0,0 +1,2 @@
+DisableFormat: true
+SortIncludes: false


Add newline to the end of file: https://www.baeldung.com/linux/files-end-with-newlines

acoates-ms · 2024-10-11T15:53:11Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

  </ItemGroup>
  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
  <ImportGroup Label="ReactNativeWindowsTargets">
-    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets')" />
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets" Condition="'$(UseFabric)'!='true' And Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets')" />


We should work out how to use
microsoft/react-native-windows#13945

Do we have any variables available to the vcxproj for RNW version? -- Seems like that would be useful so that we could import Uwp.CppLib on older RNW versions, but the newer import on newer RNW versions.

If we dont have such a variable, we should add one to newer RNW versions, and we can use the lack of such a variable as indication to use the older build logic.

that logic is in Microsoft.ReactNative.CppLib.props and Microsoft.ReactNative.CppLib.targets and will be in 0.76. At some point we just have to say, RNW fabricis soft launching in 0.76, the template in 0.76 is the supported base and 0.76 is the supported min version for fabric. Projects are welcome to use UseFabric themselves to replicate the functionality for RNW < 0.76, but I don't want that in the template.

acoates-ms · 2024-10-11T15:53:59Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactPackageProvider.cpp

+
+void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept
+{
+  AddAttributedModules(packageBuilder, true);


Whats the supported RNW version range of async-storage? -- Should we put the extra "true" args behind a version check?

Actually, I think this file is unused - the included file is https://github.com/react-native-async-storage/async-storage/pull/1147/files/b9f2e55486dfcbeb15f9dc6d0ab37e999913a553#diff-91c8b85a4a6cfde2508040988d613ec059855d3e4cca40423d0edc7478af9301

I'm using USE_FABRIC to decide whether to use the true arg or not - this allowed me to build on both old and new architecture. Looks like the extra ReactPackageProvider.* files in this directory should be good to remove.

acoates-ms · 2024-10-15T01:38:02Z

packages/default-storage/example/examples/Functional.tsx

-        );
+        const AsyncStorageTestSupport = TurboModuleRegistry
+          ? TurboModuleRegistry.get("AsyncStorageTestSupport")
+          : NativeModules["AsyncStorageTestSupport"];


TurboModuleRegistry already fallsback to NativeModules, so no need to check both.

When calling TurboModuleRegistry directly, the tsc check was throwing the following error: https://github.com/react-native-async-storage/async-storage/actions/runs/11295316739/job/31491051486#step:5:26. I tried changing the call to TurboModuleRegistry.get<TurboModule> in case it was a typing issue, but same result.

You're getting typing issues because TurboModule is a generic type, it doesn't contain the two methods that are being called further down. You need to first define the types:

type AsyncStorageDelegate = () => void; type AsyncStorageTestSupport = { test_setDelegate: (delegate: AsyncStorageDelegate) => void; test_unsetDelegate: (delegate: AsyncStorageDelegate) => void; };

Then use it like this:

const AsyncStorageTestSupport = TurboModuleRegistry.get<AsyncStorageTestSupport>("AsyncStorageTestSupport");

Yajur-Grover · 2024-10-16T18:37:40Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

@acoates-ms this commit should make use of microsoft/react-native-windows#13945 once that PR is backported into 0.76.

I assumed that if someone is building with a canary build, that it would be the latest canary so it will include template update - which is why the check for the new props and targets import is an Or. Does the logic here look good?

packages/default-storage/example/examples/Functional.tsx

Yajur-Grover · 2024-10-16T21:14:32Z

package.json

@@ -40,7 +40,8 @@
    "@react-native/js-polyfills": "^0.75.0",
    "@react-native/normalize-colors": "^0.75.0",
    "@react-native/virtualized-lists": "^0.75.0",
-    "find-babel-config/json5": "^2.1.1"
+    "find-babel-config/json5": "^2.1.1",
+    "react-native-windows": "^0.75.5"


@tido64 is this change a good way to make sure RNTA uses 0.75.5, instead of publishing this PR?

You don't need to add a resolution override. You can bump the package in yarn.lock. Since it's already been bumped, you can remove this entry only.

acoates-ms · 2024-10-16T21:34:22Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

    <Import Project="PropertySheet.props" />
  </ImportGroup>
-  <ImportGroup Label="ReactNativeWindowsPropertySheets">
-    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.props')" />
+  <ImportGroup Label="ReactNativeWindowsPropertySheets" Condition="'$(ReactNativeWindowsCanary)'!='true' And '$([MSBuild]::VersionLessThan($(ReactNativeWindowsMinor), 76))'">


$([MSBuild]::VersionLessThan($(ReactNativeWindowsMajor).$(ReactNativeWindowsMinor).$(ReactNativeWindowsPatch), '0.76.0'))

Otherwise if we ever get to a version 1.0, it would count as a version less than 76.

This will still fail to do the right thing if we publish a RNW 1.0.0

I think we want:
Condition="'$(ReactNativeWindowsCanary)'!='true' And $([MSBuild]::VersionLessThan('$(ReactNativeWindowsMajor).$(ReactNativeWindowsMinor).$(ReactNativeWindowsPatch)', '0.76.0'))""

I think this change has the mentioned fix? a1d931c.

Missed a couple of the error conditions at the bottom, fixed here: dd1dbac.

acoates-ms · 2024-10-16T21:34:59Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\external\Microsoft.ReactNative.Uwp.CppLib.props" Condition="'$(UseFabric)'!='true' And Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.props')" />
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.props" Condition="'$(UseFabric)'=='true' And Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppLib.props')" />
+  </ImportGroup>
+  <ImportGroup Label="ReactNativeWindowsPropertySheets" Condition="'$(ReactNativeWindowsCanary)'=='true' Or '$([MSBuild]::VersionGreaterThanOrEquals($(ReactNativeWindowsMinor), 76))'">


I think there is a way to do an if else, I think its called choice or something. You should do that, so that we only include one set of the props files.

Looking at the When documentation, we cannot add ImportGroup as a child element of a <When> statement. With the current implementation, I don't think both sets of props files will be included since both conditions won't evaluate to true at the same time.

acoates-ms · 2024-10-16T21:36:04Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

    </ClCompile>
    <Link>
+      <AdditionalDependencies>shell32.lib;user32.lib;windowsapp.lib;%(AdditionalDependenices)</AdditionalDependencies>


Isn't windowsapp.lib a UWP thing? Not sure that that should be included in fabric apps.

Also think this is from the cpp-lib template - not sure whether we should keep it or not. @jonthysell do you have any thoughts?

It's still in the new arch lib template. Maybe it isn't necessary for new arch, but it might still be for old arch.

acoates-ms · 2024-10-16T21:36:35Z

packages/default-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj

@@ -113,16 +131,24 @@
      <PreprocessorDefinitions>NDEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
    </ClCompile>
  </ItemDefinitionGroup>
+  <ItemDefinitionGroup>
+    <ClCompile>
+      <PreprocessorDefinitions Condition="'$(UseFabric)'=='true'">USE_FABRIC;%(PreprocessorDefinitions)</PreprocessorDefinitions>


Shouldn't this be part of the props file? - Or do all apps have to do this?

I believe this is a part of both the cpp-app and the cpp-lib template, so it's done by all New Arch apps and libraries?

@jonthysell - Is this something that we can move into one of the shared props files, so that not every package needs to include this?

Yes I plan on having this ready for 0.76.0, though it will probably be a new #define for customers (like RNW_NEW_ARCHITECTURE) : microsoft/react-native-windows#13929

tido64 requested changes Sep 26, 2024

View reviewed changes

Yajur-Grover mentioned this pull request Oct 3, 2024

Not yet able to include non-UI component projects (async-storage, clipboard) in a Fabric project microsoft/react-native-windows#12786

Open

Yajur-Grover added 20 commits October 7, 2024 16:19

upgrade to work on 0.74

b3739e6

codegen config changes

73e701f

changes from codegen-windows

b231d74

rename example to sample and run the cpp-lib template

7967f29

add method stubs for turbomodule

7e5116e

fix where codegen runs

beb94d5

bump RNTA and fix package.json

10b538b

fix project to include correct module code

36a9635

revert sample back to example

f289477

register turbomodules and fix config issues

50e5255

re-add paper dependencies

66c9429

fix pch.h and untrack ExperimentalFeatures.props

b01454d

remove unused asyncstorage files

1ea1df7

remove unused testapp directories

015b4ab

revert some changes

6f1d52f

revert according to feedback

5e055bc

delete more unused files

a794eb1

address comments

f1fc1d4

fix packageprovider

8387705

fix turbomodule usage

123b3fd

Yajur-Grover force-pushed the yg-fabric-windows-upgrade branch from 2158b30 to 123b3fd Compare October 9, 2024 04:24

fix typos

8dade8c

tido64 requested changes Oct 9, 2024

View reviewed changes

Yajur-Grover added 2 commits October 9, 2024 10:57

revert changes

8acb3b0

revert some changes

e50e5e1

remove unnecessary dependencies

452ed6f

tido64 reviewed Oct 10, 2024

View reviewed changes

Yajur-Grover added 6 commits October 10, 2024 10:56

address feedback

dabd92a

run yarn format

66e0c92

remove unused imports

ad9ce4d

revert packageprovider.h

456d9fa

update WindowsSDK versions

b6bfb3b

test updated yarn.lock

b9f2e55

acoates-ms reviewed Oct 11, 2024

View reviewed changes

change call to asyncstoragetestsupport

dd5b0fb

acoates-ms reviewed Oct 15, 2024

View reviewed changes

Yajur-Grover added 3 commits October 15, 2024 17:12

test props and targets import changes

eef71c1

import props

ce96c4b

set rnw to 0.75.5 min and fix vcxproj

ee87b26

Yajur-Grover commented Oct 16, 2024

View reviewed changes

update AsyncStorageTestSupport declaration

f79f198

Yajur-Grover commented Oct 16, 2024

View reviewed changes

packages/default-storage/example/examples/Functional.tsx Outdated Show resolved Hide resolved

remove unused packageproviders

ef227e7

Yajur-Grover commented Oct 16, 2024

View reviewed changes

acoates-ms reviewed Oct 16, 2024

View reviewed changes

Yajur-Grover added 6 commits October 16, 2024 16:48

update props and targets files checks

a1d931c

apply changes from feedback

9bc5354

fix formatting

67526ce

update tests

c3c8874

format

8099d49

fix error conditions

dd1dbac

	TurboModuleRegistry.get('AsyncStorageTestSupport')?.test_unsetDelegate
	!TurboModuleRegistry.get('AsyncStorageTestSupport')?.test_unsetDelegate

feat(windows): add New Architecture support #1147

Are you sure you want to change the base?

feat(windows): add New Architecture support #1147

Conversation

Yajur-Grover commented Sep 25, 2024

Summary

Test Plan

changeset-bot bot commented Sep 25, 2024 • edited Loading

⚠️ No Changeset found

tido64 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yajur-Grover Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yajur-Grover commented Sep 27, 2024

tido64 commented Oct 3, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yajur-Grover Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yajur-Grover Oct 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Sep 25, 2024 •

edited

Loading

Yajur-Grover Oct 11, 2024 •

edited

Loading

Yajur-Grover Oct 11, 2024 •

edited

Loading

Yajur-Grover Oct 16, 2024 •

edited

Loading