Client route parsing

Tiago Azevedo · Tiago Azevedo · commit 223cc016ad1f · 2015-10-28T14:24:49.000Z
diff --git a/client.js b/client.js
@@ -0,0 +1 @@
+module.exports = require('./lib/client');
diff --git a/spec/unit/server/middleware/render.js b/spec/unit/server/middleware/render.js
@@ -28,7 +28,7 @@ describe('Render Middleware', () => {
       .get('/')
       .end((err, res) => {
         if (err) throw err;
-        assert.match(res.text, /<html><body><script type=\"application\/json\" id=\"myapp-state\">(?:.+)<\/script><div(?:.*)id="myapp"(?:.*)>(?:.*)<\/div><\/body><\/html>/)
+        assert.match(res.text, /<html><body><script type=\"application\/json\" id=\"myapp-state\">(?:.+)<\/script>\n<div(?:.*)id="myapp"(?:.*)>(?:.*)<\/div><\/body><\/html>/)
         done();
       });
   });
diff --git a/src/client/index.js b/src/client/index.js
@@ -0,0 +1,3 @@
+import render from './render';
+
+export default { render };
diff --git a/src/client/render.js b/src/client/render.js
@@ -0,0 +1,25 @@
+import { parse } from '../shared/route-parser';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import decode from 'ent/decode';
+
+export default function render(application) {
+  let url = `${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.search}`;
+
+  let matches = parse(application.routes, url);
+
+  if (matches) {
+    let { route, context } = matches;
+    const stateNode = document.getElementById(`${application.domRoot}-state`);
+    const state = JSON.parse(decode(stateNode.text));
+    let rootNode = document.getElementById(application.domRoot);
+    const Component = route.component;
+
+    ReactDOM.render(
+      <Component
+          context={context}
+          state={state}
+      />,
+    rootNode);
+  }
+}
diff --git a/src/server/index.js b/src/server/index.js
@@ -1,8 +1,7 @@
 import koa from 'koa';
-
 import init from './middleware/init';
-import render from './middleware/render';
 import router from './middleware/router';
+import render from './middleware/render';
 
 /**
  * Instantiate a server given an application.
@@ -11,11 +10,14 @@ import router from './middleware/router';
 
 export default function server(application, options) {
   const app = koa();
-
-  app
-    .use(init(application, options))
-    .use(router)
-    .use(render)
-
-  return app;
+  return {
+    use: (mw) => app.use(mw),
+    start: () => {
+      return app
+        .use(init(application, options))
+        .use(router)
+        .use(render)
+        .listen(options.port)
+    }
+  }
 }
diff --git a/src/server/middleware/render.js b/src/server/middleware/render.js
@@ -10,9 +10,12 @@ export default function* renderMiddleware(next) {
   let Component = this.arch.route.component;
 
   let body = ReactDOMServer.renderToString(
-    <Component context={this.arch.context} />
+    <Component
+        context={this.arch.context}
+        state={this.arch.state}
+    />
   );
 
-  this.body = template.replace('{{root}}', `<script type="application/json" id="${domRoot}-state">${encode(JSON.stringify(this.arch.state))}</script><div id="${domRoot}">${body}</div>`);
+  this.body = template.replace('{{root}}', `<script type="application/json" id="${domRoot}-state">${encode(JSON.stringify(this.arch.state))}</script>\n<div id="${domRoot}">${body}</div>`);
   yield next;
 }
diff --git a/src/server/middleware/router.js b/src/server/middleware/router.js
@@ -1,13 +1,12 @@
-import { match } from '../../shared/route-parser';
+import { parse } from '../../shared/route-parser';
 
 export default function* routerMiddleware(next) {
   if (typeof this.arch === 'undefined') throw new Error('Router middleware must be run inside an Arch server.');
 
-  let routes = this.arch.application.routes;
-  let context;
-  let route = routes.find(({ path }) => context = match(this.originalUrl, path));
+  let matched = parse(this.arch.application.routes, this.originalUrl);
 
-  if (route) {
+  if (matched) {
+    let { route, context } = matched;
     this.arch.route = route;
     this.arch.context = context;
     yield next;
diff --git a/src/shared/route-parser.js b/src/shared/route-parser.js
@@ -42,3 +42,14 @@ export function match(originalUrl, route) {
     route
   };
 }
+
+export function parse(routes, url) {
+  let context;
+  let route = routes.find(({ path }) => context = match(url, path));
+
+  if (route) {
+    return { route, context };
+  } else {
+    return null;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = require('./lib/client');`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import render from './render';`
	`2`	`+`
	`3`	`+export default { render };`