dumi
Version:
📖 Documentation Generator of React Component
56 lines (54 loc) • 1.91 kB
JavaScript
import { useDemo, useLiveDemo, useLocation, useParams } from 'dumi';
import { createElement, useEffect } from 'react';
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 handler = function handler(ev) {
if (ev.data.type === 'dumi.liveDemo.setSource') {
setSource(ev.data.value);
}
};
window.addEventListener('message', handler);
return function () {
return window.removeEventListener('message', handler);
};
}, [setSource]);
// notify parent window that compile done
useEffect(function () {
if (!loading && (liveDemoError || liveDemoNode)) {
window.postMessage({
type: 'dumi.liveDemo.compileDone',
value: {
err: liveDemoError
}
});
}
}, [liveDemoError, liveDemoNode, loading]);
return finalNode;
};
export default DemoRenderPage;