vueuse/head

Schema types break under certain conditions

Closed this issue · 6 comments

this may be a https://github.com/harlan-zw/zhead issue...

Here are some things that should be typed properly:

useHead({
  link: [{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#1a202c' }] // color is not allowed
})
useHead({
  link: [
    ...[].map(() => ({ rel: 'prefetch', href: '' })), // this damages the type inference
    { rel: 'icon', type: 'image/svg', href: '/favicon.svg' },
  ]
})

Thanks for the issue! The color was fixed in zhead yesterday, which is now in the latest RC (1.0.0-rc.8).

Not too sure what the issue is for number two. I've tried replicating it and the types seem to be coming through correctly. Is this via Nuxt or this package's useHead?

image

If you can provide some more details I'll try to get to the bottom of it

Oh, interesting. This may be an issue with the Nuxt types in that case.

I see, I'll take a look in Nuxt, possibly an generic augmentation issue

npx nuxi init nuxt-app

yarn add -D nuxt@npm:nuxt3@latest

PHPStorm

No Errors ✔️
Autocompletion ✔️
Autocompletion: 'some-key' | string ✔️

image

Code - Volar Takeover Mode

No Errors ✔️
Autocompletion: ✔️
Autocompletion: 'some-key' | string ⚠️ (VSCode does not support it? microsoft/TypeScript#29729)

image

Interesting note, if I change the type value of rel to be a union of static values (instead of supporting any string), then it breaks the types, even though all of them are valid

image

image

Hey @danielroe

Quick update, I was able to replicate the issue, but only through hacking the types.

Since I can't replicate it reliably though, it's a bit hard to fix.

If you have any spare time, maybe you could do a quick sanity check of the types. You can find them here: https://github.com/harlan-zw/zhead/blob/main/packages/schema-vue/src/types.ts

An example of how it's used:

interface Link {
  rel: string
  // ... etc

}  
type Links = MaybeDeeplyComputedRefArray<Link[]>

Possibly something is going wrong with the array inference? I'll think about how I can rewrite the types to be simpler which may fix it.

While I was testing, I noticed the auto-completion wasn't working for VSCode, which I've pushed a fix for.

That's available in v1.0.0-rc.8, probably should make sure Nuxt uses that for the RC release if we're going to have the types as part of the release notes.

The way that the Schema is typed in v1 is much simpler now which should resolve the issue.

Going to close off for now, if you spot the issue again please let me know :)