head icon indicating copy to clipboard operation
head copied to clipboard

some incorrect types

Open danielroe opened this issue 3 years ago • 5 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' },
  ]
})

danielroe avatar Oct 13 '22 19:10 danielroe

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

harlan-zw avatar Oct 14 '22 01:10 harlan-zw

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

danielroe avatar Oct 14 '22 08:10 danielroe

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

harlan-zw avatar Oct 14 '22 08:10 harlan-zw

npx nuxi init nuxt-app

yarn add -D nuxt@npm:nuxt3@latest

PHPStorm

No Errors :heavy_check_mark: Autocompletion :heavy_check_mark: Autocompletion: 'some-key' | string :heavy_check_mark:

image

Code - Volar Takeover Mode

No Errors :heavy_check_mark: Autocompletion: :heavy_check_mark: Autocompletion: 'some-key' | string :warning: (VSCode does not support it? https://github.com/microsoft/TypeScript/issues/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

harlan-zw avatar Oct 14 '22 10:10 harlan-zw

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.

harlan-zw avatar Oct 14 '22 11:10 harlan-zw

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 :)

harlan-zw avatar Nov 14 '22 06:11 harlan-zw