docs: update live demo feature (#47107)

* docs: update live demo feature

* docs: real iframe live demo

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

@@ -113,11 +113,15 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const showRiddleButton = useShowRiddleButton();
 
   const previewDemo = useRef<React.ReactNode>(null);
+  const demoContainer = useRef<HTMLElement>(null);
   const {
     node: liveDemoNode,
     error: liveDemoError,
     setSource: setLiveDemoSource,
-  } = useLiveDemo(asset.id);
+  } = useLiveDemo(asset.id, {
+    iframe: Boolean(iframe),
+    containerRef: demoContainer,
+  });
   const anchorRef = useRef<HTMLAnchorElement>(null);
   const codeSandboxIconRef = useRef<HTMLFormElement>(null);
   const riddleIconRef = useRef<HTMLFormElement>(null);
@@ -367,7 +371,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
 
   const codeBox: React.ReactNode = (
     <section className={codeBoxClass} id={asset.id}>
-      <section className="code-box-demo" style={codeBoxDemoStyle}>
+      <section className="code-box-demo" style={codeBoxDemoStyle} ref={demoContainer}>
         {liveDemoNode || (
           <ErrorBoundary>
             <React.StrictMode>{previewDemo.current}</React.StrictMode>
@@ -513,10 +517,10 @@ createRoot(document.getElementById('container')).render(<Demo />);
             sourceCode={entryCode}
             jsxCode={jsx}
             styleCode={style}
-            liveError={liveDemoError}
+            error={liveDemoError}
             entryName={entryName}
             onCodeTypeChange={setCodeType}
-            onSourceTranspile={setLiveDemoSource}
+            onSourceChange={setLiveDemoSource}
           />
           <div
             tabIndex={0}

.dumi/theme/common/CodePreview.tsx

@@ -61,13 +61,14 @@ const LANGS = {
   style: 'CSS',
 };
 
-interface CodePreviewProps extends Omit<ComponentProps<typeof LiveCode>, 'initialValue' | 'lang'> {
+interface CodePreviewProps
+  extends Omit<ComponentProps<typeof LiveCode>, 'initialValue' | 'lang' | 'onChange'> {
   sourceCode?: string;
   jsxCode?: string;
   styleCode?: string;
   entryName: string;
   onCodeTypeChange?: (activeKey: string) => void;
-  onSourceTranspile?: (source: Record<string, string>) => void;
+  onSourceChange?: (source: Record<string, string>) => void;
 }
 
 function toReactComponent(jsonML: any[]) {
@@ -92,7 +93,8 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   styleCode = '',
   entryName,
   onCodeTypeChange,
-  onSourceTranspile,
+  onSourceChange,
+  error,
 }) => {
   // 避免 Tabs 数量不稳定的闪动问题
   const initialCodes = {} as Record<'tsx' | 'jsx' | 'style', string>;
@@ -140,10 +142,11 @@ const CodePreview: React.FC<CodePreviewProps> = ({
           <div className={styles.code}>
             {lang === 'tsx' ? (
               <LiveCode
+                error={error}
                 lang={lang}
                 initialValue={sourceCodes[lang]}
-                onTranspile={(code) => {
-                  onSourceTranspile?.({ [entryName]: code });
+                onChange={(code) => {
+                  onSourceChange?.({ [entryName]: code });
                 }}
               />
             ) : (
@@ -165,10 +168,11 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   if (langList.length === 1) {
     return (
       <LiveCode
+        error={error}
         lang={langList[0]}
         initialValue={sourceCodes[langList[0]]}
-        onTranspile={(code) => {
-          onSourceTranspile?.({ [entryName]: code });
+        onChange={(code) => {
+          onSourceChange?.({ [entryName]: code });
         }}
       />
     );

.dumi/theme/common/LiveCode.tsx

@@ -79,14 +79,12 @@ const locales = {
 
 const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip';
 
-const LiveCode: FC<{
-  lang: ComponentProps<typeof SourceCodeEditor>['lang'];
-  initialValue: ComponentProps<typeof SourceCodeEditor>['initialValue'];
-  liveError?: Error;
-  onTranspile?: (code: string) => void;
-}> = (props) => {
+const LiveCode: FC<
+  {
+    error: Error | null;
+  } & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
+> = (props) => {
   const [open, setOpen] = useState(false);
-  const [error, setError] = useState<Error>();
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
 
@@ -110,16 +108,9 @@ const LiveCode: FC<{
         <SourceCodeEditor
           lang={props.lang}
           initialValue={props.initialValue}
-          onTranspile={({ err, code }) => {
-            if (err) {
-              setError(err);
-            } else {
-              setError(undefined);
-              props.onTranspile?.(code);
-            }
-          }}
+          onChange={props.onChange}
         />
-        <LiveError error={props.liveError || error} />
+        <LiveError error={props.error} />
       </div>
       <Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
         <EditFilled className={styles.editableIcon} />

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

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { Alert, theme } from 'antd';
 
-const LiveError: FC<{ error?: Error }> = ({ error }) => {
+const LiveError: FC<{ error: Error | null }> = ({ error }) => {
   const { token } = theme.useToken();
 
   return error ? (

package.json

@@ -230,7 +230,7 @@
     "cross-fetch": "^4.0.0",
     "crypto": "^1.0.1",
     "dekko": "^0.2.1",
-    "dumi": "^2.3.0-beta.3",
+    "dumi": "^2.3.0-beta.5",
     "dumi-plugin-color-chunk": "^1.1.0",
     "esbuild-loader": "^4.0.2",
     "eslint": "^8.56.0",
@@ -343,7 +343,7 @@
   },
   "overrides": {
     "dumi-plugin-color-chunk": {
-      "dumi": "^2.3.0-beta.3"
+      "dumi": "^2.3.0-beta.5"
     }
   },
   "packageManager": "npm@10.3.0",