onDispatch callback and connect middleware #46

matthewwithanm · 2014-04-15T21:34:38Z

This PR has two additions, though the first is really only a means to the second.

Firstly, it adds an onDispatch callback. This is basically the same as onNavigation, but it's also called on componentWillMount.

The second, and main addition, is a connect middleware. It works like this:

var reactRouter = require('react-router-component/lib/contrib/connect-middleware');

// ...create app...

app.use(reactRouter(MyRouterComponent));

Your node app will now use RRC to route requests, sending the appropriate status code! (404 or 200)

By default, it adds an HTML doctype and serves the app as "text/html", however, this can be customized with a second argument:

app.use(reactRouter(MyRouterComponent, {doctype: 'svg'})); // Shortcut doctypes
app.use(reactRouter(MyRouterComponent, {doctype: '<!DOCTYPE HTML ...>'})); // Long doctypes
app.use(reactRouter(MyRouterComponent, {contentType: 'application/xhtml+xml'})); // Guess doctype based on content type

etc.

You can also pass props:

app.use(reactRouter(MyRouterComponent, {props: {someProp: 'hello'}}));

@andreypopp I'm not sure how this plays with asynchronous components. Do you think you could take a look at that?

Though it can happen post-merge IMO, I think we need to continue to make it easier to create router components. The 1.x branch has been heading that direction already, but it's not quite there yet. Here's what a minimal "App" looks like now:

var App = React.createClass({
  mixins: [RoutingEnvironmentMixin],
  renderRouter: function() {
    return <Router path={ this.getPath() }>...</Router>;
  },
  match: function(url) {
    return this.renderRouter().match(url);
  },
  render: function() {
    return (
      <html>
        <head>...</head>
        <body>{ this.renderRouter() }</body>
      </html>
    );
  }
});

A lot of this is boilerplate I really want to get rid of. (Technically, I guess there is a more minimal example if you're willing to make your real router your top-level component instead of putting it in the body.) Also, having to create the router in match…well, sucks.

Still, I'm super psyched about being able to bridge the gap between my server and React app so easily—and to have React driving the process!

Woah, cool!

Also adds "eqnull: true" to the linting config to allow us to treat `null` and `undefined` the same way.

It doesn't matter, but this is the form used in the spec docs. (Only HTML4 capitalizes it.)

andreypopp · 2014-04-22T14:37:11Z

This looks great.

I have a suggestion.

I think server side rendering shouldn't require top level component to accept path and onDispatch props. Instead we could run rendering in so-called "server context" which we will provide to routers via React's context mechanism.

That context could provide not only pathname but also querystring and cookies (basically info from req) so we can use it to render/route components based on such data (also available in browser).

As you can see there's already QuerystringKeyEnvironment which routes by a specified key in querystring. Currently it doesn't work on server because we can't read querystring there, but with "server context" we can.

We also can notify "server context" if there's "not found situation" happened in some router via a callback.

Note that this will require changing how environments instantiated, because we want them to read data from context instead of DOM. I think we can make all environments to have similar constructor signatures:

function PathnameEnvironment(context) {
  ...
}

function QuerystringKeyEnvironment(context, key) {
  ...
}

and pass to components not environment instances but some kind of environment factories which will be instantiated to environments in place with "server context" or "browser context" depending on what's available currently.

What do you think?

matthewwithanm · 2014-04-24T16:27:27Z

@andreypopp Updated to use ReactAsync for rendering—that was easier than I expected! Async rendering on the server side with the middleware is working!!!

killercup · 2014-10-18T09:58:40Z

How's the state on this? Has anything changed since April?

Or, what I'm actually interested in: When rendering in node, how can I determine the request is a 404 and set the correct status?

STRML · 2014-10-18T10:13:50Z

I've taken over maintaining this module and I have yet to take a good look at this PR. I will need some time - thanks for bringing this to my attention.

killercup · 2014-10-18T10:29:58Z

Okay, I didn't know this project switched maintainers.

In the meantime I'll be using a workaround to set the HTTP status from within my isomorphic code. Basically, I'll just pass a setHTTPStatus function along as a prop when rendering on the server and it will be called in the NotFound handler. My code is similar to this:

// app.js
var React = require('react');
var {Locations, Location, NotFound} = require('react-router-component');
module.exports = React.createClass({
  render () {
    return Locations({path: this.props.path}, [
      NotFound({handler: require('./404'), setHTTPStatus: (this.props.setHTTPStatus || function() {})})
    ]);
  }
});

// 404.js
var React = require('react');
module.exports = React.createClass({
  render () {
    if (typeof this.props.setHTTPStatus === 'function') {
      this.props.setHTTPStatus(404);
    }
    return React.DOM.h1({}, 'not found');
  }
});

// server.js
var React = require('react');
var App = require('./app');

// ... express stuff ...
server.use(function(req, res, next) {
  var error, page;
  try {
    page = App({
      path: req.path,
      setHTTPStatus: function(code) {
        return res.status(code);
      }
    });
    return res.send(render({
      data: {
        html: React.renderComponentToString(page)
      }
    }));
  } catch (_error) {
    error = _error;
    return next(error);
  }
});
// ... express stuff ...

matthewwithanm added 12 commits April 15, 2014 10:44

Add onDispatch callback

aee67c5

Test onDispatch callback for initial path

3857d8f

Test onDispatch callback for navigate calls

6a4856f

Pass extra info to onDispatch

1a71862

Add connect middleware

064bb1c

Woah, cool!

Add getContentMeta util

aa32840

Test getContentMeta

78815c8

Use getContentMeta; set Content-Type header

9f69052

Linting fixes

bbb266f

Also adds "eqnull: true" to the linting config to allow us to treat `null` and `undefined` the same way.

Rename module; only export middleware

72fffb1

Lowercase "html" in html5 doctype

df701b2

It doesn't matter, but this is the form used in the spec docs. (Only HTML4 capitalizes it.)

Ensure content type can be overridden (even with short doctype)

fddd7fc

matthewwithanm added 2 commits April 24, 2014 11:57

Use ReactAsync to render

91116a2

Clean up callback stuff a bit

5750bec

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

onDispatch callback and connect middleware #46

onDispatch callback and connect middleware #46

matthewwithanm commented Apr 15, 2014

andreypopp commented Apr 22, 2014

matthewwithanm commented Apr 24, 2014

killercup commented Oct 18, 2014

STRML commented Oct 18, 2014

killercup commented Oct 18, 2014

onDispatch callback and connect middleware #46

Are you sure you want to change the base?

onDispatch callback and connect middleware #46

Conversation

matthewwithanm commented Apr 15, 2014

andreypopp commented Apr 22, 2014

matthewwithanm commented Apr 24, 2014

killercup commented Oct 18, 2014

STRML commented Oct 18, 2014

killercup commented Oct 18, 2014