Rename renderer to render

and make it a method that returns a component, rather than an object with a render method
This commit is contained in:
Matthew Taylor 2015-10-15 23:11:09 -04:00
parent b8972d545c
commit 0577860f3a
7 changed files with 34 additions and 24 deletions

23
src/lib/render.jsx Normal file
View file

@ -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);
}
};

View file

@ -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;

View file

@ -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'));
Renderer.render(<Footer />, document.getElementById('footer'));
Render(<Navigation />, document.getElementById('navigation'));
Render(<Footer />, document.getElementById('footer'));

View file

@ -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'));

View file

@ -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'));

View file

@ -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'));

View file

@ -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'));