vue-styleguidist/lib/client/utils/processComponents.js

Vue components style guide generator

import "core-js/modules/es.object.keys.js";
import "core-js/modules/es.symbol.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.object.get-own-property-descriptor.js";
import "core-js/modules/es.object.get-own-property-descriptors.js";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/web.dom-collections.for-each.js";
import "core-js/modules/es.function.name.js";
import getUrl from 'react-styleguidist/lib/client/utils/getUrl';
import flatten from 'lodash/flatten';
import compileExamples from './compileExamples';
/**
 * Do things that are hard or impossible to do in a loader: we don’t have access to component name
 * and props in the styleguide-loader because we’re using `require` to load the component module.
 *
 * @param {Array} components
 * @return {Array}
 */
export default function processComponents(_ref, _ref2) {
  var exampleFileNames = _ref.exampleFileNames,
    components = _ref.components;
  var useRouterLinks = _ref2.useRouterLinks,
    useHashId = _ref2.useHashId,
    hashPath = _ref2.hashPath;
  return components.map(function (component) {
    var props = component.props;
    var newComponent = _objectSpread(_objectSpread({}, component), {}, {
      // Add .name shortcuts for names instead of .props.displayName.
      name: component.props.displayName,
      visibleName: component.props.visibleName || component.props.displayName,
      href: component.href || getUrl({
        name: component.props.displayName,
        slug: component.slug,
        anchor: !useRouterLinks,
        hashPath: useRouterLinks ? hashPath : false,
        useSlugAsIdParam: useRouterLinks ? useHashId : false
      }),
      props: _objectSpread(_objectSpread({}, props), {}, {
        // Append @example doclet to all examples
        examples: [].concat(_toConsumableArray(props.examples || []), _toConsumableArray(flatten(props.example)))
      })
    });
    if (component.subComponents) {
      component.subComponents.forEach(function (c) {
        // Add .name shortcuts for names instead of .props.displayName.
        c.name = c.props.displayName;
        c.visibleName = c.props.visibleName || c.props.displayName;
      });
    }
    newComponent.props && compileExamples(newComponent.props.examples || []);
    if (component.props && component.props.examplesFile) {
      var examplesFile = component.props.examplesFile;
      exampleFileNames.push(examplesFile);
    }
    return newComponent;
  });
}