chore(ci): add stencil v4-next workflow (#27598)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

we have no way to test stencil v4 as a part of the nightly build

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

this commit adds a new ci cron job, 'stencil v4 build'. the purpose of
this job is to run the ionic framework ci suite on an nightly basis,
similar to the stencil nightly build.

a separate workflow has been created, as opposed to adding a `matrix` to
the pre-existing workflow, as doing so would require a great deal of
refactoring to the existing workflow. instead, a separate workflow
allows us to simply delete the this workflow once stencil v4 is
released.

as a part of this commit, we add a new input to the
'build-core-stencil-prerelease' action, allowing users of the action to
input the npm tag of `@stencil/core` to install

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

I tested the Stencil nightly job manually -
https://github.com/ionic-team/ionic-framework/actions/runs/5180201562

I was unable to run the v4 job, as it's not in `main` (yet 😉 ). But, I
can diff it against the known-to-be-good nightly workflow. The following
shows only the name of the job & npm tag are different:
```diff
 diff stencil-v4.yml stencil-nightly.yml
3c3
< name: 'Stencil v4 Build'
---
> name: 'Stencil Nightly Build'
21c21
<   build-core-with-stencil-v4:
---
>   build-core-with-stencil-nightly:
27c27
<           stencil-version: v4-next
---
>           stencil-version: nightly
30c30
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
37c37
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
44c44
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
65c65
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
93c93
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
129c129
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
165c165
<     needs: [build-core-with-stencil-v4]
---
>     needs: [build-core-with-stencil-nightly]
```

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -1,5 +1,10 @@
-name: 'Build Ionic Core with Stencil Nightly'
-description: 'Build Ionic Core with a Nightly Build of Stencil'
+name: 'Build Ionic Core with Stencil Prerelease'
+description: 'Build Ionic Core with a Prerelease Build of Stencil'
+inputs:
+  stencil-version:
+    description: 'The NPM tag of @stencil/core to install.'
+    type: string
+    required: true
 runs:
   using: 'composite'
   steps:
@@ -12,9 +17,9 @@ runs:
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Install Stencil Nightly
+    - name: Install Stencil ${{ inputs.stencil-version }}
       working-directory: ./core
-      run: npm i @stencil/core@nightly
+      run: npm i @stencil/core@${{ inputs.stencil-version }}
       shell: bash
     - name: Build Core
       run: npm run build -- --ci

.github/workflows/stencil-nightly.yml

@@ -22,7 +22,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/build-core-stencil-nightly
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: nightly
 
   test-core-clean-build:
     needs: [build-core-with-stencil-nightly]

.github/workflows/stencil-v4.yml

@@ -0,0 +1,220 @@
+# This workflow is intended to run against the `HEAD` of Stencil's primary branch.
+# See https://github.com/ionic-team/stencil for contents of the repository
+name: 'Stencil v4 Build'
+
+on:
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
+  workflow_dispatch:
+    # allows for manual invocations in the GitHub UI
+
+# When pushing a new commit we should
+# cancel the previous test run to not
+# consume more runners than we need to.
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build-core-with-stencil-v4:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: nightly
+
+  test-core-clean-build:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-clean-build
+
+  test-core-lint:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-lint
+
+  test-core-spec:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-spec
+
+  test-core-screenshot:
+    strategy:
+      # This ensures that all screenshot shard
+      # failures are reported so the dev can
+      # review everything at once.
+      fail-fast: false
+      matrix:
+        # Divide the tests into n buckets
+        # and run those buckets in parallel.
+        # To increase the number of shards,
+        # add new items to the shard array
+        # and change the value of totalShards
+        # to be the length of the shard array.
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+        totalShards: [20]
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-screenshot
+        with:
+          shard: ${{ matrix.shard }}
+          totalShards: ${{ matrix.totalShards }}
+
+  # Screenshots are required to pass
+  # in order for the branch to be merge
+  # eligible. However, the screenshot tests
+  # are run on n runners where n can change
+  # over time. The verify-screenshots step allows
+  # us to have a required status check for screenshot
+  # results without having to manually add each
+  # matrix run in the branch protection rules
+  # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
+  verify-screenshots:
+    if: ${{ always() }}
+    needs: test-core-screenshot
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-core-screenshot.result != 'success' }}
+        run: exit 1
+
+  build-vue:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-vue
+
+  build-vue-router:
+    needs: [build-vue]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-vue-router
+
+  test-vue-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [vue3]
+    needs: [build-vue, build-vue-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-vue-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-vue-e2e:
+    if: ${{ always() }}
+    needs: test-vue-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-vue-e2e.result != 'success' }}
+        run: exit 1
+
+  build-angular:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-angular
+
+  build-angular-server:
+    needs: [build-angular]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-angular-server
+
+  test-angular-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [ng12, ng13, ng14, ng15]
+    needs: [build-angular, build-angular-server]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-angular-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-angular-e2e:
+    if: ${{ always() }}
+    needs: test-angular-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-angular-e2e.result != 'success' }}
+        run: exit 1
+
+  build-react:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-react
+
+  build-react-router:
+    needs: [build-react]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-react-router
+
+  test-react-router-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [reactrouter5]
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-react-router-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-router-e2e:
+    if: ${{ always() }}
+    needs: test-react-router-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-router-e2e.result != 'success' }}
+        run: exit 1
+
+  test-react-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [react17, react18]
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-react-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-e2e:
+    if: ${{ always() }}
+    needs: test-react-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-e2e.result != 'success' }}
+        run: exit 1