Upgrade RNX to target RNW 0.77

.github/workflows/main.yml

@@ -27,24 +27,16 @@ jobs:
 
   call-testcli:
     name: Test CLI (VS 2022)
+    needs: setupcheck
     strategy:
       fail-fast: false
       matrix:
-        rnwVersion: [ 'v0.73-stable', 'v0.72-stable', 'v0.71-stable'] # test *all* versions that use VS 2022. aka any RNW version >= min in package.json and >= 0.71
-        useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
-        include:
-          - rnwVersion: 'v0.73-stable'
-            rnVersion: '0.73-stable'
-          - rnwVersion: 'v0.72-stable'
-            rnVersion: '0.72-stable'
-          - rnwVersion: 'v0.71-stable'
-            rnVersion: '0.71-stable'
+        rnwVersion: ['latest', 'v0.76-stable', 'v0.75-stable', 'v0.72-stable'] # test *key* versions that use VS 2022. aka any RNW version >= 0.72 used by supported partners and/or Active/Maintenance from https://microsoft.github.io/react-native-windows/support
     uses: ./.github/workflows/template-testcli.yml
     with:
       vmImage: windows-2022
       rnwVersion: ${{ matrix.rnwVersion }}
-      useRnwNuGet: ${{ matrix.useRnwNuGet }}
-      rnVersion: ${{ matrix.rnVersion }}
+      useRnwWindowsInit: ${{ matrix.rnwVersion == 'v0.72-stable' }}
 
   call-buildnpmpackage:
     name: Build NPM Package

.github/workflows/pr.yml

@@ -9,7 +9,7 @@ jobs:
     name: Setup Check
     runs-on: windows-2022
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: yarn install
       run: yarn install
@@ -42,19 +42,12 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        rnwVersion: ['v0.73-stable', 'v0.72-stable'] # 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
-        useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
-        include:
-          - rnwVersion: 'v0.73-stable'
-            rnVersion: '0.73-stable'
-          - rnwVersion: 'v0.72-stable'
-            rnVersion: '0.72-stable'
+        rnwVersion: ['latest', 'v0.76-stable', 'v0.75-stable', 'v0.72-stable'] # test *key* versions that use VS 2022. aka any RNW version >= 0.72 used by supported partners and/or Active/Maintenance from https://microsoft.github.io/react-native-windows/support
     uses: ./.github/workflows/template-testcli.yml
     with:
       vmImage: windows-2022
       rnwVersion: ${{ matrix.rnwVersion }}
-      useRnwNuGet: ${{ matrix.useRnwNuGet }}
-      rnVersion: ${{ matrix.rnVersion }}
+      useRnwWindowsInit: ${{ matrix.rnwVersion == 'v0.72-stable' }}
 
   call-buildnpmpackage:
     name: Build NPM Package
@@ -82,4 +75,4 @@ jobs:
     runs-on: ubuntu-latest
     needs: [setupcheck, call-runcodegen, call-testcli, call-buildnpmpackage, call-buildrnx]
     steps:
-     - uses: actions/checkout@v3
+     - uses: actions/checkout@v4

.github/workflows/publish.yml

@@ -17,10 +17,10 @@ jobs:
     needs: call-runcodegen
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: 18
         registry-url: https://registry.npmjs.org/
@@ -38,7 +38,7 @@ jobs:
       working-directory: package
 
     - name: upload npm logs
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: npm-logs
         path: /home/runner/.npm/_logs

.github/workflows/template-buildexample.yml

@@ -21,7 +21,7 @@ jobs:
     name: Build ${{ inputs.exampleName }}
     runs-on: ${{ inputs.vmImage }}
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: yarn install
       run: yarn install
@@ -55,7 +55,7 @@ jobs:
       working-directory: ${{ inputs.exampleName }}
 
     - name: Upload appx
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: ${{ inputs.exampleName }} appx
         path: ${{ inputs.exampleName }}\windows\AppPackages\${{ inputs.exampleName }}\${{ inputs.exampleName }}_1.0.0.0_x64_Debug_Test

.github/workflows/template-buildnpmpackage.yml

@@ -13,7 +13,7 @@ jobs:
     name: Build NPM Package
     runs-on: ${{ inputs.vmImage }}
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: yarn install
       run: yarn install 
@@ -26,7 +26,7 @@ jobs:
       working-directory: package
 
     - name: Upload npm package
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: RNX npm package
         path: package\*.tgz

.github/workflows/template-buildrnx.yml

@@ -21,10 +21,10 @@ jobs:
     name: Build RNX ${{ inputs.configuration }} ${{ inputs.platform }}
     runs-on: ${{ inputs.vmImage }}
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: setup-msbuild
-      uses: microsoft/setup-msbuild@v1
+      uses: microsoft/setup-msbuild@v2
 
     - name: yarn install
       run: yarn install 
@@ -33,21 +33,11 @@ jobs:
       run: yarn build
 
     - name: build ReactNativeXaml.sln
-      run: msbuild /restore /p:RestorePackagesConfig=true package\windows\ReactNativeXaml.sln /p:configuration=${{ inputs.configuration }} /p:platform=${{ inputs.platform }}
+      run: msbuild /restore /p:RestoreLockedMode=true /p:RestorePackagesConfig=true package\windows\ReactNativeXaml.sln /p:configuration=${{ inputs.configuration }} /p:platform=${{ inputs.platform }}
 
     - name: Upload build output
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: RNX ${{ inputs.configuration }} ${{ inputs.platform }} Build Output
         path: package\windows\${{ inputs.platform }}\${{ inputs.configuration }}\ReactNativeXaml\*.*
         if-no-files-found: error
-
-    - if: ${{ inputs.configuration == 'Release' && inputs.platform == 'x64' }}
-      name: Validate size (Release x64 only)
-      shell: powershell
-      run: |
-        $size = (gci package\windows\x64\Release\ReactNativeXaml\ReactNativeXaml.dll).Length
-        $size
-        if ($size -gt 1.5MB) {
-          throw "DLL is bigger than 1.5MB"
-        }

.github/workflows/template-runcodegen.yml

@@ -18,15 +18,15 @@ jobs:
         git config --global core.autocrlf false
         git config --global core.filemode false
 
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: yarn install
       run: yarn install
 
     - uses: nuget/setup-nuget@v1
 
     - name: NuGet restore
-      run: nuget restore package\windows\ReactNativeXaml.sln
+      run: nuget restore -LockedMode package\windows\ReactNativeXaml.sln
 
     - name: run CodeGen
       run: yarn codegen

.github/workflows/template-testcli.yml

@@ -11,21 +11,17 @@ on:
         required: false
         default: 'latest'
         type: string
-      useRnwNuGet:
+      useRnwWindowsInit:
         required: false
         default: false
         type: boolean
-      rnVersion:
-        required: false
-        default: 'latest'
-        type: string
 
 jobs:
   testcli:
-    name: New RNW@${{ inputs.rnwVersion }} App from ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }}
+    name: New RNW@${{ inputs.rnwVersion }} App
     runs-on: ${{ inputs.vmImage }}
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: yarn install
       run: yarn install
@@ -37,24 +33,47 @@ jobs:
       run: yarn link
       working-directory: package
 
-    - name: create react-native@${{ inputs.rnVersion }} app
-      run: npx @react-native-community/cli init testrnx --version ${{ inputs.rnVersion }} --skip-install --install-pods false --verbose --skip-git-init true
+    - name: determine RN versions
+      run: |
+        $rnwVersion = & npm show react-native-windows@${{ inputs.rnwVersion }} version
+        echo "RNW_VERSION=$rnwVersion" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf8 -Append
+        $rnVersion = & npm show react-native-windows@$rnwVersion peerDependencies.react-native
+        echo "RN_VERSION=$rnVersion" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf8 -Append
+        Write-Host "Using react-native-windows@$rnwVersion with react-native@$rnVersion"
+
+    - name: create react-native app
+      run: |
+        Write-Host "Using react-native@$Env:RN_VERSION"
+        npx @react-native-community/cli init testrnx --version $Env:RN_VERSION --skip-install --install-pods false --verbose --skip-git-init true
       working-directory: ../
 
     - name: yarn install
       run: yarn install
       working-directory: ../testrnx
 
-    - name: add Windows (RNW via ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }})
-      run: npx react-native-windows-init --overwrite ${{ inputs.useRnwNuGet && '--experimentalNuGetDependency true' || '' }}
+    - name: react-native-windows-init
+      if: ${{ inputs.useRnwWindowsInit }}
+      run: |
+        Write-Host "Using react-native-windows@$Env:RNW_VERSION"
+        npx --yes react-native-windows-init --overwrite --verbose --version $Env:RNW_VERSION
+        yarn install
       working-directory: ../testrnx
 
-    - name: link react-native-xaml
-      run: yarn link react-native-xaml
+    - name: react-native init-windows
+      if: ${{ !inputs.useRnwWindowsInit }}
+      run: |
+        Write-Host "Using react-native-windows@$Env:RNW_VERSION"
+        yarn add react-native-windows@$Env:RNW_VERSION
+        yarn install
+        npx @react-native-community/cli@latest init-windows --overwrite --logging
+        yarn install
       working-directory: ../testrnx
 
     - name: add react-native-xaml
-      run: yarn add react-native-xaml
+      run: |
+        yarn add react-native-xaml
+        yarn link react-native-xaml
+        yarn install
       working-directory: ../testrnx
 
     - name: autolink
@@ -64,7 +83,3 @@ jobs:
     - name: build app
       run: npx @react-native-community/cli run-windows --no-launch --no-deploy --no-packager --logging
       working-directory: ../testrnx
-
-    - name: test app
-      run: yarn test
-      working-directory: ../testrnx

change/react-native-xaml-ae47b51e-39d3-4b8b-8816-3a2b003ce391.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade RNX to target RNW 0.77",
+  "packageName": "react-native-xaml",
+  "email": "jthysell@microsoft.com",
+  "dependentChangeType": "patch"
+}

example/metro.config.js

@@ -1,13 +1,14 @@
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const MetroConfig = require('@rnx-kit/metro-config');
 
 const fs = require('fs');
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
 
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
 
+//
+
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
@@ -16,22 +17,19 @@ const rnwPath = fs.realpathSync(
  */
 
 const config = {
+  //
   resolver: {
-    blockList: exclusionList([
-      // This stops "react-native run-windows" from causing the metro server to crash if its already running
+    blockList: MetroConfig.exclusionList([
+      // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
       ),
-      // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+      // This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,
     ]),
-    extraNodeModules: {
-      'react-native-xaml': fs.realpathSync(
-        path.dirname(require.resolve('react-native-xaml/package.json')),
-      ),
-    },
+    //
   },
   transformer: {
     getTransformOptions: async () => ({
@@ -40,9 +38,8 @@ const config = {
         inlineRequires: true,
       },
     }),
-    // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
   },
+  projectRoot: __dirname,
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = MetroConfig.makeMetroConfig(config);

example/package.json

@@ -6,31 +6,35 @@
     "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
-    "windows": "react-native run-windows"
+    "windows": "npx @react-native-community/cli run-windows"
   },
   "dependencies": {
-    "react": "18.2.0",
-    "react-native": "0.73.11",
-    "react-native-windows": "0.73.21",
+    "react": "18.3.1",
+    "react-native": "0.77.0",
+    "react-native-windows": "0.77.2",
     "react-native-xaml": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "^0.73.21",
-    "@react-native/eslint-config": "^0.73.2",
-    "@react-native/metro-config": "^0.73.5",
-    "@react-native/typescript-config": "^0.73.1",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native/babel-preset": "0.77.0",
+    "@react-native/eslint-config": "0.77.0",
+    "@react-native/metro-config": "0.77.0",
+    "@react-native/typescript-config": "0.77.0",
+    "@rnx-kit/metro-config": "^1.3.5",
+    "@types/jest": "^29.5.13",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "typescript": "5.0.4",
-    "metro-config": "^0.80.2"
+    "metro-config": "^0.81.1"
   },
   "engines": {
     "node": ">=18"

example/windows/ExperimentalFeatures.props

@@ -33,9 +33,6 @@
     -->
     <UseExperimentalNuget>false</UseExperimentalNuget>
 
-    <!-- Necessary as sometimes RNW 0.73 doesn't run with the old `npx react-natve codegen-windows` -->
-    <CodegenCommand>npx @react-native-community/cli codegen-windows</CodegenCommand>
-
     <ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
 
   </PropertyGroup>