[1.0] Small fixes for beta.4 (#1246)

* Always round contentful image fields

* Convert default HTML component to class

* Fix getting lastFetched status in source-drupal

Author: KyleAMathews

examples/using-contentful/src/pages/image-api.js

@@ -8,7 +8,7 @@ export default props => {
     <div>
       <h1>Image API examples</h1>
       <p>
-        Gatsby offers rich integration with{" "}
+        Gatsby offers rich integration with{` `}
         <a href="https://www.contentful.com/developers/docs/references/images-api/">
           Contentful's Image API
         </a>
@@ -113,16 +113,16 @@ export default props => {
 
       <h2>Resizing</h2>
       <p>
-        On both resize and responsiveResolution you can also add a{" "}
-        <code>height</code>{" "}
+        On both resize and responsiveResolution you can also add a{` `}
+        <code>height</code>{` `}
         argument to the GraphQL argument to crop the image to a certain size.
       </p>
       <p>
-        You can also set the{" "}
+        You can also set the{` `}
         <a href="https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/change-the-resizing-behavior">
           resizing behavior
-        </a>{" "}
-        and{" "}
+        </a>{` `}
+        and{` `}
         <a href="https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/specify-focus-area-for-resizing">
           resizing focus area
         </a>
@@ -180,8 +180,7 @@ export default props => {
         a <code>maxWidth</code>, the max width the container of the images
         reaches.
       </p>
-      {assets.map(({ node: { title, responsiveSizes } }) => {
-        return (
+      {assets.map(({ node: { title, responsiveSizes } }) => (
           <img
             alt={title}
             src={responsiveSizes.src}
@@ -193,8 +192,7 @@ export default props => {
               border: `1px solid tomato`,
             }}
           />
-        )
-      })}
+        ))}
       <h4>GraphQL query</h4>
       <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
         <code

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

@@ -6,9 +6,9 @@ exports[`contentful extend node type createUrl ignores options it doesn't unders
 
 exports[`contentful extend node type resolveResize generates resized images 1`] = `
 Object {
-  "aspectRatio": 0.75,
+  "aspectRatio": 0.7499625018749062,
   "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
-  "height": 533.3333333333334,
+  "height": 533,
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
   "width": 400,
 }
@@ -26,7 +26,7 @@ Object {
 
 exports[`contentful extend node type resolveResponsiveResolution generates responsive resolution data for images 1`] = `
 Object {
-  "aspectRatio": 0.75,
+  "aspectRatio": 0.7499625018749062,
   "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
   "height": 533,
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
@@ -54,7 +54,7 @@ Object {
 
 exports[`contentful extend node type resolveResponsiveSizes generates responsive size data for images 1`] = `
 Object {
-  "aspectRatio": 0.75,
+  "aspectRatio": 0.7499625018749062,
   "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
   "sizes": "(max-width: 400px) 100vw, 400px",
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
@@ -70,7 +70,7 @@ Object {
 
 exports[`contentful extend node type resolveResponsiveSizes generates responsive sizes data for images using all options 1`] = `
 Object {
-  "aspectRatio": 0.75,
+  "aspectRatio": 0.7499625018749062,
   "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
   "sizes": "(max-width: 450px) 100vw, 450px",
   "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50",

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

@@ -28,7 +28,7 @@ describe(`contentful extend node type`, () => {
         size: 28435,
         image: {
           width: `4500`,
-          height: `6000`,
+          height: `6000.3`,
         },
       },
     },
@@ -63,6 +63,14 @@ describe(`contentful extend node type`, () => {
       expect(resp.width).toBe(450)
       expect(resp.height).toBe(399)
     })
+    it(`Always outputs ints`, async () => {
+      const resp = await resolveResponsiveResolution(image, {
+        width: 450.1,
+        height: 399.1,
+      })
+      expect(resp.width).toBe(450)
+      expect(resp.height).toBe(399)
+    })
   })
   describe(`resolveResponsiveSizes`, () => {
     it(`generates responsive size data for images`, async () => {

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

@@ -185,14 +185,14 @@ const resolveResponsiveResolution = (image, options) => {
         if (options.height) {
           pickedHeight = options.height
         } else {
-          pickedHeight = Math.round(options.width / desiredAspectRatio)
+          pickedHeight = options.width / desiredAspectRatio
         }
 
         return resolve({
           base64: base64Str,
           aspectRatio: aspectRatio,
-          width: options.width,
-          height: pickedHeight,
+          width: Math.round(options.width),
+          height: Math.round(pickedHeight),
           src: createUrl(image.file.url, {
             ...options,
             width: options.width,
@@ -299,8 +299,8 @@ const resolveResize = (image, options) =>
           }
           resolve({
             src: createUrl(image.file.url, options),
-            width: pickedWidth,
-            height: pickedHeight,
+            width: Math.round(pickedWidth),
+            height: Math.round(pickedHeight),
             aspectRatio,
             base64: base64Str,
           })

packages/gatsby-source-drupal/src/gatsby-node.js

@@ -44,7 +44,7 @@ exports.sourceNodes = async (
     store.getState().status.plugins &&
     store.getState().status.plugins[`gatsby-source-drupal`]
   ) {
-    lastFetched = store.getState().status.plugins[`gatsby-source-drupal`]
+    lastFetched = store.getState().status.plugins[`gatsby-source-drupal`].status
       .lastFetched
   }
 

packages/gatsby/src/cache-dir/default-html.js

@@ -9,7 +9,7 @@ if (process.env.NODE_ENV === `production`) {
   }
 }
 
-module.exports = React.createClass({
+module.exports = class HTML extends React.Component {
   render() {
     let css
     if (process.env.NODE_ENV === `production`) {
@@ -36,12 +36,13 @@ module.exports = React.createClass({
         <body>
           {this.props.preBodyComponents}
           <div
+            key={`body`}
             id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
         </body>
       </html>
     )
-  },
-})
+  }
+}

packages/gatsby/src/utils/webpack.config.js

@@ -6,11 +6,10 @@ import Config from "webpack-configurator"
 import ExtractTextPlugin from "extract-text-webpack-plugin"
 import StaticSiteGeneratorPlugin from "static-site-generator-webpack-plugin"
 import { StatsWriterPlugin } from "webpack-stats-plugin"
-import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
+import FriendlyErrorsWebpackPlugin from "friendly-errors-webpack-plugin"
 
 // This isn't working right it seems.
 // import WebpackStableModuleIdAndHash from 'webpack-stable-module-id-and-hash'
-
 import webpackModifyValidate from "./webpack-modify-validate"
 
 const { store } = require(`../redux`)
@@ -141,10 +140,10 @@ module.exports = async (
             compilationSuccessInfo: {
               messages: [
                 `Your site is running at http://localhost:${program.port}`,
-                `Your graphql debugger is running at http://localhost:${program.port}/___graphql`
-              ]
-            }
-          })
+                `Your graphql debugger is running at http://localhost:${program.port}/___graphql`,
+              ],
+            },
+          }),
         ]
       case `build-css`:
         return [