Use ComponentRenderer for both page/layout components (#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

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

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",

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

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` },
  })
  }
  },

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,
  })

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`)

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])
+ }
  })
  )
 }

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.

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"

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 {