@danilandreev/material-docs/utils/generateMaterialDocsFromMarkdown.js

material-docs - react framework for easy creating documentation site in material design style.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = generateMaterialDocsFromMarkdown;

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

var _Header = _interopRequireDefault(require("../components/Header"));

var _List = _interopRequireDefault(require("../components/List/List"));

var _ListItem = _interopRequireDefault(require("../components/ListItem/ListItem"));

var _Code = _interopRequireDefault(require("../components/Code/Code"));

var _Link = _interopRequireDefault(require("../components/Link"));

var _Bold = _interopRequireDefault(require("../components/Bold/Bold"));

var _Italic = _interopRequireDefault(require("../components/Italic/Italic"));

var _Image = _interopRequireDefault(require("../components/Image/Image"));

var _Table = _interopRequireDefault(require("../components/Table"));

var _TableHead = _interopRequireDefault(require("../components/TableHead"));

var _TableBody = _interopRequireDefault(require("../components/TableBody"));

var _TableRow = _interopRequireDefault(require("../components/TableRow"));

var _TableCell = _interopRequireDefault(require("../components/TableCell"));

var _Block = _interopRequireDefault(require("../components/Block/Block"));

var _CodeSpan = _interopRequireDefault(require("../components/CodeSpan/CodeSpan"));

var _ExpansionCode = _interopRequireDefault(require("../components/ExpansionCode/ExpansionCode"));

var _DemoWithCode = _interopRequireDefault(require("../components/DemoWithCode/DemoWithCode"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _marked = _interopRequireDefault(require("marked"));

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

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); }

/**
 * fixShieldedText - fixes bug with shielded symbols in text after using lexer.
 * @function
 * @param {string} text
 * @return {string}
 */
function fixShieldedText(text) {
  if (typeof text !== "string") return "";
  return text.replace(/&#39;+/g, "'").replace(/&quot;+/g, "\"").replace(/&lt;+/g, "<").replace(/&gt;/g, ">");
}
/**
 * generateMaterialDocsFromMarkdown - function, designed to generate Material Docs based layout from markdown text.
 * @function
 * @param {string} input Markdown based text. Will be parsed and interpreted.
 * @param {object} storage Object with additional information. Will be used in components with additional setup.
 * @param {string} key Component key
 * @return JSX.Element
 * @throws TypeError
 */


function generateMaterialDocsFromMarkdown(input) {
  var storage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  if (!(typeof input === "string" || _typeof(input) === "object")) throw new TypeError("MaterialDocs: incorrect type of input param, expected \"object | string\", got \"".concat(_typeof(input), "\""));
  var tokens = input;

  if (typeof input === "string") {
    tokens = _marked.default.lexer(input);
  }

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
    key: "markdown-token-".concat(key)
  }, tokens.map(function (token, tokenId) {
    switch (token.type) {
      case "heading":
        return /*#__PURE__*/_react.default.createElement(_Header.default, {
          heading: token.depth,
          key: "heading-token-".concat(tokenId)
        }, token.tokens && generateMaterialDocsFromMarkdown(token.tokens, storage, tokenId + key));

      case "text":
        return token.tokens ? generateMaterialDocsFromMarkdown(token.tokens, tokenId + key) : /*#__PURE__*/_react.default.createElement("span", {
          key: "text-token-".concat(tokenId)
        }, fixShieldedText(token.text));

      case "paragraph":
        return /*#__PURE__*/_react.default.createElement(_Typography.default, {
          key: "paragraph-token-".concat(tokenId)
        }, token.tokens && generateMaterialDocsFromMarkdown(token.tokens, storage, tokenId + key));

      case "list":
        return /*#__PURE__*/_react.default.createElement(_List.default, {
          key: "list-token-".concat(tokenId)
        }, token.items && generateMaterialDocsFromMarkdown(token.items, storage, tokenId + key));

      case "list_item":
        return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
          key: "list-item-token-".concat(tokenId)
        }, token.tokens && generateMaterialDocsFromMarkdown(token.tokens, storage, tokenId + key));

      case "code":
        try {
          var setting = JSON.parse(token.lang);
          var _setting$type = setting.type,
              type = _setting$type === void 0 ? "code" : _setting$type,
              _setting$language = setting.language,
              language = _setting$language === void 0 ? "javascript" : _setting$language;
          if (type !== "expansion-code" && type !== "code" && type !== "demo-with-code") console.error("MaterialDocs: incorrect type of code block setting field \"type\", expected \"expansion-code | code | demo-with-code\" got ".concat(type));
          if (language && typeof language !== "string") console.error("MaterialDocs: incorrect type of code block setting field \"language\", expected \"string\" got ".concat(_typeof(language)));

          switch (setting.type) {
            case "expansion-code":
              {
                var name = setting.name,
                    collapsedHeight = setting.collapsedHeight,
                    theme = setting.theme;
                if (theme && typeof theme !== "string") console.error("MaterialDocs: incorrect type of code block setting field \"theme\", expected \"string\" got ".concat(_typeof(theme)));
                return /*#__PURE__*/_react.default.createElement(_ExpansionCode.default, {
                  language: language,
                  name: name,
                  collapsedHeight: collapsedHeight,
                  key: "code-token-".concat(tokenId),
                  theme: theme
                }, token.text);
                break;
              }

            case "demo-with-code":
              {
                var defaultExpanded = setting.defaultExpanded,
                    text = setting.text,
                    _name = setting.name,
                    _theme = setting.theme;
                if (_theme && typeof _theme !== "string") console.error("MaterialDocs: incorrect type of code block setting field \"theme\", expected \"string\" got ".concat(_typeof(_theme)));
                if (text && typeof text !== "string") console.error("MaterialDocs: incorrect type of code block setting field \"text\", expected \"string\" got ".concat(_typeof(text)));
                var Demo = null;

                if (typeof setting.demo === "string") {
                  Demo = storage[setting.demo];
                }

                return /*#__PURE__*/_react.default.createElement(_DemoWithCode.default, {
                  language: language,
                  defaultExpanded: defaultExpanded,
                  code: token.text,
                  name: _name,
                  theme: _theme,
                  key: "code-token-".concat(tokenId)
                }, Demo || null);
                break;
              }

            default:
              {
                var _theme2 = setting.theme;
                if (_theme2 && typeof _theme2 !== "string") console.error("MaterialDocs: incorrect type of code block setting field \"theme\", expected \"string\" got ".concat(_typeof(_theme2)));
                return /*#__PURE__*/_react.default.createElement(_Code.default, {
                  language: language,
                  key: "code-token-".concat(tokenId),
                  theme: _theme2
                }, token.text);
              }
          }
        } catch (error) {
          if (error instanceof SyntaxError) {
            return /*#__PURE__*/_react.default.createElement(_Code.default, {
              language: token.lang,
              key: "code-token-".concat(tokenId)
            }, token.text);
          } else {
            throw error;
          }
        }

        return /*#__PURE__*/_react.default.createElement(_Code.default, {
          language: token.lang,
          key: "code-token-".concat(tokenId)
        }, token.text);

      case "codespan":
        return /*#__PURE__*/_react.default.createElement(_CodeSpan.default, {
          key: "codespan-token-".concat(tokenId)
        }, token.text);

      case "link":
        {
          var href = token.href,
              _text = token.text,
              _tokens = token.tokens;
          var settings = {};

          try {
            settings = JSON.parse(_text);
            if (typeof settings.text === "string") settings.tokens = _marked.default.lexer(settings.text);
          } catch (e) {
            settings = {
              tokens: _tokens
            };
          } finally {
            settings.href = href;
          }

          return /*#__PURE__*/_react.default.createElement(_Link.default, {
            href: settings.href,
            page: settings.page,
            key: "link-token-".concat(tokenId)
          }, settings.tokens && generateMaterialDocsFromMarkdown(settings.tokens, storage, tokenId + key));
        }

      case "br":
        return /*#__PURE__*/_react.default.createElement("br", {
          key: "br-token-".concat(tokenId)
        });

      case "hr":
        return /*#__PURE__*/_react.default.createElement(_Divider.default, {
          key: "hr-token-".concat(tokenId)
        });

      case "strong":
        return /*#__PURE__*/_react.default.createElement(_Bold.default, {
          key: "strong-token-".concat(tokenId)
        }, token.tokens && generateMaterialDocsFromMarkdown(token.tokens, storage, tokenId + key));

      case "em":
        return /*#__PURE__*/_react.default.createElement(_Italic.default, {
          key: "em-token-".concat(tokenId)
        }, token.tokens && generateMaterialDocsFromMarkdown(token.tokens, storage, tokenId + key));

      case "image":
        return /*#__PURE__*/_react.default.createElement(_Image.default, {
          src: token.href,
          alt: token.text,
          key: "image-token-".concat(tokenId)
        });

      case "table":
        var header = token.tokens.header;
        var cells = token.tokens.cells;
        return /*#__PURE__*/_react.default.createElement(_Table.default, {
          key: "table-token-".concat(tokenId)
        }, /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, header.map(function (cell, index) {
          return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
            key: "markdown-table-head-cell-".concat(index)
          }, /*#__PURE__*/_react.default.createElement(_Bold.default, null, cell && generateMaterialDocsFromMarkdown(cell, storage, tokenId + key)));
        }))), /*#__PURE__*/_react.default.createElement(_TableBody.default, null, cells.map(function (row, index) {
          return /*#__PURE__*/_react.default.createElement(_TableRow.default, {
            key: "markdown-table-row-".concat(index)
          }, row.map(function (cell, index) {
            return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
              key: "markdown-table-cell-".concat(index)
            }, cell && generateMaterialDocsFromMarkdown(cell, storage, tokenId + key));
          }));
        })));

      case "blockquote":
        return /*#__PURE__*/_react.default.createElement(_Block.default, {
          key: "blockquote-token-".concat(tokenId)
        }, token.tokens && generateMaterialDocsFromMarkdown(token.tokens, storage, tokenId + key));

      default:
        return null;
    }
  }));
}