Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(gatsby): filter null values in headComponents, preBodyComponents and postBodyComponents #12555

Merged
merged 2 commits into from
Mar 19, 2019
Merged

fix(gatsby): filter null values in headComponents, preBodyComponents and postBodyComponents #12555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34c6fdc
Closes #12553 head components check for empty values
danielkov Mar 13, 2019
fe7fc84
Added sanity checks to pre and post body component setters
danielkov Mar 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style>.style3 </style><style>.style2 </style><style>.style1 </style><script src=\\"/socket.io/socket.io.js\\"></script></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style> .style3 </style><style> .style2 </style><style> .style1 </style><script src=\\"/socket.io/socket.io.js\\"></script></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;

exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><div>div3</div><div>div2</div><div>div1</div><script src=\\"/commons.js\\"></script></body></html>"`;
exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><div> div3 </div><div> div2 </div><div> div1 </div><script src=\\"/commons.js\\"></script></body></html>"`;

exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div>div3</div><div>div2</div><div>div1</div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div> div3 </div><div> div2 </div><div> div1 </div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;

exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style>.style3 </style><style>.style2 </style><style>.style1 </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style> .style3 </style><style> .style2 </style><style> .style1 </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;

exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><div>div3</div><div>div2</div><div>div1</div></body></html>"`;
exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><div> div3 </div><div> div2 </div><div> div1 </div></body></html>"`;

exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div>div3</div><div>div2</div><div>div1</div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.page={\\"path\\":\\"/about/\\",\\"componentChunkName\\":\\"page-component---src-pages-test-js\\",\\"jsonName\\":\\"about.json\\"};/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
108 changes: 100 additions & 8 deletions packages/gatsby/cache-dir/__tests__/static-entry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ jest.mock(
},
}
},
{ virtual: true }
{
virtual: true,
}
)

jest.mock(
Expand All @@ -38,7 +40,9 @@ jest.mock(
],
}
},
{ virtual: true }
{
virtual: true,
}
)

const MOCK_FILE_INFO = {
Expand All @@ -61,13 +65,48 @@ const reverseHeadersPlugin = {
},
}

const injectValuePlugin = (hookName, methodName, value) => {
return {
plugin: {
[hookName]: staticEntry => {
const method = staticEntry[methodName]
method(value)
},
},
}
}

const checkSanitized = components => {
expect(components.includes(null)).toBeFalsy()
expect(
components.find(val => Array.isArray(val) && val.length === 0)
).toBeFalsy()
}

const checkNonEmptyHeadersPlugin = {
plugin: {
onPreRenderHTML: ({
getHeadComponents,
getPreBodyComponents,
getPostBodyComponents,
}) => {
const headComponents = getHeadComponents()
const preBodyComponents = getPreBodyComponents()
const postBodyComponents = getPostBodyComponents()
checkSanitized(headComponents)
checkSanitized(preBodyComponents)
checkSanitized(postBodyComponents)
},
},
}

const fakeStylesPlugin = {
plugin: {
onRenderBody: ({ setHeadComponents }) =>
setHeadComponents([
<style key="style1">.style1 {}</style>,
<style key="style2">.style2 {}</style>,
<style key="style3">.style3 {}</style>,
<style key="style1"> .style1 {} </style>,
<style key="style2"> .style2 {} </style>,
<style key="style3"> .style3 {} </style>,
]),
},
}
Expand All @@ -89,9 +128,9 @@ const fakeComponentsPluginFactory = type => {
plugin: {
onRenderBody: props => {
props[`set${type}BodyComponents`]([
<div key="div1">div1</div>,
<div key="div2">div2</div>,
<div key="div3">div3</div>,
<div key="div1"> div1 </div>,
<div key="div2"> div2 </div>,
<div key="div3"> div3 </div>,
])
},
},
Expand Down Expand Up @@ -133,6 +172,59 @@ describe(`develop-static-entry`, () => {
})
})

describe(`static-entry sanity checks`, () => {
beforeEach(() => {
global.__PATH_PREFIX__ = ``
})

const methodsToCheck = [
`replaceHeadComponents`,
`replacePreBodyComponents`,
`replacePostBodyComponents`,
]

methodsToCheck.forEach(methodName => {
test(`${methodName} can filter out null value`, done => {
const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, null)
global.plugins = [plugin, checkNonEmptyHeadersPlugin]

StaticEntry(`/about/`, (_, html) => {
done()
})
})

test(`${methodName} can filter out null values`, done => {
const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, [
null,
null,
])
global.plugins = [plugin, checkNonEmptyHeadersPlugin]

StaticEntry(`/about/`, (_, html) => {
done()
})
})

test(`${methodName} can filter out empty array`, done => {
const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, [])
global.plugins = [plugin, checkNonEmptyHeadersPlugin]

StaticEntry(`/about/`, (_, html) => {
done()
})
})

test(`${methodName} can filter out empty arrays`, done => {
const plugin = injectValuePlugin(`onPreRenderHTML`, methodName, [[], []])
global.plugins = [plugin, checkNonEmptyHeadersPlugin]

StaticEntry(`/about/`, (_, html) => {
done()
})
})
})
})

describe(`static-entry`, () => {
beforeEach(() => {
global.__PATH_PREFIX__ = ``
Expand Down
24 changes: 18 additions & 6 deletions packages/gatsby/cache-dir/static-entry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,16 @@ const getPage = path => pagesObjectMap.get(path)

const createElement = React.createElement

const sanitizeComponents = components => {
if (Array.isArray(components)) {
// remove falsy items
return components.filter(val => (Array.isArray(val) ? val.length > 0 : val))
} else {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can drop this else because of the return

// we also accept single components, so we need to handle this case as well
return components ? [components] : []
}
}

export default (pagePath, callback) => {
let bodyHtml = ``
let headComponents = [
Expand All @@ -69,7 +79,7 @@ export default (pagePath, callback) => {
}

const setHeadComponents = components => {
headComponents = headComponents.concat(components)
headComponents = headComponents.concat(sanitizeComponents(components))
}

const setHtmlAttributes = attributes => {
Expand All @@ -81,11 +91,13 @@ export default (pagePath, callback) => {
}

const setPreBodyComponents = components => {
preBodyComponents = preBodyComponents.concat(components)
preBodyComponents = preBodyComponents.concat(sanitizeComponents(components))
}

const setPostBodyComponents = components => {
postBodyComponents = postBodyComponents.concat(components)
postBodyComponents = postBodyComponents.concat(
sanitizeComponents(components)
)
}

const setBodyProps = props => {
Expand All @@ -95,19 +107,19 @@ export default (pagePath, callback) => {
const getHeadComponents = () => headComponents

const replaceHeadComponents = components => {
headComponents = components
headComponents = sanitizeComponents(components)
}

const getPreBodyComponents = () => preBodyComponents

const replacePreBodyComponents = components => {
preBodyComponents = components
preBodyComponents = sanitizeComponents(components)
}

const getPostBodyComponents = () => postBodyComponents

const replacePostBodyComponents = components => {
postBodyComponents = components
postBodyComponents = sanitizeComponents(components)
}

const page = getPage(pagePath)
Expand Down