storybook-addon-javascript-toggler
Version:
Storybook addon to toggle javascript in the preview area
76 lines (55 loc) • 9.86 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SandBoxedIFrame = void 0;
var React = _interopRequireWildcard(require("react"));
var _server = require("react-dom/server");
var _replacers = require("../utils/replacers");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var sandBoxedIFrameStyle = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
height: '100%',
width: '100%',
border: 0
};
var SandBoxedIFrame = function SandBoxedIFrame(_ref) {
var children = _ref.children;
var frameRef = React.useRef(null);
var frameInnerHTML = btoa("<!DOCTYPE html>\n <html>\n <head>\n <meta charset=\"utf-8\">\n <script>window.onmessage = function(e){document.body.innerHTML = e.data}</script>\n </head>\n <body>\n <center><h4>Wait until I generated the static preview.</center></h4>\n </body>\n </html>");
var baseURL = window.location.origin;
var onFrameLoaded = function onFrameLoaded() {
var _document$body$getAtt, _renderToStaticMarkup, _frameRef$current$con;
var newContent = [Array.from(document.querySelectorAll('style, link')).map(function (el) {
var _el$outerHTML$replace, _el$outerHTML;
return (_el$outerHTML$replace = (_el$outerHTML = el.outerHTML).replace.apply(_el$outerHTML, _toConsumableArray(_replacers.removeCSSComment))).replace.apply(_el$outerHTML$replace, _toConsumableArray((0, _replacers.correctURLs)(baseURL)));
}).join(''), "<style>body{".concat((_document$body$getAtt = document.body.getAttribute('style')) === null || _document$body$getAtt === void 0 ? void 0 : _document$body$getAtt.replace(';', '!important;') // 😏
, "}</style>"), (_renderToStaticMarkup = (0, _server.renderToStaticMarkup)(children)).replace.apply(_renderToStaticMarkup, _toConsumableArray((0, _replacers.correctURLs)(baseURL)))]; // TODO: use postMessage to get more than content;
// {
// newContent: [newContent],
// inlineStyles: {[selector]: [styles]}}
// }
if (frameRef.current) (_frameRef$current$con = frameRef.current.contentWindow) === null || _frameRef$current$con === void 0 ? void 0 : _frameRef$current$con.postMessage(newContent.join(''), '*');
};
return /*#__PURE__*/React.createElement("iframe", {
ref: frameRef,
title: "Sandboxed IFrame",
onLoad: onFrameLoaded,
style: sandBoxedIFrameStyle,
src: "data:text/html;base64,".concat(frameInnerHTML)
});
};
exports.SandBoxedIFrame = SandBoxedIFrame;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL1NhbmRCb3hlZElGcmFtZS50c3giXSwibmFtZXMiOlsic2FuZEJveGVkSUZyYW1lU3R5bGUiLCJwb3NpdGlvbiIsInRvcCIsInJpZ2h0IiwiYm90dG9tIiwibGVmdCIsImhlaWdodCIsIndpZHRoIiwiYm9yZGVyIiwiU2FuZEJveGVkSUZyYW1lIiwiY2hpbGRyZW4iLCJmcmFtZVJlZiIsIlJlYWN0IiwidXNlUmVmIiwiZnJhbWVJbm5lckhUTUwiLCJidG9hIiwiYmFzZVVSTCIsIndpbmRvdyIsImxvY2F0aW9uIiwib3JpZ2luIiwib25GcmFtZUxvYWRlZCIsIm5ld0NvbnRlbnQiLCJBcnJheSIsImZyb20iLCJkb2N1bWVudCIsInF1ZXJ5U2VsZWN0b3JBbGwiLCJtYXAiLCJlbCIsIm91dGVySFRNTCIsInJlcGxhY2UiLCJyZW1vdmVDU1NDb21tZW50Iiwiam9pbiIsImJvZHkiLCJnZXRBdHRyaWJ1dGUiLCJjdXJyZW50IiwiY29udGVudFdpbmRvdyIsInBvc3RNZXNzYWdlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQTs7QUFDQTs7QUFDQTs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRUEsSUFBTUEsb0JBQW9CLEdBQUc7QUFDM0JDLEVBQUFBLFFBQVEsRUFBRSxVQURpQjtBQUNMQyxFQUFBQSxHQUFHLEVBQUUsQ0FEQTtBQUNHQyxFQUFBQSxLQUFLLEVBQUUsQ0FEVjtBQUNhQyxFQUFBQSxNQUFNLEVBQUUsQ0FEckI7QUFDd0JDLEVBQUFBLElBQUksRUFBRSxDQUQ5QjtBQUUzQkMsRUFBQUEsTUFBTSxFQUFFLE1BRm1CO0FBRVhDLEVBQUFBLEtBQUssRUFBRSxNQUZJO0FBRUlDLEVBQUFBLE1BQU0sRUFBRTtBQUZaLENBQTdCOztBQUtPLElBQU1DLGVBRVgsR0FBRyxTQUZRQSxlQUVSLE9BQWtCO0FBQUEsTUFBZkMsUUFBZSxRQUFmQSxRQUFlO0FBRXJCLE1BQU1DLFFBQVEsR0FBR0MsS0FBSyxDQUFDQyxNQUFOLENBQWdDLElBQWhDLENBQWpCO0FBRUEsTUFBTUMsY0FBYyxHQUFHQyxJQUFJLCtSQUEzQjtBQVdBLE1BQU1DLE9BQU8sR0FBR0MsTUFBTSxDQUFDQyxRQUFQLENBQWdCQyxNQUFoQzs7QUFDQSxNQUFNQyxhQUFhLEdBQUcsU0FBaEJBLGFBQWdCLEdBQU07QUFBQTs7QUFDMUIsUUFBTUMsVUFBVSxHQUFHLENBQ2pCQyxLQUFLLENBQUNDLElBQU4sQ0FBV0MsUUFBUSxDQUFDQyxnQkFBVCxDQUEwQixhQUExQixDQUFYLEVBQXFEQyxHQUFyRCxDQUF5RCxVQUFBQyxFQUFFO0FBQUE7O0FBQUEsYUFDekQsMENBQUFBLEVBQUUsQ0FBQ0MsU0FBSCxFQUFhQyxPQUFiLHlDQUF3QkMsMkJBQXhCLElBQTBDRCxPQUExQyxpREFBc0QsNEJBQVliLE9BQVosQ0FBdEQsRUFEeUQ7QUFBQSxLQUEzRCxFQUVFZSxJQUZGLENBRU8sRUFGUCxDQURpQixpREFLZlAsUUFBUSxDQUFDUSxJQUFULENBQWNDLFlBQWQsQ0FBMkIsT0FBM0IsQ0FMZSwwREFLZixzQkFBcUNKLE9BQXJDLENBQTZDLEdBQTdDLEVBQWtELGFBQWxELENBTGUsQ0FLaUQ7QUFMakQsb0JBT2pCLDJEQUFxQm5CLFFBQXJCLEdBQStCbUIsT0FBL0IsaURBQTJDLDRCQUFZYixPQUFaLENBQTNDLEVBUGlCLENBQW5CLENBRDBCLENBVTFCO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBQ0EsUUFBSUwsUUFBUSxDQUFDdUIsT0FBYixFQUNFLHlCQUFBdkIsUUFBUSxDQUFDdUIsT0FBVCxDQUFpQkMsYUFBakIsZ0ZBQWdDQyxXQUFoQyxDQUE0Q2YsVUFBVSxDQUFDVSxJQUFYLENBQWdCLEVBQWhCLENBQTVDLEVBQWlFLEdBQWpFO0FBQ0gsR0FqQkQ7O0FBbUJBLHNCQUNFO0FBQVEsSUFBQSxHQUFHLEVBQUVwQixRQUFiO0FBQXVCLElBQUEsS0FBSyxFQUFDLGtCQUE3QjtBQUNFLElBQUEsTUFBTSxFQUFFUyxhQURWO0FBQ3lCLElBQUEsS0FBSyxFQUFFcEIsb0JBRGhDO0FBQzZFLElBQUEsR0FBRyxrQ0FBNEJjLGNBQTVCO0FBRGhGLElBREY7QUFLRCxDQTFDTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgcmVuZGVyVG9TdGF0aWNNYXJrdXAgfSBmcm9tICdyZWFjdC1kb20vc2VydmVyJ1xuaW1wb3J0IHsgY29ycmVjdFVSTHMsIHJlbW92ZUNTU0NvbW1lbnQgfSBmcm9tICcuLi91dGlscy9yZXBsYWNlcnMnXG5cbmNvbnN0IHNhbmRCb3hlZElGcmFtZVN0eWxlID0ge1xuICBwb3NpdGlvbjogJ2Fic29sdXRlJywgdG9wOiAwLCByaWdodDogMCwgYm90dG9tOiAwLCBsZWZ0OiAwLFxuICBoZWlnaHQ6ICcxMDAlJywgd2lkdGg6ICcxMDAlJywgYm9yZGVyOiAwXG59XG5cbmV4cG9ydCBjb25zdCBTYW5kQm94ZWRJRnJhbWU6IFJlYWN0LkZDPHtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0RWxlbWVudDtcbn0+ID0gKHsgY2hpbGRyZW4gfSkgPT4ge1xuXG4gIGNvbnN0IGZyYW1lUmVmID0gUmVhY3QudXNlUmVmPEhUTUxJRnJhbWVFbGVtZW50PihudWxsKVxuXG4gIGNvbnN0IGZyYW1lSW5uZXJIVE1MID0gYnRvYShgPCFET0NUWVBFIGh0bWw+XG4gIDxodG1sPlxuICAgIDxoZWFkPlxuICAgICAgPG1ldGEgY2hhcnNldD1cInV0Zi04XCI+XG4gICAgICA8c2NyaXB0PndpbmRvdy5vbm1lc3NhZ2UgPSBmdW5jdGlvbihlKXtkb2N1bWVudC5ib2R5LmlubmVySFRNTCA9IGUuZGF0YX08L3NjcmlwdD5cbiAgICA8L2hlYWQ+XG4gICAgPGJvZHk+XG4gICAgICA8Y2VudGVyPjxoND5XYWl0IHVudGlsIEkgZ2VuZXJhdGVkIHRoZSBzdGF0aWMgcHJldmlldy48L2NlbnRlcj48L2g0PlxuICAgIDwvYm9keT5cbiAgPC9odG1sPmApXG5cbiAgY29uc3QgYmFzZVVSTCA9IHdpbmRvdy5sb2NhdGlvbi5vcmlnaW5cbiAgY29uc3Qgb25GcmFtZUxvYWRlZCA9ICgpID0+IHtcbiAgICBjb25zdCBuZXdDb250ZW50ID0gW1xuICAgICAgQXJyYXkuZnJvbShkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdzdHlsZSwgbGluaycpKS5tYXAoZWwgPT5cbiAgICAgICAgZWwub3V0ZXJIVE1MLnJlcGxhY2UoLi4ucmVtb3ZlQ1NTQ29tbWVudCkucmVwbGFjZSggLi4uY29ycmVjdFVSTHMoYmFzZVVSTCkgKVxuICAgICAgKS5qb2luKCcnKSxcbiAgICAgIGA8c3R5bGU+Ym9keXske1xuICAgICAgICBkb2N1bWVudC5ib2R5LmdldEF0dHJpYnV0ZSgnc3R5bGUnKT8ucmVwbGFjZSgnOycsICchaW1wb3J0YW50OycpLy8g8J+Yj1xuICAgICAgfX08L3N0eWxlPmAsXG4gICAgICByZW5kZXJUb1N0YXRpY01hcmt1cChjaGlsZHJlbikucmVwbGFjZSggLi4uY29ycmVjdFVSTHMoYmFzZVVSTCkgKVxuICAgIF1cbiAgICAvLyBUT0RPOiB1c2UgcG9zdE1lc3NhZ2UgdG8gZ2V0IG1vcmUgdGhhbiBjb250ZW50O1xuICAgIC8vIHtcbiAgICAvLyAgIG5ld0NvbnRlbnQ6IFtuZXdDb250ZW50XSxcbiAgICAvLyAgIGlubGluZVN0eWxlczoge1tzZWxlY3Rvcl06IFtzdHlsZXNdfX1cbiAgICAvLyB9XG4gICAgaWYgKGZyYW1lUmVmLmN1cnJlbnQpXG4gICAgICBmcmFtZVJlZi5jdXJyZW50LmNvbnRlbnRXaW5kb3c/LnBvc3RNZXNzYWdlKG5ld0NvbnRlbnQuam9pbignJyksICcqJylcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPGlmcmFtZSByZWY9e2ZyYW1lUmVmfSB0aXRsZT1cIlNhbmRib3hlZCBJRnJhbWVcIlxuICAgICAgb25Mb2FkPXtvbkZyYW1lTG9hZGVkfSBzdHlsZT17c2FuZEJveGVkSUZyYW1lU3R5bGUgYXMgUmVhY3QuQ1NTUHJvcGVydGllc30gc3JjPXtgZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LCR7IGZyYW1lSW5uZXJIVE1MIH1gfSAvPlxuICApXG5cbn1cbiJdfQ==