Merge remote-tracking branch 'origin/main' into sync-67-23

.github/workflows/pre-release.yml

@@ -1,48 +0,0 @@
-name: 'Ionic Pre-Release'
-
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        required: true
-        type: choice
-        description: Which version should be published?
-        options:
-          - prepatch
-          - preminor
-          - premajor
-      prefix:
-        required: true
-        type: choice
-        description: What kind of pre-release is this?
-        default: beta
-        options:
-          - alpha
-          - beta
-          - rc
-
-jobs:
-  build-ionic:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - name: Configure Identity
-        run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-        shell: bash
-      - name: Install Dependencies
-        run: npm ci --no-package-lock && lerna bootstrap --ignore-scripts -- --legacy-peer-deps
-        shell: bash
-      - name: Prepare NPM Token
-        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
-        shell: bash
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Release
-        run: |
-          HUSKY_SKIP_HOOKS=1 lerna publish $(echo "${{ github.event.inputs.version }}") --no-verify-access --yes --force-publish='*' --dist-tag next --no-git-tag-version --no-push --skip-npm --preid $(echo "${{ github.events.inputs.prefix }}")
-        shell: bash

.github/workflows/release-ionic.yml

@@ -1,212 +0,0 @@
-name: 'Release Ionic'
-
-on:
-  workflow_call:
-    inputs:
-      version:
-        description: 'The type of version to release.'
-        type: string
-        required: true
-      tag:
-        description: 'The tag to publish to NPM.'
-        type: string
-        required: true
-    secrets:
-      NPM_TOKEN:
-        required: true
-
-jobs:
-  release-core:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/core'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'core'
-        token: ${{ secrets.NPM_TOKEN }}
-    - name: Cache Built @ionic/core
-      uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-core
-        output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
-    - name: Cache Built @ionic/docs
-      uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-docs
-        output: docs/DocsBuild.zip
-        paths: docs/core.json docs/core.d.ts
-
-  release-docs:
-    needs: [release-core]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/docs built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-docs
-        path: ./docs
-        filename: DocsBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/docs'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'docs'
-        token: ${{ secrets.NPM_TOKEN }}
-
-  release-angular:
-    needs: [release-core]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/core built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/angular'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'angular'
-        folder: './dist'
-        token: ${{ secrets.NPM_TOKEN }}
-    - name: Cache Built @ionic/angular
-      uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-angular
-        output: ./angular/AngularBuild.zip
-        paths: ./angular/dist
-
-  release-react:
-    needs: [release-core]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/core built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/react'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'packages/react'
-        token: ${{ secrets.NPM_TOKEN }}
-    - name: Cache Built @ionic/react
-      uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-react
-        output: packages/react/ReactBuild.zip
-        paths: packages/react/dist packages/react/css
-
-  release-vue:
-    needs: [release-core]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/core built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/vue'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'packages/vue'
-        token: ${{ secrets.NPM_TOKEN }}
-    - name: Cache Built @ionic/vue
-      uses: ./.github/workflows/actions/upload-archive
-      with:
-        name: ionic-vue
-        output: packages/vue/VueBuild.zip
-        paths: packages/vue/dist packages/vue/css
-
-  release-angular-server:
-    needs: [release-angular]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/core built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - name: Restore @ionic/angular built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-angular
-        path: ./angular
-        filename: AngularBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/angular-server'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'packages/angular-server'
-        folder: './dist'
-        token: ${{ secrets.NPM_TOKEN }}
-
-  release-react-router:
-    needs: [release-react]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/core built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - name: Restore @ionic/react built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-react
-        path: ./packages/react
-        filename: ReactBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/react-router'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'packages/react-router'
-        token: ${{ secrets.NPM_TOKEN }}
-
-  release-vue-router:
-    needs: [release-vue]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Restore @ionic/core built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - name: Restore @ionic/vue built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-vue
-        path: ./packages/vue
-        filename: VueBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
-      with:
-        scope: '@ionic/vue-router'
-        tag: ${{ inputs.tag }}
-        version: ${{ inputs.version }}
-        working-directory: 'packages/vue-router'
-        token: ${{ secrets.NPM_TOKEN }}

angular/test/README.md

@@ -2,6 +2,18 @@
 
 Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
 
+## Syncing Local Changes
+
+The Angular test app supports syncing your locally built changes for validation.
+
+1. Build the `core` and `packages/angular` projects using `npm run build`.
+2. [Build the Angular test app](#test-app-build-structure).
+3. Navigate to the built test app.
+4. Install dependencies using `npm install`.
+5. Sync your local changes using `npm run sync`.
+
+From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).
+
 ## Application Cache
 
 Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the `.angular` cache is disabled by default in the test app projects.

core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts

@@ -19,6 +19,7 @@ test.describe('ripple-effect: basic', () => {
   test.describe('ripple effect with nested ion-button', () => {
     test('should add .ion-activated when the block is pressed', async ({ page }) => {
       await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
+      await isIdleCallbackComplete(page);
 
       const el = page.locator('#ripple-with-button');
 
@@ -45,6 +46,7 @@ test.describe('ripple-effect: basic', () => {
 
 const verifyRippleEffect = async (page: E2EPage, selector: string) => {
   await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
+  await isIdleCallbackComplete(page);
 
   const el = page.locator(selector);
 
@@ -61,3 +63,24 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => {
 
   await expect(el).toHaveClass(/ion-activated/);
 };
+
+/**
+ * This function is used to wait for the idle callback to be called.
+ * It mirrors the custom implementation in app.tsx for either
+ * using requestIdleCallback on supported browsers or a setTimeout
+ * of 32ms (~2 frames) on unsupported browsers (Safari).
+ */
+const isIdleCallbackComplete = async (page: E2EPage) => {
+  await page.waitForFunction(
+    () => {
+      return new Promise((resolve) => {
+        if ('requestIdleCallback' in window) {
+          window.requestIdleCallback(resolve);
+        } else {
+          setTimeout(resolve, 32);
+        }
+      });
+    },
+    { timeout: 5000 }
+  );
+};

packages/vue/test/README.md

@@ -2,6 +2,18 @@
 
 Ionic Framework supports multiple versions of Vue. As a result, we need to verify that Ionic works correctly with each of these Vue versions.
 
+## Syncing Local Changes
+
+The Vue test app supports syncing your locally built changes for validation.
+
+1. Build the `core`, `packages/vue`, and `packages/vue-router` projects using `npm run build`.
+2. [Build the Vue test app](#test-app-build-structure).
+3. Navigate to the built test app.
+4. Install dependencies using `npm install`.
+5. Sync your local changes using `npm run sync`.
+
+From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build.
+
 ## Test App Build Structure
 
 Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
@@ -40,4 +52,4 @@ As we add support for new versions of Vue, we will also need to update this dire
 3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc).
 4. Copy the changed files to a new directory in `apps`.
 5. Add a new entry to the matrix for `test-core-vue` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
-6. Commit these changes and push.
+6. Commit these changes and push.