feat: allow tags insertion before </body> (#67)

huang-julien · danielroe · web-flow · commit c5eed67b7c0e · 2022-07-29T16:44:40.000+08:00
Co-authored-by: Daniel Roe &lt;daniel@roe.dev&gt;
diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@ import { renderHeadToString } from '@vueuse/head'
 const appHTML = await renderToString(yourVueApp)
 
 // `head` is created from `createHead()`
-const { headTags, htmlAttrs, bodyAttrs } = renderHeadToString(head)
+const { headTags, htmlAttrs, bodyAttrs, bodyTags } = renderHeadToString(head)
 
 const finalHTML = `
 <html${htmlAttrs}>
@@ -81,6 +81,7 @@ const finalHTML = `
 
   <body${bodyAttrs}>
     <div id="app">${appHTML}</div>
+    ${bodyTags}
   </body>
 
 </html>
@@ -132,6 +133,19 @@ useHead({
 })
 ```
 
+To render tags at the end of the `<body>`, set `body: true` in a HeadAttrs Object.
+
+```ts
+useHead({
+  script: [
+    {
+      children: `console.log('Hello world!')`,
+      body: true
+    },
+  ],
+})
+```
+
 To set the `textContent` of an element, use the `children` attribute:
 
 ```ts
@@ -186,13 +200,15 @@ Note that you need to use `<html>` and `<body>` to set `htmlAttrs` and `bodyAttr
 - Returns: `HTMLResult`
 
 ```ts
-interface HTMLResult {
+export interface HTMLResult {
   // Tags in `<head>`
   readonly headTags: string
   // Attributes for `<html>`
   readonly htmlAttrs: string
   // Attributes for `<body>`
   readonly bodyAttrs: string
+  // Tags in `<body>`
+  readonly bodyTags: string
 }
 ```
 
diff --git a/example/app.tsx b/example/app.tsx
@@ -62,6 +62,12 @@ export const createApp = () => {
             key: 'zh',
           },
         ],
+        script: [
+          {
+            children: `console.log('hi')`,
+            body: true
+          },
+        ],
       })
       return () => (
         <div>
diff --git a/src/constants.ts b/src/constants.ts
@@ -4,3 +4,5 @@ export const HEAD_COUNT_KEY = `head:count`
 export const HEAD_ATTRS_KEY = `data-head-attrs`
 
 export const SELF_CLOSING_TAGS = ['meta', 'link', 'base']
+
+export const BODY_TAG_ATTR_NAME = `data-meta-body`
diff --git a/src/create-element.ts b/src/create-element.ts
@@ -1,3 +1,5 @@
+import { BODY_TAG_ATTR_NAME } from "./constants"
+
 export const createElement = (
   tag: string,
   attrs: { [k: string]: any },
@@ -6,16 +8,21 @@ export const createElement = (
   const el = document.createElement(tag)
 
   for (const key of Object.keys(attrs)) {
-    let value = attrs[key]
+    if (key === 'body' && attrs.body === true) {
+      // set meta-body attribute to add the tag before </body>
+      el.setAttribute(BODY_TAG_ATTR_NAME, 'true')
+    } else {
+      let value = attrs[key]
 
-    if (key === 'key' || value === false) {
-      continue
-    }
+      if (key === 'key' || value === false) {
+        continue
+      }
 
-    if (key === 'children') {
-      el.textContent = value
-    } else {
-      el.setAttribute(key, value)
+      if (key === 'children') {
+        el.textContent = value
+      } else {
+        el.setAttribute(key, value)
+      }
     }
   }
 
diff --git a/src/index.ts b/src/index.ts
@@ -14,6 +14,7 @@ import {
   HEAD_COUNT_KEY,
   HEAD_ATTRS_KEY,
   SELF_CLOSING_TAGS,
+  BODY_TAG_ATTR_NAME,
 } from './constants'
 import { createElement } from './create-element'
 import { stringifyAttrs } from './stringify-attrs'
@@ -40,6 +41,7 @@ export type HeadObjectPlain = UnwrapRef<HeadObject>
 export type HeadTag = {
   tag: string
   props: {
+    body?: boolean
     [k: string]: any
   }
 }
@@ -63,6 +65,8 @@ export interface HTMLResult {
   readonly htmlAttrs: string
   // Attributes for `<body>`
   readonly bodyAttrs: string
+  // Tags in `<body>`
+  readonly bodyTags: string
 }
 
 const getTagKey = (
@@ -172,20 +176,30 @@ const updateElements = (
   tags: HeadTag[],
 ) => {
   const head = document.head
+  const body = document.body
   let headCountEl = head.querySelector(`meta[name="${HEAD_COUNT_KEY}"]`)
+  let bodyMetaElements = body.querySelectorAll(`[${BODY_TAG_ATTR_NAME}]`);
   const headCount = headCountEl
     ? Number(headCountEl.getAttribute('content'))
     : 0
-  const oldElements: Element[] = []
+  const oldHeadElements: Element[] = []
+  const oldBodyElements: Element[] = []
 
+  if (bodyMetaElements) {
+    for (let i = 0; i < bodyMetaElements.length; i++) {
+      if (bodyMetaElements[i] && bodyMetaElements[i].tagName?.toLowerCase() === type) {
+        oldBodyElements.push(bodyMetaElements[i])
+      }
+    }
+  }
   if (headCountEl) {
     for (
       let i = 0, j = headCountEl.previousElementSibling;
       i < headCount;
       i++, j = j?.previousElementSibling || null
     ) {
       if (j?.tagName?.toLowerCase() === type) {
-        oldElements.push(j)
+        oldHeadElements.push(j)
       }
     }
   } else {
@@ -194,28 +208,34 @@ const updateElements = (
     headCountEl.setAttribute('content', '0')
     head.append(headCountEl)
   }
-  let newElements = tags.map((tag) =>
-    createElement(tag.tag, tag.props, document),
-  )
+  let newElements = tags.map((tag) => ({
+    element: createElement(tag.tag, tag.props, document),
+    body: tag.props.body ?? false
+  }))
 
   newElements = newElements.filter((newEl) => {
-    for (let i = 0; i < oldElements.length; i++) {
-      const oldEl = oldElements[i]
-      if (isEqualNode(oldEl, newEl)) {
-        oldElements.splice(i, 1)
+    for (let i = 0; i < oldHeadElements.length; i++) {
+      const oldEl = oldHeadElements[i]
+      if (isEqualNode(oldEl, newEl.element)) {
+        oldHeadElements.splice(i, 1)
         return false
       }
     }
     return true
   })
 
-  oldElements.forEach((t) => t.parentNode?.removeChild(t))
+  oldBodyElements.forEach((t) => t.parentNode?.removeChild(t))
+  oldHeadElements.forEach((t) => t.parentNode?.removeChild(t))
   newElements.forEach((t) => {
-    head.insertBefore(t, headCountEl)
+    if (t.body === true) {
+      body.insertAdjacentElement('beforeend', t.element)
+    } else {
+      head.insertBefore(t.element, headCountEl)
+    }
   })
   headCountEl.setAttribute(
     'content',
-    '' + (headCount - oldElements.length + newElements.length),
+    '' + (headCount - oldHeadElements.length + newElements.filter(t => !t.body).length),
   )
 }
 
@@ -341,27 +361,35 @@ export const useHead = (obj: MaybeRef<HeadObject>) => {
 }
 
 const tagToString = (tag: HeadTag) => {
+  let isBodyTag = false
+  if (tag.props.body) {
+    isBodyTag = true
+    // avoid rendering body attr
+    delete tag.props.body
+  }
   let attrs = stringifyAttrs(tag.props)
-
   if (SELF_CLOSING_TAGS.includes(tag.tag)) {
-    return `<${tag.tag}${attrs}>`
+    return `<${tag.tag}${attrs}${isBodyTag ? ' ' + BODY_TAG_ATTR_NAME : ''}>`
   }
 
-  return `<${tag.tag}${attrs}>${tag.props.children || ''}</${tag.tag}>`
+  return `<${tag.tag}${attrs}${isBodyTag ? ' ' + BODY_TAG_ATTR_NAME : ''}>${tag.props.children || ''}</${tag.tag}>`
 }
 
 export const renderHeadToString = (head: HeadClient): HTMLResult => {
   const tags: string[] = []
   let titleTag = ''
   let htmlAttrs: HeadAttrs = {}
   let bodyAttrs: HeadAttrs = {}
+  let bodyTags: string[] = []
   for (const tag of head.headTags) {
     if (tag.tag === 'title') {
       titleTag = tagToString(tag)
     } else if (tag.tag === 'htmlAttrs') {
       Object.assign(htmlAttrs, tag.props)
     } else if (tag.tag === 'bodyAttrs') {
       Object.assign(bodyAttrs, tag.props)
+    } else if (tag.props.body) {
+      bodyTags.push(tagToString(tag))
     } else {
       tags.push(tagToString(tag))
     }
@@ -384,6 +412,9 @@ export const renderHeadToString = (head: HeadClient): HTMLResult => {
         [HEAD_ATTRS_KEY]: Object.keys(bodyAttrs).join(','),
       })
     },
+    get bodyTags() {
+      return bodyTags.join('')
+    }
   }
 }
 
diff --git a/tests/test.tsx b/tests/test.tsx
@@ -211,3 +211,12 @@ test('script key', async (t) => {
     `<script>console.log('B')</script><meta name="head:count" content="1">`,
   )
 })
+
+test('body script', async (t) => {
+  const page = await t.context.browser.newPage()
+  await page.goto(`http://localhost:3000`)
+
+  const script = await page.$('[data-meta-body]')
+  const scriptHtml = await script.innerHTML()
+  t.is(scriptHtml, `console.log('hi')`)
+})
