Support page data declared as named exports (#838)

Author: NMinhNguyen

README.md

@@ -336,6 +336,14 @@ exports.data = {
 export default MyComponent ...
 ```
 
+You can also use a named export for the data object:
+
+```javascript
+export const data = {
+  title: 'This is a title',
+}
+```
+
 ### Structure of a Gatsby site
 * `config.toml` - Core application configuration is stored here. Available via a `require`
 or `import` of 'config'. Values:

lib/isomorphic/create-routes.js

@@ -145,7 +145,7 @@ module.exports = (files, pagesReq) => {
       handler = wrappers[page.file.ext]
       page.data = pagesReq(`./${page.requirePath}`)
     } else if (reactComponentFileTypes.indexOf(page.file.ext) !== -1) {
-      handler = pagesReq(`./${page.requirePath}`)
+      handler = requireComponent(pagesReq(`./${page.requirePath}`))
       page.data = page.data === undefined ? {} : page.data
     }
 

lib/utils/build-page/load-frontmatter.js

@@ -3,6 +3,7 @@ import fs from 'fs'
 import path from 'path'
 import frontMatter from 'front-matter'
 import objectAssign from 'object-assign'
+import _ from 'lodash'
 import htmlFrontMatter from 'html-frontmatter'
 import * as babylon from 'babylon'
 import traverse from 'babel-traverse'
@@ -81,6 +82,21 @@ export default function loadFrontmatter(pagePath: string): {} {
             })
           }
         },
+        ExportNamedDeclaration: function ExportNamedDeclaration(astPath) {
+          const { declaration } = astPath.node
+          if (declaration && declaration.type === 'VariableDeclaration') {
+            const dataVariableDeclarator = _.find(
+              declaration.declarations,
+              d => d.id.name === 'data'
+            )
+
+            if (dataVariableDeclarator && dataVariableDeclarator.init) {
+              dataVariableDeclarator.init.properties.forEach(node => {
+                data[node.key.name] = parseData(node.value)
+              })
+            }
+          }
+        },
       })
     } catch (e) {
       // Ignore errors — we print out parse errors for user elsewhere.

test/fixtures/javascript-pages-frontmatter/pages/array-literal-named-export.js

@@ -0,0 +1,13 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+
+export const data = {
+  titles: ['My title', 'My other title'],
+}
+
+export default () => (
+  <div>
+    <h1>My title</h1>
+    <h2>My other title</h2>
+  </div>
+)

test/fixtures/javascript-pages-frontmatter/pages/object-literal-named-export.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+
+export const data = {
+  titles: {
+    main: 'My title',
+    sub: 'My other title',
+  },
+}
+
+export default () => (
+  <div>
+    <h1>My title</h1>
+    <h2>My other title</h2>
+  </div>
+)

test/fixtures/javascript-pages-frontmatter/pages/string-literal-named-export.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+
+export const data = {
+  title: 'Foo',
+}
+
+export default () => <h1>Foo</h1>

test/fixtures/javascript-pages-frontmatter/pages/template-literal-named-export.js

@@ -0,0 +1,9 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+
+export const data = {
+  // eslint-disable-next-line
+  title: `Bar`,
+}
+
+export default () => <h1>Bar</h1>

test/utils/build-page/load-frontmatter.js

@@ -8,13 +8,27 @@ test('it works for string literal titles', t => {
   t.is(data.title, 'Foo')
 })
 
+test('it works for string literal titles declared as a named export', t => {
+  const pagePath =
+    '../../fixtures/javascript-pages-frontmatter/pages/string-literal-named-export.js'
+  const data = loadFrontmatter(pagePath)
+  t.is(data.title, 'Foo')
+})
+
 test('it works for template literal titles', t => {
   const pagePath =
     '../../fixtures/javascript-pages-frontmatter/pages/template-literal.js'
   const data = loadFrontmatter(pagePath)
   t.is(data.title, 'Bar')
 })
 
+test('it works for template literal titles declared as a named export', t => {
+  const pagePath =
+    '../../fixtures/javascript-pages-frontmatter/pages/template-literal-named-export.js'
+  const data = loadFrontmatter(pagePath)
+  t.is(data.title, 'Bar')
+})
+
 test('it works with array literal values', t => {
   const pagePath =
     '../../fixtures/javascript-pages-frontmatter/pages/array-literal.js'
@@ -23,10 +37,26 @@ test('it works with array literal values', t => {
   t.is(data.titles[1], 'My other title')
 })
 
+test('it works with array literal values declared as a named export', t => {
+  const pagePath =
+    '../../fixtures/javascript-pages-frontmatter/pages/array-literal-named-export.js'
+  const data = loadFrontmatter(pagePath)
+  t.is(data.titles[0], 'My title')
+  t.is(data.titles[1], 'My other title')
+})
+
 test('it works with object literal values', t => {
   const pagePath =
     '../../fixtures/javascript-pages-frontmatter/pages/object-literal.js'
   const data = loadFrontmatter(pagePath)
   t.is(data.titles.main, 'My title')
   t.is(data.titles.sub, 'My other title')
 })
+
+test('it works with object literal values declared as a named export', t => {
+  const pagePath =
+    '../../fixtures/javascript-pages-frontmatter/pages/object-literal-named-export.js'
+  const data = loadFrontmatter(pagePath)
+  t.is(data.titles.main, 'My title')
+  t.is(data.titles.sub, 'My other title')
+})