Upgrade React and React Router

This commit is contained in:
Jonathan Cremin 2016-01-09 15:10:28 +00:00
parent ef8e8ca59e
commit c96b4b624b
12 changed files with 218 additions and 134 deletions

View file

@ -1,5 +1,5 @@
import React from 'react';
import createHandler from './react-handler';
import { renderPage } from './react-handler';
import debuglog from 'debug';
const debug = debuglog('match.audio');
@ -11,12 +11,7 @@ export default function (routes) {
yield next;
} catch (err) {
if (err.status === 404) {
let Handler = yield createHandler(routes, this.request.url);
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
this.body = yield renderPage(routes, this.request.url, {});
} else {
debug('Error: %o', err);
throw err;
@ -28,12 +23,7 @@ export default function (routes) {
switch (this.accepts('html', 'json')) {
case 'html':
this.type = 'html';
let Handler = yield createHandler(routes, this.request.url);
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
this.body = yield renderPage(routes, this.request.url, {});
break;
case 'json':
this.body = {

45
lib/react-handler.js vendored
View file

@ -1,19 +1,34 @@
import Router from 'react-router';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { RoutingContext, match } from 'react-router';
import createLocation from 'history/lib/createLocation';
export default function* (routes, url) {
let router = Router.create({
location: url,
routes: routes,
onAbort(aborted) {
let { to, params, query } = aborted;
this.redirect(Router.makePath(to, params, query));
}
});
return new Promise(function(resolve) {
router.run((Handler) => {
resolve(Handler);
export function matchRoute(routes, url) {
const location = createLocation(url);
return new Promise((resolve, reject) => {
match({ routes, location }, (error, redirectLocation, renderProps) => {
resolve({error, redirectLocation, renderProps});
});
});
}
export function* renderPage(routes, url, state) {
const { error, redirectLocation, renderProps } = yield matchRoute(routes, url);
if (error) {
throw new Error(error.message);
} else if (redirectLocation) {
return redirectLocation.pathname + redirectLocation.search;
} else if (renderProps === null) {
return false;
}
const content = renderToString(<RoutingContext {...renderProps} />);
return '<!doctype html>\n' + content.replace('</body></html>', `<script>window.STATE = ${JSON.stringify(state)}</script>
<script src='/jspm_packages/system.js'></script>
<script src='/config.js'></script>
<script>System.import('babel/external-helpers')</script>
<script>System.import('views/app')</script>
</body></html>`);
}