From 7ef3fe6999d7ab0ac04a0fbb23cca3a2cc68097f Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Sat, 5 Aug 2017 20:47:08 -0500 Subject: [PATCH 01/15] Here's what I'm thinking... --- packages/gatsby/src/cache-dir/app.js | 100 ++++++++++++++------------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js index 4c4c7ebea1c99..8cc1c5d0f798f 100644 --- a/packages/gatsby/src/cache-dir/app.js +++ b/packages/gatsby/src/cache-dir/app.js @@ -1,65 +1,69 @@ -const apiRunner = require(`./api-runner-browser`) - import React from "react" import ReactDOM from "react-dom" import { AppContainer as HotContainer } from "react-hot-loader" import socketIo from "./socketIo" +import apiRunner from "./api-runner-browser" +import emitter from "./emitter" +import Root from "./root" -window.___emitter = require(`./emitter`) -// Let the site/plugins run code very early. -apiRunner(`onClientEntry`) +// Troubles with this import in the past? +if (Root.default) { + Root = Root.default +} -// Hook up the client to socket.io on server -socketIo() +window.___emitter = emitter -/** - * 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() - } - }) -} +Promise + .all(apiRunner(`onClientEntry`)) + .then(() => { -const rootElement = document.getElementById(`___gatsby`) + const rootElement = document.getElementById(`___gatsby`) -let Root = require(`./root`) -if (Root.default) { - Root = Root.default -} + socketIo() -ReactDOM.render( - - - , - rootElement, - () => { - apiRunner(`onInitialClientRender`) - } -) + /** + * 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) { -if (module.hot) { - module.hot.accept(`./root`, () => { - let NextRoot = require(`./root`) - if (NextRoot.default) { - NextRoot = NextRoot.default + navigator.serviceWorker.getRegistrations().then(registrations => { + + for (let registration of registrations) { + + registration.unregister() + } + }) } + ReactDOM.render( - - - , + , rootElement, - () => { - apiRunner(`onInitialClientRender`) - } + () => apiRunner(`onInitialClientRender`) ) + + if (module.hot) { + + module.hot.accept(`./root`, () => { + + let NextRoot = require(`./root`) + + if (NextRoot.default) { + + NextRoot = NextRoot.default + } + ReactDOM.render( + + + , + rootElement, + () => apiRunner(`onInitialClientRender`) + ) + }) + } }) -} From a90730454c6e86f460e4e57d0402e06192cb755c Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Sun, 6 Aug 2017 09:58:01 -0500 Subject: [PATCH 02/15] Didn't realize this ran the root element plugin! --- packages/gatsby/src/cache-dir/app.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js index 8cc1c5d0f798f..6c19b144b454c 100644 --- a/packages/gatsby/src/cache-dir/app.js +++ b/packages/gatsby/src/cache-dir/app.js @@ -4,14 +4,8 @@ import { AppContainer as HotContainer } from "react-hot-loader" import socketIo from "./socketIo" import apiRunner from "./api-runner-browser" import emitter from "./emitter" -import Root from "./root" -// Troubles with this import in the past? -if (Root.default) { - Root = Root.default -} - window.___emitter = emitter Promise @@ -20,6 +14,12 @@ Promise const rootElement = document.getElementById(`___gatsby`) + // Troubles with this import in the past? + let Root = require("./root"); + if (Root.default) { + Root = Root.default + } + socketIo() /** @@ -57,10 +57,9 @@ Promise NextRoot = NextRoot.default } + ReactDOM.render( - - - , + , rootElement, () => apiRunner(`onInitialClientRender`) ) From fdc530957bd7d101e50d671e883a614abcdc2538 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Sun, 6 Aug 2017 17:46:49 -0500 Subject: [PATCH 03/15] Perform similar bootstrap for production apps. --- .gitignore | 2 + .../src/cache-dir/api-runner-browser.js | 1 - packages/gatsby/src/cache-dir/app.js | 4 +- .../gatsby/src/cache-dir/production-app.js | 229 +++++++++--------- 4 files changed, 120 insertions(+), 116 deletions(-) diff --git a/.gitignore b/.gitignore index 631126b45fa73..da067e5f890d4 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,5 @@ node_modules/ .vscode/ yarn.lock package-lock.json + +__tests__ \ No newline at end of file diff --git a/packages/gatsby/src/cache-dir/api-runner-browser.js b/packages/gatsby/src/cache-dir/api-runner-browser.js index 6f9f478f800a6..f3d5cb9b5bace 100644 --- a/packages/gatsby/src/cache-dir/api-runner-browser.js +++ b/packages/gatsby/src/cache-dir/api-runner-browser.js @@ -6,7 +6,6 @@ // ] module.exports = (api, args, defaultReturn) => { - // Run each plugin in series. let results = plugins.map(plugin => { if (plugin.plugin[api]) { const result = plugin.plugin[api](args, plugin.options) diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js index 6c19b144b454c..5fd6a8f251bbb 100644 --- a/packages/gatsby/src/cache-dir/app.js +++ b/packages/gatsby/src/cache-dir/app.js @@ -10,12 +10,13 @@ window.___emitter = emitter Promise .all(apiRunner(`onClientEntry`)) + .catch((error) => { throw error }) .then(() => { const rootElement = document.getElementById(`___gatsby`) // Troubles with this import in the past? - let Root = require("./root"); + let Root = require("./root") if (Root.default) { Root = Root.default } @@ -66,3 +67,4 @@ Promise }) } }) + .catch((error) => { throw error }) diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js index 2bfb18b83788f..7d483fe6c0904 100644 --- a/packages/gatsby/src/cache-dir/production-app.js +++ b/packages/gatsby/src/cache-dir/production-app.js @@ -1,5 +1,4 @@ import apiRunner from "./api-runner-browser" - import React, { createElement } from "react" import ReactDOM from "react-dom" import { @@ -10,77 +9,131 @@ import { } from "react-router-dom" import { ScrollContext } from "react-router-scroll" import createHistory from "history/createBrowserHistory" -// import invariant from "invariant" import emitter from "./emitter" -window.___emitter = emitter -// emitter.on(`*`, (type, e) => console.log(`emitter`, type, e)) - import pages from "./pages.json" import ComponentRenderer from "./component-renderer" -import asyncRequires from "./async-requires" import loader from "./loader" -loader.addPagesArray(pages) -loader.addProdRequires(asyncRequires) -window.asyncRequires = asyncRequires +import asyncRequires from "./async-requires" -window.___loader = loader +window.___loader = loader +window.___emitter = emitter window.matchPath = matchPath +window.asyncRequires = asyncRequires +loader.addPagesArray(pages) +loader.addProdRequires(asyncRequires) -// Let the site/plugins run code very early. -apiRunner(`onClientEntry`) +Promise + .all(apiRunner(`onClientEntry`)) + .catch((error) => { throw error }) + .then(() => { -// Let plugins register a service worker. The plugin just needs -// to return true. -if (apiRunner(`registerServiceWorker`).length > 0) { - require(`./register-service-worker`) -} + // Let plugins register a service worker. The plugin just needs + // to return true. + if (apiRunner(`registerServiceWorker`).length > 0) { + require(`./register-service-worker`) + } -const navigateTo = pathname => { - // If we're already at this path, do nothing. - if (window.location.pathname === pathname) { - return - } + const navigateTo = pathname => { + // If we're already at this path, do nothing. + if (window.location.pathname === pathname) { + return + } - // Listen to loading events. If page resources load before - // a second, navigate immediately. - function eventHandler(e) { - if (e.page.path === loader.getPage(pathname).path) { - emitter.off(`onPostLoadPageResources`, eventHandler) - clearTimeout(timeoutId) - window.___history.push(pathname) + // Start a timer to wait for a second before transitioning and showing a + // loader in case resources aren't around yet. + const timeoutId = setTimeout(() => { + emitter.off(`onPostLoadPageResources`, eventHandler) + emitter.emit(`onDelayedLoadPageResources`, { pathname }) + window.___history.push(pathname) + }, 1000) + + if (loader.getResourcesForPathname(pathname)) { + // The resources are already loaded so off we go. + clearTimeout(timeoutId) + window.___history.push(pathname) + } else { + // They're not loaded yet so let's add a listener for when + // they finish loading. + emitter.on(`onPostLoadPageResources`, eventHandler) + } } - } - // Start a timer to wait for a second before transitioning and showing a - // loader in case resources aren't around yet. - const timeoutId = setTimeout(() => { - emitter.off(`onPostLoadPageResources`, eventHandler) - emitter.emit(`onDelayedLoadPageResources`, { pathname }) - window.___history.push(pathname) - }, 1000) + // window.___loadScriptsForPath = loadScriptsForPath + window.___navigateTo = navigateTo - if (loader.getResourcesForPathname(pathname)) { - // The resources are already loaded so off we go. - clearTimeout(timeoutId) - window.___history.push(pathname) - } else { - // They're not loaded yet so let's add a listener for when - // they finish loading. - emitter.on(`onPostLoadPageResources`, eventHandler) - } -} + const history = createHistory() -// window.___loadScriptsForPath = loadScriptsForPath -window.___navigateTo = navigateTo + // Call onRouteUpdate on the initial page load. + apiRunner(`onRouteUpdate`, { + location: history.location, + action: history.action, + }) -const history = createHistory() + const AltRouter = apiRunner(`replaceRouterComponent`, { history })[0] + const DefaultRouter = ({ children }) => + + {children} + + + const loadLayout = cb => { + if (asyncRequires.layouts[`index`]) { + asyncRequires.layouts[`index`]((err, executeChunk) => { + const module = executeChunk() + cb(module) + }) + } else { + cb(props => +
+ {props.children()} +
+ ) + } + } -// Call onRouteUpdate on the initial page load. -apiRunner(`onRouteUpdate`, { - location: history.location, - action: history.action, -}) + loadLayout(layout => { + loader.getResourcesForPathname(window.location.pathname, () => { + const Root = () => + createElement( + AltRouter ? AltRouter : DefaultRouter, + null, + createElement( + ScrollContext, + { shouldUpdateScroll }, + createElement(withRouter(layout), { + children: layoutProps => + createElement(Route, { + render: routeProps => { + attachToHistory(routeProps.history) + const props = layoutProps ? layoutProps : routeProps + if (loader.getPage(props.location.pathname)) { + return createElement(ComponentRenderer, { ...props }) + } + else { + return createElement(ComponentRenderer, { + location: { pathname: `/404.html` }, + }) + } + }, + }), + }) + ) + ) + + const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] + ReactDOM.render( + , + typeof window !== `undefined` + ? document.getElementById(`___gatsby`) + : void 0, + () => { + apiRunner(`onInitialClientRender`) + } + ) + }) + }) + }) + .catch((error) => { throw error }) function attachToHistory(history) { if (!window.___history) { @@ -110,64 +163,12 @@ function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) { return true } -const AltRouter = apiRunner(`replaceRouterComponent`, { history })[0] -const DefaultRouter = ({ children }) => - - {children} - - -const loadLayout = cb => { - if (asyncRequires.layouts[`index`]) { - asyncRequires.layouts[`index`]((err, executeChunk) => { - const module = executeChunk() - cb(module) - }) - } else { - cb(props => -
- {props.children()} -
- ) +// Listen to loading events. If page resources load before +// a second, navigate immediately. +function eventHandler(e) { + if (e.page.path === loader.getPage(pathname).path) { + emitter.off(`onPostLoadPageResources`, eventHandler) + clearTimeout(timeoutId) + window.___history.push(pathname) } } - -loadLayout(layout => { - loader.getResourcesForPathname(window.location.pathname, () => { - const Root = () => - createElement( - AltRouter ? AltRouter : DefaultRouter, - null, - createElement( - ScrollContext, - { shouldUpdateScroll }, - createElement(withRouter(layout), { - children: layoutProps => - createElement(Route, { - render: routeProps => { - attachToHistory(routeProps.history) - const props = layoutProps ? layoutProps : routeProps - if (loader.getPage(props.location.pathname)) { - return createElement(ComponentRenderer, { ...props }) - } else { - return createElement(ComponentRenderer, { - location: { pathname: `/404.html` }, - }) - } - }, - }), - }) - ) - ) - - const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] - ReactDOM.render( - , - typeof window !== `undefined` - ? document.getElementById(`___gatsby`) - : void 0, - () => { - apiRunner(`onInitialClientRender`) - } - ) - }) -}) From 7a1dfc87ef854f0f079b701e7332f7590972861a Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Mon, 7 Aug 2017 12:29:24 -0600 Subject: [PATCH 04/15] Remove spaces. --- packages/gatsby/src/cache-dir/app.js | 16 ---------------- packages/gatsby/src/cache-dir/production-app.js | 1 - 2 files changed, 17 deletions(-) diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js index 5fd6a8f251bbb..1d6e2ef4827a3 100644 --- a/packages/gatsby/src/cache-dir/app.js +++ b/packages/gatsby/src/cache-dir/app.js @@ -5,24 +5,18 @@ import socketIo from "./socketIo" import apiRunner from "./api-runner-browser" import emitter from "./emitter" - window.___emitter = emitter Promise .all(apiRunner(`onClientEntry`)) .catch((error) => { throw error }) .then(() => { - const rootElement = document.getElementById(`___gatsby`) - - // Troubles with this import in the past? let Root = require("./root") if (Root.default) { Root = Root.default } - socketIo() - /** * Service Workers are persistent by nature. They stick around, * serving a cached version of the site if they aren't removed. @@ -32,33 +26,23 @@ Promise * 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() } }) } - ReactDOM.render( , rootElement, () => apiRunner(`onInitialClientRender`) ) - if (module.hot) { - module.hot.accept(`./root`, () => { - let NextRoot = require(`./root`) - if (NextRoot.default) { - NextRoot = NextRoot.default } - ReactDOM.render( , rootElement, diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js index 7d483fe6c0904..34cea8ddec691 100644 --- a/packages/gatsby/src/cache-dir/production-app.js +++ b/packages/gatsby/src/cache-dir/production-app.js @@ -15,7 +15,6 @@ import ComponentRenderer from "./component-renderer" import loader from "./loader" import asyncRequires from "./async-requires" - window.___loader = loader window.___emitter = emitter window.matchPath = matchPath From 139ef3a8eb37d9348919c73faddcd7f1668aeeac Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Mon, 7 Aug 2017 13:56:06 -0600 Subject: [PATCH 05/15] Introduce a new async API runner for browsers. --- packages/gatsby/src/cache-dir/api-runner-browser.js | 12 +++++++++++- packages/gatsby/src/cache-dir/app.js | 5 ++--- packages/gatsby/src/cache-dir/production-app.js | 5 ++--- packages/gatsby/src/cache-dir/root.js | 3 +-- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/gatsby/src/cache-dir/api-runner-browser.js b/packages/gatsby/src/cache-dir/api-runner-browser.js index f3d5cb9b5bace..283d23db4085f 100644 --- a/packages/gatsby/src/cache-dir/api-runner-browser.js +++ b/packages/gatsby/src/cache-dir/api-runner-browser.js @@ -5,7 +5,7 @@ // require('/path/to/plugin2/gatsby-browser.js'), // ] -module.exports = (api, args, defaultReturn) => { +export function apiRunner(api, args, defaultReturn) { let results = plugins.map(plugin => { if (plugin.plugin[api]) { const result = plugin.plugin[api](args, plugin.options) @@ -24,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() + ) +} diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js index 1d6e2ef4827a3..f0b2708465053 100644 --- a/packages/gatsby/src/cache-dir/app.js +++ b/packages/gatsby/src/cache-dir/app.js @@ -2,13 +2,12 @@ import React from "react" import ReactDOM from "react-dom" import { AppContainer as HotContainer } from "react-hot-loader" import socketIo from "./socketIo" -import apiRunner from "./api-runner-browser" +import { apiRunner, apiRunnerAsync } from "./api-runner-browser" import emitter from "./emitter" window.___emitter = emitter -Promise - .all(apiRunner(`onClientEntry`)) +apiRunnerAsync(`onClientEntry`) .catch((error) => { throw error }) .then(() => { const rootElement = document.getElementById(`___gatsby`) diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js index 34cea8ddec691..454226f950e37 100644 --- a/packages/gatsby/src/cache-dir/production-app.js +++ b/packages/gatsby/src/cache-dir/production-app.js @@ -1,4 +1,4 @@ -import apiRunner from "./api-runner-browser" +import { apiRunner, apiRunnerAsync } from "./api-runner-browser" import React, { createElement } from "react" import ReactDOM from "react-dom" import { @@ -22,8 +22,7 @@ window.asyncRequires = asyncRequires loader.addPagesArray(pages) loader.addProdRequires(asyncRequires) -Promise - .all(apiRunner(`onClientEntry`)) +apiRunnerAsync(`onClientEntry`) .catch((error) => { throw error }) .then(() => { diff --git a/packages/gatsby/src/cache-dir/root.js b/packages/gatsby/src/cache-dir/root.js index 4d99b3ecce52e..50ee4488b87f2 100644 --- a/packages/gatsby/src/cache-dir/root.js +++ b/packages/gatsby/src/cache-dir/root.js @@ -7,8 +7,7 @@ import { } from "react-router-dom" import { ScrollContext } from "react-router-scroll" import createHistory from "history/createBrowserHistory" - -import apiRunner from "./api-runner-browser" +import { apiRunner } from "./api-runner-browser" import syncRequires from "./sync-requires" import pages from "./pages.json" import ComponentRenderer from "./component-renderer" From e9261c0e14725dea132c629d7b7f2265707f71b7 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Mon, 7 Aug 2017 15:05:29 -0600 Subject: [PATCH 06/15] Add support for configurable auto polyfilling. --- package.json | 1 + packages/gatsby/src/cache-dir/app.js | 3 +++ packages/gatsby/src/cache-dir/production-app.js | 3 +++ packages/gatsby/src/joi-schemas/joi.js | 1 + packages/gatsby/src/redux/reducers/config.js | 5 +++++ packages/gatsby/src/utils/webpack.config.js | 1 + 6 files changed, 14 insertions(+) diff --git a/package.json b/package.json index 78893683183e8..19e60f790c671 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,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", "eslint": "^4.2.0", "eslint-config-google": "^0.9.1", diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js index f0b2708465053..02f96cc934317 100644 --- a/packages/gatsby/src/cache-dir/app.js +++ b/packages/gatsby/src/cache-dir/app.js @@ -1,3 +1,6 @@ +if(__POLYFILL__) { + require("core-js/modules/es6.promise") +} import React from "react" import ReactDOM from "react-dom" import { AppContainer as HotContainer } from "react-hot-loader" diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js index 454226f950e37..1eb4aa5884f67 100644 --- a/packages/gatsby/src/cache-dir/production-app.js +++ b/packages/gatsby/src/cache-dir/production-app.js @@ -1,3 +1,6 @@ +if(__POLYFILL__) { + require("core-js/modules/es6.promise") +} import { apiRunner, apiRunnerAsync } from "./api-runner-browser" import React, { createElement } from "react" import ReactDOM from "react-dom" diff --git a/packages/gatsby/src/joi-schemas/joi.js b/packages/gatsby/src/joi-schemas/joi.js index 34641d6d65149..e59db3160271f 100644 --- a/packages/gatsby/src/joi-schemas/joi.js +++ b/packages/gatsby/src/joi-schemas/joi.js @@ -1,6 +1,7 @@ const Joi = require(`joi`) export const gatsbyConfigSchema = Joi.object().keys({ + polyfill: Joi.boolean(), siteMetadata: Joi.object(), pathPrefix: Joi.string(), mapping: Joi.object(), diff --git a/packages/gatsby/src/redux/reducers/config.js b/packages/gatsby/src/redux/reducers/config.js index 9ddfcad077a0f..035bfa97e3a69 100644 --- a/packages/gatsby/src/redux/reducers/config.js +++ b/packages/gatsby/src/redux/reducers/config.js @@ -40,6 +40,11 @@ module.exports = (state = {}, action) => { action = _.set(action, [`payload`, `pathPrefix`], ``) } + // Default polyfill to true. + if (!_.has(action, `polyfill`)) { + action = _.set(action, `polyfill`, true) + } + return { ...action.payload, } diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 3acd2fdb60eac..dbc35b9c57f2a 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -159,6 +159,7 @@ module.exports = async ( "process.env": processEnv(stage, `development`), __PREFIX_PATHS__: program.prefixPaths, __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix), + __POLYFILL__: store.getState().config.polyfill, }), // Names module ids with their filepath. We use this in development // to make it easier to see what modules have hot reloaded, etc. as From 8618a81baef8d1947889f3808ad83ba5a94a68e9 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Mon, 7 Aug 2017 20:05:23 -0600 Subject: [PATCH 07/15] Some documentation. --- .../{browserslist.md => browser-support.md} | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) rename docs/docs/{browserslist.md => browser-support.md} (55%) diff --git a/docs/docs/browserslist.md b/docs/docs/browser-support.md similarity index 55% rename from docs/docs/browserslist.md rename to docs/docs/browser-support.md index f5261b1ce771b..a1244cac588c3 100644 --- a/docs/docs/browserslist.md +++ b/docs/docs/browser-support.md @@ -1,7 +1,22 @@ --- -title: Browserslist +title: Browser Support --- +## ES6 Promises + +When running on the browser, Gatsby makes use of the [Promise API](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) so that plugins can run asynchronous code early on during bootstrap. + +Because of this, Gatsby by default includes a Promise polyfill when building your site. 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, + // ... +} +``` + +## 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 around Browserslist — https://css-tricks.com/browserlist-good-idea/ From e4a85ae98311f2169563eda84f9b4cb5c11e1458 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Tue, 8 Aug 2017 16:47:00 -0600 Subject: [PATCH 08/15] Update docs. --- docs/docs/browser-support.md | 4 +++- www/src/pages/docs/doc-links.yaml | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index a1244cac588c3..76740e49dd899 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -2,9 +2,11 @@ title: Browser Support --- +By default, 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. Gatsby includes some features to ensure this level of support while also allowing you to use the latest and greatest ECMAScript APIs. + ## ES6 Promises -When running on the browser, Gatsby makes use of the [Promise API](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) so that plugins can run asynchronous code early on during bootstrap. +Gatsby makes use of the [Promise API](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) so that plugins can run asynchronous code early on during bootstrap. Because of this, Gatsby by default includes a Promise polyfill when building your site. If you would like to provide your own promise implementation, you can set `polyfill` to `false` in your `gatsby-config.js`: diff --git a/www/src/pages/docs/doc-links.yaml b/www/src/pages/docs/doc-links.yaml index 8eabf24cc5cd0..e99b4bdcc4e36 100644 --- a/www/src/pages/docs/doc-links.yaml +++ b/www/src/pages/docs/doc-links.yaml @@ -14,7 +14,7 @@ links: 404 Pages: /docs/add-404-page/ Adding Images, Fonts, and Files: /docs/adding-images-fonts-files/ - Browserslist: /docs/browserslist/ + Browser Support: /docs/browser-support/ Creating and Modifying Pages: /docs/creating-and-modifying-pages/ Create a source plugin: /docs/create-source-plugin/ Custom webpack config: /docs/add-custom-webpack-config/ From 69e57fd4c1ee62235d9a5833ca1f9dc2ef92a968 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Tue, 8 Aug 2017 16:48:50 -0600 Subject: [PATCH 09/15] Should be on payload. --- packages/gatsby/src/redux/reducers/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/redux/reducers/config.js b/packages/gatsby/src/redux/reducers/config.js index 035bfa97e3a69..a490044c5da0a 100644 --- a/packages/gatsby/src/redux/reducers/config.js +++ b/packages/gatsby/src/redux/reducers/config.js @@ -42,7 +42,7 @@ module.exports = (state = {}, action) => { // Default polyfill to true. if (!_.has(action, `polyfill`)) { - action = _.set(action, `polyfill`, true) + action = _.set(action, [`payload`, `polyfill`], true) } return { From 99e91f6d5b67615d51746fa652a110901b26484e Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Wed, 9 Aug 2017 06:47:19 -0600 Subject: [PATCH 10/15] Amend the check. --- packages/gatsby/src/redux/reducers/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/redux/reducers/config.js b/packages/gatsby/src/redux/reducers/config.js index a490044c5da0a..86b85605efe49 100644 --- a/packages/gatsby/src/redux/reducers/config.js +++ b/packages/gatsby/src/redux/reducers/config.js @@ -41,7 +41,7 @@ module.exports = (state = {}, action) => { } // Default polyfill to true. - if (!_.has(action, `polyfill`)) { + if (!_.has(action, [`payload`, `polyfill`])) { action = _.set(action, [`payload`, `polyfill`], true) } From 640258efacd54296b9e94883084944af1a9f06c8 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Wed, 9 Aug 2017 17:37:10 -0600 Subject: [PATCH 11/15] Fix expected state for config tests. --- .gitignore | 2 -- .../src/redux/reducers/__tests__/__snapshots__/config.js.snap | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index da067e5f890d4..631126b45fa73 100644 --- a/.gitignore +++ b/.gitignore @@ -45,5 +45,3 @@ node_modules/ .vscode/ yarn.lock package-lock.json - -__tests__ \ No newline at end of file diff --git a/packages/gatsby/src/redux/reducers/__tests__/__snapshots__/config.js.snap b/packages/gatsby/src/redux/reducers/__tests__/__snapshots__/config.js.snap index c2710a492a68f..ab1611e5df40d 100644 --- a/packages/gatsby/src/redux/reducers/__tests__/__snapshots__/config.js.snap +++ b/packages/gatsby/src/redux/reducers/__tests__/__snapshots__/config.js.snap @@ -5,12 +5,14 @@ exports[`config reducer Validates configs with unsupported options 1`] = `"The s exports[`config reducer handles empty configs 1`] = ` Object { "pathPrefix": "", + "polyfill": true, } `; exports[`config reducer let's you add a config 1`] = ` Object { "pathPrefix": "", + "polyfill": true, "siteMetadata": Object { "hi": true, }, From e73826626f53c645ab676dca86418efac3dd29c0 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Thu, 10 Aug 2017 09:55:35 -0600 Subject: [PATCH 12/15] Add polyfill variable to every configuration. --- packages/gatsby/src/utils/webpack.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 3c913b4d1d169..fc499e5a0c938 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -182,6 +182,7 @@ module.exports = async ( "process.env": processEnv(stage, `development`), __PREFIX_PATHS__: program.prefixPaths, __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix), + __POLYFILL__: store.getState().config.polyfill, }), new ExtractTextPlugin(`build-html-styles.css`), ] @@ -191,6 +192,7 @@ module.exports = async ( "process.env": processEnv(stage, `production`), __PREFIX_PATHS__: program.prefixPaths, __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix), + __POLYFILL__: store.getState().config.polyfill, }), new ExtractTextPlugin(`styles.css`, { allChunks: true }), ] @@ -201,6 +203,7 @@ module.exports = async ( "process.env": processEnv(stage, `production`), __PREFIX_PATHS__: program.prefixPaths, __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix), + __POLYFILL__: store.getState().config.polyfill, }), new ExtractTextPlugin(`build-html-styles.css`), ] @@ -273,6 +276,7 @@ module.exports = async ( "process.env": processEnv(stage, `production`), __PREFIX_PATHS__: program.prefixPaths, __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix), + __POLYFILL__: store.getState().config.polyfill, }), // Extract CSS so it doesn't get added to JS bundles. new ExtractTextPlugin(`build-js-styles.css`), From 9cc6beb619c77b4c47590078423bdc174f401b34 Mon Sep 17 00:00:00 2001 From: Alexander Trauzzi Date: Sun, 13 Aug 2017 16:29:13 -0600 Subject: [PATCH 13/15] Updated to use async again. --- packages/gatsby/cache-dir/production-app.js | 257 ++++++++++---------- 1 file changed, 130 insertions(+), 127 deletions(-) diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 5d8cce967650f..47e5bd7fa7c3f 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -1,5 +1,7 @@ -import apiRunner from "./api-runner-browser" - +if(__POLYFILL__) { + require("core-js/modules/es6.promise") +} +import { apiRunner, apiRunnerAsync } from "./api-runner-browser" import React, { createElement } from "react" import ReactDOM from "react-dom" import { @@ -10,151 +12,152 @@ import { } from "react-router-dom" import { ScrollContext } from "react-router-scroll" import createHistory from "history/createBrowserHistory" -// import invariant from "invariant" import emitter from "./emitter" window.___emitter = emitter -// emitter.on(`*`, (type, e) => console.log(`emitter`, type, e)) - import pages from "./pages.json" import ComponentRenderer from "./component-renderer" import asyncRequires from "./async-requires" import loader from "./loader" + loader.addPagesArray(pages) loader.addProdRequires(asyncRequires) window.asyncRequires = asyncRequires - window.___loader = loader - window.matchPath = matchPath -// Let the site/plugins run code very early. -apiRunner(`onClientEntry`) -// Let plugins register a service worker. The plugin just needs -// to return true. -if (apiRunner(`registerServiceWorker`).length > 0) { - require(`./register-service-worker`) -} -const navigateTo = pathname => { - // If we're already at this path, do nothing. - if (window.location.pathname === pathname) { - return - } - - // Listen to loading events. If page resources load before - // a second, navigate immediately. - function eventHandler(e) { - if (e.page.path === loader.getPage(pathname).path) { - emitter.off(`onPostLoadPageResources`, eventHandler) - clearTimeout(timeoutId) - window.___history.push(pathname) - } - } - - // Start a timer to wait for a second before transitioning and showing a - // loader in case resources aren't around yet. - const timeoutId = setTimeout(() => { - emitter.off(`onPostLoadPageResources`, eventHandler) - emitter.emit(`onDelayedLoadPageResources`, { pathname }) - window.___history.push(pathname) - }, 1000) - - if (loader.getResourcesForPathname(pathname)) { - // The resources are already loaded so off we go. - clearTimeout(timeoutId) - window.___history.push(pathname) - } else { - // They're not loaded yet so let's add a listener for when - // they finish loading. - emitter.on(`onPostLoadPageResources`, eventHandler) - } -} +apiRunnerAsync(`onClientEntry`) + .then(() => { + // Let the site/plugins run code very early. + apiRunner(`onClientEntry`) -// window.___loadScriptsForPath = loadScriptsForPath -window.___navigateTo = navigateTo + // Let plugins register a service worker. The plugin just needs + // to return true. + if (apiRunner(`registerServiceWorker`).length > 0) { + require(`./register-service-worker`) + } -const history = createHistory() + const navigateTo = pathname => { + // If we're already at this path, do nothing. + if (window.location.pathname === pathname) { + return + } + + // Listen to loading events. If page resources load before + // a second, navigate immediately. + function eventHandler(e) { + if (e.page.path === loader.getPage(pathname).path) { + emitter.off(`onPostLoadPageResources`, eventHandler) + clearTimeout(timeoutId) + window.___history.push(pathname) + } + } + + // Start a timer to wait for a second before transitioning and showing a + // loader in case resources aren't around yet. + const timeoutId = setTimeout(() => { + emitter.off(`onPostLoadPageResources`, eventHandler) + emitter.emit(`onDelayedLoadPageResources`, { pathname }) + window.___history.push(pathname) + }, 1000) + + if (loader.getResourcesForPathname(pathname)) { + // The resources are already loaded so off we go. + clearTimeout(timeoutId) + window.___history.push(pathname) + } else { + // They're not loaded yet so let's add a listener for when + // they finish loading. + emitter.on(`onPostLoadPageResources`, eventHandler) + } + } -// Call onRouteUpdate on the initial page load. -apiRunner(`onRouteUpdate`, { - location: history.location, - action: history.action, -}) + // window.___loadScriptsForPath = loadScriptsForPath + window.___navigateTo = navigateTo -function attachToHistory(history) { - if (!window.___history) { - window.___history = history + const history = createHistory() - history.listen((location, action) => { - apiRunner(`onRouteUpdate`, { location, action }) + // Call onRouteUpdate on the initial page load. + apiRunner(`onRouteUpdate`, { + location: history.location, + action: history.action, }) - } -} -function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) { - const results = apiRunner(`shouldUpdateScroll`, { - prevRouterProps, - pathname, - }) - if (results.length > 0) { - return results[0] - } - - if (prevRouterProps) { - const { location: { pathname: oldPathname } } = prevRouterProps - if (oldPathname === pathname) { - return false - } - } - return true -} + function attachToHistory(history) { + if (!window.___history) { + window.___history = history -const AltRouter = apiRunner(`replaceRouterComponent`, { history })[0] -const DefaultRouter = ({ children }) => - - {children} - - -loader.getResourcesForPathname(window.location.pathname, () => { - const Root = () => - createElement( - AltRouter ? AltRouter : DefaultRouter, - null, - createElement( - ScrollContext, - { shouldUpdateScroll }, - 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, { - page: true, - ...props, - }) - } else { - return createElement(ComponentRenderer, { - location: { page: true, pathname: `/404.html` }, - }) - } - }, - }), + history.listen((location, action) => { + apiRunner(`onRouteUpdate`, { location, action }) }) - ) - ) - - const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] - ReactDOM.render( - , - typeof window !== `undefined` - ? document.getElementById(`___gatsby`) - : void 0, - () => { - apiRunner(`onInitialClientRender`) + } } - ) -}) + + function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) { + const results = apiRunner(`shouldUpdateScroll`, { + prevRouterProps, + pathname, + }) + if (results.length > 0) { + return results[0] + } + + if (prevRouterProps) { + const { location: { pathname: oldPathname } } = prevRouterProps + if (oldPathname === pathname) { + return false + } + } + return true + } + + const AltRouter = apiRunner(`replaceRouterComponent`, { history })[0] + const DefaultRouter = ({ children }) => + + {children} + + + loader.getResourcesForPathname(window.location.pathname, () => { + const Root = () => + createElement( + AltRouter ? AltRouter : DefaultRouter, + null, + createElement( + ScrollContext, + { shouldUpdateScroll }, + 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, { + page: true, + ...props, + }) + } else { + return createElement(ComponentRenderer, { + location: { page: true, pathname: `/404.html` }, + }) + } + }, + }), + }) + ) + ) + + const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0] + ReactDOM.render( + , + typeof window !== `undefined` + ? document.getElementById(`___gatsby`) + : void 0, + () => { + apiRunner(`onInitialClientRender`) + } + ) + }) + }) \ No newline at end of file From 6ccb27b8ab628402ffd91ab3e790f6a8e39b65be Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Fri, 18 Aug 2017 19:17:05 -0400 Subject: [PATCH 14/15] Run format and edit docs page --- docs/docs/browser-support.md | 16 ++-- .../gatsby-node.js | 1 - .../src/components/SiteLinks/index.js | 2 +- .../src/components/SiteSidebar/index.js | 8 +- .../src/layouts/blog-post.js | 5 +- .../src/layouts/index.js | 37 +++++---- .../src/mainPages/index.js | 1 - .../src/templates/future-markdown.js | 2 +- .../src/templates/markdown.js | 2 +- packages/gatsby/cache-dir/app.js | 79 +++++++++---------- 10 files changed, 74 insertions(+), 79 deletions(-) diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index 76740e49dd899..f38ff422c40a9 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -2,26 +2,24 @@ title: Browser Support --- -By default, 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. Gatsby includes some features to ensure this level of support while also allowing you to use the latest and greatest ECMAScript APIs. +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. -## ES6 Promises +## Polyfills -Gatsby makes use of the [Promise API](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) so that plugins can run asynchronous code early on during bootstrap. - -Because of this, Gatsby by default includes a Promise polyfill when building your site. If you would like to provide your own promise implementation, you can set `polyfill` to `false` in your `gatsby-config.js`: +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, - // ... + polyfill: false, + // ... } ``` -## Browserslist +## 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 around Browserslist — https://css-tricks.com/browserlist-good-idea/ +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: diff --git a/examples/using-javascript-transforms/gatsby-node.js b/examples/using-javascript-transforms/gatsby-node.js index 36c005c744565..86adfdcc1e526 100644 --- a/examples/using-javascript-transforms/gatsby-node.js +++ b/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`) diff --git a/examples/using-javascript-transforms/src/components/SiteLinks/index.js b/examples/using-javascript-transforms/src/components/SiteLinks/index.js index 06a00ed2efb06..0b1dbd93c6137 100644 --- a/examples/using-javascript-transforms/src/components/SiteLinks/index.js +++ b/examples/using-javascript-transforms/src/components/SiteLinks/index.js @@ -19,7 +19,7 @@ class SiteLinks extends React.Component {
  • - + {siteMetadata.siteEmailPretty}
  • diff --git a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js b/examples/using-javascript-transforms/src/components/SiteSidebar/index.js index 6b5fccb82319b..32171dc0b14ab 100644 --- a/examples/using-javascript-transforms/src/components/SiteSidebar/index.js +++ b/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 = (
    diff --git a/examples/using-javascript-transforms/src/layouts/blog-post.js b/examples/using-javascript-transforms/src/layouts/blog-post.js index 581793c37b598..6985a6854d8ee 100644 --- a/examples/using-javascript-transforms/src/layouts/blog-post.js +++ b/examples/using-javascript-transforms/src/layouts/blog-post.js @@ -19,7 +19,7 @@ class BlogPostTemplate extends React.Component {
) -/* + /* if (frontmatter.updated === null) { var published = (
@@ -76,7 +76,8 @@ class BlogPostTemplate extends React.Component { */ let published =
- return (
+ return ( +
{home}
{this.props.children()} diff --git a/examples/using-javascript-transforms/src/layouts/index.js b/examples/using-javascript-transforms/src/layouts/index.js index f7abc0f04ff2e..2ffcd54661b9f 100644 --- a/examples/using-javascript-transforms/src/layouts/index.js +++ b/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 = - } else { - jimmyPage = - } + // 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 = + } else { + jimmyPage = + } return (
@@ -44,7 +44,6 @@ class MasterLayout extends React.Component { export default MasterLayout - export const pageQuery = graphql` query LayoutBySlug { allSite { diff --git a/examples/using-javascript-transforms/src/mainPages/index.js b/examples/using-javascript-transforms/src/mainPages/index.js index 657bfa7e4aa13..55257784f1b0f 100644 --- a/examples/using-javascript-transforms/src/mainPages/index.js +++ b/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 = [ diff --git a/examples/using-javascript-transforms/src/templates/future-markdown.js b/examples/using-javascript-transforms/src/templates/future-markdown.js index ef5221bd18946..5ae2f640d238d 100644 --- a/examples/using-javascript-transforms/src/templates/future-markdown.js +++ b/examples/using-javascript-transforms/src/templates/future-markdown.js @@ -41,4 +41,4 @@ export const pageQuery = graphql` } } ` -*/ \ No newline at end of file +*/ diff --git a/examples/using-javascript-transforms/src/templates/markdown.js b/examples/using-javascript-transforms/src/templates/markdown.js index 8289ede273bf0..084e5fbc4ca86 100644 --- a/examples/using-javascript-transforms/src/templates/markdown.js +++ b/examples/using-javascript-transforms/src/templates/markdown.js @@ -48,4 +48,4 @@ export const pageQuery = graphql` } } } -` \ No newline at end of file +` diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js index c915203fa7005..20eacdc64414e 100644 --- a/packages/gatsby/cache-dir/app.js +++ b/packages/gatsby/cache-dir/app.js @@ -1,4 +1,4 @@ -if(__POLYFILL__) { +if (__POLYFILL__) { require("core-js/modules/es6.promise") } import { apiRunner, apiRunnerAsync } from "./api-runner-browser" @@ -11,12 +11,11 @@ import socketIo from "./socketIo" window.___emitter = require(`./emitter`) // Let the site/plugins run code very early. -apiRunnerAsync(`onClientEntry`) - .then(() => { - // 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 @@ -24,48 +23,48 @@ apiRunnerAsync(`onClientEntry`) * * 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() - } - }) - } + 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( + + + , + rootElement, + () => { + apiRunner(`onInitialClientRender`) + } + ) + ) - domReady(() => + if (module.hot) { + module.hot.accept(`./root`, () => { + let NextRoot = require(`./root`) + if (NextRoot.default) { + NextRoot = NextRoot.default + } ReactDOM.render( - + , rootElement, () => { apiRunner(`onInitialClientRender`) } ) - ) - - if (module.hot) { - module.hot.accept(`./root`, () => { - let NextRoot = require(`./root`) - if (NextRoot.default) { - NextRoot = NextRoot.default - } - ReactDOM.render( - - - , - rootElement, - () => { - apiRunner(`onInitialClientRender`) - } - ) - }) - } - }) + }) + } +}) From 42e3bb31de938a2b8749fe31480efedee837a71f Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Fri, 18 Aug 2017 19:20:27 -0400 Subject: [PATCH 15/15] fix --- docs/docs/browser-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index f38ff422c40a9..1893a08b56ac1 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -6,7 +6,7 @@ Gatsby supports [the same browsers as the current stable version of React.js](ht ## 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`: +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 polyfill, you can set `polyfill` to `false` in your `gatsby-config.js`: ``` module.exports = {