Async onClientEntry

docs/docs/browser-support.md

@@ -0,0 +1,35 @@
+---
+title: Browser Support
+---
+
+Gatsby supports [the same browsers as the current stable version of React.js](https://facebook.github.io/react/docs/react-dom.html#browser-support) which is currently IE9+ as well as the most recent versions of other popular browsers.
+
+## Polyfills
+
+Gatsby uses the ES6 Promise API. As some older browsers don't support this, Gatsby includes by default a Promise polyfill. If you would like to provide your own promise implementation, you can set `polyfill` to `false` in your `gatsby-config.js`:
+
+```
+module.exports = {
+  polyfill: false,
+  // ...
+}
+```
+
+## Specify what browsers your project supports using "Browserslist"
+
+You may customize your list of supported browser versions by declaring a [`"browserslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via [`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
+
+This article is a good introduction to the growing community of tools around Browserslist — https://css-tricks.com/browserlist-good-idea/
+
+By default, Gatsby emulates the following config:
+
+ ```javascript
+// package.json
+{
+  "browserslist": [
+    "> 1%",
+    "IE >= 9",
+    "last 2 versions"
+  ]
+}
+```

examples/using-javascript-transforms/gatsby-node.js

@@ -26,7 +26,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators
 
   return new Promise((resolve, reject) => {
-
     const pages = []
     const markdownTemplate = path.resolve(`src/templates/markdown.js`)
 

examples/using-javascript-transforms/src/components/SiteLinks/index.js

@@ -19,7 +19,7 @@ class SiteLinks extends React.Component {
       <div className="blog-social">
         <ul>
           <li>
-            <a href={'mailto:' + siteMetadata.siteEmailUrl}>
+            <a href={`mailto:` + siteMetadata.siteEmailUrl}>
               <i className="fa fa-envelope-o" /> {siteMetadata.siteEmailPretty}
             </a>
           </li>

examples/using-javascript-transforms/src/components/SiteSidebar/index.js

@@ -4,10 +4,10 @@ import SiteNav from "../SiteNav"
 import SiteLinks from "../SiteLinks"
 
 class SiteSidebar extends React.Component {
-    render() {
-        const isHome = this.props.location.pathname === ('/');
-        const siteMetadata = this.props.siteMetadata;
-        // TODO, deal with image more nice like
+  render() {
+    const isHome = this.props.location.pathname === `/`
+    const siteMetadata = this.props.siteMetadata
+    // TODO, deal with image more nice like
 
     let header = (
       <div className="">

examples/using-javascript-transforms/src/layouts/blog-post.js

@@ -19,7 +19,7 @@ class BlogPostTemplate extends React.Component {
         </div>
       </div>
     )
-/*
+    /*
     if (frontmatter.updated === null) {
       var published = (
         <div className="date-published">
@@ -76,7 +76,8 @@ class BlogPostTemplate extends React.Component {
         */
     let published = <div className="date-published" />
 
-    return (<div>
+    return (
+      <div>
         {home}
         <div className="container">
           {this.props.children()}

examples/using-javascript-transforms/src/layouts/index.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import * as PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
-import '../static/css/base.scss';
+import React from "react"
+import * as PropTypes from "prop-types"
+import Helmet from "react-helmet"
+import "../static/css/base.scss"
 
 import InsetPage from "./inset-page"
 import BlogPost from "./blog-post"
@@ -12,20 +12,20 @@ class MasterLayout extends React.Component {
     let location = this.props.location.pathname
     let jimmyPage // you jimmy a lock until it opens, so same thing here ;)
 
-      // let dataSource = this.props.pageResources.json.data
-      // let nodeType = dataSource.jsFrontmatter || dataSource.markdownRemark
-      // let frontmatter = nodeType.data || nodeType.frontmatter
-      let passdown = {
-        // frontmatter: frontmatter,
-        location: this.props.location,
-        siteMetadata: siteMetadata,
-        children: this.props.children
-      }
-      if (location === `/` || location === `/contact`) {
-        jimmyPage = <InsetPage {...passdown} />
-      } else {
-        jimmyPage = <BlogPost {...passdown} />
-      }
+    // let dataSource = this.props.pageResources.json.data
+    // let nodeType = dataSource.jsFrontmatter || dataSource.markdownRemark
+    // let frontmatter = nodeType.data || nodeType.frontmatter
+    let passdown = {
+      // frontmatter: frontmatter,
+      location: this.props.location,
+      siteMetadata: siteMetadata,
+      children: this.props.children,
+    }
+    if (location === `/` || location === `/contact`) {
+      jimmyPage = <InsetPage {...passdown} />
+    } else {
+      jimmyPage = <BlogPost {...passdown} />
+    }
 
     return (
       <div className="MasterLayout">
@@ -44,7 +44,6 @@ class MasterLayout extends React.Component {
 
 export default MasterLayout
 
-
 export const pageQuery = graphql`
   query LayoutBySlug {
     allSite {

examples/using-javascript-transforms/src/mainPages/index.js

@@ -6,7 +6,6 @@ import moment from "moment"
 
 class SiteIndex extends React.Component {
   render() {
-
     const pageLinks = []
     let iteratorKey = 0
     let pageRaw = [

examples/using-javascript-transforms/src/templates/future-markdown.js

@@ -41,4 +41,4 @@ export const pageQuery = graphql`
     }
   }
 `
-*/
+*/

examples/using-javascript-transforms/src/templates/markdown.js

@@ -48,4 +48,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`

package.json

@@ -15,6 +15,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.24.1",
     "babel-runtime": "^6.23.0",
+    "core-js": "^2.5.0",
     "create-react-class": "^15.6.0",
     "cross-env": "^5.0.5",
     "eslint": "^4.2.0",

packages/gatsby/cache-dir/api-runner-browser.js

@@ -5,8 +5,7 @@
 //   require('/path/to/plugin2/gatsby-browser.js'),
 // ]
 
-module.exports = (api, args, defaultReturn) => {
-  // Run each plugin in series.
+export function apiRunner(api, args, defaultReturn) {
   let results = plugins.map(plugin => {
     if (plugin.plugin[api]) {
       const result = plugin.plugin[api](args, plugin.options)
@@ -25,3 +24,13 @@ module.exports = (api, args, defaultReturn) => {
     return []
   }
 }
+
+export function apiRunnerAsync(api, args, defaultReturn) {
+  return plugins.reduce(
+    (previous, next) => 
+      next.plugin[api] 
+        ? previous.then(() => next.plugin[api](args, next.options)) 
+        : previous,
+    Promise.resolve()
+  )
+}

packages/gatsby/cache-dir/app.js

@@ -1,69 +1,70 @@
-const apiRunner = require(`./api-runner-browser`)
-
+if (__POLYFILL__) {
+  require("core-js/modules/es6.promise")
+}
+import { apiRunner, apiRunnerAsync } from "./api-runner-browser"
 import React from "react"
 import ReactDOM from "react-dom"
 import { AppContainer as HotContainer } from "react-hot-loader"
 import domReady from "domready"
-
 import socketIo from "./socketIo"
 
 window.___emitter = require(`./emitter`)
 
 // Let the site/plugins run code very early.
-apiRunner(`onClientEntry`)
-
-// Hook up the client to socket.io on server
-socketIo()
+apiRunnerAsync(`onClientEntry`).then(() => {
+  // Hook up the client to socket.io on server
+  socketIo()
 
-/**
- * Service Workers are persistent by nature. They stick around,
- * serving a cached version of the site if they aren't removed.
- * This is especially frustrating when you need to test the
- * production build on your local machine.
- *
- * Let's unregister the service workers in development, and tidy up a few errors.
- */
-if (`serviceWorker` in navigator) {
-  navigator.serviceWorker.getRegistrations().then(registrations => {
-    for (let registration of registrations) {
-      registration.unregister()
-    }
-  })
-}
+  /**
+     * Service Workers are persistent by nature. They stick around,
+     * serving a cached version of the site if they aren't removed.
+     * This is especially frustrating when you need to test the
+     * production build on your local machine.
+     *
+     * Let's unregister the service workers in development, and tidy up a few errors.
+     */
+  if (`serviceWorker` in navigator) {
+    navigator.serviceWorker.getRegistrations().then(registrations => {
+      for (let registration of registrations) {
+        registration.unregister()
+      }
+    })
+  }
 
-const rootElement = document.getElementById(`___gatsby`)
+  const rootElement = document.getElementById(`___gatsby`)
 
-let Root = require(`./root`)
-if (Root.default) {
-  Root = Root.default
-}
+  let Root = require(`./root`)
+  if (Root.default) {
+    Root = Root.default
+  }
 
-domReady(() =>
-  ReactDOM.render(
-    <HotContainer>
-      <Root />
-    </HotContainer>,
-    rootElement,
-    () => {
-      apiRunner(`onInitialClientRender`)
-    }
-  )
-)
-
-if (module.hot) {
-  module.hot.accept(`./root`, () => {
-    let NextRoot = require(`./root`)
-    if (NextRoot.default) {
-      NextRoot = NextRoot.default
-    }
+  domReady(() =>
     ReactDOM.render(
       <HotContainer>
-        <NextRoot />
+        <Root />
       </HotContainer>,
       rootElement,
       () => {
         apiRunner(`onInitialClientRender`)
       }
     )
-  })
-}
+  )
+
+  if (module.hot) {
+    module.hot.accept(`./root`, () => {
+      let NextRoot = require(`./root`)
+      if (NextRoot.default) {
+        NextRoot = NextRoot.default
+      }
+      ReactDOM.render(
+        <HotContainer>
+          <NextRoot />
+        </HotContainer>,
+        rootElement,
+        () => {
+          apiRunner(`onInitialClientRender`)
+        }
+      )
+    })
+  }
+})