feat: replace useHead with ionic-compatible head implementation

[chibx]

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

[netlify]

✅ Deploy Preview for friendly-lamington-fb5690 canceled.

Name	Link
🔨 Latest commit	ede24be
🔍 Latest deploy log	https://app.netlify.com/sites/friendly-lamington-fb5690/deploys/664e646f34e8000008ed7040

[danielroe]

This is fantastic! Do you think we should overwrite useHead instead of creating an additional composable?

[chibx]

This is fantastic! Do you think we should overwrite useHead instead of creating an additional composable?

@danielroe Sure, I guess changing the name to useHead would be better for ease when working with ongoing projects

[codecov]

Codecov Report

Attention: Patch coverage is 3.73832% with 103 lines in your changes are missing coverage. Please review.

Project coverage is 46.65%. Comparing base (f8e27aa) to head (ede24be).
Report is 2 commits behind head on main.

Files	Patch %	Lines
src/runtime/composables/head.ts	0.00%	99 Missing ⚠️
src/module.ts	57.14%	3 Missing ⚠️
src/runtime/plugins/router.ts	0.00%	1 Missing ⚠️

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.
📢 Have feedback on the report? Share it here.

[danielroe]

I think the next step would be to write a browser test that asserts the correct title after client navigation, following the pattern here:

https://github.com/danielroe/nuxt-ionic/blob/a45c95693f1fdb8de0be43d7a664db72989effd2/test/e2e/ssr.spec.ts#L27-L36

Is that something you would be happy & able to do?

[chibx]

I think the next step would be to write a browser test that asserts the correct title after client navigation, following the pattern here:

https://github.com/danielroe/nuxt-ionic/blob/a45c95693f1fdb8de0be43d7a664db72989effd2/test/e2e/ssr.spec.ts#L27-L36

Is that something you would be happy & able to do?

@danielroe I will be able to do this

[chibx]

@danielroe Already created a new test in the e2e/ion-head.spec.ts file, and also changed useIonHead to useHead with a higher priority.

Made a few more changes to the tests due to timeout and memory consumption from previously ongoing tests, ssr.spec.ts, by closing the open page, shaving off a huge amount of allocated memory.

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]

Thank you so much for this ❤️

[danielroe]

cc: @harlan-zw - you may have a better idea or improvements to suggest

[chibx]

@danielroe Thanks for correcting the test. This obviously looks better.

[harlan-zw]

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!

[atakansn]

hello, I can not useHead, what should I do?

[chibx]

@atakansn What version of the useHead package are you currently on

[atakansn]

@chibx @unhead/vue version 2.0.0-rc.8 I use nuxt 3 and @nuxtjs/ionic side

[chibx]

@chibx @unhead/vue version 2.0.0-rc.8 I use nuxt 3 and @nuxtjs/ionic side

I suppose this is why
The next question would be if you are importing directly from unhead/vue or from #imports, and if not from #imports, please try that
If the issues persist, try setting the head.legacy key in your Nuxt config to true

I'll look into this

[atakansn]

@chibx When I import { useHead } from '@unhead/vue' or import { useHead } from '#app', useHead works.

[chibx]

@chibx When I import { useHead } from '@unhead/vue' or import { useHead } from '#app', useHead works.

So now does it work as expected?
I am asking this because before there was an open issue regarding the native useHead function not working in an Ionic environment because Ionic doesn't just simply destroy the DOM, but instead hides it, so useHead had no way to know when the component was back in focus

So I created a stub that should be working in @nuxtjs/Ionic, and it should be registered as auto-import from the module itself

[atakansn]

useHead({
  title: 'Title',
  htmlAttrs: {
    class: 'h-full bg-gray-100'
  },  
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})

in the example it adds all properties