Skip to content

Commit

Permalink
feat(gatsby): add polyfill chunk to gatsby
Browse files Browse the repository at this point in the history
  • Loading branch information
wardpeet committed Jun 23, 2020
1 parent dd616af commit 65f6fef
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 24 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// 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><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><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><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><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\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><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\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"></div><div> div3 </div><div> div2 </div><div> div1 </div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><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\\"/><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>"`;
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=\\"/polyfill.js\\" nomodule=\\"\\"></script><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\\"/><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 id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby/cache-dir/develop-static-entry.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ export default (pagePath, callback) => {
bodyAttributes,
preBodyComponents,
postBodyComponents: postBodyComponents.concat([
<script key={`polyfill`} src="/polyfill.js" noModule={true} />,
<script key={`commons`} src="/commons.js" />,
]),
})
Expand Down
5 changes: 5 additions & 0 deletions packages/gatsby/cache-dir/polyfill-entry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import "gatsby-legacy-polyfills"

if (process.env.NODE_ENV === `development`) {
require(`event-source-polyfill`)
}
30 changes: 21 additions & 9 deletions packages/gatsby/cache-dir/static-entry.js
Original file line number Diff line number Diff line change
Expand Up @@ -432,17 +432,29 @@ export default (pagePath, callback) => {
/>
)

let bodyScripts = []
if (chunkMapping[`polyfill`]) {
chunkMapping[`polyfill`].forEach(script => {
const scriptPath = `${__PATH_PREFIX__}${script}`
bodyScripts.push(
<script key={scriptPath} src={scriptPath} noModule={true} />
)
})
}

// Filter out prefetched bundles as adding them as a script tag
// would force high priority fetching.
const bodyScripts = scripts
.filter(s => s.rel !== `prefetch`)
.map(s => {
const scriptPath = `${__PATH_PREFIX__}/${JSON.stringify(s.name).slice(
1,
-1
)}`
return <script key={scriptPath} src={scriptPath} async />
})
bodyScripts = bodyScripts.concat(
scripts
.filter(s => s.rel !== `prefetch`)
.map(s => {
const scriptPath = `${__PATH_PREFIX__}/${JSON.stringify(s.name).slice(
1,
-1
)}`
return <script key={scriptPath} src={scriptPath} async />
})
)

postBodyComponents.push(...bodyScripts)

Expand Down
1 change: 1 addition & 0 deletions packages/gatsby/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"gatsby-core-utils": "^1.3.6",
"gatsby-graphiql-explorer": "^0.4.5",
"gatsby-link": "^2.4.6",
"gatsby-legacy-polyfills": "^0.0.1",
"gatsby-plugin-page-creator": "^2.3.10",
"gatsby-plugin-typescript": "^2.4.6",
"gatsby-react-router-scroll": "^3.0.4",
Expand Down
43 changes: 32 additions & 11 deletions packages/gatsby/src/utils/webpack-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,37 @@ export const createWebpackUtils = (
}`,
}

// TODO REMOVE IN V3
// a list of vendors we know we shouldn't polyfill (we should have set core-js to entry but we didn't so we have to do this)
const VENDORS_TO_NOT_POLYFILL = [
`@babel[\\\\/]runtime`,
`@mikaelkristiansson[\\\\/]domready`,
`@reach[\\\\/]router`,
`babel-preset-gatsby`,
`core-js`,
`dom-helpers`,
`gatsby-legacy-polyfills`,
`gatsby-link`,
`gatsby-react-router-scroll`,
`invariant`,
`lodash`,
`mitt`,
`prop-types`,
`react-dom`,
`react`,
`regenerator-runtime`,
`scheduler`,
`scroll-behavior`,
`shallow-compare`,
`warning`,
`webpack`,
]
const doNotPolyfillRegex = new RegExp(
`[\\\\/]node_modules[\\\\/](${VENDORS_TO_NOT_POLYFILL.join(
`|`
)})[\\\\/]`
)

return {
test: /\.(js|mjs)$/,
exclude: (modulePath: string): boolean => {
Expand All @@ -390,18 +421,8 @@ export const createWebpackUtils = (
) {
return true
}
// If dep is known library that doesn't need polyfilling, we don't.
// TODO this needs rework, this is buggy as hell
if (
/node_modules[\\/](@babel[\\/]runtime|core-js|react|react-dom|scheduler|prop-types)[\\/]/.test(
modulePath
)
) {
return true
}

// If dep is in node_modules and none of the above, include
return false
return doNotPolyfillRegex.test(modulePath)
}

// If dep is user land code, exclude
Expand Down
3 changes: 2 additions & 1 deletion packages/gatsby/src/utils/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,8 @@ module.exports = async (
switch (stage) {
case `develop`:
return {
polyfill: directoryPath(`.cache/polyfill-entry`),
commons: [
require.resolve(`event-source-polyfill`),
`${require.resolve(
`webpack-hot-middleware/client`
)}?path=${getHmrPath()}`,
Expand All @@ -180,6 +180,7 @@ module.exports = async (
}
case `build-javascript`:
return {
polyfill: directoryPath(`.cache/polyfill-entry`),
app: directoryPath(`.cache/production-app`),
}
default:
Expand Down

0 comments on commit 65f6fef

Please sign in to comment.