yahoi/dist/lib/Renderer/ClientRenderer.js

Yet Another Highly Opinionated Isomorphic Framework

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _server = require('react-dom/server');

var _Renderer = require('./../Renderer');

var _styledComponents = require('styled-components');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var requireAll = require('require-all');

var ClientRenderer = function () {
  function ClientRenderer(props) {
    _classCallCheck(this, ClientRenderer);

    this.projectPath = props.projectPath;
    this.state = props.state;
    this.req = props.req;
    this.targetView = props.targetView;
  }

  _createClass(ClientRenderer, [{
    key: 'loadTranslations',
    value: function loadTranslations(language) {

      var resources = requireAll({
        dirname: this.projectPath + '/Translations',
        filter: /^.*\.(JSON|json)$/,
        recursive: true,
        map: function map(name, path) {
          if (name == 'json') {
            return require('path').basename(path).split('.')[0];
          } else {
            return name;
          }
        }
      });

      return resources;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this = this;

      var req = this.req;
      var preloadedState = this.preloadedState;

      return new Promise(function (fulfill, reject) {
        var compPath = _this.projectPath + '/Client/index.js';
        try {
          var preloadedState = _this.state;

          // locale Store?
          var localeStore = preloadedState.Locale;
          if (typeof localeStore == 'undefined') {
            localeStore = {
              preloadedTranslations: _this.loadTranslations('en')
            };
          } else {
            if (typeof localeStore.language != 'undefined') {
              localeStore.preloadedTranslations = _this.loadTranslations(localeStore.language);
            } else {
              localeStore.preloadedTranslations = _this.loadTranslations('en');
            }
          }

          var injectedPreloadedState = JSON.stringify(preloadedState);
          if (process.env.NODE_ENV != 'development') {
            // Server Side Safe require
            var Module = require('module');
            var originalRequire = Module.prototype.require;
            Module.prototype.require = function () {
              if (!/.\.css$/.test(arguments[0])) {
                return originalRequire.apply(this, arguments);
              }
            };
            var sourceComponent = originalRequire(compPath).default;
          } else {
            var sourceComponent = require(compPath).default;
          }

          var Component = _react2.default.createFactory(sourceComponent);
          var ssr = {
            location: req.url,
            context: {},
            preloadedState: preloadedState
          };

          if (process.env.NODE_ENV != 'development') {
            require = originalRequire;
          }

          //        console.log('root comp', Component);

          var initatedComponent = _react2.default.createElement(Component, { ssr: ssr });

          var sheet = new _styledComponents.ServerStyleSheet();

          var htmlStyle = (0, _server.renderToString)(sheet.collectStyles(initatedComponent));
          var styleTags = sheet.getStyleTags();

          var renderedClient = (0, _server.renderToString)(initatedComponent);
        } catch (e) {
          var message = e.message || '';
          var stack = e.stack || '';
          var renderedClient = 'Error rendering ' + compPath + ':<br/><br/><div style=\'color:#ff0000\'>' + message + '<br/><br/>' + stack + '</div>';
        }
        var CLIENT_INJECTOR = '<script>window.__PRELOADED_STATE__=' + injectedPreloadedState + '</script><div id=\'client-wrapper\'>' + renderedClient + '</div><script src="/public/clientjs/vendor.js"></script><script src="/public/clientjs/main.js"></script>';

        var EXTRACTED_POST_CSS_LINK = '<link rel="stylesheet" type="text/css" href="/Public/clientjs/main.css">';

        var viewRenderer = new _Renderer.ViewRenderer({
          filePath: _this.projectPath + '/Views/' + _this.targetView,
          data: {
            CLIENT: CLIENT_INJECTOR,
            STYLED_COMPONENTS_STYLE_TAG: styleTags,
            EXTRACTED_POST_CSS_LINK: EXTRACTED_POST_CSS_LINK
          }
        });
        viewRenderer.render().then(function (renderedHtml) {
          fulfill(renderedHtml);
        }).catch(function (e) {
          console.log(e);
          reject(e);
        });
      });
    }
  }]);

  return ClientRenderer;
}();

exports.default = ClientRenderer;