storybook-amp/dist/withAmpDecorator.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.withAmpDecorator = void 0;
var _react = _interopRequireDefault(require("react"));
var _server = _interopRequireDefault(require("react-dom/server"));
var _addons = require("@storybook/addons");
var _templates = require("./templates");
var _getBlodURL = _interopRequireDefault(require("./utils/getBlodURL"));
var _constants = require("./constants");
var _getHtmlFormatForType = _interopRequireDefault(require("./utils/getHtmlFormatForType"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var defaultRenderFn = function defaultRenderFn(storyFn, context) {
  var html = _server["default"].renderToStaticMarkup(storyFn(context));
  return {
    html: html,
    styles: null
  };
};

/* *************** */

var getAmpHTML = function getAmpHTML(storyFn, _ref, templateFn) {
  var title = _ref.title,
    scripts = _ref.scripts,
    customStyles = _ref.styles,
    baseUrl = _ref.baseUrl,
    renderFn = _ref.renderFn,
    context = _ref.context,
    parameters = _ref.parameters;
  var _renderFn = renderFn(storyFn, context),
    html = _renderFn.html,
    styles = _renderFn.styles;
  var innerProps = {
    storyFn: storyFn,
    title: title,
    scripts: scripts && typeof scripts === "string" ? scripts : "",
    styles: "".concat(customStyles && typeof customStyles === "string" ? customStyles : "").concat(styles ? styles : ""),
    baseUrl: baseUrl
  };
  return templateFn(innerProps).replace("<!-- STORY CODE -->", html);
};
/* *************** */

var decorator = function decorator(storyFn) {
  var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _ref2 = arguments.length > 2 ? arguments[2] : undefined,
    _ref2$parameters = _ref2.parameters,
    parameters = _ref2$parameters === void 0 ? {} : _ref2$parameters;
  var title = context.title;
  var _parameters$isEnabled = parameters.isEnabled,
    isEnabled = _parameters$isEnabled === void 0 ? false : _parameters$isEnabled,
    _parameters$template = parameters.template,
    template = _parameters$template === void 0 ? "amphtml" : _parameters$template,
    _parameters$scripts = parameters.scripts,
    scripts = _parameters$scripts === void 0 ? "" : _parameters$scripts,
    _parameters$styles = parameters.styles,
    styles = _parameters$styles === void 0 ? "" : _parameters$styles,
    _parameters$renderFn = parameters.renderFn,
    renderFn = _parameters$renderFn === void 0 ? defaultRenderFn : _parameters$renderFn;
  if (!isEnabled) {
    return storyFn(context);
  }
  var _getTemplateFn = (0, _templates.getTemplateFn)(template),
    type = _getTemplateFn.type,
    templateFn = _getTemplateFn.templateFn;
  var ampHtml = getAmpHTML(storyFn, {
    type: type,
    title: title,
    scripts: scripts,
    styles: styles,
    renderFn: renderFn,
    context: context,
    parameters: parameters,
    baseUrl: window.location.origin
  }, templateFn);
  var blodURL = (0, _getBlodURL["default"])(ampHtml, "text/html");
  var isValid = function isValid(html, format) {
    var _window, _window$parent;
    var parentWindow = (_window = window) === null || _window === void 0 ? void 0 : (_window$parent = _window.parent) === null || _window$parent === void 0 ? void 0 : _window$parent.window;
    return new Promise(function (resolve, reject) {
      var _parentWindow$__STORY, _parentWindow$__STORY2, _parentWindow$amp, _parentWindow$amp$val, _parentWindow$__STORY3, _parentWindow$__STORY4;
      if (parentWindow !== null && parentWindow !== void 0 && (_parentWindow$__STORY = parentWindow.__STORYBOOK_AMP__) !== null && _parentWindow$__STORY !== void 0 && (_parentWindow$__STORY2 = _parentWindow$__STORY.validator) !== null && _parentWindow$__STORY2 !== void 0 && _parentWindow$__STORY2.isReady && parentWindow !== null && parentWindow !== void 0 && (_parentWindow$amp = parentWindow.amp) !== null && _parentWindow$amp !== void 0 && (_parentWindow$amp$val = _parentWindow$amp.validator) !== null && _parentWindow$amp$val !== void 0 && _parentWindow$amp$val.validateString) {
        var _parentWindow$amp2, _parentWindow$amp2$va;
        var validationResults = parentWindow === null || parentWindow === void 0 ? void 0 : (_parentWindow$amp2 = parentWindow.amp) === null || _parentWindow$amp2 === void 0 ? void 0 : (_parentWindow$amp2$va = _parentWindow$amp2.validator) === null || _parentWindow$amp2$va === void 0 ? void 0 : _parentWindow$amp2$va.validateString(html, format);
        resolve((validationResults === null || validationResults === void 0 ? void 0 : validationResults.status) === "PASS");
      } else if (parentWindow !== null && parentWindow !== void 0 && (_parentWindow$__STORY3 = parentWindow.__STORYBOOK_AMP__) !== null && _parentWindow$__STORY3 !== void 0 && (_parentWindow$__STORY4 = _parentWindow$__STORY3.validator) !== null && _parentWindow$__STORY4 !== void 0 && _parentWindow$__STORY4.init) {
        var _parentWindow$__STORY5, _parentWindow$__STORY6;
        parentWindow === null || parentWindow === void 0 ? void 0 : (_parentWindow$__STORY5 = parentWindow.__STORYBOOK_AMP__) === null || _parentWindow$__STORY5 === void 0 ? void 0 : (_parentWindow$__STORY6 = _parentWindow$__STORY5.validator) === null || _parentWindow$__STORY6 === void 0 ? void 0 : _parentWindow$__STORY6.init().then(function () {
          var _parentWindow$amp3, _parentWindow$amp3$va;
          var validationResults = parentWindow === null || parentWindow === void 0 ? void 0 : (_parentWindow$amp3 = parentWindow.amp) === null || _parentWindow$amp3 === void 0 ? void 0 : (_parentWindow$amp3$va = _parentWindow$amp3.validator) === null || _parentWindow$amp3$va === void 0 ? void 0 : _parentWindow$amp3$va.validateString(html, format);
          resolve((validationResults === null || validationResults === void 0 ? void 0 : validationResults.status) === "PASS");
        });
      }
    });
  };

  /* *************** */
  var channel = _addons.addons.getChannel();
  channel.emit(_constants.EVENTS.RESULT, {
    html: ampHtml,
    type: type,
    isValid: isValid
  });
  /* *************** */

  if (window.self === window.top) {
    location.href = blodURL;
    var EmptyElement = function EmptyElement() {
      return null;
    };
    return /*#__PURE__*/_react["default"].createElement(EmptyElement, null);
  }
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("style", {
    dangerouslySetInnerHTML: {
      __html: "body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; }"
    }
  }), /*#__PURE__*/_react["default"].createElement("iframe", {
    id: "amp-iframe",
    src: blodURL,
    title: "Iframe",
    style: {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      border: "none"
    }
  }));
};
var withAmpDecorator = (0, _addons.makeDecorator)({
  name: "withAmpDecorator",
  parameterName: _constants.PARAM_KEY,
  wrapper: function wrapper(storyFn, context, _ref3) {
    var parameters = _ref3.parameters;
    return decorator(storyFn, context, {
      parameters: parameters
    });
  }
});
exports.withAmpDecorator = withAmpDecorator;