Rename renderer to render

and make it a method that returns a component, rather than an object with a render method

src/lib/render.jsx

@@ -0,0 +1,23 @@
+var ReactDOM = require('react-dom');
+var ReactIntl = require('react-intl');
+var IntlProvider = ReactIntl.IntlProvider;
+
+module.exports = function (jsx, element) {
+    // Get locale and messages from global namespace (see "init.js")
+    var locale = window._locale;
+    var messages = window._translations[locale];
+
+    // Render component
+    var component = ReactDOM.render(
+        <IntlProvider locale={locale} messages={messages}>
+            {jsx}
+        </IntlProvider>,
+        element
+    );
+
+    // If in production, provide list of rendered components
+    if (process.env.NODE_ENV != 'production') {
+        window._renderedComponents = window._renderedComponents || [];
+        window._renderedComponents.push(component);
+    }
+};

src/lib/renderer.jsx

@@ -1,13 +0,0 @@
-var ReactDOM = require('react-dom');
-
-var Renderer = {
-    render: function (jsx, toElement) {
-        var rendered = ReactDOM.render(jsx, toElement);
-        if (process.env.NODE_ENV != 'production') {
-            window.renderedComponents = window.renderedComponents || [];
-            window.renderedComponents.push(rendered);
-        }
-    }
-};
-
-module.exports = Renderer;

src/main.jsx

@@ -1,9 +1,9 @@
-var Renderer = require('./lib/renderer.jsx');
+var Render = require('./lib/render.jsx');
 
 require('./main.scss');
 
 var Navigation = require('./components/navigation/navigation.jsx');
 var Footer = require('./components/footer/footer.jsx');
 
-Renderer.render(<Navigation />, document.getElementById('navigation'));
+Render(<Navigation />, document.getElementById('navigation'));
-Renderer.render(<Footer />, document.getElementById('footer'));
+Render(<Footer />, document.getElementById('footer'));

src/views/about/about.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var Renderer = require('../../lib/renderer.jsx');
+var Render = require('../../lib/render.jsx');
 
 require('./about.scss');
 
@@ -14,4 +14,4 @@ var About = React.createClass({
     }
 });
 
-Renderer.render(<About />, document.getElementById('view'));
+Render(<About />, document.getElementById('view'));

src/views/components/components.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var Renderer = require('../../lib/renderer.jsx');
+var Render = require('../../lib/render.jsx');
 
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
@@ -37,4 +37,4 @@ var Components = React.createClass({
     }
 });
 
-Renderer.render(<Components />, document.getElementById('view'));
+Render(<Components />, document.getElementById('view'));

src/views/hoc/hoc.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var Renderer = require('../../lib/renderer.jsx');
+var Render = require('../../lib/render.jsx');
 
 require('./hoc.scss');
 
@@ -133,4 +133,4 @@ var Hoc = React.createClass({
     }
 });
 
-Renderer.render(<Hoc />, document.getElementById('view'));
+Render(<Hoc />, document.getElementById('view'));

src/views/splash/splash.jsx

@@ -1,5 +1,5 @@
 var React = require('react');
-var Renderer = require('../../lib/renderer.jsx');
+var Render = require('../../lib/render.jsx');
 
 var Api = require('../../mixins/api.jsx');
 var Session = require('../../mixins/session.jsx');
@@ -73,4 +73,4 @@ var Splash = React.createClass({
     }
 });
 
-Renderer.render(<Splash />, document.getElementById('view'));
+Render(<Splash />, document.getElementById('view'));