@rspress/plugin-preview 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import type { RsbuildConfig } from '@rsbuild/core';
 import { RspressPlugin } from '@rspress/core';
 
 declare interface CustomEntry {
-    entryCssPath: string;
     demoPath: string;
 }
 
@@ -10,13 +9,9 @@ declare type IframeOptions = {
     /**
      * framework in the iframe
      * @default 'react'
+     * @deprecated
      */
-    framework?: 'react' | 'solid';
-    /**
-     * position of the iframe
-     * @default 'follow'
-     */
-    position?: 'fixed' | 'follow';
+    framework?: 'react';
     /**
      * dev server port for the iframe
      * @default 7890
@@ -31,31 +26,19 @@ declare type IframeOptions = {
 
 export declare type Options = {
     /**
-     * @deprecated Use previewMode instead.
-     * true = 'iframe'
-     * false = 'internal'
-     */
-    isMobile?: boolean;
-    /**
-     * @deprecated Use iframeOptions.position instead.
+     * determine how to handle a internal code block without meta like \`\`\`tsx
+     * @default 'preview'
      */
-    iframePosition?: 'fixed' | 'follow';
+    defaultRenderMode?: 'pure' | 'preview';
     /**
-     * internal mode: component will be rendered inside the documentation, only support react.
-     *
-     * iframe mode: component will be rendered in iframe, note that aside will hide.
+     * determine how to preview \`\`\`tsx preview code block
      * @default 'internal'
      */
-    previewMode?: 'internal' | 'iframe';
+    defaultPreviewMode?: 'internal' | 'iframe-fixed' | 'iframe-follow';
     /**
      * enable when preview mode is iframe.
      */
     iframeOptions?: IframeOptions;
-    /**
-     * determine how to handle a internal code block without meta
-     * @default 'preview'
-     */
-    defaultRenderMode?: 'pure' | 'preview';
     /**
      * Supported languages to be previewed
      */

package/dist/index.js

@@ -1,25 +1,19 @@
 import node_net from "node:net";
-import node_path, { dirname, join, resolve as external_node_path_resolve } from "node:path";
-import { createRsbuild, mergeRsbuildConfig } from "@rsbuild/core";
-import { pluginBabel } from "@rsbuild/plugin-babel";
+import node_path, { join } from "node:path";
+import { createRsbuild, logger, mergeRsbuildConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
-import { pluginSolid } from "@rsbuild/plugin-solid";
 import { RSPRESS_TEMP_DIR, normalizePosixPath, removeTrailingSlash } from "@rspress/core";
-import { cloneDeep, isEqual } from "lodash";
 import { mkdir, writeFile } from "node:fs/promises";
 import node_fs from "node:fs";
-const staticPath = node_path.join(__dirname, '..', 'static');
-const demoBlockComponentPath = node_path.join(staticPath, 'global-components', 'DemoBlock.tsx');
-const virtualDir = node_path.join(process.cwd(), 'node_modules', RSPRESS_TEMP_DIR, 'virtual-demo');
+import { isDeepStrictEqual } from "node:util";
+const entryraw_namespaceObject = "const storageKey = 'rspress-plugin-preview-theme-appearance';\n\nfunction setDocumentTheme(isDark) {\n  if (isDark) {\n    document.documentElement.classList.add('dark');\n    document.documentElement.style.colorScheme = 'dark';\n  } else {\n    document.documentElement.classList.remove('dark');\n    document.documentElement.style.colorScheme = 'light';\n  }\n  localStorage.setItem(\n    'rspress-plugin-preview-theme-appearance',\n    isDark ? 'dark' : 'light',\n  );\n}\n\nconst saved = localStorage.getItem(storageKey) || 'light';\nsetDocumentTheme(saved === 'dark');\n\nwindow.addEventListener('message', event => {\n  if (event.data.type === 'theme-change') {\n    const isDark = event.data.dark;\n    setDocumentTheme(isDark);\n  }\n});\n";
+const STATIC_DIR = node_path.join(__dirname, '..', 'static');
+const VIRTUAL_DEMO_DIR = node_path.join(process.cwd(), 'node_modules', RSPRESS_TEMP_DIR, 'virtual-demo');
 const toValidVarName = (str)=>{
     if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str)) return str;
     return str.replace(/[^0-9a-zA-Z_$]/g, '_').replace(/^([0-9])/, '_$1');
 };
 const generateId = (pageName, index)=>`_${toValidVarName(pageName)}_${index}`;
-const injectDemoBlockImport = (str, path)=>`
-    import DemoBlock from ${JSON.stringify(path)};
-    ${str}
-  `;
 const getLangFileExt = (lang)=>{
     switch(lang){
         case 'jsx':
@@ -31,72 +25,66 @@ const getLangFileExt = (lang)=>{
             return lang;
     }
 };
-async function generateEntry(demos, framework, position, customEntry) {
+function reactEntry({ demoPath }) {
+    return `
+    import { createRoot } from 'react-dom/client';
+    import Demo from ${JSON.stringify(demoPath)};
+    const container = document.getElementById('root');
+    createRoot(container).render(<Demo />);
+    `;
+}
+async function generateEntry_generateEntry(globalDemos, framework, customEntry) {
     const sourceEntry = {};
-    const entryCssPath = join(staticPath, 'global-styles', 'entry.css');
-    await mkdir(virtualDir, {
+    const generateEntry = (meta)=>customEntry ? customEntry(meta) : 'react' === framework ? reactEntry(meta) : '';
+    await mkdir(VIRTUAL_DEMO_DIR, {
         recursive: true
     });
-    if ('follow' === position) await Promise.all(Object.values(demos).map((routes)=>routes.map(async (route)=>{
-            const { id, path: demoPath } = route;
-            const entry = join(virtualDir, `${id}.entry.tsx`);
-            const solidEntry = `
-        import { render } from 'solid-js/web';
-        import ${JSON.stringify(entryCssPath)};
-        import Demo from ${JSON.stringify(demoPath)};
-        render(() => <Demo />, document.getElementById('root'));
-        `;
-            const reactEntry = `
-        import { createRoot } from 'react-dom/client';
-        import ${JSON.stringify(entryCssPath)};
-        import Demo from ${JSON.stringify(demoPath)};
-        const container = document.getElementById('root');
-        createRoot(container).render(<Demo />);
-        `;
-            const entryContent = customEntry ? customEntry({
-                entryCssPath,
+    await Promise.all(Object.entries(globalDemos).map(([pageName, demos])=>{
+        const followDemos = demos.filter((demo)=>'iframe-follow' === demo.previewMode);
+        const followPromiseList = followDemos.map(async (demo)=>{
+            const { id, path: demoPath } = demo;
+            const entry = join(VIRTUAL_DEMO_DIR, `${id}.entry.tsx`);
+            const entryContent = generateEntry({
                 demoPath
-            }) : 'react' === framework ? reactEntry : solidEntry;
+            });
             await writeFile(entry, entryContent);
             sourceEntry[id] = entry;
-        })).flat());
-    else await Promise.all(Object.entries(demos).map(async ([key, routes])=>{
-        if (0 === routes.length) return;
-        const reactContent = `
-        import { createRoot } from 'react-dom/client';
-        import ${JSON.stringify(entryCssPath)};
-        ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
-        function App() {
-          return (
-            <div className="preview-container">
-              <div className="preview-nav">{"${routes[0].title}"}</div>
-              ${routes.map((_demo, index)=>`<Demo_${index} />`).join('\n')}
-            </div>
-          )
-        }
-        const container = document.getElementById('root');
-        createRoot(container).render(<App />);
-      `;
-        const solidContent = `
-        import { render } from 'solid-js/web';
-        import ${JSON.stringify(entryCssPath)};
-        ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
+        });
+        const fixedDemos = demos.filter((demo)=>'iframe-fixed' === demo.previewMode);
+        const fixedPromise = (async ()=>{
+            if (0 === fixedDemos.length) return;
+            const appContent = `
+        ${fixedDemos.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
         function App() {
           return (
-            <div class="preview-container">
-              <div class="preview-nav">{"${routes[0].title}"}</div>
-              ${routes.map((_, index)=>`<Demo_${index} />`).join('\n')}
+            <div className="rp-preview-container">
+              <div className="rp-preview-nav">{"${fixedDemos[0].title}"}</div>
+              ${fixedDemos.map((_demo, index)=>`<Demo_${index} />`).join('\n')}
             </div>
           )
         }
-        render(() => <App /> , document.getElementById('root'));
+        export default App;
       `;
-        const renderContent = 'solid' === framework ? solidContent : reactContent;
-        const id = `_${toValidVarName(key)}`;
-        const entry = join(virtualDir, `${id}.entry.tsx`);
-        await writeFile(entry, renderContent);
-        sourceEntry[id] = entry;
-    }));
+            const id = `_${toValidVarName(pageName)}`;
+            const demoPath = join(VIRTUAL_DEMO_DIR, `${id}.app.tsx`);
+            const entryContent = generateEntry({
+                demoPath
+            });
+            const entry = join(VIRTUAL_DEMO_DIR, `${id}.entry.tsx`);
+            await Promise.all([
+                writeFile(demoPath, appContent),
+                writeFile(entry, entryContent)
+            ]);
+            sourceEntry[id] = entry;
+        })();
+        return [
+            ...followPromiseList,
+            fixedPromise
+        ];
+    }).flat());
+    if (0 === Object.keys(sourceEntry).length) return {
+        _index: 'data:text/javascript,console.log("no demo found");'
+    };
     return sourceEntry;
 }
 const convert = function(test) {
@@ -255,109 +243,103 @@ const getASTNodeImport = (name, from)=>({
             }
         }
     });
-const getExternalDemoContent = (tempVar)=>({
-        type: 'mdxJsxFlowElement',
-        name: '',
-        attributes: [],
-        children: [
-            {
-                type: 'mdxJsxFlowElement',
-                name: 'pre',
-                attributes: [],
-                children: [
-                    {
-                        type: 'mdxJsxFlowElement',
-                        name: 'code',
-                        attributes: [
-                            {
-                                type: 'mdxJsxAttribute',
-                                name: 'className',
-                                value: 'language-tsx'
-                            },
-                            {
-                                type: 'mdxJsxAttribute',
-                                name: 'children',
-                                value: {
-                                    type: 'mdxJsxExpressionAttribute',
-                                    value: tempVar,
-                                    data: {
-                                        estree: {
-                                            type: 'Program',
-                                            body: [
-                                                {
-                                                    type: 'ExpressionStatement',
-                                                    expression: {
-                                                        type: 'Identifier',
-                                                        name: tempVar
-                                                    }
-                                                }
-                                            ]
-                                        }
-                                    }
-                                }
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
-    });
-const remarkPlugin_demos = {};
-const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode, position, previewLanguages, previewCodeTransform }) {
+function parsePreviewInfoFromMeta(options) {
+    const { meta, defaultPreviewMode, defaultRenderMode } = options;
+    const result = {
+        isPure: false,
+        isPreview: false,
+        previewMode: null
+    };
+    if (!meta) {
+        if ('preview' === defaultRenderMode) {
+            result.isPreview = true;
+            result.previewMode = defaultPreviewMode;
+        } else result.isPure = true;
+        return result;
+    }
+    if (meta.includes('pure')) {
+        result.isPure = true;
+        return result;
+    }
+    const previewMatch = meta.match(/preview(?:="([^"]+)")?/);
+    if (previewMatch) {
+        result.isPreview = true;
+        const explicitMode = previewMatch[1];
+        if (explicitMode && [
+            'internal',
+            'iframe-fixed',
+            'iframe-follow'
+        ].includes(explicitMode)) result.previewMode = explicitMode;
+        else result.previewMode = defaultPreviewMode;
+        return result;
+    }
+    if (meta.includes('iframe')) logger.warn('The "iframe" meta is deprecated, please use \`\`\`tsx preview="iframe-fixed" or \`\`\`tsx preview="iframe-follow" instead.');
+    if ('preview' === defaultRenderMode) {
+        result.isPreview = true;
+        result.previewMode = defaultPreviewMode;
+    } else result.isPure = true;
+    return result;
+}
+const remarkPlugin_globalDemos = {};
+const isDirtyRef = {
+    current: false
+};
+const remarkWriteCodeFile = function({ getRouteMeta, defaultPreviewMode, defaultRenderMode, previewLanguages, previewCodeTransform }) {
     const routeMeta = getRouteMeta();
-    node_fs.mkdirSync(virtualDir, {
+    node_fs.mkdirSync(VIRTUAL_DEMO_DIR, {
         recursive: true
     });
     const data = this.data();
     return (tree, vfile)=>{
-        const demoMdx = [];
         const route = routeMeta.find((meta)=>normalizePosixPath(meta.absolutePath) === normalizePosixPath(vfile.path || vfile.history[0]));
         if (!route) return;
         const { pageName } = route;
-        remarkPlugin_demos[pageName] = [];
         let title = pageName;
         let index = 1;
-        function constructDemoNode(demoId, demoPath, currentNode, isMobileMode, externalDemoIndex) {
-            if (isMobileMode) {
-                const relativePathReg = new RegExp(/^\.\.?\/.*$/);
-                remarkPlugin_demos[pageName].push({
-                    title,
-                    id: demoId,
-                    path: relativePathReg.test(demoPath) ? external_node_path_resolve(vfile.dirname || dirname(vfile.path), demoPath) : demoPath
-                });
-            } else demoMdx.push(getASTNodeImport(`Demo${demoId}`, demoPath));
-            const tempVar = `externalDemoContent${externalDemoIndex}`;
-            if (void 0 !== externalDemoIndex) demoMdx.push(getASTNodeImport(tempVar, `!!${demoPath}?raw`));
-            if (isMobileMode && 'fixed' === position) void 0 !== externalDemoIndex && Object.assign(currentNode, getExternalDemoContent(tempVar));
-            else Object.assign(currentNode, {
-                type: 'mdxJsxFlowElement',
-                name: 'Container',
-                attributes: [
-                    {
-                        type: 'mdxJsxAttribute',
-                        name: 'isMobile',
-                        value: isMobileMode
-                    },
-                    {
-                        type: 'mdxJsxAttribute',
-                        name: 'demoId',
-                        value: demoId
-                    }
-                ],
-                children: [
-                    void 0 === externalDemoIndex ? {
-                        ...currentNode,
-                        hasVisited: true
-                    } : getExternalDemoContent(tempVar),
-                    isMobileMode ? {
-                        type: 'mdxJsxFlowElement',
-                        name: null
-                    } : {
-                        type: 'mdxJsxFlowElement',
-                        name: `Demo${demoId}`
-                    }
-                ]
+        const demoMdxImports = [];
+        const demosInCurrPage = {
+            [pageName]: []
+        };
+        function handleCodeBlockByPreviewMode(demoId, demoPath, currentNode, previewMode) {
+            if ('iframe-fixed' === previewMode || 'iframe-follow' === previewMode) demosInCurrPage[pageName].push({
+                title,
+                id: demoId,
+                path: demoPath,
+                previewMode
             });
+            else demoMdxImports.push(getASTNodeImport(`Demo${demoId}`, demoPath));
+            if ('internal' === previewMode || 'iframe-follow' === previewMode) {
+                const originalCodeAst = {
+                    ...currentNode,
+                    hasVisited: true
+                };
+                Object.assign(currentNode, {
+                    type: 'mdxJsxFlowElement',
+                    name: 'Preview',
+                    attributes: [
+                        {
+                            type: 'mdxJsxAttribute',
+                            name: 'previewMode',
+                            value: previewMode
+                        },
+                        {
+                            type: 'mdxJsxAttribute',
+                            name: 'demoId',
+                            value: demoId
+                        }
+                    ],
+                    children: [
+                        originalCodeAst,
+                        'iframe-follow' === previewMode ? {
+                            type: 'mdxJsxFlowElement',
+                            name: null
+                        } : {
+                            type: 'mdxJsxFlowElement',
+                            name: `Demo${demoId}`
+                        }
+                    ]
+                });
+            }
         }
         lib_visit(tree, 'heading', (node)=>{
             if (1 === node.depth) {
@@ -366,49 +348,115 @@ const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode
             }
         });
         lib_visit(tree, 'code', (node)=>{
-            if ('hasVisited' in node) return;
+            if ('hasVisited' in node && true === node.hasVisited) return;
             if (node.lang && previewLanguages.includes(node.lang)) {
-                if (node.meta?.includes('pure') || !node.meta?.includes('preview') && 'pure' === defaultRenderMode) return;
-                const isJsx = 'jsx' === node.lang || 'tsx' === node.lang;
-                const value = isJsx ? injectDemoBlockImport(previewCodeTransform({
-                    language: node.lang,
-                    code: node.value
-                }), demoBlockComponentPath) : previewCodeTransform({
+                const { isPure, previewMode } = parsePreviewInfoFromMeta({
+                    meta: node.meta,
+                    defaultPreviewMode,
+                    defaultRenderMode
+                });
+                if (isPure || !previewMode) return;
+                const virtualFileContent = previewCodeTransform({
                     language: node.lang,
                     code: node.value
                 });
-                const isMobileMode = node.meta?.includes('mobile') || node.meta?.includes('iframe') || !node.meta?.includes('web') && !node.meta?.includes('internal') && 'iframe' === previewMode;
                 const id = generateId(pageName, index++);
-                const virtualModulePath = join(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
-                constructDemoNode(id, virtualModulePath, node, isMobileMode);
+                const virtualModulePath = join(VIRTUAL_DEMO_DIR, `${id}.${getLangFileExt(node.lang)}`);
                 if (node_fs.existsSync(virtualModulePath)) {
                     const content = node_fs.readFileSync(virtualModulePath, 'utf-8');
-                    if (content === value) return;
-                }
-                node_fs.writeFileSync(virtualModulePath, value);
+                    if (content !== virtualFileContent) node_fs.writeFileSync(virtualModulePath, virtualFileContent);
+                } else node_fs.writeFileSync(virtualModulePath, virtualFileContent);
+                handleCodeBlockByPreviewMode(id, virtualModulePath, node, previewMode);
             }
         });
-        tree.children.unshift(...demoMdx);
-        if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
+        tree.children.unshift(...demoMdxImports);
+        if (demosInCurrPage[pageName].some((i)=>'iframe-fixed' === i.previewMode)) data.pageMeta.haveIframeFixedDemos = true;
+        if (!isDeepStrictEqual(remarkPlugin_globalDemos[pageName] ?? [], demosInCurrPage[pageName])) isDirtyRef.current = true;
+        if (0 !== demosInCurrPage[pageName].length) remarkPlugin_globalDemos[pageName] = demosInCurrPage[pageName];
     };
 };
 let src_routeMeta;
-const DEFAULT_PREVIEW_LANGUAGES = [
-    'jsx',
-    'tsx'
-];
 function pluginPreview(options) {
-    const { isMobile = false, iframeOptions = {}, iframePosition = 'follow', defaultRenderMode = 'preview', previewLanguages = DEFAULT_PREVIEW_LANGUAGES, previewCodeTransform = ({ code })=>code } = options ?? {};
-    const previewMode = options?.previewMode ?? (isMobile ? 'iframe' : 'internal');
-    const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {}, customEntry } = iframeOptions;
-    const globalUIComponents = 'fixed' === position ? [
-        join(staticPath, 'global-components', 'Device.tsx')
-    ] : [];
+    const { iframeOptions = {}, defaultPreviewMode = 'internal', defaultRenderMode = 'pure', previewLanguages = [
+        'jsx',
+        'tsx'
+    ], previewCodeTransform = ({ code })=>code } = options ?? {};
+    const { devPort = 7890, framework = 'react', builderConfig = {}, customEntry } = iframeOptions;
     const getRouteMeta = ()=>src_routeMeta;
-    let lastDemos;
     let devServer;
     let clientConfig;
     const port = devPort;
+    async function rsbuildStartOrBuild(config, isProd) {
+        if (devServer && !isProd && !isDirtyRef.current) return;
+        if (devServer && !isProd) {
+            await devServer.server.close();
+            devServer = void 0;
+            logger.info('[@rspress/plugin-preview] Restarting preview server due to demo changes...');
+        }
+        const outDir = join(config.outDir ?? 'doc_build', '~demo');
+        const { source, output, performance, resolve } = clientConfig ?? {};
+        const { preEntry: _, ...otherSourceOptions } = source ?? {};
+        const rsbuildConfig = mergeRsbuildConfig({
+            server: {
+                port: devPort,
+                printUrls: ()=>void 0,
+                strictPort: true
+            },
+            dev: {
+                lazyCompilation: false,
+                writeToDisk: true
+            },
+            performance: {
+                ...performance,
+                printFileSize: false,
+                buildCache: false
+            },
+            source: {
+                ...otherSourceOptions,
+                entry: await generateEntry_generateEntry(remarkPlugin_globalDemos, framework, customEntry),
+                preEntry: [
+                    join(STATIC_DIR, 'iframe', 'entry.css'),
+                    ...builderConfig.source?.preEntry ?? []
+                ]
+            },
+            html: {
+                tags: [
+                    {
+                        tag: "script",
+                        children: entryraw_namespaceObject
+                    }
+                ]
+            },
+            resolve,
+            output: {
+                ...output,
+                target: 'web',
+                assetPrefix: output?.assetPrefix ? `${removeTrailingSlash(output.assetPrefix)}/~demo` : '/~demo',
+                distPath: {
+                    root: outDir
+                },
+                copy: void 0
+            },
+            tools: {
+                rspack: {
+                    lazyCompilation: false,
+                    watchOptions: {
+                        ignored: /\.git/
+                    }
+                }
+            }
+        }, builderConfig);
+        const rsbuildInstance = await createRsbuild({
+            callerName: 'rspress',
+            rsbuildConfig
+        });
+        if ('react' === framework) rsbuildInstance.addPlugins([
+            pluginReact()
+        ]);
+        if (isProd) rsbuildInstance.build();
+        else devServer = await rsbuildInstance.startDevServer();
+        isDirtyRef.current = false;
+    }
     return {
         name: '@rspress/plugin-preview',
         config (config) {
@@ -437,57 +485,7 @@ function pluginPreview(options) {
             }
         },
         async afterBuild (config, isProd) {
-            if (isEqual(remarkPlugin_demos, lastDemos)) return;
-            lastDemos = cloneDeep(remarkPlugin_demos);
-            await devServer?.server?.close();
-            devServer = void 0;
-            const sourceEntry = await generateEntry(remarkPlugin_demos, framework, position, customEntry);
-            const outDir = join(config.outDir ?? 'doc_build', '~demo');
-            if (0 === Object.keys(sourceEntry).length) return;
-            const { source, output, performance } = clientConfig ?? {};
-            const { preEntry: _, ...otherSourceOptions } = source ?? {};
-            const rsbuildConfig = mergeRsbuildConfig({
-                server: {
-                    port: devPort,
-                    printUrls: ()=>void 0,
-                    strictPort: true
-                },
-                dev: {
-                    lazyCompilation: false
-                },
-                performance: {
-                    ...performance,
-                    printFileSize: false,
-                    buildCache: false
-                },
-                source: {
-                    ...otherSourceOptions,
-                    entry: sourceEntry
-                },
-                output: {
-                    ...output,
-                    assetPrefix: output?.assetPrefix ? `${removeTrailingSlash(output.assetPrefix)}/~demo` : '/~demo',
-                    distPath: {
-                        root: outDir
-                    },
-                    copy: void 0
-                }
-            }, builderConfig);
-            const rsbuildInstance = await createRsbuild({
-                callerName: 'rspress',
-                rsbuildConfig
-            });
-            if ('solid' === framework) rsbuildInstance.addPlugins([
-                pluginBabel({
-                    include: /\.(?:jsx|tsx)$/
-                }),
-                pluginSolid()
-            ]);
-            if ('react' === framework) rsbuildInstance.addPlugins([
-                pluginReact()
-            ]);
-            if (isProd) rsbuildInstance.build();
-            else devServer = await rsbuildInstance.startDevServer();
+            await rsbuildStartOrBuild(config, isProd);
         },
         builderConfig: {
             source: {
@@ -506,6 +504,9 @@ function pluginPreview(options) {
                     }
                 }
             },
+            performance: {
+                buildCache: false
+            },
             plugins: [
                 {
                     name: 'close-demo-server',
@@ -527,11 +528,10 @@ function pluginPreview(options) {
         markdown: {
             remarkPlugins: [
                 [
-                    remarkCodeToDemo,
+                    remarkWriteCodeFile,
                     {
                         getRouteMeta,
-                        position,
-                        previewMode,
+                        defaultPreviewMode,
                         defaultRenderMode,
                         previewLanguages,
                         previewCodeTransform
@@ -539,11 +539,12 @@ function pluginPreview(options) {
                 ]
             ],
             globalComponents: [
-                join(staticPath, 'global-components', 'Container.tsx')
+                join(STATIC_DIR, 'global-components', 'Preview.tsx')
             ]
         },
-        globalUIComponents,
-        globalStyles: join(staticPath, 'global-styles', `${previewMode}.css`)
+        globalUIComponents: [
+            join(STATIC_DIR, 'global-components', 'FixedDevice.tsx')
+        ]
     };
 }
 export { pluginPreview };

package/dist/utils.d.ts

@@ -2,8 +2,6 @@ export declare const generateId: (pageName: string, index: number) => string;
 
 export declare const getLangFileExt: (lang: string) => string;
 
-export declare const injectDemoBlockImport: (str: string, path: string) => string;
-
 /**
  * remove .html extension and validate
  * @param routePath id from pathname