storybook-amp/render-fn/emotion-js/index.js

Storybook addon for AMP Html. Allows to display in your stories AMP Html components generated with React.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _server = require("react-dom/server");
var _react2 = require("@emotion/react");
var _createInstance = _interopRequireDefault(require("@emotion/server/create-instance"));
var _cache = _interopRequireDefault(require("@emotion/cache"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var _default = function _default(storyFn, context) {
  var cache = (0, _cache["default"])({
    key: "amp"
  });
  var _createEmotionServer = (0, _createInstance["default"])(cache),
    extractCritical = _createEmotionServer.extractCritical;
  var element = /*#__PURE__*/_react["default"].createElement(_react2.CacheProvider, {
    value: cache
  }, storyFn(context));
  var _extractCritical = extractCritical((0, _server.renderToString)(element)),
    html = _extractCritical.html,
    styles = _extractCritical.css;
  console.log("Html !!!!");
  console.log(html);
  console.log("Styles !!!!");
  console.log(styles);
  return {
    html: html,
    styles: styles
  };
};
exports["default"] = _default;