From 8602d5060c75b41337a4e924730adbfe914c4780 Mon Sep 17 00:00:00 2001 From: Clark Du Date: Thu, 2 Nov 2017 20:53:25 +0800 Subject: [PATCH 1/4] feat: append tag into body --- src/client/updateClientMetaInfo.js | 4 +++- src/client/updaters/updateTags.js | 14 ++++++++++---- src/server/generators/tagGenerator.js | 3 ++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/client/updateClientMetaInfo.js b/src/client/updateClientMetaInfo.js index 792dfd6..26e5b47 100644 --- a/src/client/updateClientMetaInfo.js +++ b/src/client/updateClientMetaInfo.js @@ -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 diff --git a/src/client/updaters/updateTags.js b/src/client/updaters/updateTags.js index 17c8193..d6332ae 100644 --- a/src/client/updaters/updateTags.js +++ b/src/client/updaters/updateTags.js @@ -5,15 +5,15 @@ export default function _updateTags (options = {}) { const { attribute } = options /** - * Updates meta tags inside on the client. Borrowed from `react-helmet`: + * Updates meta tags inside and 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)} 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}]`) + return function updateTags (type, tags, headTag, bodyTag) { + const nodes = document.querySelectorAll(`${type}[${attribute}]`) const oldTags = toArray(nodes) const newTags = [] let indexToDelete @@ -72,7 +72,13 @@ export default function _updateTags (options = {}) { } oldTags.forEach((tag) => tag.parentNode.removeChild(tag)) - newTags.forEach((tag) => headTag.appendChild(tag)) + newTags.forEach((tag) => { + if (tag.inBody === true) { + bodyTag.appendChild(tag) + } else { + headTag.appendChild(tag) + } + }) return { oldTags, newTags } } diff --git a/src/server/generators/tagGenerator.js b/src/server/generators/tagGenerator.js index 02180d5..1169e73 100644 --- a/src/server/generators/tagGenerator.js +++ b/src/server/generators/tagGenerator.js @@ -10,9 +10,10 @@ export default function _tagGenerator (options = {}) { */ return function tagGenerator (type, tags) { return { - text () { + text ({inBody = false} = {}) { // build a string containing all tags of this type return tags.reduce((tagsStr, tag) => { + if (!!tag.inBody !== inBody) return tagsStr // build a string containing all attributes of this tag const attrs = Object.keys(tag).reduce((attrsStr, attr) => { switch (attr) { From 5dd7c9fbe6841f718ed1563cbf2f4b60bc99e9d7 Mon Sep 17 00:00:00 2001 From: Clark Du Date: Fri, 3 Nov 2017 11:14:49 +0800 Subject: [PATCH 2/4] add doc for inBody --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 78cdcb0..77a37f2 100644 --- a/README.md +++ b/README.md @@ -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 = { inBody: true } const { title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta } = context.meta.inject() @@ -211,6 +212,7 @@ app.get('*', (req, res) => { ${html} + ${script.text(bodyOpt)} `) @@ -228,6 +230,7 @@ app.get('*', (req, res) => { const context = { url: req.url } const renderStream = renderer.renderToStream(context) renderStream.once('data', () => { + const bodyOpt = { inBody: true } const { title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta } = context.meta.inject() @@ -252,6 +255,7 @@ app.get('*', (req, res) => { res.end(` + ${script.text(bodyOpt)} `) @@ -497,6 +501,18 @@ Each item in the array maps to a newly-created ` ``` +If your browser doesn't support `defer` or any other reason, you want to put ` ``` -If your browser doesn't support `defer` or any other reason, you want to put `