octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity
octicon-history(16/) 13,789 Commits octicon-git-branch(16/) 188 Branches octicon-tag(16/) 953 Tags
octicon-git-commit(16/) 95daa05a49630e1b750bda5b1c206a71f258fe10 octicon-triangle-down(14/dropdown icon)
octicon-git-branch(16/) Commit Graph

3 Commits

Author SHA1 Message Date
Liam DeBeasi
5bc439961f fix(vue): tabs and parameterized routes work with latest vue (#28846) 
Issue number: resolves #28774

---------

<!-- 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. -->

There are two issues causing Ionic Vue apps to not behave as intended
with certain versions of Vue:

1. In Vue 3.3 a [breaking change
shipped](https://github.com/vuejs/core/issues/9916) that changes the
default behavior of the `watch` inside of IonRouterOutlet to be a
shallow watcher instead of a deep watcher. This caused the router outlet
to not consistent re-render. While the change was later reverted by the
Vue team, they expressed that the change [may re-land in a future minor
release](https://github.com/vuejs/core/issues/9965#issuecomment-1875067499).
As a result, we will need to account for this inside of Ionic.
2. In Vue 3.2 a [custom elements improvement
shipped](https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3238-2022-08-30)
that changed how custom elements are referred to in VNodes.

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

- The affected `watch` call now is now explicitly a deep watcher. This
change is backwards compatible as well as forward compatible with
upcoming Vue changes.
- Updated IonTabs to account for the new VNode behavior for custom
elements. Ionic still supports version of Vue that do not have this
improvement, so we need to account for both behaviors for now. I also
added a tech debt ticket to remove the old checks when we drop support
for older versions of Vue.
- Updated E2E test dependencies. During this update some of our tests
needed to be updated to account for newer versions of Vue/Vitest.
Overall I was able to simplify a lot of our tests as a result.

I plan to add renovatebot to these E2E test apps, but I will handle that
in a separate PR.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  4. Update the BREAKING.md file with the breaking change.
5. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

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

Dev build: `7.6.6-dev.11705526292.1bc0acb5`

Note: Both of the issues cause tests to fail when using the latest
dependencies in the Vue E2E test app. However, I need to use the latest
dependencies so I can demonstrate that my changes do fix the reported
issues. As a result, I have both fixes in the same PR.
 2024-01-19 21:29:56 +00:00 octicon-file-diff(16/) octicon-file-code(16/)
Liam DeBeasi
4cb32b6c6b test(vue): test app now uses vite and vitest (#26045) 2022-09-30 14:22:46 -04:00 octicon-file-diff(16/) octicon-file-code(16/)
Liam DeBeasi
65af865db7 test(vue): add multi-version testing (#25785) 2022-08-23 16:05:34 -04:00 octicon-file-diff(16/) octicon-file-code(16/)