tagPriority not respected on link

[doutatsu]

Environment

unhead: 1.3.7 vite: 3.2.7

Reproduction

https://stackblitz.com/edit/vitejs-vite-hkehtr?file=src%2Fcomponents%2FHelloWorld.vue

Describe the bug

When trying to set tagPriority on link property, it is not respected. I tried to set a critical (both as a string and as a number) priority on it, but when inspecting head the title, which has a lower priority was still higher up, while link was always at the very bottom of head

Additional context

<script setup>
import { ref } from 'vue';
import { useHead } from '@unhead/vue';

useHead({
  title: 'My awesome site',
  link: [
    {
      rel: 'preload',
      fetchpriority: 'high',
      as: 'image',
      type: `image/png`,
      href: 'https://tailwindui.com/img/component-images/dark-project-app-screenshot.png',
      tagPriority: 'critical',
    },
  ],
});
defineProps({
  msg: String,
});

const count = ref(0);
</script>

Logs

No response

[harlan-zw]

Hi @doutatsu, thanks for the issue. You will need to SSR your app if you want to have the tags come before the Vite ones.

You can see an example here https://github.com/unjs/unhead/tree/main/examples/vite-ssr-vue

[doutatsu]

That is unfortunate, as I don't plan on making it SSR. It's probably worth adding a note that it's SSR-only functionality then, as I don't believe there was a mention of that. Thanks for the clarification

[doutatsu]

Actually, a quick follow-up - what is the reason it's not possible without SSR? I've just managed to make it work by manually injecting into head after the first element and it works like a charm:

  const { cover: { webp, jpeg } = {} } = data;
  const covers = { webp: webp?.large, jpeg: jpeg?.large || defaultCoverUrl };
  if (!covers.webp) { return; }

  const image = createImageLink('webp', covers.webp);
  const link = document.createElement('link');

  link.rel = image.rel;
  link.fetchpriority = image.fetchpriority;
  link.as = image.as;
  link.type = image.type;
  link.href = image.href;

  const { firstChild } = document.head;

  document.head.insertBefore(link, firstChild);

[harlan-zw]

The ordering will work it just won't re-order or delete tags that don't belong to it. It adds extra complexity and potentially breaking changes if it supported this.

There may be scope to add an option to the DOM renderer to select the insert function that Unhead will use to render the tags (currently it just uses appendChild).

[doutatsu]

That's fair - I'll stick to my custom solution, as it's simply adding and removing an image preload tag, so it's easy to add and then remove without false positives. But would be nice if this is at some point supported by the library directly