Replaceable matchMedia() function for server side rendering

[azazdeaz]

Hi! We are using this fork both for server side rendering and generating mobile device preview on client side.

It replaces the window.matchMedia() calls with Radium.matchMedia() which is working like a strategy so you can replace the currently used matchMedia function like Radium.matchMedia.replace(iframe.contentWindow.matchMedia)

It provides css-mediaquery based substitution for window.matchMedia() (MatchMediaMock) so it can be used with only js on the server side.

ex:

var Radium = require('radium');
var matchMediaMock = require('radium/modules/match-media-mock');
Radium.matchMedia.replace(matchMediaMock);

app.get('/app/:width/:height', function(req, res) {

  matchMediaMock.setConfig({
    type: 'screen',
    width: req.params.width,
    height: req.params.height,
  });

  var html = React.renderToString(<RadiumApp/>);

  res.end(html);
});

As you see, it's not a full solution for the server side rendering because you have to be able to send some information about the client device in the request. I don't know whether this use case support is among your goals but if so, and you like this approach i would be happy to prepare this to be mergeable.

[coveralls]

Coverage decreased (-14.29%) to 85.71% when pulling 768b2aa on azazdeaz:master into 6e37e5c on FormidableLabs:master.

[alexlande]

Thanks @azazdeaz, this looks cool. In general, I don't think that we want to include something like match-media-mock directly, but allowing an interface like Radium.matchMedia.replace() for this use case makes sense to me.

Long term, I still think we need to do CSS generation for media queries + states as in #53 for proper isomorphic rendering, but this would help in the meantime.

/cc @ianobermiller, thoughts?

[ianobermiller]

Yes, I like this. I'll add a bunch of comments in code, but I think a better and more scalable interface might be to expose a Radium.Config object with a bunch of methods. In this case, it would be Radium.Config.setMatchMedia. We've also talked about adding support for named media queries, which would fit nicely here.

[ianobermiller]

Instead of detect-node, we should use a copy of React's execution environment (since we shouldn't be deep linking into React): https://github.com/facebook/react/blob/2aeb8a2a6beb00617a4217f7f8284924fa2ad819/src/vendor/core/ExecutionEnvironment.js

[azazdeaz]

Hi! I rebased and made the changes regards your comments. Now the example looks like this:

var Radium = require('radium');
var matchMediaMock = require('match-media-mock').create();
Radium.Config.setMatchMedia(matchMediaMock);

app.get('/app/:width/:height', function(req, res) {

  matchMediaMock.setConfig({
    type: 'screen',
    width: req.params.width,
    height: req.params.height,
  });

  var html = React.renderToString(<RadiumApp/>);

  res.end(html);
});

And here you can check the match-media-mock module: https://github.com/azazdeaz/match-media-mock

[ianobermiller]

This looks great, thank you!

[bunkat]

This pull request broke IE11. The matchMedia export overrides the built-in matchMedia function which causes IE to throw an Invalid calling object exception and will not load the page.