feat: useHead accepts more types of argument

[antfu]

This makes useHead more flexible, resolves #4

Plain

useHead({
	title: 'FooBar'
})

Function

useHead(() => ({
	title: 'FooBar'
}))

Ref / Computed Ref

const headObject = ref({
	title: 'FooBar'
})

useHead(headObject)

headObject.title = 'BarFoo'

const headObject = computed(() => {
	title: 'FooBar'
})

useHead(headObject)

[egoist]

Maybe we should disallow using plain object, since sth like useHead({ title: `clicked ${count.value} time` }) won't be reactive.

[antfu]

A reactive object could also act as a plain object on types.

const obj = reactive({ title: 'foo' })
useHead(obj)

And since we passed it to ref, usages like this is also be unwrapped automatically:

const title = computed(() => `clicked ${count.value} time`)
useHead({ title })

The case you are talking about is the caveat of Vue's reactivity system itself which developers using Composition API should already aware of. I'd think it's better to have a more concise and flexible API for users to choose from (in some cases there could be all static data as well). What do you think?

[egoist]

That makes sense 👌

[egoist]

But #4 wants the value of title to be a ref, which isn't what this PR resolved.

[egoist]

Looks good to me otherwise, README also needs to updated to reflect changes.

[antfu]

It should be unwrapped automatically with ref

import { ref } from 'vue'

const title = ref('hi')
const object = ref({ title })
console.log(JSON.stringify(object.value)) // {"title":"hi"}
console.log(object.value.title) // hi

[egoist]

👌

It should be unwrapped automatically with ref

import { ref } from 'vue'

const title = ref('hi')
const object = ref({ title })
console.log(JSON.stringify(object.value)) // {"title":"hi"}
console.log(object.value.title) // hi

[antfu]

README updated.

[egoist]

Types also need a refresh

[antfu]

Updated with the last commit, guess it should be good now

[egoist]

@shipjs prepare