gatsby

@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. https://github.com/gatsbyjs/gatsby/pull/787

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 https://github.com/gatsbyjs/gatsby/pull/782
• @Tom-Bonnike extended our JavaScript frontmatter code to support array values. https://github.com/gatsbyjs/gatsby/pull/784 So now the parsing code can extract values in this form:

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

• @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

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

• #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!

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

https://github.com/gatsbyjs/gatsby/commit/66d7bf51e20f5ebcdfeb95c10e857282cd78512f

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 https://github.com/gatsbyjs/gatsby/pull/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. https://github.com/gatsbyjs/gatsby/pull/668

Thanks all for your great PRs!

On old skool web sites, browsers maintain your scroll position for you as you navigate between pages and back. So if you scroll down on a page, click to another link, and then click back — your scroll position on the original page will be set to where you were before clicking away.

But as Gatsby turns your website into a single-page-app, this default browser handling of scroll position has to be emulated. For that we use @taion's great library https://github.com/taion/react-router-scroll

In Gatsby's web-entry.js file where React Router is setup and we do React's rendering to DOM, we have a function which determines whether or not to use the remembered scroll position. For the vast majority of websites, the behavior specified there is correct but occasionally you'll be building something special and will want to use different logic.

To enable customizing scroll behavior, @Rusta, in #663, added a new lifecycle API for overriding the default scroll behavior.

Thanks @Rusta!

@scottyeck and @stevensurgnier have been working on a way to add client-side redirects and remove trailing slashes from routes and towards that aim added a new browser lifecycle API modifyRoutes in #657

Some examples they came up with.

Add redirects:

exports.modifyRoutes = routes => {
    const redirects = [
        {
            path: '/cat',
            onEnter: (nextState, replace) => replace('/dog?utm_campaign=cat')
        }
    ];
    const childRoutesLength = routes.childRoutes.length;
    const childRoutesButLast = routes.childRoutes.slice(0, childRoutesLength - 1);
    const childRoutesLast = routes.childRoutes[childRoutesLength - 1];
    routes.childRoutes = childRoutesButLast.concat(redirects).concat([childRoutesLast]);
    return routes;
};

Remove trailing slashes:

exports.modifyRoutes = routes => {
    routes.childRoutes.forEach(route => route.path = route.path.replace(/\/$/, ''));
    return routes;
};

• @antoniocapelo noticed that while our README promised you could override plugins like you can override loaders... we hadn't defined core plugins with webpack-configurator (the lib that makes it easy to override Gatsby's webpack config in userspace) and then submitted a PR to fix this! Thanks! https://github.com/gatsbyjs/gatsby/pull/626
• @jbolda added postcss to the loader stack for Sass/Less so they can take advantage of the prefixing built in to our postcss config. https://github.com/gatsbyjs/gatsby/pull/628/files

@mkdong becomes our 100th contributor in https://github.com/gatsbyjs/gatsby/pull/612 where he added support for additional markdown extensions (e.g. mdwn).

Thanks Mingkai and our 99 other contributors!

@jbolda fixed the 2nd issue ever filed for Gatsby! Supporting "frontmatter" in javascript files. This should still be considered experimental but you can now export an object from your JS pages and that data will be available in your templates, other pages, etc.

I added a quick example of how this works on the starter blog

• http://gatsbyjs.github.io/gatsby-starter-blog/2016-12-9-react-component-post/
• https://github.com/gatsbyjs/gatsby-starter-blog/commit/e333cb1aadbba2d5053a3b471fa841b29b3187c2

Note that this initial release is still fairly limited at the moment. This only works in js/jsx files and you must export your data using commonjs (e.g. exports.data = {}). Also we only parse data layer one level deep so

this works:

exports.data = {
  title: "My sweet title",
}

this still does not work:

exports.data = {
  title: "My sweet title",
  goingDeeper: {
    word: "to your mother",
  }
}

PRs welcome to make this work on es6 exports (export const data) as well as for subobjects!

@rothfels added Typescript support! #578

To give it a go, checkout his starter project at https://github.com/rothfels/gatsby-starter-typescript.

Recently launched sites

• http://www.damianmullins.com
• https://angulartoreact.com
• https://www.spencerdixon.com/

• We tell people Gatsby sites work w/o Javascript and then people fire up a development server w/o javascript... and see a blank screen. The development server actually does need javascript to power hot-reloading, etc. @nason add a default <noscript /> message for people who've turned off Javascript to tell them what's happening and how to test their site w/ no javascript (gatsby build; gatsby serve-build) https://github.com/gatsbyjs/gatsby/pull/566
• @vinnymac borrowed a nice recent addition to create-react-app where they're not just telling you that your desired port is taken but also which process is (probably) using it https://github.com/gatsbyjs/gatsby/pull/579
  ~
• @briancappello added support for the .yml file extension (a less common variant file extension for YAML files). https://github.com/gatsbyjs/gatsby/pull/580

Thanks everyone!

Added

• Did the intitial build of the new gatsbyjs.org! It's in the www
  subdirectory on the 1.0 branch and is built on each push! That's my
  kind of integration testing 😎 You can see the early version of the
  site at https://gatsbyjs.netlify.com/.
• Added <link preload> for page JS bundles. This speeds up loading scripts
  slightly by telling the browser to start downloading the scripts when
  the HTML first starts being parsed instead of when the browser reaches
  the end. This is especially helpful for large HTML documents on slow
  mobile networks. PR

Changed

• Use namedmodulesplugin instead of recordsPath for ensuring
  deterministic builds and long-term cachability. The previous PR adding
  support for recordsPath
  proved unpleasant as you had to build locally and commit the outputted
  records.json which was confusing and annoying.
  PR
• Replaced the scripts prop that was passed into the body with a postBodyComponents prop that mirrors the headerComponents prop. This is more flexible as it'll let sites/plugins to do things like pass in analytics snippets, etc. easily.

Added

• Put the routes module on window to support experimental idea. See
  this issue for more](https://github.com/gatsbyjs/gatsby/issues/537).
  commit

Changed

• Removed the package sharp as it's not used and is preventing Gatsby
  1.0 from being installed on Windows.
  commit

Prepping to launch first big website on Gatsby 1.0.0! Knocking out some remaining bugs.

Added

• Extension API swOnUpdated for when a service worker finishes
  updating. Use this to alert users of your app to reload to see the
  latest version.
  commit

Fixed

• hot reloading now fully works. Apparently you can't use function
  components for top-level routes on react-router with react-hot-loader
  3.0 ¯\_(ツ)_/¯ #532 and
  commit
• Webpack needs the help of an obscure setting recordsPath to preserve
  module ids across builds. Big thanks to @NekR, @bebraw, and @TheLarkInn for helping me with this. Previous to this change, loading changed JS chunks could cause a JS
  error as the module ids the new chunk expects wouldn't match the module
  ids from the older chunks.
  #533

Changed

• Disabled hard-source-webpack-plugin. It speeds up builds significantly
  but has been causing hard-to-debug errors while developing. We'll
  circle back to it down the road.
  commit
• Restored using ChunkManifestPlugin. It was disabled while trying to
  debug the mismatched module id bug but that being fixed, we're using
  it again.
  commit
• Name modules ids in development for easier debugging. Primary benefit
  is you can see which modules are getting hot reloaded.
  commit

Fixed

• Removed entries from the webpack config looking for
  node_modules/gatsby/node_modules. This was added to help when
  developing Gatsby using npm link but when Gatsby is installed
  regularly, it then fails the Webpack validation as
  node_modules/gatsby/node_modules doesn't now exist.

Added

• extension API for adding types to the GraphQL schema
  commit

Fixed

• Use babel-traverse instead of using babel-plugin so that don't say
  done early when running graphql queries that have async resolvers
  commit

Some nice bug fixes of some long-standing annoyances by @mojodna and @TheAncientGoat

• @mojodna finally got Webpack's publicPath working across all the build steps and adds the linkPrefix as needed #502. Fixed #392 and #473
• @TheAncientGoat noticed that Firebase was failing during a server render and traced it to Firebase (and certain other isomorphic packages) using different packages on the server and in the browser and fixed the Webpack config for this in #512
• @kyleamathews back-ported some Webpack config from his 1.0 work to add file/url loader support for more file types.