Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Jan 19, 2024
Merged

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Jan 17, 2024

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 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
Copy link
Contributor

@thetaPC thetaPC left a comment

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
46 checks passed
@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