Smarter faster data processing (oh and data hot reloading!)

Gatsby v1's data layer is starting to feel quite solid.

For this latest alpha, I did a almost complete refactor of the data layer adding in Redux and ideas from event sourcing and modern build tools like Buck and Bazel from Facebook and Google respectively.

Now all data processing is incremental and completely cached. On booting, Gatsby looks at your data contents to decide if new processing is needed and only processes data that's actually changed. One large site built on 1.0 saw it's bootstrap time drop from nearly a minute to under 5 seconds!

And as part of this work, Gatsby's data system now automatically watches all your data sources for changes and reprocesses data on the fly. Remote or local data, if you change it, the change will be automatically pushed to the development version of your site. This is handy for editing a local markdown file but also a gatsby plugin can be monitoring a remote API for changes and automatically pull down data and update your site when something is updated.

Imagine a small team working on a site with a developer and two people working on content hosted on a CMS. Every time content is updated, the developer sees the changes in near real-time on the development site.

This was the last big piece blocking 1.0.0 from being released. There are a number of smaller tasks to complete but these should be more predictable in scope. There's plenty of smaller tasks to do! Please come help out!

Breaking changes

• All site source code is moved under a /src subdirectory #802
• Rename parse plugins to transformer #818

Add support to JS frontmatter for named exports

@NMinhNguyen added this very nice PR adding support for named exports to JS frontmatter #838

So this is now supported:

export const data = {
  titles: ['My title', 'My other title'],
}

Fix sourcemaps, templating logic, and updates for React 0.15.5

• @0x80 noticed that source maps weren't working in Chrome in development and asked about it. That, combined with a serendipitous tweet by @gaearon, led to #812 where we swapped out using the eval source-maps technique for cheap-module-source-maps.
• @donysukardi got us React 16 ready by removing our uses of React.createClass and the built-in proptypes #809
• @danperkins fixed a logic bug in our router generation where nested templates weren't being tied to their parent templates correctly #808
• @KyleAMathews replaced the old default starter with a much simpler one to make it simpler to understand Gatsby when new plus easier to use the starter as a base for building new sites #806

Use the default PostCSS browserlist config for autoprefixing

@kennethormandy fixed a problem with our PostCSS webpack config where because of how it was setup, you couldn't override the browserlist using a custom .browserslist file in your site. And by removing our custom option, we can now rely on the PostCSS default browserlist which is preferable as Gatsby doesn't have unique needs here so better to rely on the community maintaining a standard than us. #787

Use Yarn by default and add support for array values in JS frontmatter

Our 40th patch release on the 0.12 minor series! Woot!

Two nice feature additions from two new Gatsby contributors.

• @donysukardi added support for using Yarn over NPM when creating a new Gatsby site using gatsby new #782
• @Tom-Bonnike extended our JavaScript frontmatter code to support array values. #784 So now the parsing code can extract values in this form:

exports.data = {
  titles: ['My title', 'My other title'],
}

Do shallow clone when creating new Gatsby sites

• @ahonn noticed we were doing a full clone of Gatsby starters when running gatsby new which is wasteful as we just throw away the git repo. So in #730 he fixed that to just do a shallow clone.
• @dbismut fixed the default markdown loader to add in a site's prefix/basename to links within markdown. #710

Correct wording to 'listening'

@lb- corrected a miswording in a terminal warning in #702 thanks!

Add gatsby-ssr.js for lifecycle APIs during server rendering

• #695 @mtt87 needed to support rendering translations correctly for his site during the static HTML build so added support for SSR APIs through a new gatsby-ssr.js file which can be added to your site similar to gatsby-browser.js and gatsby-node.js. He added a wrapRootComponent API similar to what was recently added to the browser but the method is now available if we need to add additional SSR APIs.
• @mjesuele added support for extracting data from JS frontmatter when using template literal strings in additional to normal strings in #656

Thanks everyone!

Reduce client bundle size

@omaksi noticed that in a couple internal client modules we were importing the entire Lodash utility module. He replaced those with individual imports. Thanks!

66d7bf5

More browser lifecycle APIs: wrapRootComponent and replaceDOMRenderer

This past week or two has seen a flood of new browser lifecycle APIs :-) which I guess means some people are building some interesting Gatsby sites!

In the latest @iansu added in #666 two ways of modifying the “Root” Gatsby React component. A low-level API replaceDOMRenderer and high-level one wrapRootComponent.

The high-level API is if you want to simply wrap the root component e.g. to add Redux or Mobx to a Gatsby site.

// in your gatsby-browser.js

import { Provider } from 'react-redux'
import store from './store'

// This gets returned to Gatsby which then renders the Root component as normal.
exports.wrapRootComponent = Root => {
  return () => (
    <Provider store={store}>
      <Root />
    </Provider>
  );
};

The low-level API is for completely replacing the DOM rendering e.g. if you want to override the default React Router setup.

// in your gatsby-browser.js
import { applyRouterMiddleware, hashHistory, Router } from 'react-router'

// Change the router to use hashHistory instead of browserHistory
exports.replaceDOMRenderer = ({ routes, defaultShouldUpdateScroll, onUpdate }) => (
    ReactDOM.render(
      <Router
        history={hashHistory}
        routes={routes}
        render={applyRouterMiddleware(useScroll(defaultShouldUpdateScroll))}
        onUpdate={onUpdate}
      />,
      typeof window !== 'undefined' ? document.getElementById('react-mount') : void 0)
)

In the land of bug fixes, @4rkanoid noticed that Gatsby wasn't handling correctly custom site .babelrc files that had presets in their array form. #668

Thanks all for your great PRs!