Upgrade RNX to target RNW 0.77 (#295)

This PR bumps RNX to target RNW 0.77, with a minimum of RNW 0.72.

This PR also resolves such issues that have arisen:
* Renamed XAML's `TabIndex` property mapping from `tabIndex` (which
conflicts with upstream) to `xamlTabIndex`
* Fixed yarn workspaces
* Fixed example app metro configs so they can be run
* Updated and aligned versions of packages in yarn.lock 
* Updated workflows with latest GitHub Actions versions for common tasks
* Updated workflows to only target support RNW versions for new app
testing
* Updated workflow nuget restores to use lock files
* Updated new app testing to use the new `react-native init-windows`

Resolves #287
Resolves #288 

###### Microsoft Reviewers: [Open in
CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-xaml/pull/295)

Author: jthysell

.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);