feat(gatsby): add polyfill chunk to gatsby

gatsbyjs · Jul 1, 2020 · 04053c7 · 04053c7
1 parent 84d6939
commit 04053c7
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 24 deletions.
diff --git a/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap b/packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap
@@ -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>"`;
 

diff --git a/packages/gatsby/cache-dir/develop-static-entry.js b/packages/gatsby/cache-dir/develop-static-entry.js
@@ -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" />,
     ]),
   })

diff --git a/packages/gatsby/cache-dir/polyfill-entry.js b/packages/gatsby/cache-dir/polyfill-entry.js
@@ -0,0 +1,5 @@
+import "gatsby-legacy-polyfills"
+
+if (process.env.NODE_ENV === `development`) {
+  require(`event-source-polyfill`)
+}
diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js
@@ -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)
 

diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json
@@ -74,6 +74,7 @@
     "gatsby-core-utils": "^1.3.8",
     "gatsby-graphiql-explorer": "^0.4.7",
     "gatsby-link": "^2.4.8",
+    "gatsby-legacy-polyfills": "^0.0.1",
     "gatsby-plugin-page-creator": "^2.3.12",
     "gatsby-plugin-typescript": "^2.4.8",
     "gatsby-react-router-scroll": "^3.0.7",

diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
@@ -395,6 +395,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 => {
@@ -407,18 +438,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

diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -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()}`,
@@ -180,6 +180,7 @@ module.exports = async (
         }
       case `build-javascript`:
         return {
+          polyfill: directoryPath(`.cache/polyfill-entry`),
           app: directoryPath(`.cache/production-app`),
         }
       default: