storybook-addon-jsx/lib/index.js

Display the JSX of the story

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.jsxDecorator = void 0;

var _react = _interopRequireDefault(require("react"));

var _addons = require("@storybook/addons");

var _reactElementToJsxString = _interopRequireDefault(require("react-element-to-jsx-string"));

var _jsBeautify = require("js-beautify");

var _constants = require("./constants");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/** Run the user supplied onBeforeRender function if it exists */
var applyBeforeRender = function applyBeforeRender(domString, options) {
  if (typeof options.onBeforeRender !== 'function') {
    return domString;
  }

  return options.onBeforeRender(domString);
};
/** Apply the users parameters and render the jsx for a story */


var renderJsx = function renderJsx(code, options) {
  var renderedJSX = code;
  var Type = renderedJSX.type;

  for (var i = 0; i < options.skip; i++) {
    if (typeof renderedJSX === 'undefined') {
      // eslint-disable-next-line no-console
      console.warn('Cannot skip undefined element');
      return;
    }

    if (_react["default"].Children.count(renderedJSX) > 1) {
      // eslint-disable-next-line no-console
      console.warn('Trying to skip an array of elements');
      return;
    }

    if (typeof renderedJSX.props.children === 'undefined') {
      // eslint-disable-next-line no-console
      console.warn('Not enough children to skip elements.');

      if (typeof Type === 'function' && Type.name === '') {
        renderedJSX = _react["default"].createElement(Type, renderedJSX.props);
      }
    } else if (typeof renderedJSX.props.children === 'function') {
      renderedJSX = renderedJSX.props.children();
    } else {
      renderedJSX = renderedJSX.props.children;
    }
  }

  if (typeof renderedJSX === 'undefined') {
    // eslint-disable-next-line no-console
    return console.warn('Too many skip or undefined component');
  }

  while (typeof Type === 'function' && Type.name === '') {
    renderedJSX = _react["default"].createElement(Type, renderedJSX.props);
    Type = renderedJSX.type;
  }

  var ooo = typeof options.displayName === 'string' ? _objectSpread({}, options, {
    showFunctions: true,
    displayName: function displayName() {
      return options.displayName;
    }
  }) : options;
  return _react["default"].Children.map(renderedJSX, function (c) {
    var string = applyBeforeRender((0, _reactElementToJsxString["default"])(c, ooo), options);
    var matches = string.match(/\S+=\\"([^"]*)\\"/g);

    if (matches) {
      matches.forEach(function (match) {
        string = string.replace(match, match.replace(/&quot;/g, "'"));
      });
    }

    return string;
  }).join('\n');
};
/** Extract the docs for all components used in a story */


var getDocs = function getDocs(story) {
  var types = {};
  /** Walk the story for components */

  function extract(innerChildren) {
    if (!innerChildren) {
      return;
    }

    if (Array.isArray(innerChildren)) {
      innerChildren.forEach(extract);
      return;
    }

    if (innerChildren.props && innerChildren.props.children) {
      extract(innerChildren.props.children);
    }

    Object.values(innerChildren.props || {}).forEach(function (prop) {
      extract(prop);
    });

    if (typeof innerChildren.type !== 'string' && innerChildren.type) {
      var childType = innerChildren.type;
      var name = childType.displayName || childType.name;

      if (name && !types[name]) {
        types[name] = childType.__docgenInfo;
      }
    }
  }

  extract(story);
  return types;
};

var defaultOpts = {
  skip: 0,
  showDefaultProps: true,
  showFunctions: true,
  enableBeautify: true
};
/** Extract components from story and emit them to the panel */

var jsxDecorator = (0, _addons.makeDecorator)({
  name: 'jsx',
  parameterName: 'jsx',
  wrapper: function wrapper(storyFn, parameters) {
    var story = storyFn();

    var channel = _addons.addons.getChannel();

    var options = _objectSpread({}, defaultOpts, {}, parameters && parameters.parameters.jsx || {});

    var components = {};
    var jsx = '';

    if (story.template) {
      if (options.enableBeautify) {
        jsx = (0, _jsBeautify.html)(story.template, options);
      } else {
        jsx = story.template;
      }
    } else {
      var rendered = renderJsx(story, options);

      if (rendered) {
        jsx = rendered;
        components = getDocs(story);
      }
    }

    channel.emit(_constants.EVENTS.ADD_JSX, (parameters || {}).id, jsx, components);
    return story;
  }
});
exports.jsxDecorator = jsxDecorator;
var _default = {
  addWithJSX: function addWithJSX(kind, storyFn) {
    return this.add(kind, function (context) {
      return jsxDecorator(storyFn, context);
    });
  }
};
exports["default"] = _default;