feat: useHead accepts more types of argument (vueuse#6)

Co-authored-by: Kevin Hazy <[email protected]>
anterioforks · Jan 19, 2021 · 76cdda7 · 76cdda7
1 parent 769775a
commit 76cdda7
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 34 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -0,0 +1,27 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn
+      - run: npm run test --if-present
diff --git a/README.md b/README.md
@@ -39,15 +39,15 @@ import { useHead } from '@vueuse/head'
 
 export default defineComponent({
   setup() {
-    useHead(() => ({
+    useHead({
       title: `Website title`,
       meta: [
         {
           name: `description`,
           content: `Website description`,
         },
       ],
-    }))
+    })
   },
 })
 </script>
@@ -85,18 +85,18 @@ const finalHTML = `
 
 Create the head manager instance.
 
-### `useHead(() => HeadObject)`
+### `useHead(head: HeadObject | Ref<HeadObject> | (() => HeadObject))`
 
 ```ts
 interface HeadObject {
-  title?: string
-  base?: HeadAttrs
-  meta?: HeadAttrs[]
-  link?: HeadAttrs[]
-  style?: HeadAttrs[]
-  script?: HeadAttrs[]
-  htmlAttrs?: HeadAttrs
-  bodyAttrs?: HeadAttrs
+  title?: MaybeRef<string>
+  meta?: MaybeRef<HeadAttrs[]>
+  link?: MaybeRef<HeadAttrs[]>
+  base?: MaybeRef<HeadAttrs>
+  style?: MaybeRef<HeadAttrs[]>
+  script?: MaybeRef<HeadAttrs[]>
+  htmlAttrs?: MaybeRef<HeadAttrs>
+  bodyAttrs?: MaybeRef<HeadAttrs>
 }
 
 interface HeadAttrs {
@@ -107,7 +107,7 @@ interface HeadAttrs {
 For `meta` tags, we use `name` and `property` to prevent duplicated tags, you can instead use the `key` attribute if the same `name` or `property` is allowed:
 
 ```ts
-useHead(() => ({
+useHead({
   meta: [
     {
       property: 'og:locale:alternate',
@@ -120,19 +120,31 @@ useHead(() => ({
       key: 'en',
     },
   ],
-}))
+})
 ```
 
 To set the `textContent` of an element, use the `children` attribute:
 
 ```ts
-useHead(() => ({
+useHead({
   style: [
     {
       children: `body {color: red}`,
     },
   ],
-}))
+})
+```
+
+`useHead` also takes reactive object or ref as the argument, for example:
+
+```ts
+const head = reactive({ title: 'Website Title' })
+useHead(head)
+```
+
+```ts
+const title = ref('Website Title')
+useHead({ title })
 ```
 
 ### `renderHeadToString(head: Head)`

diff --git a/src/index.ts b/src/index.ts
@@ -1,21 +1,34 @@
-import { App, inject, onBeforeUnmount, watchEffect } from 'vue'
+import {
+  App,
+  computed,
+  inject,
+  onBeforeUnmount,
+  ref,
+  Ref,
+  UnwrapRef,
+  watchEffect,
+} from 'vue'
 import { PROVIDE_KEY, HEAD_COUNT_KEY, HEAD_ATTRS_KEY } from './constants'
 import { createElement } from './create-element'
 import { stringifyAttrs } from './stringify-attrs'
 
+type MaybeRef<T> = T | Ref<T>
+
 export type HeadAttrs = { [k: string]: any }
 
 export type HeadObject = {
-  title?: string
-  meta?: HeadAttrs[]
-  link?: HeadAttrs[]
-  base?: HeadAttrs
-  style?: HeadAttrs[]
-  script?: HeadAttrs[]
-  htmlAttrs?: HeadAttrs
-  bodyAttrs?: HeadAttrs
+  title?: MaybeRef<string>
+  meta?: MaybeRef<HeadAttrs[]>
+  link?: MaybeRef<HeadAttrs[]>
+  base?: MaybeRef<HeadAttrs>
+  style?: MaybeRef<HeadAttrs[]>
+  script?: MaybeRef<HeadAttrs[]>
+  htmlAttrs?: MaybeRef<HeadAttrs>
+  bodyAttrs?: MaybeRef<HeadAttrs>
 }
 
+export type HeadObjectPlain = UnwrapRef<HeadObject>
+
 export type HeadTag = {
   tag: string
   props: {
@@ -69,10 +82,10 @@ const injectHead = () => {
   return head
 }
 
-const headObjToTags = (obj: HeadObject) => {
+const headObjToTags = (obj: HeadObjectPlain) => {
   const tags: HeadTag[] = []
 
-  for (const key of Object.keys(obj) as Array<keyof HeadObject>) {
+  for (const key of Object.keys(obj) as Array<keyof HeadObjectPlain>) {
     if (key === 'title') {
       tags.push({ tag: key, props: { children: obj[key] } })
     } else if (key === 'base') {
@@ -230,7 +243,12 @@ export const createHead = () => {
 
 const IS_BROWSER = typeof window !== 'undefined'
 
-export const useHead = (fn: () => HeadObject) => {
+export const useHead = (
+  obj: HeadObject | Ref<HeadObject> | (() => HeadObject),
+) => {
+  const headObj = (typeof obj === 'function'
+    ? computed(obj)
+    : ref(obj)) as Ref<HeadObjectPlain>
   const head = injectHead()
 
   if (IS_BROWSER) {
@@ -240,8 +258,7 @@ export const useHead = (fn: () => HeadObject) => {
       if (tags) {
         head.removeHeadTags(tags)
       }
-      const headObj = fn()
-      tags = headObjToTags(headObj)
+      tags = headObjToTags(headObj.value)
       head.addHeadTags(tags)
       head.updateDOM()
     })
@@ -252,12 +269,9 @@ export const useHead = (fn: () => HeadObject) => {
         head.updateDOM()
       }
     })
-
-    return
+  } else {
+    head.addHeadTags(headObjToTags(headObj.value))
   }
-
-  const headObj = fn()
-  head.addHeadTags(headObjToTags(headObj))
 }
 
 const tagToString = (tag: HeadTag) => {