Refactor workflows into reusable templates (#244)

This PR is to refactor our CI/PR and publish pipelines to:

* Separate our CI and PR pipelines. That way failing PR results don't
set our CI as failed
* Build reusable, parameterized template pipelines to avoid all the
copy/paste
* Add a "Setup Check" to PR where it checks for change files so we can
start using beachball properly
* Set CI to run a larger matrix than PR and on a regular schedule

This PR also fixes `example`, which wasn't being build in the pipelines
before and was actually broken during the upgrade to 0.71.

###### Microsoft Reviewers: [Open in
CodeFlow](https://portal.fabricbot.ms/api/codeflow?pullrequest=https://github.com/microsoft/react-native-xaml/pull/244)

.github/workflows/main.yml

@@ -1,200 +1,71 @@
-# This is a basic workflow to help you get started with Actions
-
 name: CI
 
-# Controls when the action will run. Triggers the workflow on push or pull request
-# events but only for the master branch
 on:
+  schedule:
+    - cron: '0 15 * * 2' # Tuesday 3PM UTC (8AM PST)
   push:
     branches: [ main ]
-  pull_request:
-    branches: [ main ]
+  workflow_dispatch:
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  codegen:
-    runs-on: windows-2022
-    steps:
-    - name: setup git
-      run: |
-        git config --global core.autocrlf false
-        git config --global core.filemode false
-
-    - uses: actions/checkout@v2
-
-    - name: yarn install
-      run: yarn install
-
-    - uses: nuget/setup-nuget@v1
-
-    - name: NuGet restore
-      run: nuget restore example\windows\example.sln
-
-    - name: run CodeGen
-      run: dotnet run -verbose -winmd $env:USERPROFILE\.nuget\packages\microsoft.ui.xaml\2.7.0\lib\uap10.0\Microsoft.UI.Xaml.winmd
-      working-directory: package\Codegen
-
-    - name: build TS
-      run: yarn build
-
-    - name: verify no changes from CodeGen
-      shell: powershell
-      run: |
-        $changed = git status --porcelain=v1
-        $changed
-        if ($changed -ne $null) { throw "CodeGen detected changes" }
-
-  examplenuget:
-    runs-on: windows-2022
-    steps:
-    - uses: actions/checkout@v2
-
-    - name: yarn install
-      run: yarn install
-
-    - name: build TS
-      run: yarn build
-
-    - name: build ExampleNuget
-      run: yarn windows --no-launch --no-deploy --no-packager --logging
-      working-directory: examplenuget
-
-    - name: Upload appx
-      uses: actions/upload-artifact@v2
-      with:
-        name: ExampleNuget appx
-        path: examplenuget\windows\AppPackages\examplenuget\examplenuget_1.0.0.0_x64_Debug_Test
-        if-no-files-found: error
-
-
-  testcli-old:
-    runs-on: windows-2019
+  call-runcodegen:
+    name: Run CodeGen
+    uses: ./.github/workflows/template-runcodegen.yml
+    with:
+      vmImage: windows-2022
+  
+  call-buildexample:
+    name: Build Example
     strategy:
       fail-fast: false
       matrix:
-        rnwSource: ['Source', 'NuGet'] # test building with both RNW source and RNW NuGet
-        rnwVersion: ['^0.67', '^0.69'] # test key versions (min, partners)
-    steps:
-    - uses: actions/checkout@v2
+        exampleName: ['example', 'examplenuget'] # build both examples
+    uses: ./.github/workflows/template-buildexample.yml
+    with:
+      vmImage: windows-2022
+      exampleName: ${{ matrix.exampleName }}
 
-    - name: yarn install
-      run: yarn install
-
-    - name: build TS
-      run: yarn build
-
-    - name: yarn link
-      run: yarn link
-      working-directory: package
-
-    - name: create ${{ matrix.rnwVersion }} app
-      run: npx react-native init testrnx --template react-native@${{ matrix.rnwVersion }}
-
-    - name: add Windows (RNW via ${{ matrix.rnwSource }})
-      run: npx react-native-windows-init --overwrite ${{ matrix.rnwSource == 'NuGet' && '--experimentalNuGetDependency true' || '' }}
-      working-directory: testrnx
-
-    - name: link react-native-xaml
-      run: yarn link react-native-xaml
-      working-directory: testrnx
-
-    - name: add react-native-xaml
-      run: yarn add react-native-xaml
-      working-directory: testrnx
-
-    - name: autolink
-      run: npx react-native autolink-windows --logging
-      working-directory: testrnx
-
-    - name: update WinUI package version
-      run: ..\.github\workflows\SetUpAppForNuget.ps1 ${{ matrix.rnwSource == 'NuGet' && '-UseNuGet' || '' }}
-      working-directory: testrnx
-
-    - name: build app
-      run: npx react-native run-windows --no-launch --no-deploy --no-packager --logging
-      working-directory: testrnx
-
-  testcli:
-    runs-on: windows-2022
+  call-testcli:
+    name: Test CLI
     strategy:
       fail-fast: false
       matrix:
-        rnwSource: ['Source', 'NuGet'] # test building with both RNW source and RNW NuGet
-        rnwVersion: ['^0.71'] # test key versions (latest)
-    steps:
-    - uses: actions/checkout@v2
+        rnwVersion: ['^0.71'] # test supported versions
+        useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
+    uses: ./.github/workflows/template-testcli.yml
+    with:
+      vmImage: windows-2022
+      rnwVersion: ${{ matrix.rnwVersion }}
+      useRnwNuGet: ${{ matrix.useRnwNuGet }}
+    
+  call-testcli-old:
+    name: Test CLI (Old)
+    strategy:
+      fail-fast: false
+      matrix:
+        rnwVersion: ['^0.67', '^0.68', '^0.69', '^0.70'] # test supported versions
+        useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
+    uses: ./.github/workflows/template-testcli.yml
+    with:
+      vmImage: windows-2019
+      rnwVersion: ${{ matrix.rnwVersion }}
+      useRnwNuGet: ${{ matrix.useRnwNuGet }}
 
-    - name: yarn install
-      run: yarn install
-
-    - name: build TS
-      run: yarn build
-
-    - name: yarn link
-      run: yarn link
-      working-directory: package
-
-    - name: create ${{ matrix.rnwVersion }} app
-      run: npx react-native init testrnx --template react-native@${{ matrix.rnwVersion }}
-
-    - name: add Windows (RNW via ${{ matrix.rnwSource }})
-      run: npx react-native-windows-init --overwrite ${{ matrix.rnwSource == 'NuGet' && '--experimentalNuGetDependency true' || '' }}
-      working-directory: testrnx
-
-    - name: link react-native-xaml
-      run: yarn link react-native-xaml
-      working-directory: testrnx
-
-    - name: add react-native-xaml
-      run: yarn add react-native-xaml
-      working-directory: testrnx
-
-    - name: autolink
-      run: npx react-native autolink-windows --logging
-      working-directory: testrnx
-
-    - name: update WinUI package version
-      run: ..\.github\workflows\SetUpAppForNuget.ps1 ${{ matrix.rnwSource == 'NuGet' && '-UseNuGet' || '' }}
-      working-directory: testrnx
-
-    - name: build app
-      run: npx react-native run-windows --no-launch --no-deploy --no-packager --logging
-      working-directory: testrnx
-
-  package:
-    runs-on: windows-2022
-    steps:
-    - uses: actions/checkout@v2
-
-    - name: setup-msbuild
-      uses: microsoft/setup-msbuild@v1
-
-    - name: yarn install
-      run: yarn install 
-
-    - name: build TS
-      run: yarn build
-
-    - name: npm pack
-      run: npm pack
-      working-directory: package
-
-    - name: Upload npm package
-      uses: actions/upload-artifact@v2
-      with:
-        name: npm package
-        path: package\*.tgz
-        if-no-files-found: error
-
-    - name: build Release x64
-      run: msbuild /restore /p:RestorePackagesConfig=true package\windows\ReactNativeXaml.sln /p:configuration=Release /p:platform=x64
-
-    - name: Validate size
-      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"
-        }
+  call-buildnpmpackage:
+    name: Build NPM Package
+    uses: ./.github/workflows/template-buildnpmpackage.yml
+    with:
+      vmImage: windows-2022
 
+  call-buildrnx:
+    name: Build RNX
+    strategy:
+      fail-fast: false
+      matrix:
+        configuration: ['Debug', 'Release']
+        platform: ['x64']
+    uses: ./.github/workflows/template-buildrnx.yml
+    with:
+      vmImage: windows-2022
+      configuration: ${{ matrix.configuration }}
+      platform: ${{ matrix.platform }}

.github/workflows/pr.yml

@@ -0,0 +1,86 @@
+name: PR
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  setupcheck:
+    name: Setup Check
+    runs-on: windows-2022
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: yarn install
+      run: yarn install
+
+    - name: beachball check
+      run: npx beachball check --verbose --changehint "::error::Run `yarn change` from root of repo to generate a change file."
+
+  call-runcodegen:
+    name: Run CodeGen
+    needs: setupcheck
+    uses: ./.github/workflows/template-runcodegen.yml
+    with:
+      vmImage: windows-2022
+  
+  call-buildexample:
+    name: Build Example
+    needs: setupcheck
+    strategy:
+      fail-fast: true
+      matrix:
+        exampleName: ['example', 'examplenuget'] # build both examples
+    uses: ./.github/workflows/template-buildexample.yml
+    with:
+      vmImage: windows-2022
+      exampleName: ${{ matrix.exampleName }}
+
+  call-testcli:
+    name: Test CLI
+    needs: setupcheck
+    strategy:
+      fail-fast: true
+      matrix:
+        rnwVersion: ['^0.71'] # test key versions
+        useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
+    uses: ./.github/workflows/template-testcli.yml
+    with:
+      vmImage: windows-2022
+      rnwVersion: ${{ matrix.rnwVersion }}
+      useRnwNuGet: ${{ matrix.useRnwNuGet }}
+    
+  call-testcli-old:
+    name: Test CLI (Old)
+    needs: setupcheck
+    strategy:
+      fail-fast: true
+      matrix:
+        rnwVersion: ['^0.67', '^0.69'] # test key versions (min, partners)
+        useRnwNuGet: [false, true] # test building with both RNW source and RNW NuGet
+    uses: ./.github/workflows/template-testcli.yml
+    with:
+      vmImage: windows-2019
+      rnwVersion: ${{ matrix.rnwVersion }}
+      useRnwNuGet: ${{ matrix.useRnwNuGet }}
+
+  call-buildnpmpackage:
+    name: Build NPM Package
+    needs: setupcheck
+    uses: ./.github/workflows/template-buildnpmpackage.yml
+    with:
+      vmImage: windows-2022
+
+  call-buildrnx:
+    name: Build RNX
+    needs: setupcheck
+    strategy:
+      fail-fast: true
+      matrix:
+        configuration: ['Release']
+        platform: ['x64']
+    uses: ./.github/workflows/template-buildrnx.yml
+    with:
+      vmImage: windows-2022
+      configuration: ${{ matrix.configuration }}
+      platform: ${{ matrix.platform }}

.github/workflows/publish.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Publish
 
 on:
@@ -9,42 +6,18 @@ on:
   workflow_dispatch:
 
 jobs:
-  run-codegen:
-    runs-on: windows-latest
-
-    steps:
-    - uses: actions/checkout@v2
-
-    - uses: nuget/setup-nuget@v1
-
-    - name: setup-msbuild
-      uses: microsoft/setup-msbuild@v1
-
-    - name: yarn install
-      run: yarn install
-
-    - name: NuGet restore
-      run: nuget restore example\windows\example.sln
-
-    - name: run CodeGen
-      run: dotnet run -verbose -winmd $env:USERPROFILE\.nuget\packages\microsoft.ui.xaml\2.7.0\lib\uap10.0\Microsoft.UI.Xaml.winmd
-      working-directory: package\Codegen
-
-    - name: build TS
-      run: yarn build
-
-    - name: verify no changes from CodeGen
-      shell: powershell
-      run: |
-        $changed = git status --porcelain=v1
-        if ($changed -ne $null) { throw "CodeGen detected changes" }
+  call-runcodegen:
+    name: Run CodeGen
+    uses: ./.github/workflows/template-runcodegen.yml
+    with:
+      vmImage: windows-2022
 
   publish-npm:
     runs-on: ubuntu-latest
     needs: run-codegen
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
 
     - name: Use Node.js
       uses: actions/setup-node@v1
@@ -65,7 +38,7 @@ jobs:
       working-directory: package
         
     - name: upload npm logs
-      uses: actions/upload-artifact@v2.3.1
+      uses: actions/upload-artifact@v3
       with:
         name: npm-logs
         path: /home/runner/.npm/_logs

.github/workflows/template-buildexample.yml

@@ -0,0 +1,37 @@
+name: Build Example
+
+on:
+  workflow_call:
+    inputs:
+      vmImage:
+        required: false
+        default: 'windows-latest'
+        type: string
+      exampleName:
+        required: false
+        default: 'example'
+        type: string
+
+jobs:
+  build-example:
+    name: Build ${{ inputs.exampleName }}
+    runs-on: ${{ inputs.vmImage }}
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: yarn install
+      run: yarn install
+
+    - name: build TS
+      run: yarn build
+
+    - name: yarn windows
+      run: yarn windows --no-launch --no-deploy --no-packager --logging
+      working-directory: ${{ inputs.exampleName }}
+
+    - name: Upload appx
+      uses: actions/upload-artifact@v3
+      with:
+        name: ${{ inputs.exampleName }} appx
+        path: ${{ inputs.exampleName }}\windows\AppPackages\${{ inputs.exampleName }}\${{ inputs.exampleName }}_1.0.0.0_x64_Debug_Test
+        if-no-files-found: error

.github/workflows/template-buildnpmpackage.yml

@@ -0,0 +1,33 @@
+name: Build NPM Package
+
+on:
+  workflow_call:
+    inputs:
+      vmImage:
+        required: false
+        default: 'windows-latest'
+        type: string
+
+jobs:
+  package:
+    name: Build NPM Package
+    runs-on: ${{ inputs.vmImage }}
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: yarn install
+      run: yarn install 
+
+    - name: build TS
+      run: yarn build
+
+    - name: npm pack
+      run: npm pack
+      working-directory: package
+
+    - name: Upload npm package
+      uses: actions/upload-artifact@v3
+      with:
+        name: RNX npm package
+        path: package\*.tgz
+        if-no-files-found: error

.github/workflows/template-buildrnx.yml

@@ -0,0 +1,53 @@
+name: Build RNX
+
+on:
+  workflow_call:
+    inputs:
+      vmImage:
+        required: false
+        default: 'windows-latest'
+        type: string
+      configuration:
+        required: false
+        default: 'Debug'
+        type: string
+      platform:
+        required: false
+        default: 'x64'
+        type: string
+
+jobs:
+  package:
+    name: Build RNX ${{ inputs.configuration }} ${{ inputs.platform }}
+    runs-on: ${{ inputs.vmImage }}
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: setup-msbuild
+      uses: microsoft/setup-msbuild@v1
+
+    - name: yarn install
+      run: yarn install 
+
+    - name: build TS
+      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 }}
+
+    - name: Upload build output
+      uses: actions/upload-artifact@v3
+      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

@@ -0,0 +1,43 @@
+name: Run CodeGen
+
+on:
+  workflow_call:
+    inputs:
+      vmImage:
+        required: false
+        default: 'windows-latest'
+        type: string
+
+jobs:
+  codegen:
+    name: Run CodeGen
+    runs-on: ${{ inputs.vmImage }}
+    steps:
+    - name: setup git
+      run: |
+        git config --global core.autocrlf false
+        git config --global core.filemode false
+
+    - uses: actions/checkout@v3
+
+    - name: yarn install
+      run: yarn install
+
+    - uses: nuget/setup-nuget@v1
+
+    - name: NuGet restore
+      run: nuget restore example\windows\example.sln
+
+    - name: run CodeGen
+      run: dotnet run -verbose -winmd $env:USERPROFILE\.nuget\packages\microsoft.ui.xaml\2.7.0\lib\uap10.0\Microsoft.UI.Xaml.winmd
+      working-directory: package\Codegen
+
+    - name: build TS
+      run: yarn build
+
+    - name: verify no changes from CodeGen
+      shell: powershell
+      run: |
+        $changed = git status --porcelain=v1
+        $changed
+        if ($changed -ne $null) { throw "CodeGen detected changes" }

.github/workflows/template-testcli.yml

@@ -4,30 +4,24 @@ on:
   workflow_call:
     inputs:
       vmImage:
-        required: true
-        default: windows-2022
-        type: choice
-        options:
-          - windows-2022
-          - windows-2019
-      rnwSource:
-        required: true
-        default: Source
-        type: choice
-        options:
-          - Source
-          - NuGet
-      rnwVersion:
-        required: true
-        default: '^0.71'
+        required: false
+        default: 'windows-latest'
         type: string
+      rnwVersion:
+        required: false
+        default: 'latest'
+        type: string
+      useRnwNuGet:
+        required: false
+        default: false
+        type: boolean
 
 jobs:
   testcli:
-    name: New ${{ inputs.rnwVersion }} RNW App from ${{ inputs.rnwSource }}
+    name: New RNW@${{ inputs.rnwVersion }} App from ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }}
     runs-on: ${{ inputs.vmImage }}
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
 
     - name: yarn install
       run: yarn install
@@ -39,11 +33,11 @@ jobs:
       run: yarn link
       working-directory: package
 
-    - name: create ${{ inputs.rnwVersion }} app
+    - name: create react-native@${{ inputs.rnwVersion }} app
       run: npx react-native init testrnx --template react-native@${{ inputs.rnwVersion }}
 
-    - name: add Windows (RNW via ${{ inputs.rnwSource }})
-      run: npx react-native-windows-init --overwrite ${{ inputs.rnwSource == 'NuGet' && '--experimentalNuGetDependency true' || '' }}
+    - name: add Windows (RNW via ${{ inputs.useRnwNuGet && 'NuGet' || 'Source' }})
+      run: npx react-native-windows-init --overwrite ${{ inputs.useRnwNuGet && '--experimentalNuGetDependency true' || '' }}
       working-directory: testrnx
 
     - name: link react-native-xaml
@@ -59,7 +53,7 @@ jobs:
       working-directory: testrnx
 
     - name: update WinUI package version
-      run: ..\.github\workflows\SetUpAppForNuget.ps1 ${{ inputs.rnwSource == 'NuGet' && '-UseNuGet' || '' }}
+      run: ..\.github\workflows\SetUpAppForNuget.ps1 ${{ inputs.useRnwNuGet && '-UseNuGet' || '' }}
       working-directory: testrnx
 
     - name: build app

change/react-native-xaml-cc0ad71f-d0b2-4847-980b-dd788be15635.json

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

example/windows/RuntimeComponent1/RuntimeComponent1.vcxproj

@@ -14,8 +14,8 @@
     <AppContainerApplication>true</AppContainerApplication>
     <ApplicationType>Windows Store</ApplicationType>
     <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
-    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.18362.0</WindowsTargetPlatformVersion>
-    <WindowsTargetPlatformMinVersion>10.0.17134.0</WindowsTargetPlatformMinVersion>
+    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.19041.0</WindowsTargetPlatformVersion>
+    <WindowsTargetPlatformMinVersion>10.0.16299.0</WindowsTargetPlatformMinVersion>
   </PropertyGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <ItemGroup Label="ProjectConfigurations">

package/README.md

@@ -4,6 +4,8 @@
 
 `$ npm install react-native-xaml --save`
 
+Ensure you're using React Native Windows >= 0.67.11.
+
 Ensure your app is using WinUI 2.6+. For details about customizing WinUI versions in your React Native for Windows app, see [Customizing SDK versions](https://microsoft.github.io/react-native-windows/docs/customizing-sdk-versions).
 
 ### Mostly automatic installation