Skip to content

Commit 6d4198f

Browse files
jonthyselljonthysell
authored
Upgrade RNX to target RN and RNW 0.72 (#261)
This PR upgrades RNX to target RNW 0.72, along with several fixes to make that possible. Changes: * RNX project and examples updated (dev) dependency to target RN/RNW 0.72 * RNX now default targets WinUI 2.8.0 (as per RNW 0.72) * Improved Codegen to understand environment variables in winmd paths * Adds the paths of winmd's used into codegened files for future debugging * Removes the "source line" comments in the codegen that contain local dev paths * RNX project will now run codegen before building if it detects that the version of WinUI being requested doesn't match the version last used to run the codegen * RNX project updated to make sure it can still be built against older supported versions of RNW * Pipeline fixes to make sure we're testing against the correct versions of everything * Removal of (now) unnecessary SetupAppForNuGet script as apps will target whichever WinUI RNW targets * Added `yarn test` for example and cli app builds Closes #260
1 parent 838a4d1 commit 6d4198f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+2292
-2981
lines changed

‎.github/workflows/SetUpAppForNuget.ps1

-72
This file was deleted.

‎.github/workflows/main.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ jobs:
2626
exampleName: ${{ matrix.exampleName }}
2727

2828
call-testcli:
29-
name: Test CLI
29+
name: Test CLI (VS 2022)
3030
strategy:
3131
fail-fast: false
3232
matrix:
33-
rnwVersion: ['^0.71'] # test supported versions
33+
rnwVersion: [ '0.71-stable', 'latest'] # test *all* versions that use VS 2022. aka any RNW version >= min in package.json and >= 0.71
3434
useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
3535
uses: ./.github/workflows/template-testcli.yml
3636
with:
@@ -39,11 +39,11 @@ jobs:
3939
useRnwNuGet: ${{ matrix.useRnwNuGet }}
4040

4141
call-testcli-old:
42-
name: Test CLI (Old)
42+
name: Test CLI (VS 2019)
4343
strategy:
4444
fail-fast: false
4545
matrix:
46-
rnwVersion: ['^0.67', '^0.68', '^0.69', '^0.70'] # test supported versions
46+
rnwVersion: ['0.67-stable', '0.68-stable', '0.69-stable', '0.70-stable'] # test *all* versions that use VS 2019. aka any RNW version >= min in package.json and < 0.71
4747
useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
4848
uses: ./.github/workflows/template-testcli.yml
4949
with:

‎.github/workflows/pr.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ jobs:
3737
exampleName: ${{ matrix.exampleName }}
3838

3939
call-testcli:
40-
name: Test CLI
40+
name: Test CLI (VS 2022)
4141
needs: setupcheck
4242
strategy:
4343
fail-fast: true
4444
matrix:
45-
rnwVersion: ['^0.71'] # test key versions
45+
rnwVersion: ['0.71-stable', 'latest'] # test *key* versions that use VS 2022. aka any RNW version >= 0.71 used by supported partners and/or Active/Maintenance from https://microsoft.github.io/react-native-windows/support
4646
useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
4747
uses: ./.github/workflows/template-testcli.yml
4848
with:
@@ -51,12 +51,12 @@ jobs:
5151
useRnwNuGet: ${{ matrix.useRnwNuGet }}
5252

5353
call-testcli-old:
54-
name: Test CLI (Old)
54+
name: Test CLI (VS 2019)
5555
needs: setupcheck
5656
strategy:
5757
fail-fast: true
5858
matrix:
59-
rnwVersion: ['^0.67', '^0.69'] # test key versions (min, partners)
59+
rnwVersion: ['0.67-stable', '0.69-stable'] # test *key* versions that use VS 2019. aka any RNW version < 0.71 that are used by supported partners
6060
useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
6161
uses: ./.github/workflows/template-testcli.yml
6262
with:

‎.github/workflows/template-buildexample.yml

+4
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ jobs:
2929
run: yarn windows --no-launch --no-deploy --no-packager --logging
3030
working-directory: ${{ inputs.exampleName }}
3131

32+
- name: test app
33+
run: yarn test
34+
working-directory: ${{ inputs.exampleName }}
35+
3236
- name: Upload appx
3337
uses: actions/upload-artifact@v3
3438
with:

‎.github/workflows/template-runcodegen.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ jobs:
2929
run: nuget restore example\windows\example.sln
3030

3131
- name: run CodeGen
32-
run: dotnet run -verbose -winmd $env:USERPROFILE\.nuget\packages\microsoft.ui.xaml\2.7.0\lib\uap10.0\Microsoft.UI.Xaml.winmd
33-
working-directory: package\Codegen
32+
run: yarn codegen
33+
working-directory: package
3434

3535
- name: build TS
3636
run: yarn build

‎.github/workflows/template-testcli.yml

+10-9
Original file line numberDiff line numberDiff line change
@@ -35,27 +35,28 @@ jobs:
3535

3636
- name: create react-native@${{ inputs.rnwVersion }} app
3737
run: npx react-native init testrnx --template react-native@${{ inputs.rnwVersion }}
38+
working-directory: ../
3839

3940
- name: add Windows (RNW via ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }})
4041
run: npx react-native-windows-init --overwrite ${{ inputs.useRnwNuGet && '--experimentalNuGetDependency true' || '' }}
41-
working-directory: testrnx
42+
working-directory: ../testrnx
4243

4344
- name: link react-native-xaml
4445
run: yarn link react-native-xaml
45-
working-directory: testrnx
46+
working-directory: ../testrnx
4647

4748
- name: add react-native-xaml
4849
run: yarn add react-native-xaml
49-
working-directory: testrnx
50+
working-directory: ../testrnx
5051

5152
- name: autolink
5253
run: npx react-native autolink-windows --logging
53-
working-directory: testrnx
54-
55-
- name: update WinUI package version
56-
run: ..\.github\workflows\SetUpAppForNuget.ps1 ${{ inputs.useRnwNuGet && '-UseNuGet' || '' }}
57-
working-directory: testrnx
54+
working-directory: ../testrnx
5855

5956
- name: build app
6057
run: npx react-native run-windows --no-launch --no-deploy --no-packager --logging
61-
working-directory: testrnx
58+
working-directory: ../testrnx
59+
60+
- name: test app
61+
run: yarn test
62+
working-directory: ../testrnx

‎CONTRIBUTING.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
1313

1414
### Build and run Codegen
1515
1. In the Solution Explorer, right-click on the `Codegen` project and select `Set as Startup Project`.
16-
2. Build the Codegen project (`Build > Build Godegen`). Once completed, you are ready to run the project, see output, and make your desired changes.
16+
2. Build the Codegen project (`Build > Build Codegen`). Once completed, you are ready to run the project, see output, and make your desired changes.
1717
3. Run the Codegen project (`Debug > Start Debugging`).
1818

1919
### Make and verify your Codegen changes
@@ -28,7 +28,7 @@ If you make changes to the Codegen project, be sure to build and re-run the Code
2828

2929
If you make changes to the ReactNativeXaml project, or to the Codegen output files (above), make sure that the ReactNativeXaml project still builds.
3030

31-
1. Make sure the example.sln is loaded in Visual Studio, see [Intial setup](#initial-setup)
31+
1. Make sure the example.sln is loaded in Visual Studio, see [Initial setup](#initial-setup)
3232
2. Set the Solution Configuration to `Debug` or `Release`.
3333
3. Set the Solution Platforms to `x86` or `x64` (not `AnyCPU`).
3434
4. Run `Build > Build Solution`.

‎USAGE.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ To include react-native-xaml in your app, just add it to your package.json:
99

1010
Then autolinking will take care of the rest!
1111

12-
The stock react-native-xaml package includes projections for all XAML types (i.e. "system XAML") as well as WinUI 2.6.
12+
The stock react-native-xaml package includes projections for all XAML types (i.e. "system XAML") as well as WinUI 2.x.
1313

1414
## :exclamation: **Important**
1515
You must update your app to use WinUI 2.6 or later. See the instructions at https://microsoft.github.io/react-native-windows/docs/customizing-sdk-versions.

‎change/react-native-xaml-bbed23b4-cc12-470d-a863-3e1e48c11ffc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Upgrade RNX to target RN and RNW 0.72",
4+
"packageName": "react-native-xaml",
5+
"email": "jthysell@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎codegen/Properties/launchSettings.json

-8
This file was deleted.

‎example/.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
root: true,
3-
extends: '@react-native-community',
3+
extends: '@react-native',
44
};

‎example/jest.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
preset: 'react-native',
3+
};

‎example/metro.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,7 @@ module.exports = {
4343
inlineRequires: true,
4444
},
4545
}),
46+
// This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
47+
assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
4648
},
4749
};

‎example/package.json

+17-14
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,37 @@
33
"version": "0.0.1",
44
"private": true,
55
"scripts": {
6-
"android": "react-native run-android",
7-
"ios": "react-native run-ios",
86
"start": "react-native start",
97
"test": "jest",
108
"lint": "eslint .",
119
"windows": "react-native run-windows"
1210
},
1311
"dependencies": {
1412
"react": "18.2.0",
15-
"react-native": "0.71.0",
16-
"react-native-windows": "0.71.0",
13+
"react-native": "0.72.3",
14+
"react-native-windows": "0.72.2",
1715
"react-native-xaml": "*"
1816
},
1917
"devDependencies": {
20-
"@babel/core": "^7.12.9",
21-
"@babel/runtime": "^7.12.5",
22-
"@react-native-community/eslint-config": "^3.0.0",
18+
"@babel/core": "^7.20.0",
19+
"@babel/preset-env": "^7.20.0",
20+
"@babel/runtime": "^7.20.0",
21+
"@react-native/eslint-config": "^0.72.2",
22+
"@react-native/metro-config": "^0.72.6",
23+
"@tsconfig/react-native": "^3.0.0",
24+
"@types/metro-config": "^0.76.3",
2325
"@types/react": "^18.0.24",
24-
"@types/react-native": "^0.63.46",
26+
"@types/react-test-renderer": "^18.0.0",
2527
"babel-jest": "^29.2.1",
2628
"eslint": "^8.19.0",
2729
"jest": "^29.2.1",
28-
"metro-react-native-babel-preset": "0.73.5",
29-
"react-native-codegen": "^0.0.7",
30-
"@types/react-test-renderer": "^18.0.0",
31-
"metro-config": "^0.72.3"
30+
"metro-react-native-babel-preset": "0.76.5",
31+
"prettier": "^2.4.1",
32+
"react-test-renderer": "18.2.0",
33+
"typescript": "4.8.4",
34+
"metro-config": "^0.76.5"
3235
},
33-
"jest": {
34-
"preset": "react-native"
36+
"engines": {
37+
"node": ">=16"
3538
}
3639
}

‎example/windows/ExperimentalFeatures.props

-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
See https://microsoft.github.io/react-native-windows/docs/winui3
2424
-->
2525
<UseWinUI3>false</UseWinUI3>
26-
<WinUI2xVersion>2.7.0</WinUI2xVersion>
2726

2827
<!--
2928
Changes compilation to assume use of Microsoft.ReactNative NuGet packages

‎example/windows/RuntimeComponent1/RuntimeComponent1.vcxproj

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<Project DefaultTargets="Build" ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3-
<Import Project="..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.props" Condition="Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.props')" />
3+
<Import Project="..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.props" Condition="Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.props')" />
44
<PropertyGroup Label="Globals">
55
<CppWinRTOptimized>true</CppWinRTOptimized>
66
<CppWinRTRootNamespaceAutoMerge>true</CppWinRTRootNamespaceAutoMerge>
@@ -15,7 +15,7 @@
1515
<ApplicationType>Windows Store</ApplicationType>
1616
<ApplicationTypeRevision>10.0</ApplicationTypeRevision>
1717
<WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.19041.0</WindowsTargetPlatformVersion>
18-
<WindowsTargetPlatformMinVersion>10.0.16299.0</WindowsTargetPlatformMinVersion>
18+
<WindowsTargetPlatformMinVersion>10.0.17763.0</WindowsTargetPlatformMinVersion>
1919
</PropertyGroup>
2020
<Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
2121
<ItemGroup Label="ProjectConfigurations">
@@ -162,14 +162,14 @@
162162
</ItemGroup>
163163
<Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
164164
<ImportGroup Label="ExtensionTargets">
165-
<Import Project="..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.targets" Condition="Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.targets')" />
165+
<Import Project="..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.targets" Condition="Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.targets')" />
166166
</ImportGroup>
167167
<Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
168168
<PropertyGroup>
169169
<ErrorText>This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}.</ErrorText>
170170
</PropertyGroup>
171-
<Error Condition="!Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.props'))" />
172-
<Error Condition="!Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.Windows.CppWinRT.2.0.210225.3\build\native\Microsoft.Windows.CppWinRT.targets'))" />
171+
<Error Condition="!Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.props'))" />
172+
<Error Condition="!Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.targets'))" />
173173
</Target>
174174
<Target Name="Deploy" />
175175
</Project>

‎example/windows/RuntimeComponent1/packages.config

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<packages>
3-
<package id="Microsoft.Windows.CppWinRT" version="2.0.210225.3" targetFramework="native" />
3+
<package id="Microsoft.Windows.CppWinRT" version="2.0.211028.7" targetFramework="native" />
44
</packages>

‎example/windows/example/example.vcxproj

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<!-- This project was created with react-native-windows 0.71.0 -->
2+
<!-- This project was created with react-native-windows 0.72.2 -->
33
<Project ToolsVersion="Current" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
44
<Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
55
<PropertyGroup Label="Globals">

‎examplenuget/.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
root: true,
3-
extends: '@react-native-community',
3+
extends: '@react-native',
44
};

‎examplenuget/jest.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
preset: 'react-native',
3+
};

‎examplenuget/metro.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,7 @@ module.exports = {
4343
inlineRequires: true,
4444
},
4545
}),
46+
// This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
47+
assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
4648
},
4749
};

0 commit comments

Comments
 (0)