dumi/dist/client/pages/Demo/index.js

📖 Documentation Generator of React Component

import { useDemo, useLiveDemo, useLocation, useParams } from 'dumi';
import { createElement, useEffect } from 'react';
import { isLiveDemoMessage, isLiveDemoSource } from "../../theme-api/liveDemoMessage";
import { useRenderer } from "../../theme-api/useRenderer";
import "./index.less";
var DemoRenderPage = function DemoRenderPage() {
  var params = useParams();
  var _useLocation = useLocation(),
    search = _useLocation.search;
  var id = params.id;
  var routeId = new URLSearchParams(search).get('routeId') || undefined;
  var demo = useDemo(id, undefined, undefined, routeId);
  var _useRenderer = useRenderer({
      id: id,
      component: demo.component,
      renderOpts: demo.renderOpts
    }),
    canvasRef = _useRenderer.canvasRef;
  var _ref = demo || {},
    component = _ref.component,
    renderOpts = _ref.renderOpts;
  var _useLiveDemo = useLiveDemo(id),
    liveDemoNode = _useLiveDemo.node,
    setSource = _useLiveDemo.setSource,
    liveDemoError = _useLiveDemo.error,
    loading = _useLiveDemo.loading;
  var finalNode = liveDemoNode || (renderOpts !== null && renderOpts !== void 0 && renderOpts.renderer ? /*#__PURE__*/createElement('div', {
    ref: canvasRef
  }) : component && /*#__PURE__*/createElement(component));

  // listen message event for setSource
  useEffect(function () {
    var _demo$asset;
    var dependencies = (_demo$asset = demo.asset) === null || _demo$asset === void 0 ? void 0 : _demo$asset.dependencies;
    var entryFileName = dependencies && Object.keys(dependencies).find(function (key) {
      return dependencies[key].type === 'FILE';
    });
    var handler = function handler(ev) {
      if (isLiveDemoMessage(ev, window.parent, 'dumi.liveDemo.setSource') && isLiveDemoSource(ev.data.value, entryFileName)) {
        setSource(ev.data.value);
      }
    };
    window.addEventListener('message', handler);
    return function () {
      return window.removeEventListener('message', handler);
    };
  }, [demo.asset, setSource]);

  // The parent listens on this window for compilation completion.
  useEffect(function () {
    if (!loading && (liveDemoError || liveDemoNode)) {
      window.postMessage({
        type: 'dumi.liveDemo.compileDone',
        value: {
          err: liveDemoError
        }
      }, window.location.origin);
    }
  }, [liveDemoError, liveDemoNode, loading]);
  return finalNode;
};
export default DemoRenderPage;