Skip to content

Commit ad92e13

Browse files
wardpeetwardpeet
authored
fix(gatsby): add app-data to preload list (#21537)
* fix(gatsby): add app-data to preload list * fix tests * memoize app-data check
1 parent 3894840 commit ad92e13

File tree

3 files changed

+53
-8
lines changed

3 files changed

+53
-8
lines changed

‎packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyCom
66
77
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\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
88
9-
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\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/><style> .style3 </style><style> .style2 </style><style> .style1 </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
9+
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\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/app-data.json\\" crossorigin=\\"anonymous\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/><style> .style3 </style><style> .style2 </style><style> .style1 </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
1010
11-
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\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><div> div3 </div><div> div2 </div><div> div1 </div></body></html>"`;
11+
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\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/app-data.json\\" crossorigin=\\"anonymous\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><div> div3 </div><div> div2 </div><div> div1 </div></body></html>"`;
1212
13-
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\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
13+
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\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/app-data.json\\" crossorigin=\\"anonymous\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;

‎packages/gatsby/cache-dir/__tests__/static-entry.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ const MOCK_FILE_INFO = {
4242
path: `/about/`,
4343
webpackCompilationHash: `1234567890abcdef1234`,
4444
}),
45+
[join(process.cwd(), `/public/page-data/app-data.json`)]: JSON.stringify({
46+
webpackCompilationHash: `1234567890abcdef1234`,
47+
}),
4548
}
4649

4750
let StaticEntry
@@ -261,6 +264,7 @@ describe(`static-entry`, () => {
261264
beforeEach(() => {
262265
global.__PATH_PREFIX__ = ``
263266
global.__BASE_PATH__ = ``
267+
fs.readFileSync.mockImplementation(file => MOCK_FILE_INFO[file])
264268
})
265269

266270
test(`onPreRenderHTML can be used to replace headComponents`, done => {

‎packages/gatsby/cache-dir/static-entry.js

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const {
1212
flattenDeep,
1313
replace,
1414
concat,
15+
memoize,
1516
} = require(`lodash`)
1617

1718
const apiRunner = require(`./api-runner-ssr`)
@@ -59,11 +60,38 @@ const getPageDataUrl = pagePath => {
5960
return `${__PATH_PREFIX__}/${pageDataPath}`
6061
}
6162

62-
const getPageDataFile = pagePath => {
63+
const getPageData = pagePath => {
6364
const pageDataPath = getPageDataPath(pagePath)
64-
return join(process.cwd(), `public`, pageDataPath)
65+
const absolutePageDataPath = join(process.cwd(), `public`, pageDataPath)
66+
const pageDataRaw = fs.readFileSync(absolutePageDataPath)
67+
68+
try {
69+
return JSON.parse(pageDataRaw.toString())
70+
} catch (err) {
71+
return null
72+
}
6573
}
6674

75+
const appDataPath = join(`page-data`, `app-data.json`)
76+
77+
const getAppDataUrl = memoize(() => {
78+
let appData
79+
80+
try {
81+
const absoluteAppDataPath = join(process.cwd(), `public`, appDataPath)
82+
const appDataRaw = fs.readFileSync(absoluteAppDataPath)
83+
appData = JSON.parse(appDataRaw.toString())
84+
85+
if (!appData) {
86+
return null
87+
}
88+
} catch (err) {
89+
return null
90+
}
91+
92+
return `${__PATH_PREFIX__}/${appDataPath}`
93+
})
94+
6795
const loadPageDataSync = pagePath => {
6896
const pageDataPath = getPageDataPath(pagePath)
6997
const pageDataFile = join(process.cwd(), `public`, pageDataPath)
@@ -167,9 +195,11 @@ export default (pagePath, callback) => {
167195
postBodyComponents = sanitizeComponents(components)
168196
}
169197

170-
const pageDataRaw = fs.readFileSync(getPageDataFile(pagePath))
171-
const pageData = JSON.parse(pageDataRaw)
198+
const pageData = getPageData(pagePath)
172199
const pageDataUrl = getPageDataUrl(pagePath)
200+
201+
const appDataUrl = getAppDataUrl()
202+
173203
const { componentChunkName } = pageData
174204

175205
class RouteHandler extends React.Component {
@@ -251,7 +281,7 @@ export default (pagePath, callback) => {
251281
const fetchKey = `assetsByChunkName[${s}]`
252282

253283
let chunks = get(stats, fetchKey)
254-
let namedChunkGroups = get(stats, `namedChunkGroups`)
284+
const namedChunkGroups = get(stats, `namedChunkGroups`)
255285

256286
if (!chunks) {
257287
return null
@@ -334,6 +364,17 @@ export default (pagePath, callback) => {
334364
/>
335365
)
336366
}
367+
if (appDataUrl) {
368+
headComponents.push(
369+
<link
370+
as="fetch"
371+
rel="preload"
372+
key={appDataUrl}
373+
href={appDataUrl}
374+
crossOrigin="anonymous"
375+
/>
376+
)
377+
}
337378

338379
styles
339380
.slice(0)

0 commit comments

Comments
 (0)