feat(gatsby): enable modern builds for gatsby

.circleci/config.yml

@@ -196,6 +196,13 @@ jobs:
           test_path: e2e-tests/themes/production-runtime
           test_command: yarn test
 
+  e2e_tests_modern_builds:
+    <<: *e2e-executor
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/modern-builds
+          test_command: yarn test
+
   starters_validate:
     executor: node
     steps:
@@ -295,6 +302,8 @@ workflows:
           <<: *e2e-test-workflow
       - themes_e2e_tests_development_runtime:
           <<: *e2e-test-workflow
+      - e2e_tests_modern_builds:
+          <<: *e2e-test-workflow
       - starters_validate:
           <<: *ignore_master
       - starters_publish:

e2e-tests/modern-builds/.gitignore

@@ -0,0 +1,12 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build directory
+/public
+.DS_Store
+
+# Cypress output
+cypress/videos/
+cypress/screenshots/

e2e-tests/modern-builds/README.md

@@ -0,0 +1,3 @@
+# production-runtime
+
+A Gatsby project to test our production runtime for Themes

e2e-tests/modern-builds/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:9000",
+  "chromeWebSecurity": false
+}

e2e-tests/modern-builds/cypress/integration/index.js

@@ -0,0 +1,46 @@
+/* global cy */
+
+describe(`Preload`, () => {
+  it(`preloads on first visit`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    // module preloads should only contain mjs
+    cy.get(`link[rel="modulepreload"]`).each($el => {
+      // eslint-disable-next-line no-unused-expressions
+      expect($el.attr(`href`).endsWith(`.mjs`)).to.be.true
+    })
+
+    // No regular script preloads should be here
+    cy.get(`link[rel="preload"][as="script"]`).should($preloads => {
+      expect($preloads).to.have.length(0)
+    })
+
+    // prefetch of page 2 should still happen and should be an mjs
+    cy.get(
+      `link[rel="prefetch"][href^="/component---src-pages-page-2-js"][href$=".mjs"]`
+    ).should(`exist`)
+  })
+
+  it(`Initiate script tags on hoverng Gatsby Link Tags`, () => {
+    cy.get(`a[href="/page-2"`).trigger(`mouseover`)
+    cy.get(
+      `script[src^="/component---src-pages-page-2-js"][src$=".mjs"]`
+    ).should(`exist`)
+  })
+})
+
+describe(`Runtime`, () => {
+  it(`should only load modern scripts`, () => {
+    cy.window().then(win => {
+      const scripts = Object.values(win.___chunkMapping).flat()
+      expect(scripts.filter(path => path.endsWith(`.mjs`)).length).to.equal(
+        scripts.length
+      )
+    })
+
+    cy.get(`script[src]`).each($el => {
+      // eslint-disable-next-line no-unused-expressions
+      expect($el.attr(`src`).endsWith(`.mjs`)).to.be.true
+    })
+  })
+})

e2e-tests/modern-builds/cypress/support/index.js

@@ -0,0 +1 @@
+import "gatsby-cypress"

e2e-tests/modern-builds/gatsby-browser.js

@@ -0,0 +1,24 @@
+if (typeof window !== `undefined`) {
+  window.___PageComponentLifecycleCallsLog = []
+}
+
+const addLogEntry = (action, location) => {
+  const idElement = document.querySelector(`[data-testid="dom-marker"]`)
+  window.___PageComponentLifecycleCallsLog.push({
+    action,
+    pathname: location.pathname,
+    domContent: idElement ? idElement.innerText : null,
+  })
+}
+
+exports.onPreRouteUpdate = ({ location }) => {
+  addLogEntry(`onPreRouteUpdate`, location)
+}
+
+exports.onRouteUpdate = ({ location }) => {
+  addLogEntry(`onRouteUpdate`, location)
+}
+
+exports.onPrefetchPathname = ({ pathname }) => {
+  addLogEntry(`onPrefetchPathname`, pathname)
+}

e2e-tests/modern-builds/gatsby-config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  siteMetadata: {
+    title: `Modern Builds are awesome`,
+    description: `Testing modern builds, yeah!`,
+    author: `Ward Peeters`,
+  },
+  plugins: [],
+}

e2e-tests/modern-builds/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "modern-builds",
+  "description": "Tesing modern builds logic",
+  "version": "1.0.0",
+  "author": "Ward Peeters <ward@gatsbyjs.com>",
+  "dependencies": {
+    "gatsby": "^2.13.14",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "cross-env ENABLE_MODERN_BUILDS=1 gatsby build",
+    "develop": "cross-env ENABLE_MODERN_BUILDS=1 gatsby develop",
+    "format": "prettier --write \"src/**/*.js\"",
+    "serve": "gatsby serve",
+    "start": "npm run develop",
+    "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
+    "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run --browser chrome"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "cypress": "^3.1.3",
+    "gatsby-cypress": "^0.1.7",
+    "prettier": "^1.15.2",
+    "start-server-and-test": "^1.7.11"
+  }
+}

e2e-tests/modern-builds/src/pages/index.js

@@ -0,0 +1,22 @@
+import React from "react"
+import { graphql, Link } from "gatsby"
+
+export default ({ data }) => (
+  <>
+    <p data-testid="title">{data.site.siteMetadata.title}</p>
+    <p data-testid="author">{data.site.siteMetadata.author}</p>
+
+    <Link to="/page-2">Go to page 2</Link>
+  </>
+)
+
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+        author
+      }
+    }
+  }
+`

e2e-tests/modern-builds/src/pages/page-2.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default () => <p>Page 2</p>

packages/babel-preset-gatsby/src/__tests__/index.js

@@ -61,16 +61,9 @@ it(`Specifies proper presets and plugins for test stage`, () => {
 })
 
 it(`Specifies proper presets and plugins for build-html stage`, () => {
-  const currentGatsbyBuildStage = process.env.GATSBY_BUILD_STAGE
-  let presets, plugins
-  try {
-    process.env.GATSBY_BUILD_STAGE = `build-html`
-    const config = preset()
-    presets = config.presets
-    plugins = config.plugins
-  } finally {
-    process.env.GATSBY_BUILD_STAGE = currentGatsbyBuildStage
-  }
+  const config = preset(null, { stage: `build-html` })
+  const presets = config.presets
+  const plugins = config.plugins
 
   expect(presets).toEqual([
     [
@@ -131,6 +124,7 @@ it(`Specifies proper presets and plugins for build-html stage`, () => {
 it(`Allows to configure browser targets`, () => {
   const targets = `last 1 version`
   const { presets } = preset(null, {
+    stage: `build-javascript`,
     targets,
   })
 
@@ -147,11 +141,34 @@ it(`Allows to configure browser targets`, () => {
   ])
 })
 
+it(`Allows to configure modern builds`, () => {
+  const targets = `last 1 version`
+  const { presets } = preset(null, {
+    stage: `build-javascript`,
+    targets,
+    modern: true,
+  })
+
+  expect(presets[0]).toEqual([
+    expect.stringContaining(path.join(`@babel`, `preset-env`)),
+    {
+      corejs: 2,
+      exclude: [`transform-typeof-symbol`],
+      loose: true,
+      modules: false,
+      useBuiltIns: `usage`,
+      targets: {
+        esmodules: true,
+      },
+    },
+  ])
+})
+
 describe(`in production mode`, () => {
   it(`adds babel-plugin-transform-react-remove-prop-types`, () => {
-    process.env.GATSBY_BUILD_STAGE = `build-javascript`
-
-    const { plugins } = preset()
+    const { plugins } = preset(null, {
+      stage: `build-javascript`,
+    })
 
     expect(plugins).toEqual(
       expect.arrayContaining([

packages/babel-preset-gatsby/src/index.js

@@ -30,7 +30,7 @@ module.exports = function preset(_, options = {}) {
   let { targets = null } = options
 
   const pluginBabelConfig = loadCachedConfig()
-  const stage = process.env.GATSBY_BUILD_STAGE || `test`
+  const stage = options.stage || process.env.GATSBY_BUILD_STAGE || `test`
   const absoluteRuntimePath = path.dirname(
     require.resolve(`@babel/runtime/package.json`)
   )
@@ -45,6 +45,13 @@ module.exports = function preset(_, options = {}) {
     }
   }
 
+  // when options.modern is set we overwrite targets to contain esmodules = true
+  if (options.modern) {
+    targets = {
+      esmodules: true,
+    }
+  }
+
   return {
     presets: [
       [

packages/gatsby/cache-dir/loader.js

@@ -320,11 +320,14 @@ export class BaseLoader {
   }
 }
 
-const createComponentUrls = componentChunkName =>
-  window.___chunkMapping[componentChunkName].map(
+const createComponentUrls = componentChunkName => {
+  let componentUrls = window.___chunkMapping[componentChunkName].map(
     chunk => __PATH_PREFIX__ + chunk
   )
 
+  return componentUrls
+}
+
 export class ProdLoader extends BaseLoader {
   constructor(asyncRequires, matchPaths) {
     const loadComponent = chunkName =>