diff --git a/client/index.js b/client/index.js index d76e2a78ef..bf8fe8cb79 100644 --- a/client/index.js +++ b/client/index.js @@ -6,7 +6,7 @@ import debugFactory from 'debug'; import { Router } from 'react-router'; import { createLocation, createHistory } from 'history'; import { hydrate } from 'thundercats'; -import { Render } from 'thundercats-react'; +import { render$ } from 'thundercats-react'; import { app$ } from '../common/app'; @@ -72,7 +72,7 @@ app$({ history, location: appLocation }) }) .flatMap(({ props, appCat }) => { props.history = history; - return Render( + return render$( appCat, React.createElement(Router, props), DOMContianer diff --git a/package.json b/package.json index 116ea1f358..f4de269e23 100644 --- a/package.json +++ b/package.json @@ -115,9 +115,10 @@ "rx": "^4.0.0", "sanitize-html": "^1.11.1", "sort-keys": "^1.1.1", + "stampit": "^2.1.1", "store": "https://github.com/berkeleytrue/store.js.git#feature/noop-server", - "thundercats": "^3.0.0", - "thundercats-react": "~0.4.0", + "thundercats": "^3.1.0", + "thundercats-react": "~0.5.1", "twit": "^2.1.1", "uglify-js": "^2.5.0", "url-regex": "^3.0.0", diff --git a/server/boot/a-react.js b/server/boot/a-react.js index d4a000067f..91e4e8dbe7 100644 --- a/server/boot/a-react.js +++ b/server/boot/a-react.js @@ -3,8 +3,10 @@ import { RoutingContext } from 'react-router'; import Fetchr from 'fetchr'; import { createLocation } from 'history'; import debugFactory from 'debug'; +import { dehydrate } from 'thundercats'; +import { renderToString$ } from 'thundercats-react'; + import { app$ } from '../../common/app'; -import { RenderToString } from 'thundercats-react'; const debug = debugFactory('freecc:react-server'); @@ -12,14 +14,13 @@ const debug = debugFactory('freecc:react-server'); // remove their individual controllers const routes = [ '/jobs', - '/jobs/*' -]; - -const devRoutes = [ + '/jobs/*', '/hikes', '/hikes/*' ]; +const devRoutes = []; + export default function reactSubRouter(app) { var router = app.loopback.Router(); @@ -51,20 +52,22 @@ export default function reactSubRouter(app) { return !!props; }) .flatMap(function({ props, AppCat }) { - // call thundercats renderToString - // prefetches data and sets up it up for current state - debug('rendering to string'); - return RenderToString( - AppCat(null, services), + const cat = AppCat(null, services); + debug('render react markup and pre-fetch data'); + return renderToString$( + cat, React.createElement(RoutingContext, props) - ); + ) + .flatMap( + dehydrate(cat), + ({ markup }, data) => ({ markup, data, cat }) + ); }) - // makes sure we only get one onNext and closes subscription - .flatMap(function({ data, markup }) { - debug('react rendered'); + .flatMap(function({ data, markup, cat }) { + debug('react markup rendered, data fetched'); + cat.dispose(); const { title } = data.AppStore; res.expose(data, 'data'); - // now render jade file with markup injected from react return res.render$( 'layout-react', { markup, title } @@ -72,7 +75,7 @@ export default function reactSubRouter(app) { }) .subscribe( function(markup) { - debug('jade rendered'); + debug('html rendered and ready to send'); res.send(markup); }, next