Prototype fetching from dev App

docs/App.js

@@ -58,6 +58,9 @@ const App = (props => [
         <Title>x0</Title>
         <Text fontWeight='600' f={3} mb={2}>{pkg.description}</Text>
         <Mono f={0}>v{pkg.version}</Mono>
+        {props.tracks && (
+          <pre children={JSON.stringify(props.tracks)}/>
+        )}
       </Box>
     </header>
     <main>
@@ -130,16 +133,18 @@ App.defaultProps = {
 }
 
 App.getInitialProps = async ({ Component, html, pathname }) => {
-  // const fetch = require('isomorphic-fetch')
-  // const endpoint = 'https://microbeats.now.sh/tracks'
-  // const microbeats = await fetch(endpoint)
-  // const tracks = await microbeats.json()
+  const fetch = require('isomorphic-fetch')
+  const endpoint = 'https://microbeats.now.sh/tracks'
+  const microbeats = await fetch(endpoint)
+  const tracks = await microbeats.json()
+
   const css = cxs.css()
   cxs.reset()
 
   return {
+    hello: 'hi',
     css,
-    // tracks
+    tracks
   }
 }
 

lib/dev/App.js

@@ -7,15 +7,30 @@ class App extends React.Component {
     super(props)
 
     this.state = {
-      Component: props.Component
+      Component: props.Component,
+      initialProps: null
+    }
+
+    // CORS
+    this.getProps = async (func) => {
+      try {
+        const initialProps = await func(props)
+        this.setState({ initialProps })
+      } catch (err) {
+        this.setState({ err })
+      }
+    }
+
+    if (typeof props.Component.getInitialProps === 'function') {
+      this.getProps(props.Component.getInitialProps)
     }
   }
 
   render () {
-    const { Component } = this.state
+    const { Component, initialProps } = this.state
 
     return h(Catch, null,
-      h(Component, this.props)
+      h(Component, Object.assign({}, this.props, initialProps))
     )
   }
 }