Use ComponentRenderer for both page/layout components (gatsbyjs#1773)

* Use ComponentRenderer for both page/layout components * Don't try to run queries if can't find a page/layout. This happens because dev-only pages (e.g. dev-404-page) can create page data dependencies which in a production build, Gatsby attempts to handle. * Fix query * Catch failures unlinking css bundle * Test using-contentful * Add (back?) babel-jest * Remove test code * format
kandyjam · Aug 11, 2017 · 709e39e · 709e39e
1 parent 5a2e035
commit 709e39e
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 76 deletions.
diff --git a/examples/using-contentful/src/pages/image-api.js b/examples/using-contentful/src/pages/image-api.js
@@ -17,9 +17,7 @@ export default props => {
         options
       </p>
       <h2>Resize</h2>
-      {assets.map(({ node: { title, resize } }) => {
-        console.log(title, resize)
-        return (
+      {assets.map(({ node: { title, resize } }) => (
           <img
             alt={title}
             src={resize.src}
@@ -31,8 +29,7 @@ export default props => {
               border: `1px solid tomato`,
             }}
           />
-        )
-      })}
+        ))}
       <h4>GraphQL query</h4>
       <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
         <code
@@ -70,9 +67,7 @@ export default props => {
       <p>
         You should prefer this operator over <code>resize</code>.
       </p>
-      {assets.map(({ node: { title, responsiveResolution } }) => {
-        console.log(title, responsiveResolution)
-        return (
+      {assets.map(({ node: { title, responsiveResolution } }) => (
           <img
             alt={title}
             src={responsiveResolution.src}
@@ -85,8 +80,7 @@ export default props => {
               border: `1px solid tomato`,
             }}
           />
-        )
-      })}
+        ))}
       <h4>GraphQL query</h4>
       <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
         <code
@@ -128,9 +122,7 @@ export default props => {
           resizing focus area
         </a>
       </p>
-      {assets.map(({ node: { title, resizing } }) => {
-        console.log(title, resizing)
-        return (
+      {assets.map(({ node: { title, resizing } }) => (
           <img
             alt={title}
             src={resizing.src}
@@ -143,8 +135,7 @@ export default props => {
               border: `1px solid tomato`,
             }}
           />
-        )
-      })}
+        ))}
       <h4>GraphQL query</h4>
       <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
         <code

diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
+    "babel-jest": "^20.0.3",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-transform-async-to-generator": "^6.24.1",

diff --git a/packages/gatsby/cache-dir/component-renderer.js b/packages/gatsby/cache-dir/component-renderer.js
@@ -1,7 +1,13 @@
 import React, { createElement } from "react"
+import PropTypes from "prop-types"
 import loader from "./loader"
 import emitter from "./emitter"
 
+const DefaultLayout = ({ children }) =>
+  <div>
+    {children()}
+  </div>
+
 // Pass pathname in as prop.
 // component will try fetching resources. If they exist,
 // will just render, else will render null.
@@ -75,16 +81,31 @@ class ComponentRenderer extends React.Component {
   }
 
   render() {
-    if (this.state.pageResources) {
-      return createElement(this.state.pageResources.component, {
-        key: this.props.location.pathname,
+    if (this.props.page) {
+      if (this.state.pageResources) {
+        return createElement(this.state.pageResources.component, {
+          key: this.props.location.pathname,
+          ...this.props,
+          ...this.state.pageResources.json,
+        })
+      } else {
+        return null
+      }
+    } else if (this.props.layout) {
+      return createElement(this.state.pageResources.layout || DefaultLayout, {
+        key: this.state.pageResources.layout,
         ...this.props,
-        ...this.state.pageResources.json,
       })
     } else {
       return null
     }
   }
 }
 
+ComponentRenderer.propTypes = {
+  page: PropTypes.bool,
+  layout: PropTypes.bool,
+  location: PropTypes.object,
+}
+
 export default ComponentRenderer
diff --git a/packages/gatsby/cache-dir/layout-renderer.js b/packages/gatsby/cache-dir/layout-renderer.js
diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js
@@ -17,7 +17,6 @@ window.___emitter = emitter
 
 import pages from "./pages.json"
 import ComponentRenderer from "./component-renderer"
-import LayoutRenderer from "./layout-renderer"
 import asyncRequires from "./async-requires"
 import loader from "./loader"
 loader.addPagesArray(pages)
@@ -124,18 +123,22 @@ loader.getResourcesForPathname(window.location.pathname, () => {
       createElement(
         ScrollContext,
         { shouldUpdateScroll },
-        createElement(withRouter(LayoutRenderer), {
+        createElement(withRouter(ComponentRenderer), {
+          layout: true,
           children: layoutProps =>
             createElement(Route, {
               render: routeProps => {
                 attachToHistory(routeProps.history)
                 const props = layoutProps ? layoutProps : routeProps
 
                 if (loader.getPage(props.location.pathname)) {
-                  return createElement(ComponentRenderer, { ...props })
+                  return createElement(ComponentRenderer, {
+                    page: true,
+                    ...props,
+                  })
                 } else {
                   return createElement(ComponentRenderer, {
-                    location: { pathname: `/404.html` },
+                    location: { page: true, pathname: `/404.html` },
                   })
                 }
               },

diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js
@@ -12,7 +12,6 @@ import apiRunner from "./api-runner-browser"
 import syncRequires from "./sync-requires"
 import pages from "./pages.json"
 import ComponentRenderer from "./component-renderer"
-import LayoutRenderer from "./layout-renderer"
 import loader from "./loader"
 loader.addPagesArray(pages)
 loader.addDevRequires(syncRequires)
@@ -101,7 +100,8 @@ const Root = () =>
     createElement(
       ScrollContext,
       { shouldUpdateScroll },
-      createElement(withRouter(LayoutRenderer), {
+      createElement(withRouter(ComponentRenderer), {
+        layout: true,
         children: layoutProps =>
           createElement(Route, {
             render: routeProps => {
@@ -112,6 +112,7 @@ const Root = () =>
               )
               if (pageResources) {
                 return createElement(ComponentRenderer, {
+                  page: true,
                   ...props,
                   pageResources,
                 })

diff --git a/packages/gatsby/src/bin/cli.js b/packages/gatsby/src/bin/cli.js
@@ -1,6 +1,6 @@
 // babel-preset-env doesn't find this import if you
 // use require() with backtick strings so use the es6 syntax
-import 'babel-polyfill'
+import "babel-polyfill"
 
 const program = require(`commander`)
 const packageJson = require(`../../package.json`)

diff --git a/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js b/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js
@@ -80,7 +80,9 @@ const runQueriesForIds = ids => {
       const pl = pagesAndLayouts.find(
         pl => pl.path === id || `LAYOUT___${pl.id}` === id
       )
-      return queryRunner(pl, state.components[pl.component])
+      if (pl) {
+        return queryRunner(pl, state.components[pl.component])
+      }
     })
   )
 }

diff --git a/packages/gatsby/src/utils/build-css.js b/packages/gatsby/src/utils/build-css.js
@@ -16,7 +16,11 @@ module.exports = async (program: any) => {
       }
 
       // We don't want any javascript produced by this step in the process.
-      fs.unlinkSync(`${directory}/public/bundle-for-css.js`)
+      try {
+        fs.unlinkSync(`${directory}/public/bundle-for-css.js`)
+      } catch (e) {
+        // ignore.
+      }
 
       // Ensure there's a styles.css file in public so tools that expect it
       // can find it.

diff --git a/www/package.json b/www/package.json
@@ -36,7 +36,7 @@
     "parse-filepath": "^1.0.1",
     "react-icons": "^2.2.3",
     "slash": "^1.0.0",
-    "typeface-space-mono": "^0.0.31",
+    "typeface-space-mono": "^0.0.35",
     "typeface-tex-gyre-schola": "^0.0.32",
     "typography-breakpoint-constants": "^0.15.10",
     "typography-plugin-code": "0.15.x"

diff --git a/www/src/pages/docs/ssr-apis.js b/www/src/pages/docs/ssr-apis.js
@@ -33,7 +33,7 @@ export default SSRAPIs
 export const pageQuery = graphql`
   query SSRAPIsQuery {
     allDocumentationJs(
-      filter: { id: { regex: "/src.*api-ssr-docs.js/" } }
+      filter: { id: { regex: "/api-ssr-docs.js/" } }
       sort: { fields: [name] }
     ) {
       edges {