Add Router component

docs/App.js

@@ -1,13 +1,22 @@
 import React from 'react'
-import { createProvider } from 'refunk'
+import connect from 'refunk'
 import Title from './Title'
 import cxs from 'cxs/component'
+import Router from '../lib/Router'
+
+const { Route, Link } = Router
 
 const dec = state => ({ count: state.count - 1 })
 const inc = state => ({ count: state.count + 1 })
 
 const Debug = props => <pre children={JSON.stringify(props, null, 2)} />
 
+const Home = props => (
+  <div>
+    <h2>Home</h2>
+  </div>
+)
+
 const css = `
 *{box-sizing:border-box}
 body {
@@ -24,7 +33,8 @@ const Style = ({ css }) => (
   />
 )
 
-const App = createProvider()(props => (
+
+const App = connect(props => (
   <div>
     <title>Hi x0</title>
     <meta charSet='utf-8' />
@@ -39,7 +49,21 @@ const App = createProvider()(props => (
       onClick={e => props.update(inc)}
       children='+'
     />
-    <Debug {...props} />
+    <Router
+      context={{}}
+      basename={props.basename}
+      location={props.pathname}>
+      <nav>
+        <Link to='/'>Home</Link>
+        <Link to='/debug'>Debug</Link>
+      </nav>
+      <Route exact path='/'
+        component={Home}
+      />
+      <Route path='/debug'
+        render={() => <Debug {...props} />}
+      />
+    </Router>
   </div>
 ))
 

examples/react-router/package.json

@@ -7,8 +7,8 @@
     "test": "x0 build App.js --html Root.js"
   },
   "dependencies": {
-    "react-router-dom": "^4.2.2",
-    "@compositor/x0": "^1.0.9"
+    "@compositor/x0": "^1.0.9",
+    "react-router-dom": "^4.2.2"
   },
   "x0": {
     "title": "x0 react-router",

lib/Router.js

@@ -0,0 +1,24 @@
+const React = require('react')
+const {
+  BrowserRouter,
+  StaticRouter,
+  Route,
+  Link
+} = require('react-router-dom')
+
+const UniversalRouter = typeof document !== 'undefined' ? BrowserRouter : StaticRouter
+
+const h = React.createElement
+
+const Router = props => h(UniversalRouter, props,
+  h('div', null, props.children)
+)
+
+
+Router.defaultProps = {
+  context: {}
+}
+
+module.exports = Router
+module.exports.Route = Route
+module.exports.Link = Link

lib/static/index.js

@@ -38,7 +38,7 @@ const renderHTML = async (Component, options) => {
   const isStatic = options.static || !options.outDir
   let body = render(Component, options, isStatic)
 
-  const base = options.baseurl || ''
+  const base = options.basename || ''
   const script = base + '/bundle.js'
 
   const getProps = typeof Component.getInitialProps === 'function'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compositor/x0",
-  "version": "1.0.10-0",
+  "version": "2.0.0-0",
   "description": "Zero-config React renderer and CLI",
   "main": "index.js",
   "bin": {
@@ -28,6 +28,7 @@
     "pkg-up": "^2.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-router-dom": "^4.2.2",
     "read-pkg-up": "^2.0.0",
     "update-notifier": "^2.2.0",
     "webpack": "^3.5.6",
@@ -38,11 +39,15 @@
     "got": "^7.1.0",
     "isomorphic-fetch": "^2.2.1",
     "node-fetch": "^1.7.3",
-    "refunk": "^1.0.0-2"
+    "refunk": "^2.0.0-1"
   },
   "x0": {
     "title": "X0",
     "count": 32,
-    "baseurl": "/docs"
+    "basename": "/docs",
+    "routes": [
+      "/",
+      "debug"
+    ]
   }
 }