feat(gatsby): enable modern builds for gatsby

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/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

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

@@ -0,0 +1,9 @@
+/* global cy */
+
+describe(`Preload`, () => {
+  it(`preloads on first visit`, () => {
+    cy.visit(`/`).waitForRouteChange()
+  })
+
+  it(`preloads Gatsby Link tags`, () => {})
+})

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

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

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,34 @@
+{
+  "name": "production-runtime",
+  "description": "Gatsby default starter",
+  "version": "1.0.0",
+  "author": "Sidhartha Chatterjee <sid@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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  }
+}

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 ({ data }) => <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

@@ -298,6 +298,18 @@ export class BaseLoader {
     this.loadPage(rawPath)
   }
 
+  // if (resourceName.slice(0, 12) === `component---`) {
+  //   let componentUrls = createComponentUrls(resourceName)
+  //   if (process.env.MODERN_BUILD) {
+  //     componentUrls = componentUrls.filter(resource =>
+  //       resource.endsWith(`.mjs`)
+  //     )
+  //   }
+  //   return Promise.all(componentUrls.map(url => prefetchHelper(url)))
+  // } else {
+  //   const url = createJsonURL(jsonDataPaths[resourceName])
+  //   return prefetchHelper(url)
+
   getResourceURLsForPathname(rawPath) {
     const pagePath = cleanPath(rawPath)
     const page = this.pageDataDb.get(pagePath)
@@ -320,11 +332,18 @@ export class BaseLoader {
   }
 }
 
-const createComponentUrls = componentChunkName =>
-  window.___chunkMapping[componentChunkName].map(
+const createComponentUrls = componentChunkName => {
+  let componentUrls = window.___chunkMapping[componentChunkName].map(
     chunk => __PATH_PREFIX__ + chunk
   )
 
+  if (process.env.MODERN_BUILD) {
+    componentUrls = componentUrls.filter(resource => resource.endsWith(`.mjs`))
+  }
+
+  return componentUrls
+}
+
 export class ProdLoader extends BaseLoader {
   constructor(asyncRequires, matchPaths) {
     const loadComponent = chunkName =>