Styled components support (#2)

* createFactory is considered legacy. Tis encouraged to use createElement directly

* Add styled-components support + tests

* Re-add

lib/Component.js

@@ -1,12 +1,12 @@
 var React = require('react');
 var ReactDOMServer = require('react-dom/server');
 var decache = require('decache');
+var styledComponents = require('styled-components');
 
 var Component = function Component(opts) {
   this.opts = opts;
   this.path = null;
   this.component = null;
-  this.factory = null;
 };
 
 Component.prototype.getPath = function getPath(cb) {
@@ -54,36 +54,33 @@ Component.prototype.getComponent = function getComponent(cb) {
   }.bind(this));
 };
 
-Component.prototype.getFactory = function getFactory(cb) {
-  if (this.factory) {
-    return cb(null, this.factory);
-  }
-
+Component.prototype.renderToString = function renderToString(props, cb) {
   this.getComponent(function(err, component) {
     if (err) return cb(err);
 
+    var sheet = new styledComponents.ServerStyleSheet();
+
     try {
-      this.factory = React.createFactory(component);
-    } catch(err) {
-      cb(err);
+      var markup = ReactDOMServer.renderToString(
+        sheet.collectStyles(React.createElement(component, props))
+      );
+    } catch (err) {
+      return cb(err);
     }
 
-    cb(null, this.factory);
+    // Add style tags
+    markup = sheet.getStyleTags() + markup;
+
+    cb(null, markup);
   }.bind(this));
 };
 
-Component.prototype._render = function _render(props, toStaticMarkup, cb) {
-  this.getFactory(function(err, factory) {
+Component.prototype.renderToStaticMarkup = function renderToStaticMarkup(props, cb) {
+  this.getComponent(function(err, component) {
     if (err) return cb(err);
 
-    var render = (
-      toStaticMarkup
-        ? ReactDOMServer.renderToStaticMarkup
-        : ReactDOMServer.renderToString
-    ).bind(ReactDOMServer);
-
     try {
-      var markup = render(factory(props));
+      var markup = ReactDOMServer.renderToStaticMarkup(React.createElement(component, props));
     } catch (err) {
       return cb(err);
     }
@@ -92,12 +89,4 @@ Component.prototype._render = function _render(props, toStaticMarkup, cb) {
   }.bind(this));
 };
 
-Component.prototype.renderToString = function renderToString(props, cb) {
-  this._render(props, false, cb);
-};
-
-Component.prototype.renderToStaticMarkup = function renderToStaticMarkup(props, cb) {
-  this._render(props, true, cb);
-};
-
 module.exports = Component;

lib/index.js

@@ -49,4 +49,4 @@ var reactRender = function reactRender(opts, cb) {
 
 reactRender._components = components;
 
-module.exports = reactRender;
+module.exports = reactRender;

package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "decache": "^4.1.0",
-    "lodash": "^3.10.0"
+    "lodash": "^3.10.0",
+    "styled-components": "^3.3.2"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",