mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-24 04:20:34 +03:00
Code Activity

Merge pull request #154 from clarkdo/append_body

Browse Source 
feat: append tag into body
This commit is contained in:
Sébastien Chopin
2017-11-06 10:48:02 +01:00
committed by GitHub
parent 1813a8e2d0 61baf27f32
commit 8ecc14a377
4 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+16
View File
@@ -193,6 +193,7 @@ app.get('*', (req, res) => {
const context = { url: req.url } const context = { url: req.url }
renderer.renderToString(context, (error, html) => { renderer.renderToString(context, (error, html) => {
if (error) return res.send(error.stack) if (error) return res.send(error.stack)
const bodyOpt = { body: true }
const { const {
title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = context.meta.inject() } = context.meta.inject()
@@ -211,6 +212,7 @@ app.get('*', (req, res) => {
${html} ${html}
<script src="/assets/vendor.bundle.js"></script> <script src="/assets/vendor.bundle.js"></script>
<script src="/assets/client.bundle.js"></script> <script src="/assets/client.bundle.js"></script>
${script.text(bodyOpt)}
</body> </body>
</html> </html>
`) `)
@@ -228,6 +230,7 @@ app.get('*', (req, res) => {
const context = { url: req.url } const context = { url: req.url }
const renderStream = renderer.renderToStream(context) const renderStream = renderer.renderToStream(context)
renderStream.once('data', () => { renderStream.once('data', () => {
const bodyOpt = { body: true }
const { const {
title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = context.meta.inject() } = context.meta.inject()
@@ -252,6 +255,7 @@ app.get('*', (req, res) => {
res.end(` res.end(`
<script src="/assets/vendor.bundle.js"></script> <script src="/assets/vendor.bundle.js"></script>
<script src="/assets/client.bundle.js"></script> <script src="/assets/client.bundle.js"></script>
${script.text(bodyOpt)}
</body> </body>
</html> </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> <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]) #### `noscript` ([Object])
Each item in the array maps to a newly-created `<noscript>` element, where object properties map to attributes. Each item in the array maps to a newly-created `<noscript>` element, where object properties map to attributes.
src/client/updateClientMetaInfo.js
+3 -1
View File
@@ -42,7 +42,9 @@ export default function _updateClientMetaInfo (options = {}) {
break break
// catch-all update tags // catch-all update tags
default: 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) { if (newTags.length) {
addedTags[key] = newTags addedTags[key] = newTags
removedTags[key] = oldTags removedTags[key] = oldTags
src/client/updaters/updateTags.js
+13 -6
View File
@@ -5,16 +5,16 @@ export default function _updateTags (options = {}) {
const { attribute } = 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 * 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 {('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 * @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 {Object} - a representation of what tags changed
*/ */
return function updateTags (type, tags, headTag) { return function updateTags (type, tags, headTag, bodyTag) {
const nodes = headTag.querySelectorAll(`${type}[${attribute}]`) const oldHeadTags = toArray(headTag.querySelectorAll(`${type}[${attribute}]`))
const oldTags = toArray(nodes) const oldBodyTags = toArray(bodyTag.querySelectorAll(`${type}[${attribute}][body="true"]`))
const newTags = [] const newTags = []
let indexToDelete let indexToDelete
@@ -35,6 +35,7 @@ export default function _updateTags (options = {}) {
if (tags && tags.length) { if (tags && tags.length) {
tags.forEach((tag) => { tags.forEach((tag) => {
const newElement = document.createElement(type) const newElement = document.createElement(type)
const oldTags = tag.body !== true ? oldHeadTags : oldBodyTags
for (const attr in tag) { for (const attr in tag) {
if (tag.hasOwnProperty(attr)) { 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)) 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 } return { oldTags, newTags }
} }
src/server/generators/tagGenerator.js
+2 -1
View File
@@ -10,9 +10,10 @@ export default function _tagGenerator (options = {}) {
*/ */
return function tagGenerator (type, tags) { return function tagGenerator (type, tags) {
return { return {
text () { text ({body = false} = {}) {
// build a string containing all tags of this type // build a string containing all tags of this type
return tags.reduce((tagsStr, tag) => { return tags.reduce((tagsStr, tag) => {
if (!!tag.body !== body) return tagsStr
// build a string containing all attributes of this tag // build a string containing all attributes of this tag
const attrs = Object.keys(tag).reduce((attrsStr, attr) => { const attrs = Object.keys(tag).reduce((attrsStr, attr) => {
switch (attr) { switch (attr) {