Skip to content

fix(vue): tabs and parameterized routes work with latest vue - #28846

Merged
liamdebeasi merged 11 commits into
mainfrom
FW-5898
Jan 19, 2024
Merged

fix(vue): tabs and parameterized routes work with latest vue#28846
liamdebeasi merged 11 commits into
mainfrom
FW-5898

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Jan 17, 2024

Copy link
Copy Markdown
Contributor

Issue number: resolves #28774


What is the current behavior?

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 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. As a result, we will need to account for this inside of Ionic.
  2. In Vue 3.2 a custom elements improvement shipped that changed how custom elements are referred to in VNodes.

What is the new behavior?

  • 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
  • No

Other information

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.

@github-actions github-actions Bot added the package: vue @ionic/vue package label Jan 17, 2024
@liamdebeasi
liamdebeasi marked this pull request as ready for review January 18, 2024 19:09
@liamdebeasi
liamdebeasi requested a review from thetaPC as a code owner January 18, 2024 19:09
@liamdebeasi
liamdebeasi requested a review from a team January 18, 2024 19:09
@liamdebeasi liamdebeasi changed the title test(vue): update to latest vue deps fix(vue): tabs and parameterized routes work with latest vue Jan 18, 2024

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, verified that it fixes the issue.

@liamdebeasi
liamdebeasi added this pull request to the merge queue Jan 19, 2024
Merged via the queue into main with commit 5bc4399 Jan 19, 2024
@liamdebeasi
liamdebeasi deleted the FW-5898 branch January 19, 2024 21:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: parameterized routes do not play animations or set props on vue 3.4+

2 participants