Merge branch 'v2' into nihgwu-neo/fix-build

* v2:
  [v2] compile cache dir (#5637)
  [v2][gatsby-image][source-contentful] Fix sizes fields that were changed to fluid by mistake (#5714)
  [gatsby] added TypeScript typings for StaticQuery component (#5666)
  [v2] Migration guide updates (#5661)

packages/gatsby-image/src/index.js

@@ -92,15 +92,15 @@ const noscriptImg = props => {
   // HTML validation issues caused by empty values like width="" and height=""
   const src = props.src ? `src="${props.src}" ` : `src="" ` // required attribute
   const srcSet = props.srcSet ? `srcset="${props.srcSet}" ` : ``
-  const fluid = props.fluid ? `fluid="${props.fluid}" ` : ``
+  const sizes = props.sizes ? `sizes="${props.sizes}" ` : ``
   const title = props.title ? `title="${props.title}" ` : ``
   const alt = props.alt ? `alt="${props.alt}" ` : `alt="" ` // required attribute
   const width = props.width ? `width="${props.width}" ` : ``
   const height = props.height ? `height="${props.height}" ` : ``
   const opacity = props.opacity ? props.opacity : `1`
   const transitionDelay = props.transitionDelay ? props.transitionDelay : `0.5s`
 
-  return `<img ${width}${height}${src}${srcSet}${alt}${title}${fluid}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/>`
+  return `<img ${width}${height}${src}${srcSet}${alt}${title}${sizes}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/>`
 }
 
 const Img = props => {
@@ -289,7 +289,7 @@ class Image extends React.Component {
                 title={title}
                 srcSet={image.srcSet}
                 src={image.src}
-                fluid={image.fluid}
+                sizes={image.sizes}
                 style={imageStyle}
                 onLoad={() => {
                   this.state.IOSupported && this.setState({ imgLoaded: true })

packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap

@@ -36,7 +36,7 @@ exports[`contentful extend node type resolveFluid generates fluid sizes data for
 Object {
   "aspectRatio": 1.1278195488721805,
   "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
-  "fluid": "(max-width: 450px) 100vw, 450px",
+  "sizes": "(max-width: 450px) 100vw, 450px",
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000",
   "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=113&h=100&q=50&bg=rgb%3A000000 113w,
 //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=225&h=200&q=50&bg=rgb%3A000000 225w,
@@ -52,7 +52,7 @@ exports[`contentful extend node type resolveFluid generates responsive size data
 Object {
   "aspectRatio": 0.75,
   "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
-  "fluid": "(max-width: 400px) 100vw, 400px",
+  "sizes": "(max-width: 400px) 100vw, 400px",
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
   "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=100&h=133 100w,
 //images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=200&h=267 200w,

packages/gatsby-source-contentful/src/extend-node-type.js

@@ -224,7 +224,7 @@ const resolveFluid = (image, options) => {
       height: options.maxHeight,
     }),
     srcSet,
-    fluid: options.sizes,
+    sizes: options.sizes,
   }
 }
 exports.resolveFluid = resolveFluid

packages/gatsby/.gitignore

@@ -28,3 +28,4 @@ node_modules
 
 decls
 dist
+cache-dir

packages/gatsby/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+interface StaticQueryRenderProps {
+  data: any
+}
+
+type RenderCallback = (props: StaticQueryRenderProps) => JSX.Element
+
+export interface StaticQueryProps {
+  query: any
+  render: RenderCallback
+}
+
+export class StaticQuery extends React.Component<Partial<StaticQueryProps>> {}

packages/gatsby/package.json

@@ -139,6 +139,7 @@
     "cross-env": "^5.1.4",
     "jest": "^22.4.3",
     "lerna": "^2.9.0",
+    "npm-run-all": "4.1.2",
     "nyc": "^7.0.0",
     "rimraf": "^2.6.1"
   },
@@ -147,8 +148,10 @@
   },
   "files": [
     "./cache-dir",
-    "./dist"
+    "./dist",
+    "./index.d.ts"
   ],
+  "types": "index.d.ts",
   "homepage": "https://github.com/gatsbyjs/gatsby#readme",
   "keywords": [
     "blog",
@@ -173,13 +176,16 @@
     "graphql": "^0.13.2"
   },
   "scripts": {
-    "build": "rimraf dist && npm run build:src && npm run build:internal-plugins && npm run build:rawfiles",
+    "build": "rimraf dist && rimraf cache-dir && npm-run-all -p build:*",
+    "build:cache-dir": "babel src/cache-dir --out-dir cache-dir",
     "build:internal-plugins": "copyfiles -u 1 src/internal-plugins/**/package.json dist",
     "build:rawfiles": "copyfiles -u 1 src/internal-plugins/**/raw_* dist",
-    "build:src": "babel src --out-dir dist --source-maps --ignore **/gatsby-cli.js,**/raw_*,**/__tests__",
+    "build:src": "babel src --out-dir dist --source-maps --ignore **/gatsby-cli.js,**/raw_*,**/__tests__,**/cache-dir",
     "clean-test-bundles": "find test/ -type f -name bundle.js* -exec rm -rf {} +",
     "prepublish": "cross-env NODE_ENV=production npm run build",
     "test-coverage": "node_modules/.bin/nyc --reporter=lcov --reporter=text npm test",
-    "watch": "rimraf dist && mkdir dist && npm run build:internal-plugins && npm run build:rawfiles && npm run build:src -- --watch"
+    "watch": "rimraf dist && rimraf cache-dir && mkdir dist && npm run build:internal-plugins && npm run build:rawfiles && npm-run-all -p watch:*",
+    "watch:cache-dir": "npm run build:cache-dir -- --watch",
+    "watch:src": "npm run build:src -- --watch"
   }
 }

packages/gatsby/src/cache-dir/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["../../../../.babel-preset.js", { "browser": true }]
+  ]
+}
+

packages/gatsby/src/cache-dir/__tests__/prefetcher.js

@@ -3,7 +3,7 @@ let fetchNextResource
 let fetches
 
 const getDeferred = (result) => {
-  let resolve;
+  let resolve
   let promise = new Promise(r => {
     resolve = () => r(result)
   })

packages/gatsby/src/cache-dir/develop-static-entry.js

@@ -16,7 +16,7 @@ let Html
 try {
   Html = require(`../src/html`)
 } catch (err) {
-  if (testRequireError(`..\/src\/html`, err)) {
+  if (testRequireError(`../src/html`, err)) {
     Html = require(`./default-html`)
   } else {
     console.log(`There was an error requiring "src/html.js"\n\n`, err, `\n\n`)

packages/gatsby/src/cache-dir/gatsby-browser-entry.js

@@ -1,19 +1,25 @@
 import React from "react"
+import PropTypes from "prop-types"
 import Link, { withPrefix, navigateTo } from "gatsby-link"
 import pages from "./pages.json"
 import loader from "./loader"
 import JSONStore from "./json-store"
 
 const PageRenderer = ({ location }) => {
   const pageResources = loader.getResourcesForPathname(location.pathname)
-  const isPage = !!(pageResources && pageResources.component)
   return React.createElement(JSONStore, {
     pages,
     location,
     pageResources,
   })
 }
 
+PageRenderer.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired,
+  }).isRequired,
+}
+
 const StaticQueryContext = React.createContext({})
 
 const StaticQuery = props => (
@@ -33,6 +39,12 @@ const StaticQuery = props => (
   </StaticQueryContext.Consumer>
 )
 
+StaticQuery.propTypes = {
+  data: PropTypes.object,
+  query: PropTypes.string.isRequired,
+  render: PropTypes.func.isRequired,
+}
+
 export {
   Link,
   withPrefix,

packages/gatsby/src/cache-dir/json-store.js

@@ -4,12 +4,7 @@ import PageRenderer from "./page-renderer"
 import { StaticQueryContext } from "gatsby"
 import socketIo, { getStaticQueryData, getPageQueryData } from "./socketIo"
 
-const getPathFromProps = props =>
-  props.pageResources
-    ? props.pageResources.page
-      ? props.pageResources.page.path
-      : undefined
-    : undefined
+const getPathFromProps = props => props.pageResources?.page?.path
 
 class JSONStore extends React.Component {
   constructor(props) {
@@ -47,10 +42,9 @@ class JSONStore extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
     const { path } = this.state
-    const newPath = getPathFromProps(nextProps)
-
+    const newPath = getPathFromProps(this.props)
     if (path !== newPath) {
       this.unregisterPath(path)
       this.registerPath(newPath)
@@ -72,7 +66,7 @@ class JSONStore extends React.Component {
   }
 
   render() {
-    const data = this.state.pageQueryData[this.state.path]
+    const data = this.state.pageQueryData[getPathFromProps(this.props)]
     // eslint-disable-next-line
     const { pages, ...propsWithoutPages } = this.props
     if (!data) {

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

@@ -150,19 +150,12 @@ export default (pagePath, callback) => {
   }
 
   // Create paths to scripts
-  let runtimeScript
   const scriptsAndStyles = flatten(
     [`app`, page.componentChunkName].map(s => {
       const fetchKey = `assetsByChunkName[${s}]`
 
       let chunks = get(stats, fetchKey)
 
-      // Remove the runtime as we always inline that instead
-      // of loading it.
-      if (s === `app`) {
-        runtimeScript = chunks[0]
-      }
-
       if (!chunks) {
         return null
       }
@@ -192,11 +185,6 @@ export default (pagePath, callback) => {
     pathPrefix,
   })
 
-  const runtimeRaw = fs.readFileSync(
-    join(process.cwd(), `public`, runtimeScript),
-    `utf-8`
-  )
-
   scripts
     .slice(0)
     .reverse()