docs: live demo (ant-design#45383)

* docs: live demo

* chore: bump dumi

* chore: fix lint

* chore: fix lint

* chore: update demo

* chore: bump dumi

* docs: enhance live demo

* docs: update text

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -5,7 +5,7 @@ import stackblitzSdk from '@stackblitz/sdk';
 import { Alert, Badge, Space, Tooltip } from 'antd';
 import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
-import { FormattedMessage, useSiteData } from 'dumi';
+import { FormattedMessage, useSiteData, LiveContext } from 'dumi';
 import LZString from 'lz-string';
 
 import type { AntdPreviewerProps } from './Previewer';
@@ -21,6 +21,7 @@ import RiddleIcon from '../../common/RiddleIcon';
 import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
 import { ping } from '../../utils';
+import LiveDemo from 'dumi/theme-default/slots/LiveDemo';
 
 const { ErrorBoundary } = Alert;
 
@@ -107,6 +108,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const { pkg } = useSiteData();
   const location = useLocation();
 
+  const { enabled: liveEnabled } = useContext(LiveContext);
+
   const { styles } = useStyle();
 
   const entryCode = asset.dependencies['index.tsx'].value;
@@ -363,9 +366,13 @@ createRoot(document.getElementById('container')).render(<Demo />);
   const codeBox: React.ReactNode = (
     <section className={codeBoxClass} id={asset.id}>
       <section className="code-box-demo" style={codeBoxDemoStyle}>
-        <ErrorBoundary>
-          <React.StrictMode>{liveDemo.current}</React.StrictMode>
-        </ErrorBoundary>
+        {!liveEnabled ? (
+          <ErrorBoundary>
+            <React.StrictMode>{liveDemo.current}</React.StrictMode>
+          </ErrorBoundary>
+        ) : (
+          <LiveDemo />
+        )}
       </section>
       <section className="code-box-meta markdown">
         <div className="code-box-title">

.dumi/theme/builtins/Previewer/Previewer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { IPreviewerProps } from 'dumi';
-import { useTabMeta } from 'dumi';
+import { LiveProvider, useTabMeta } from 'dumi';
 
 import CodePreviewer from './CodePreviewer';
 import DesignPreviewer from './DesignPreviewer';
@@ -16,7 +16,23 @@ const Previewer: React.FC<AntdPreviewerProps> = (props) => {
     return <DesignPreviewer {...props} />;
   }
 
-  return <CodePreviewer {...props} />;
+  const codePreviewer = <CodePreviewer {...props} />;
+
+  if (props.live === false || props.iframe) {
+    return codePreviewer;
+  }
+
+  return (
+    <LiveProvider
+      initialCode={
+        Object.entries(props.asset.dependencies).filter(([, { type }]) => type === 'FILE')[0][1]
+          .value
+      }
+      demoId={props.asset.id}
+    >
+      {codePreviewer}
+    </LiveProvider>
+  );
 };
 
 export default Previewer;

.dumi/theme/common/CodePreview.tsx

@@ -1,22 +1,25 @@
-import React, { useEffect, useMemo } from 'react';
-import { Tabs, Typography, Button } from 'antd';
+import { Button, Tabs, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { LiveContext } from 'dumi';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
 import Prism from 'prismjs';
-import { createStyles } from 'antd-style';
+import React, { useContext, useEffect, useMemo } from 'react';
+import LiveCode from './LiveCode';
 
 const useStyle = createStyles(({ token, css }) => {
   const { colorIcon, colorBgTextHover, antCls } = token;
 
   return {
     code: css`
       position: relative;
+      margin-top: -16px;
     `,
 
     copyButton: css`
       color: ${colorIcon};
       position: absolute;
-      top: 0;
+      top: 16px;
       inset-inline-end: 16px;
       width: 32px;
       text-align: center;
@@ -110,14 +113,20 @@ const CodePreview: React.FC<CodePreviewProps> = ({
 
   const { styles } = useStyle();
 
+  const { enabled: liveEnabled } = useContext(LiveContext);
+
   const items = useMemo(
     () =>
       langList.map((lang: keyof typeof LANGS) => ({
         label: LANGS[lang],
         key: lang,
         children: (
           <div className={styles.code}>
-            {toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }])}
+            {lang === 'tsx' && liveEnabled ? (
+              <LiveCode />
+            ) : (
+              toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }])
+            )}
             <Button type="text" className={styles.copyButton}>
               <Typography.Text className={styles.copyIcon} copyable={{ text: sourceCodes[lang] }} />
             </Button>
@@ -132,14 +141,18 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   }
 
   if (langList.length === 1) {
-    return toReactComponent([
-      'pre',
-      {
-        lang: langList[0],
-        highlighted: highlightedCodes[langList[0] as keyof typeof LANGS],
-        className: 'highlight',
-      },
-    ]);
+    return liveEnabled ? (
+      <LiveCode />
+    ) : (
+      toReactComponent([
+        'pre',
+        {
+          lang: langList[0],
+          highlighted: highlightedCodes[langList[0] as keyof typeof LANGS],
+          className: 'highlight',
+        },
+      ])
+    );
   }
 
   return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;

.dumi/theme/common/LiveCode.tsx

@@ -0,0 +1,85 @@
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import { createStyles } from 'antd-style';
+import LiveEditor from '../slots/LiveEditor';
+import LiveError from '../slots/LiveError';
+import { EditFilled } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import useLocale from '../../hooks/useLocale';
+
+const useStyle = createStyles(({ token, css }) => {
+  const { colorPrimaryBorder, colorIcon, colorPrimary } = token;
+
+  return {
+    editor: css`
+      .npm__react-simple-code-editor__textarea {
+        outline: none;
+
+        &:hover {
+          border: 1px solid ${colorPrimaryBorder} !important;
+        }
+
+        &:focus {
+          border: 1px solid ${colorPrimary} !important;
+        }
+      }
+    `,
+
+    editableIcon: css`
+      position: absolute;
+      height: 32px;
+      width: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 16px;
+      inset-inline-end: 56px;
+      color: ${colorIcon};
+    `,
+  };
+});
+
+const locales = {
+  cn: {
+    demoEditable: '编辑 Demo 可实时预览',
+  },
+  en: {
+    demoEditable: 'Edit demo with real-time preview',
+  },
+};
+
+const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip';
+
+const LiveCode: FC = () => {
+  const [open, setOpen] = useState(false);
+  const { styles } = useStyle();
+  const [locale] = useLocale(locales);
+
+  useEffect(() => {
+    const shouldOpen = !localStorage.getItem(HIDE_LIVE_DEMO_TIP);
+    if (shouldOpen) {
+      setOpen(true);
+    }
+  }, []);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      localStorage.setItem(HIDE_LIVE_DEMO_TIP, 'true');
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.editor}>
+        <LiveEditor />
+        <LiveError />
+      </div>
+      <Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
+        <EditFilled className={styles.editableIcon} />
+      </Tooltip>
+    </>
+  );
+};
+
+export default LiveCode;

.dumi/theme/common/styles/Demo.tsx

@@ -324,7 +324,6 @@ const GlobalDemoStyles: React.FC = () => {
               border: none;
               box-shadow: unset;
               padding: 12px 16px;
-              margin-top: -16px;
               font-size: 13px;
             }
           }

.dumi/theme/slots/LiveEditor/index.tsx

@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+import React from 'react';
+import DumiLiveEditor from 'dumi/theme-default/slots/LiveEditor';
+
+const LiveEditor: FC = () => (
+  <DumiLiveEditor
+    style={{
+      fontSize: 13,
+      lineHeight: 2,
+      fontFamily: `'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
+    }}
+    padding={{
+      top: 12,
+      right: 16,
+      bottom: 12,
+      left: 16,
+    }}
+  />
+);
+
+export default LiveEditor;

.dumi/theme/slots/LiveError/index.tsx

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+import { LiveContext } from 'dumi';
+import { Alert, theme } from 'antd';
+
+const LiveError: FC = () => {
+  const { error } = useContext(LiveContext);
+  const { token } = theme.useToken();
+
+  return error ? (
+    <Alert banner type="error" message={error} style={{ color: token.colorError }} />
+  ) : null;
+};
+
+export default LiveError;

.dumirc.ts

@@ -14,6 +14,7 @@ export default defineConfig({
   ssr: process.env.NODE_ENV === 'production' ? {} : false,
   hash: true,
   mfsu: false,
+  live: true,
   crossorigin: {},
   outputPath: '_site',
   favicons: ['https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png'],

components/alert/index.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { AlertProps } from './Alert';
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';