Add browser/ssr docs and make a few tweaks to APIs

gatsbyjs · KyleAMathews · May 31, 2017 · May 28, 2017 · May 29, 2017 · May 30, 2017
commit 6d536b3c77c8e3a6b8a8e5042121a93fdbff0260
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
@@ -1,6 +1,6 @@
 import React from "react"
 
-exports.modifyPostBodyComponents = (args, pluginOptions) => {
+exports.createPostBodyComponents = (args, pluginOptions) => {
   if (process.env.NODE_ENV === `production`) {
     return [
       <script

diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js
@@ -1,6 +1,6 @@
 import React from "react"
 
-exports.modifyHeadComponents = (args, pluginOptions) => [
+exports.createHeadComponents = (args, pluginOptions) => [
   <link rel="manifest" href="/manifest.json" />,
   <meta name="theme-color" content={pluginOptions.theme_color} />,
 ]
diff --git a/packages/gatsby-plugin-offline/src/gatsby-ssr.js b/packages/gatsby-plugin-offline/src/gatsby-ssr.js
@@ -1,6 +1,6 @@
 import React from "react"
 
-exports.modifyPostBodyComponents = () => {
+exports.createPostBodyComponents = () => {
   if (process.env.NODE_ENV === `production`) {
     return [
       <script

diff --git a/packages/gatsby-remark-autolink-headers/src/gatsby-browser.js b/packages/gatsby-remark-autolink-headers/src/gatsby-browser.js
@@ -12,7 +12,7 @@ const scrollToHash = offsetY => {
   }, 10)
 }
 
-exports.clientEntry = (args, pluginOptions) => {
+exports.onClientEntry = (args, pluginOptions) => {
   let offsetY = 0
   if (pluginOptions.offsetY) {
     offsetY = pluginOptions.offsetY

diff --git a/packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js b/packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js
@@ -1,6 +1,6 @@
 import React from "react"
 
-exports.modifyHeadComponents = (args, pluginOptions) => {
+exports.createHeadComponents = (args, pluginOptions) => {
   let offsetY = 0
   if (pluginOptions.offsetY) {
     offsetY = pluginOptions.offsetY

diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js
@@ -1,6 +1,6 @@
 const apiRunner = require(`./api-runner-browser`)
 // Let the site/plugins run code very early.
-apiRunner(`clientEntry`)
+apiRunner(`onClientEntry`)
 
 import React from "react"
 import ReactDOM from "react-dom"

diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js
@@ -1,6 +1,6 @@
 import apiRunner from "./api-runner-browser"
 // Let the site/plugins run code very early.
-apiRunner(`clientEntry`)
+apiRunner(`onClientEntry`)
 
 import React from "react"
 import ReactDOM from "react-dom"
@@ -114,7 +114,7 @@ window.___navigateTo = navigateTo
 
 const history = createHistory()
 history.listen((location, action) => {
-  apiRunner(`onRouteUpdate`, location, action)
+  apiRunner(`onRouteUpdate`, { location, action })
 })
 
 function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {

diff --git a/packages/gatsby/src/cache-dir/static-entry.js b/packages/gatsby/src/cache-dir/static-entry.js
@@ -139,26 +139,19 @@ module.exports = (locals, callback) => {
 
   // Call plugins to let them add to or modify components/props.
   const pluginHeadComponents = apiRunner(
-    `modifyHeadComponents`,
+    `createHeadComponents`,
     { headComponents },
     []
   )
   headComponents = headComponents.concat(pluginHeadComponents)
 
   const pluginPostBodyComponents = apiRunner(
-    `modifyPostBodyComponents`,
+    `createPostBodyComponents`,
     { postBodyComponents },
     []
   )
   postBodyComponents = postBodyComponents.concat(pluginPostBodyComponents)
 
-  const pluginBodyRenderProps = apiRunner(
-    `modifyBodyRenderProps`,
-    { bodyRenderProps },
-    {}
-  )
-  bodyRenderProps = merge(bodyRenderProps, pluginBodyRenderProps)
-
   const html = `<!DOCTYPE html>\n ${renderToStaticMarkup(<Html {...bodyRenderProps} headComponents={headComponents} postBodyComponents={postBodyComponents} body={body} path={locals.path} />)}`
   callback(null, html)
 }
diff --git a/packages/gatsby/src/utils/develop.js b/packages/gatsby/src/utils/develop.js
@@ -104,11 +104,11 @@ async function startServer(program) {
             const htmlElement = React.createElement(HTML, {
               body: ``,
               headComponents: _.flattenDeep(
-                apiRunner(`modifyHeadComponents`, { headComponents: [] }, [])
+                apiRunner(`createHeadComponents`, { headComponents: [] }, [])
               ),
               postBodyComponents: _.flattenDeep(
                 apiRunner(
-                  `modifyPostBodyComponents`,
+                  `createPostBodyComponents`,
                   { headComponents: [] },
                   []
                 )

diff --git a/www/src/pages/docs/browser-apis.js b/www/src/pages/docs/browser-apis.js
@@ -0,0 +1,41 @@
+import React from "react"
+
+import Functions from "../../components/function-list"
+import { rhythm, scale } from "../../utils/typography"
+
+class BrowserAPIDocs extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Gatsby Browser APIs</h1>
+        <h2 css={{ marginBottom: rhythm(1 / 2) }}>APIs</h2>
+        <ul css={{ ...scale(-1 / 5) }}>
+          {this.props.data.allDocumentationJs.edges.map(({ node }, i) => (
+            <li key={`function list ${node.name}`}>
+              <a href={`#${node.name}`}>{node.name}</a>
+            </li>
+          ))}
+        </ul>
+        <br />
+        <hr />
+        <h2>Reference</h2>
+        <Functions functions={this.props.data.allDocumentationJs.edges} />
+      </div>
+    )
+  }
+}
+
+export default BrowserAPIDocs
+
+export const pageQuery = graphql`
+query BrowserAPIDocsQuery {
+  allDocumentationJs(id: {regex: "/src.*api-browser-docs.js/"}, sortBy: {fields: [name]}) {
+    edges {
+      node {
+        name
+        ...FunctionList
+      }
+    }
+  }
+}
+`
diff --git a/www/src/pages/docs/doc-links.yaml b/www/src/pages/docs/doc-links.yaml
@@ -20,8 +20,11 @@
 - title: Reference
   links:
     Node Interface: /docs/node-interface/
-    Gatsby Node APIs: /docs/node-apis/
+    API Specificatoin: /docs/api-specification/
     Bound Action Creators: /docs/bound-action-creators/
+    Gatsby Browser APIs: /docs/browser-apis/
+    Gatsby Node APIs: /docs/node-apis/
+    Gatsby SSR APIs: /docs/ssr-apis/
 - title: Contributing
   links:
     How to Contribute: /docs/how-to-contribute/

diff --git a/www/src/pages/docs/node-apis.js b/www/src/pages/docs/node-apis.js
@@ -3,20 +3,14 @@ import React from "react"
 import Functions from "../../components/function-list"
 import { rhythm, scale } from "../../utils/typography"
 
-class ActionCreatorsDocs extends React.Component {
+class NodeAPIDocs extends React.Component {
   render() {
-    console.log(this.props)
     return (
       <div>
         <h1>Gatsby Node APIs</h1>
         <p>
-          Gatsby uses
-          {` `}
-          <a href="http://redux.js.org">Redux</a>
-          {` `}
-          internally to manage state. When you implement a Gatsby API, you're
-          passed a collection of "Bound Action Creators" (functions which create and dispatch Redux actions when called)
-          which you can use to manipulate state on your site.
+          Gatsby gives plugins and site builders many APIs
+          for controlling your site.
         </p>
         <h2 css={{ marginBottom: rhythm(1 / 2) }}>APIs</h2>
         <ul css={{ ...scale(-1 / 5) }}>
@@ -26,6 +20,7 @@ class ActionCreatorsDocs extends React.Component {
             </li>
           ))}
         </ul>
+        <br />
         <hr />
         <h2>Reference</h2>
         <Functions functions={this.props.data.allDocumentationJs.edges} />
@@ -34,7 +29,7 @@ class ActionCreatorsDocs extends React.Component {
   }
 }
 
-export default ActionCreatorsDocs
+export default NodeAPIDocs
 
 export const pageQuery = graphql`
 query APINodeDocsQuery {

diff --git a/www/src/pages/docs/ssr-apis.js b/www/src/pages/docs/ssr-apis.js
@@ -0,0 +1,41 @@
+import React from "react"
+
+import Functions from "../../components/function-list"
+import { rhythm, scale } from "../../utils/typography"
+
+class SSRAPIs extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Gatsby Server Rendering APIs</h1>
+        <h2 css={{ marginBottom: rhythm(1 / 2) }}>APIs</h2>
+        <ul css={{ ...scale(-1 / 5) }}>
+          {this.props.data.allDocumentationJs.edges.map(({ node }, i) => (
+            <li key={`function list ${node.name}`}>
+              <a href={`#${node.name}`}>{node.name}</a>
+            </li>
+          ))}
+        </ul>
+        <br />
+        <hr />
+        <h2>Reference</h2>
+        <Functions functions={this.props.data.allDocumentationJs.edges} />
+      </div>
+    )
+  }
+}
+
+export default SSRAPIs
+
+export const pageQuery = graphql`
+query SSRAPIsQuery {
+  allDocumentationJs(id: {regex: "/src.*api-ssr-docs.js/"}, sortBy: {fields: [name]}) {
+    edges {
+      node {
+        name
+        ...FunctionList
+      }
+    }
+  }
+}
+`