feat: replace useHead with ionic-compatible head implementation
#518
Conversation
I figured out that the author of @vueuse/head, @egoist, suggested that developers should go for the unhead package, and so I decided to create an utility function with unhead, to handle <head></head> tags management accurately, irrespective of the Ionic hooks randomness. Note: There is also support for nested head calls within components
✅ Deploy Preview for friendly-lamington-fb5690 canceled.
|
|
This is fantastic! Do you think we should overwrite |
@danielroe Sure, I guess changing the name to useHead would be better for ease when working with ongoing projects |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #518 +/- ##
==========================================
- Coverage 52.36% 46.65% -5.72%
==========================================
Files 10 11 +1
Lines 762 866 +104
Branches 37 38 +1
==========================================
+ Hits 399 404 +5
- Misses 363 462 +99 ☔ View full report in Codecov by Sentry. |
danielroe
changed the title
useIonHead for ionic-compatible head metadata
@danielroe I will be able to do this |
|
@danielroe Already created a new test in the Made a few more changes to the tests due to timeout and memory consumption from previously ongoing tests, I added delays after each toggle of the button in the test to represent the delay that useHead takes to rectify changes to the document's head tag, but this brought about a reason to increase the timeout for the test. I hope the test satisfies the required condition |
danielroe
changed the title
useIonHead for ionic-compatible head metadatauseHead with ionic-compatible head implementation
|
cc: @harlan-zw - you may have a better idea or improvements to suggest |
There was a problem hiding this comment.
@danielroe Thanks for correcting the test. This obviously looks better.
|
I'm not entirely sure I understand the issue, the Ionic lifecycle hooks don't align with the Vue lifecycle hooks? If you have any capacity to make an issue on the Unhead repo with some technical background I'd be happy to explore some alternative ways of solving it that don't rely on new composables. This solution seems quite good though, nice job! |
I created an utility function, useIonHead, that works almost the same as useHead from unhead, but just with a hack around.
The function provides a way to dispose and patch the created head object just like useHead.
During the process, I realized that tabbed view was a big problem when trying to create this util, and the randomness of the Ionic Hooks. The main issue was leaving from a tabbed view to a non-tabbed view and trying to mantain or destroy state.
Guess What: You can nest useIonHead calls within children components and still retain the same structure after the page it was created on, is brought into view, and it's also fast as well.
resolves #6