Merge pull request #154 from clarkdo/append_body

feat: append tag into body
2026-06-14 06:02:24 +03:00 · 2017-11-06 10:48:02 +01:00
parent 1813a8e2d0 61baf27f32
commit 8ecc14a377
4 changed files with 34 additions and 8 deletions
@@ -193,6 +193,7 @@ app.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (error, html) => {
    if (error) return res.send(error.stack)
+    const bodyOpt = { body: true }
    const {
      title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
    } = context.meta.inject()
@@ -211,6 +212,7 @@ app.get('*', (req, res) => {
          ${html}
          <script src="/assets/vendor.bundle.js"></script>
          <script src="/assets/client.bundle.js"></script>
+          ${script.text(bodyOpt)}
        </body>
      </html>
    `)
@@ -228,6 +230,7 @@ app.get('*', (req, res) => {
  const context = { url: req.url }
  const renderStream = renderer.renderToStream(context)
  renderStream.once('data', () => {
+    const bodyOpt = { body: true }
    const {
      title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
    } = context.meta.inject()
@@ -252,6 +255,7 @@ app.get('*', (req, res) => {
    res.end(`
          <script src="/assets/vendor.bundle.js"></script>
          <script src="/assets/client.bundle.js"></script>
+          ${script.text(bodyOpt)}
        </body>
      </html>
    `)
@@ -497,6 +501,18 @@ Each item in the array maps to a newly-created `<script>` element, where object
 <script type="application/ld+json">{ "@context": "http://schema.org" }</script>
 ```

+If your browser doesn't support `defer` or any other reason, you want to put `<script>` before `</body>`, use `body`.
+
+```js
+{
+  metaInfo: {
+    script: [
+      { innerHTML: 'console.log("I am in body");', type: 'text/javascript', body: true }
+    ]
+  }
+}
+```
+
 #### `noscript` ([Object])

 Each item in the array maps to a newly-created `<noscript>` element, where object properties map to attributes.
@@ -42,7 +42,9 @@ export default function _updateClientMetaInfo (options = {}) {
            break
          // catch-all update tags
          default:
-            const { oldTags, newTags } = updateTags(options)(key, newInfo[key], document.getElementsByTagName('head')[0])
+            const headTag = document.getElementsByTagName('head')[0]
+            const bodyTag = document.getElementsByTagName('body')[0]
+            const { oldTags, newTags } = updateTags(options)(key, newInfo[key], headTag, bodyTag)
            if (newTags.length) {
              addedTags[key] = newTags
              removedTags[key] = oldTags
@@ -5,16 +5,16 @@ export default function _updateTags (options = {}) {
  const { attribute } = options

  /**
-   * Updates meta tags inside <head> on the client. Borrowed from `react-helmet`:
+   * Updates meta tags inside <head> and <body> on the client. Borrowed from `react-helmet`:
   * https://github.com/nfl/react-helmet/blob/004d448f8de5f823d10f838b02317521180f34da/src/Helmet.js#L195-L245
   *
   * @param  {('meta'|'base'|'link'|'style'|'script'|'noscript')} type - the name of the tag
   * @param  {(Array<Object>|Object)} tags - an array of tag objects or a single object in case of base
   * @return {Object} - a representation of what tags changed
   */
-  return function updateTags (type, tags, headTag) {
-    const nodes = headTag.querySelectorAll(`${type}[${attribute}]`)
-    const oldTags = toArray(nodes)
+  return function updateTags (type, tags, headTag, bodyTag) {
+    const oldHeadTags = toArray(headTag.querySelectorAll(`${type}[${attribute}]`))
+    const oldBodyTags = toArray(bodyTag.querySelectorAll(`${type}[${attribute}][body="true"]`))
    const newTags = []
    let indexToDelete

@@ -35,6 +35,7 @@ export default function _updateTags (options = {}) {
    if (tags && tags.length) {
      tags.forEach((tag) => {
        const newElement = document.createElement(type)
+        const oldTags = tag.body !== true ? oldHeadTags : oldBodyTags

        for (const attr in tag) {
          if (tag.hasOwnProperty(attr)) {
@@ -70,9 +71,15 @@ export default function _updateTags (options = {}) {
        }
      })
    }
-
+    const oldTags = oldHeadTags.concat(oldBodyTags)
    oldTags.forEach((tag) => tag.parentNode.removeChild(tag))
-    newTags.forEach((tag) => headTag.appendChild(tag))
+    newTags.forEach((tag) => {
+      if (tag.getAttribute('body') === 'true') {
+        bodyTag.appendChild(tag)
+      } else {
+        headTag.appendChild(tag)
+      }
+    })

    return { oldTags, newTags }
  }
@@ -10,9 +10,10 @@ export default function _tagGenerator (options = {}) {
   */
  return function tagGenerator (type, tags) {
    return {
-      text () {
+      text ({body = false} = {}) {
        // build a string containing all tags of this type
        return tags.reduce((tagsStr, tag) => {
+          if (!!tag.body !== body) return tagsStr
          // build a string containing all attributes of this tag
          const attrs = Object.keys(tag).reduce((attrsStr, attr) => {
            switch (attr) {