@mui/internal-docs-infra/esm/abstractCreateDemo/abstractCreateDemo.js

MUI Infra - internal documentation creation tools.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { CodeHighlighter } from "../CodeHighlighter/index.js";
import { createDemoDataWithVariants } from "../createDemoData/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function abstractCreateDemo(options, url, variants, meta) {
  var demoData = createDemoDataWithVariants(url, variants, meta);
  var variantType = options.variantTypes && options.variantTypes[Object.keys(variants).sort().join(':')];
  var globalCode = [];
  if (options.demoGlobalData) {
    options.demoGlobalData.forEach(function (data) {
      globalCode.push(data.precompute || data.url);
    });
  }
  function DemoComponent(props) {
    var renderedComponents = Object.entries(demoData.components).reduce(function (acc, _ref) {
      var _ref2 = _slicedToArray(_ref, 2),
        key = _ref2[0],
        Component = _ref2[1];
      acc[key] = /*#__PURE__*/React.createElement(Component);
      return acc;
    }, {});
    var highlighter = /*#__PURE__*/_jsx(CodeHighlighter, {
      url: demoData.url,
      name: demoData.name,
      slug: demoData.slug,
      variantType: (meta == null ? void 0 : meta.variantType) || variantType,
      precompute: demoData.precompute,
      globalsCode: globalCode,
      components: renderedComponents,
      contentProps: props,
      Content: options.DemoContent,
      ContentLoading: options.DemoContentLoading,
      loadCodeMeta: options.loadCodeMeta,
      loadVariantMeta: options.loadVariantMeta,
      loadSource: options.loadSource,
      sourceParser: options.sourceParser,
      highlightAfter: (meta == null ? void 0 : meta.highlightAfter) || options.highlightAfter,
      enhanceAfter: (meta == null ? void 0 : meta.enhanceAfter) || options.enhanceAfter,
      controlled: options.controlled,
      fallbackUsesExtraFiles: options.fallbackUsesExtraFiles,
      fallbackUsesAllVariants: options.fallbackUsesAllVariants
    });

    // Use client provider if available
    var ClientProvider = meta == null ? void 0 : meta.ClientProvider;
    if (ClientProvider) {
      return /*#__PURE__*/_jsx(ClientProvider, {
        children: highlighter
      });
    }
    return highlighter;
  }
  function Title() {
    if (options.DemoTitle) {
      return /*#__PURE__*/_jsx(options.DemoTitle, {
        slug: demoData.slug,
        children: demoData.name
      });
    }
    return /*#__PURE__*/_jsx("h3", {
      id: demoData.slug,
      children: demoData.name
    });
  }
  DemoComponent.Title = Title;
  if (process.env.NODE_ENV !== 'production') {
    DemoComponent.displayName = demoData.displayName;
    DemoComponent.Title.displayName = "".concat(demoData.displayName, "Title");
  }
  return DemoComponent;
}
export function createDemoFactory(options) {
  /**
   * Creates a demo component for displaying code examples with syntax highlighting.
   * @param url Depends on `import.meta.url` to determine the source file location.
   * @param component The component to be rendered in the demo.
   * @param meta Additional meta for the demo.
   */
  var createDemo = function createDemo(url, component, meta) {
    return abstractCreateDemo(options, url, {
      Default: component
    },
    // precomputed code will use the 'Default' key
    meta);
  };
  return createDemo;
}
export function createDemoWithVariantsFactory(options) {
  /**
   * Creates a demo component for displaying code examples with syntax highlighting.
   * A variant is a different implementation style of the same component.
   * @param url Depends on `import.meta.url` to determine the source file location.
   * @param variants The variants of the component to be rendered in the demo.
   * @param meta Additional meta for the demo.
   */
  var createDemoWithVariants = function createDemoWithVariants(url, variants, meta) {
    return abstractCreateDemo(options, url, variants, meta);
  };
  return createDemoWithVariants;
}