react-esc-render-jss
Version:
JSS intergration for React-ESC
173 lines (139 loc) • 5.72 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var React = _interopDefault(require('react'));
var reactJss = require('react-jss');
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var PropTypes = _interopDefault(require('prop-types'));
var server = _interopDefault(require('react-dom/server'));
var isProduction = process.env.NODE_ENV === 'production';
var createGenerateClassName = (function () {
var ruleCounter = 0;
return function (rule, sheet) {
ruleCounter += 1;
if (isProduction) {
var firstChar = rule.key.charAt(0).toLowerCase();
return "c".concat(firstChar).concat(ruleCounter);
}
if (sheet && sheet.options.name) {
var name = sheet.options.name; // Sanitize the string as will be used in development to prefix the generated class name.
name = name.replace(new RegExp(/[!"#$%&'()*+,./:; <=>?@[\\\]^`{|}~]/g), '-');
return "".concat(name, "-").concat(rule.key, "-").concat(ruleCounter);
}
return "".concat(rule.key, "-").concat(ruleCounter);
};
});
var MainContainer =
/*#__PURE__*/
function (_React$Component) {
_inherits(MainContainer, _React$Component);
function MainContainer() {
_classCallCheck(this, MainContainer);
return _possibleConstructorReturn(this, _getPrototypeOf(MainContainer).apply(this, arguments));
}
_createClass(MainContainer, [{
key: "componentDidMount",
value: function componentDidMount() {
var jssStyles = document.getElementById('jss-server-side');
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
}, {
key: "render",
value: function render() {
return this.props.children;
}
}]);
return MainContainer;
}(React.Component);
_defineProperty(MainContainer, "propTypes", {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired // Remove the server-side injected CSS.
});
var JssClient = function JssClient(config) {
var _this = this;
_classCallCheck(this, JssClient);
_defineProperty(this, "jss", void 0);
_defineProperty(this, "config", void 0);
_defineProperty(this, "render", function (App, props) {
return React.createElement(MainContainer, null, React.createElement(reactJss.JssProvider, {
jss: _this.jss
}, React.createElement(App, props)));
});
this.config = config;
var options = {
createGenerateClassName: createGenerateClassName
};
if (config.jss && config.jss.options) {
options = _objectSpread({}, options, config.jss.options);
}
reactJss.jss.setup(options);
this.jss = reactJss.jss;
};
var renderHtmlLayout = (function (head, body, css) {
var initialState = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
return '<!DOCTYPE html>' + (0, server.renderToStaticMarkup)(React.createElement('html', head.htmlAttributes.toComponent(), React.createElement('head', null, head.title.toComponent(), head.meta.toComponent(), head.base.toComponent(), head.link.toComponent(), head.script.toComponent(), head.style.toComponent(), React.createElement('style', {
id: 'jss-server-side',
dangerouslySetInnerHTML: {
__html: css
}
}), React.createElement('script', {
dangerouslySetInnerHTML: {
__html: "___INITIAL_STATE__=".concat(JSON.stringify(initialState))
}
})), React.createElement('body', null, body)));
});
// Non-breaking space is specifically handled inside the replacer function here:
var collapseWhitespace = (function (str) {
return str && str.replace(/[ \n\r\t\f\xA0]+/g, function (spaces) {
return spaces === '\t' ? '\t' : spaces.replace(/(^|\xA0+)[^\xA0]+/g, '$1 ');
});
});
var JssServer =
/*#__PURE__*/
function () {
function JssServer(config) {
_classCallCheck(this, JssServer);
this.config = config;
var options = {
createGenerateClassName: createGenerateClassName
};
if (this.config.jss && this.config.jss.options) {
options = _objectSpread({}, options, this.config.jss.options);
}
reactJss.jss.setup(options);
this.jss = reactJss.jss;
this.sheetsRegistry = new reactJss.SheetsRegistry();
}
_createClass(JssServer, [{
key: "render",
value: function render(App, props) {
return React.createElement(reactJss.JssProvider, {
registry: this.sheetsRegistry,
jss: this.jss
}, React.createElement(App, props));
}
}, {
key: "postRender",
value: function postRender(_ref) {
var head = _ref.head,
body = _ref.body,
content = _ref.content,
scripts = _ref.scripts,
store = _ref.store;
// Grab the CSS from our sheetsRegistry.
var css = collapseWhitespace(this.sheetsRegistry.toString());
return renderHtmlLayout(head, [body, scripts], css, store.getState());
}
}]);
return JssServer;
}();
exports.RenderClient = JssClient;
exports.RenderServer = JssServer;
//# sourceMappingURL=react-esc-render-jss.development.js.map