@rspress/plugin-preview 1.46.1 → 1.47.0

package/dist/index.js

@@ -1,5 +1,359 @@
 "use strict";
 var __webpack_modules__ = {
+    "./src/ast-helpers.ts": function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            Wv: ()=>inferLanguageFromPath,
+            cQ: ()=>getExternalDemoContent,
+            en: ()=>createOtherFilesProp,
+            qz: ()=>getASTNodeImport
+        });
+        var node_path__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("node:path");
+        const getASTNodeImport = (name, from)=>({
+                type: 'mdxjsEsm',
+                value: `import ${name} from ${JSON.stringify(from)}`,
+                data: {
+                    estree: {
+                        type: 'Program',
+                        sourceType: 'module',
+                        body: [
+                            {
+                                type: 'ImportDeclaration',
+                                specifiers: [
+                                    {
+                                        type: 'ImportDefaultSpecifier',
+                                        local: {
+                                            type: 'Identifier',
+                                            name
+                                        }
+                                    }
+                                ],
+                                source: {
+                                    type: 'Literal',
+                                    value: from,
+                                    raw: `${JSON.stringify(from)}`
+                                }
+                            }
+                        ]
+                    }
+                }
+            });
+        const getExternalDemoContent = (tempVar, language = 'tsx')=>({
+                type: 'mdxJsxFlowElement',
+                name: '',
+                attributes: [],
+                children: [
+                    {
+                        type: 'mdxJsxFlowElement',
+                        name: 'pre',
+                        attributes: [],
+                        children: [
+                            {
+                                type: 'mdxJsxFlowElement',
+                                name: 'code',
+                                attributes: [
+                                    {
+                                        type: 'mdxJsxAttribute',
+                                        name: 'className',
+                                        value: `language-${language}`
+                                    },
+                                    {
+                                        type: 'mdxJsxAttribute',
+                                        name: 'children',
+                                        value: {
+                                            type: 'mdxJsxExpressionAttribute',
+                                            value: tempVar,
+                                            data: {
+                                                estree: {
+                                                    type: 'Program',
+                                                    body: [
+                                                        {
+                                                            type: 'ExpressionStatement',
+                                                            expression: {
+                                                                type: 'Identifier',
+                                                                name: tempVar
+                                                            }
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            });
+        function createProp(propName, propValue) {
+            return {
+                type: 'mdxJsxAttribute',
+                name: propName,
+                value: {
+                    type: 'mdxJsxAttributeValueExpression',
+                    value: JSON.stringify(propValue),
+                    data: {
+                        estree: {
+                            type: 'Program',
+                            body: [
+                                propValue
+                            ],
+                            sourceType: 'module'
+                        }
+                    }
+                }
+            };
+        }
+        function createOtherFilesProp(otherFilesAttr) {
+            return createProp('otherFiles', {
+                type: 'ExpressionStatement',
+                expression: {
+                    type: 'ArrayExpression',
+                    elements: otherFilesAttr.map((file)=>({
+                            type: 'Literal',
+                            value: file,
+                            raw: JSON.stringify(file)
+                        }))
+                }
+            });
+        }
+        const SUPPORTED_CODE_LANGUAGES = new Set([
+            'js',
+            'jsx',
+            'ts',
+            'tsx',
+            'json',
+            'css',
+            'less',
+            'scss',
+            'sass',
+            'md',
+            'mdx',
+            'html'
+        ]);
+        const sanitizeLanguageValue = (language)=>{
+            const normalized = language.replace(/[^0-9a-z-]/gi, '');
+            return normalized || 'tsx';
+        };
+        const inferLanguageFromPath = (filePath)=>{
+            const ext = sanitizeLanguageValue((0, node_path__WEBPACK_IMPORTED_MODULE_0__.extname)(filePath).slice(1).toLowerCase());
+            if (!ext) return 'tsx';
+            if (SUPPORTED_CODE_LANGUAGES.has(ext)) return ext;
+            if ('mjs' === ext || 'cjs' === ext) return 'js';
+            return 'tsx';
+        };
+    },
+    "./src/constant.ts": function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            Dh: ()=>staticPath,
+            WE: ()=>demoBlockComponentPath,
+            qp: ()=>virtualDir
+        });
+        var node_path__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("node:path");
+        var node_path__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(node_path__WEBPACK_IMPORTED_MODULE_0__);
+        var _rspress_shared__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("@rspress/shared");
+        const staticPath = node_path__WEBPACK_IMPORTED_MODULE_0___default().join(__dirname, '..', 'static');
+        const demoBlockComponentPath = node_path__WEBPACK_IMPORTED_MODULE_0___default().join(staticPath, 'global-components', 'DemoBlock.tsx');
+        const virtualDir = node_path__WEBPACK_IMPORTED_MODULE_0___default().join(process.cwd(), 'node_modules', _rspress_shared__WEBPACK_IMPORTED_MODULE_1__.RSPRESS_TEMP_DIR, 'virtual-demo');
+    },
+    "./src/remarkPlugin.ts": function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            D: ()=>demos,
+            T: ()=>remarkCodeToDemo
+        });
+        var node_fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("node:fs");
+        var node_fs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(node_fs__WEBPACK_IMPORTED_MODULE_0__);
+        var node_path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("node:path");
+        var node_path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(node_path__WEBPACK_IMPORTED_MODULE_1__);
+        var _rspress_shared__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("@rspress/shared");
+        var _rspress_shared__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/ __webpack_require__.n(_rspress_shared__WEBPACK_IMPORTED_MODULE_2__);
+        var _rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("@rspress/shared/node-utils");
+        var _rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/ __webpack_require__.n(_rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3__);
+        var unist_util_visit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("../../node_modules/.pnpm/unist-util-visit@4.1.2/node_modules/unist-util-visit/lib/index.js");
+        var _ast_helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./src/ast-helpers.ts");
+        var _constant__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("./src/constant.ts");
+        var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("./src/utils.ts?589a");
+        const demos = {};
+        const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode, position, previewLanguages, previewCodeTransform }) {
+            const routeMeta = getRouteMeta();
+            node_fs__WEBPACK_IMPORTED_MODULE_0___default().mkdirSync(_constant__WEBPACK_IMPORTED_MODULE_5__.qp, {
+                recursive: true
+            });
+            const data = this.data();
+            return (tree, vfile)=>{
+                const demoMdx = [];
+                const route = routeMeta.find((meta)=>(0, _rspress_shared__WEBPACK_IMPORTED_MODULE_2__.normalizePosixPath)(meta.absolutePath) === (0, _rspress_shared__WEBPACK_IMPORTED_MODULE_2__.normalizePosixPath)(vfile.path || vfile.history[0]));
+                if (!route) return;
+                const { pageName } = route;
+                demos[pageName] = [];
+                let title = pageName;
+                let index = 1;
+                let externalDemoIndex = 0;
+                function constructDemoNode(demoId, demoPath, currentNode, isMobileMode, externalDemoIndex) {
+                    if (isMobileMode) {
+                        const relativePathReg = new RegExp(/^\.\.?\/.*$/);
+                        demos[pageName].push({
+                            title,
+                            id: demoId,
+                            path: relativePathReg.test(demoPath) ? (0, node_path__WEBPACK_IMPORTED_MODULE_1__.resolve)(vfile.dirname || (0, node_path__WEBPACK_IMPORTED_MODULE_1__.dirname)(vfile.path), demoPath) : demoPath
+                        });
+                    } else demoMdx.push((0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.qz)(`Demo${demoId}`, demoPath));
+                    const tempVar = `externalDemoContent${externalDemoIndex}`;
+                    if (void 0 !== externalDemoIndex) demoMdx.push((0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.qz)(tempVar, `!!${demoPath}?raw`));
+                    if (isMobileMode && 'fixed' === position) void 0 !== externalDemoIndex && Object.assign(currentNode, (0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.cQ)(tempVar));
+                    else if ('fixed-with-per-comp' === position) {
+                        var _getNodeAttribute;
+                        const entryFilePath = (0, _rspress_shared__WEBPACK_IMPORTED_MODULE_2__.normalizePosixPath)(demoPath);
+                        const otherFiles = 'code' === currentNode.type ? [] : eval((null == (_getNodeAttribute = (0, _rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3__.getNodeAttribute)(currentNode, 'otherFiles')) ? void 0 : _getNodeAttribute.value) ?? '[]');
+                        const otherFilesAttr = otherFiles.map((filePath, idx)=>{
+                            const demoPath = (0, node_path__WEBPACK_IMPORTED_MODULE_1__.resolve)(vfile.dirname || (0, node_path__WEBPACK_IMPORTED_MODULE_1__.dirname)(vfile.path), filePath);
+                            const tempVar = `Demo${demoId}OtherFile${idx}`;
+                            demoMdx.push((0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.qz)(tempVar, `!!${demoPath}?raw`));
+                            const language = (0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.Wv)(filePath);
+                            return {
+                                label: (0, _rspress_shared__WEBPACK_IMPORTED_MODULE_2__.normalizePosixPath)((0, node_path__WEBPACK_IMPORTED_MODULE_1__.relative)(entryFilePath, filePath)),
+                                tempVar,
+                                language
+                            };
+                        });
+                        const demoFileName = (0, node_path__WEBPACK_IMPORTED_MODULE_1__.basename)(demoPath);
+                        const entryFile = '' === (0, node_path__WEBPACK_IMPORTED_MODULE_1__.extname)(demoFileName) ? `${demoFileName}.tsx` : demoFileName;
+                        Object.assign(currentNode, {
+                            type: 'mdxJsxFlowElement',
+                            name: 'ContainerFixedPerComp',
+                            attributes: [
+                                {
+                                    type: 'mdxJsxAttribute',
+                                    name: 'isMobile',
+                                    value: isMobileMode
+                                },
+                                {
+                                    type: 'mdxJsxAttribute',
+                                    name: 'demoId',
+                                    value: demoId
+                                },
+                                {
+                                    type: 'mdxJsxAttribute',
+                                    name: 'entryFile',
+                                    value: entryFile
+                                },
+                                (0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.en)(otherFilesAttr.map((i)=>i.label))
+                            ],
+                            children: [
+                                void 0 === externalDemoIndex ? {
+                                    ...currentNode,
+                                    hasVisited: true
+                                } : (0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.cQ)(tempVar),
+                                isMobileMode ? {
+                                    type: 'mdxJsxFlowElement',
+                                    name: null
+                                } : {
+                                    type: 'mdxJsxFlowElement',
+                                    name: `Demo${demoId}`
+                                },
+                                ...otherFilesAttr.map((i)=>(0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.cQ)(i.tempVar, i.language))
+                            ]
+                        });
+                    } 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
+                            } : (0, _ast_helpers__WEBPACK_IMPORTED_MODULE_4__.cQ)(tempVar),
+                            isMobileMode ? {
+                                type: 'mdxJsxFlowElement',
+                                name: null
+                            } : {
+                                type: 'mdxJsxFlowElement',
+                                name: `Demo${demoId}`
+                            }
+                        ]
+                    });
+                }
+                (0, unist_util_visit__WEBPACK_IMPORTED_MODULE_6__.Vn)(tree, 'heading', (node)=>{
+                    if (1 === node.depth) {
+                        const firstChild = node.children[0];
+                        title = firstChild && 'value' in firstChild && firstChild.value || title;
+                    }
+                });
+                (0, unist_util_visit__WEBPACK_IMPORTED_MODULE_6__.Vn)(tree, 'mdxJsxFlowElement', (node)=>{
+                    if ('code' === node.name) {
+                        const src = (0, _rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3__.getNodeAttribute)(node, 'src');
+                        if ('string' != typeof src) return;
+                        const currentMode = (0, _rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3__.getNodeAttribute)(node, 'previewMode') ?? previewMode;
+                        const isMobileAttr = (0, _rspress_shared_node_utils__WEBPACK_IMPORTED_MODULE_3__.getNodeAttribute)(node, 'isMobile');
+                        let isMobileMode = false;
+                        isMobileMode = void 0 === isMobileAttr ? 'iframe' === currentMode : null === isMobileAttr ? true : 'object' == typeof isMobileAttr ? 'false' !== isMobileAttr.value : 'false' !== isMobileAttr;
+                        const id = (0, _utils__WEBPACK_IMPORTED_MODULE_7__.Ox)(pageName, index++);
+                        constructDemoNode(id, src, node, isMobileMode, externalDemoIndex++);
+                    }
+                });
+                (0, unist_util_visit__WEBPACK_IMPORTED_MODULE_6__.Vn)(tree, 'code', (node)=>{
+                    if ('hasVisited' in node) return;
+                    if (node.lang && previewLanguages.includes(node.lang)) {
+                        var _node_meta, _node_meta1, _node_meta2, _node_meta3, _node_meta4, _node_meta5;
+                        if ((null == (_node_meta = node.meta) ? void 0 : _node_meta.includes('pure')) || !(null == (_node_meta1 = node.meta) ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
+                        const value = (0, _utils__WEBPACK_IMPORTED_MODULE_7__.MQ)(previewCodeTransform({
+                            language: node.lang,
+                            code: node.value
+                        }), _constant__WEBPACK_IMPORTED_MODULE_5__.WE);
+                        const isMobileMode = (null == (_node_meta2 = node.meta) ? void 0 : _node_meta2.includes('mobile')) || (null == (_node_meta3 = node.meta) ? void 0 : _node_meta3.includes('iframe')) || !(null == (_node_meta4 = node.meta) ? void 0 : _node_meta4.includes('web')) && !(null == (_node_meta5 = node.meta) ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
+                        const id = (0, _utils__WEBPACK_IMPORTED_MODULE_7__.Ox)(pageName, index++);
+                        const virtualModulePath = (0, node_path__WEBPACK_IMPORTED_MODULE_1__.join)(_constant__WEBPACK_IMPORTED_MODULE_5__.qp, `${id}.tsx`);
+                        constructDemoNode(id, virtualModulePath, node, isMobileMode);
+                        if (node_fs__WEBPACK_IMPORTED_MODULE_0___default().existsSync(virtualModulePath)) {
+                            const content = node_fs__WEBPACK_IMPORTED_MODULE_0___default().readFileSync(virtualModulePath, 'utf-8');
+                            if (content === value) return;
+                        }
+                        node_fs__WEBPACK_IMPORTED_MODULE_0___default().writeFileSync(virtualModulePath, value);
+                    }
+                });
+                tree.children.unshift(...demoMdx);
+                if (demos[pageName].length > 0) data.pageMeta.haveDemos = true;
+            };
+        };
+    },
+    "./src/utils.ts?589a": function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            MQ: ()=>injectDemoBlockImport,
+            Ox: ()=>generateId,
+            nI: ()=>toValidVarName
+        });
+        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}
+  `;
+    },
+    "@rspress/shared": function(module) {
+        module.exports = require("@rspress/shared");
+    },
+    "@rspress/shared/node-utils": function(module) {
+        module.exports = require("@rspress/shared/node-utils");
+    },
+    "node:fs": function(module) {
+        module.exports = require("node:fs");
+    },
+    "node:path": function(module) {
+        module.exports = require("node:path");
+    },
     "@rsbuild/plugin-less": function(module) {
         module.exports = import("@rsbuild/plugin-less").then(function(module) {
             return module;
@@ -9,6 +363,120 @@ var __webpack_modules__ = {
         module.exports = import("@rsbuild/plugin-sass").then(function(module) {
             return module;
         });
+    },
+    "../../node_modules/.pnpm/unist-util-visit@4.1.2/node_modules/unist-util-visit/lib/index.js": function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            Vn: ()=>lib_visit
+        });
+        const convert = function(test) {
+            if (null == test) return ok;
+            if ('string' == typeof test) return typeFactory(test);
+            if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+            if ('function' == typeof test) return castFactory(test);
+            throw new Error('Expected function, string, or object as test');
+        };
+        function anyFactory(tests) {
+            const checks = [];
+            let index = -1;
+            while(++index < tests.length)checks[index] = convert(tests[index]);
+            return castFactory(any);
+            function any(...parameters) {
+                let index = -1;
+                while(++index < checks.length)if (checks[index].call(this, ...parameters)) return true;
+                return false;
+            }
+        }
+        function propsFactory(check) {
+            return castFactory(all);
+            function all(node) {
+                let key;
+                for(key in check)if (node[key] !== check[key]) return false;
+                return true;
+            }
+        }
+        function typeFactory(check) {
+            return castFactory(type);
+            function type(node) {
+                return node && node.type === check;
+            }
+        }
+        function castFactory(check) {
+            return assertion;
+            function assertion(node, ...parameters) {
+                return Boolean(node && 'object' == typeof node && 'type' in node && Boolean(check.call(this, node, ...parameters)));
+            }
+        }
+        function ok() {
+            return true;
+        }
+        function color(d) {
+            return '\u001B[33m' + d + '\u001B[39m';
+        }
+        const CONTINUE = true;
+        const EXIT = false;
+        const SKIP = 'skip';
+        const visitParents = function(tree, test, visitor, reverse) {
+            if ('function' == typeof test && 'function' != typeof visitor) {
+                reverse = visitor;
+                visitor = test;
+                test = null;
+            }
+            const is = convert(test);
+            const step = reverse ? -1 : 1;
+            factory(tree, void 0, [])();
+            function factory(node, index, parents) {
+                const value = node && 'object' == typeof node ? node : {};
+                if ('string' == typeof value.type) {
+                    const name = 'string' == typeof value.tagName ? value.tagName : 'string' == typeof value.name ? value.name : void 0;
+                    Object.defineProperty(visit, 'name', {
+                        value: 'node (' + color(node.type + (name ? '<' + name + '>' : '')) + ')'
+                    });
+                }
+                return visit;
+                function visit() {
+                    let result = [];
+                    let subresult;
+                    let offset;
+                    let grandparents;
+                    if (!test || is(node, index, parents[parents.length - 1] || null)) {
+                        result = toResult(visitor(node, parents));
+                        if (result[0] === EXIT) return result;
+                    }
+                    if (node.children && result[0] !== SKIP) {
+                        offset = (reverse ? node.children.length : -1) + step;
+                        grandparents = parents.concat(node);
+                        while(offset > -1 && offset < node.children.length){
+                            subresult = factory(node.children[offset], offset, grandparents)();
+                            if (subresult[0] === EXIT) return subresult;
+                            offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                        }
+                    }
+                    return result;
+                }
+            }
+        };
+        function toResult(value) {
+            if (Array.isArray(value)) return value;
+            if ('number' == typeof value) return [
+                CONTINUE,
+                value
+            ];
+            return [
+                value
+            ];
+        }
+        const lib_visit = function(tree, test, visitor, reverse) {
+            if ('function' == typeof test && 'function' != typeof visitor) {
+                reverse = visitor;
+                visitor = test;
+                test = null;
+            }
+            visitParents(tree, test, overload, reverse);
+            function overload(node, parents) {
+                const parent = parents[parents.length - 1];
+                return visitor(node, parent ? parent.children.indexOf(node) : null, parent);
+            }
+        };
     }
 };
 var __webpack_module_cache__ = {};
@@ -59,34 +527,22 @@ var __webpack_exports__ = {};
     });
     const external_node_net_namespaceObject = require("node:net");
     var external_node_net_default = /*#__PURE__*/ __webpack_require__.n(external_node_net_namespaceObject);
-    const external_node_path_namespaceObject = require("node:path");
-    var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+    var external_node_path_ = __webpack_require__("node:path");
     const core_namespaceObject = require("@rsbuild/core");
     const plugin_babel_namespaceObject = require("@rsbuild/plugin-babel");
     const plugin_react_namespaceObject = require("@rsbuild/plugin-react");
     const plugin_solid_namespaceObject = require("@rsbuild/plugin-solid");
-    const shared_namespaceObject = require("@rspress/shared");
+    var shared_ = __webpack_require__("@rspress/shared");
     const external_lodash_namespaceObject = require("lodash");
-    const staticPath = external_node_path_default().join(__dirname, '..', 'static');
-    const demoBlockComponentPath = external_node_path_default().join(staticPath, 'global-components', 'DemoBlock.tsx');
-    const virtualDir = external_node_path_default().join(process.cwd(), 'node_modules', shared_namespaceObject.RSPRESS_TEMP_DIR, 'virtual-demo');
-    const external_node_fs_namespaceObject = require("node:fs");
-    var external_node_fs_default = /*#__PURE__*/ __webpack_require__.n(external_node_fs_namespaceObject);
-    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}
-  `;
+    var constant = __webpack_require__("./src/constant.ts");
+    var external_node_fs_ = __webpack_require__("node:fs");
+    var utils = __webpack_require__("./src/utils.ts?589a");
     function generateEntryForPerComponent(demos, entryCssPath, framework) {
         const sourceEntry = {};
         Object.values(demos).forEach((routes)=>{
             routes.forEach((route)=>{
                 const { id, path: demoPath } = route;
-                const entry = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.entry.tsx`);
+                const entry = (0, external_node_path_.join)(constant.qp, `${id}.entry.tsx`);
                 const solidEntry = `
       import { render } from 'solid-js/web';
       import ${JSON.stringify(entryCssPath)};
@@ -100,7 +556,7 @@ var __webpack_exports__ = {};
       render(<Demo />, document.getElementById('root'));
       `;
                 const entryContent = 'react' === framework ? reactEntry : solidEntry;
-                (0, external_node_fs_namespaceObject.writeFileSync)(entry, entryContent);
+                (0, external_node_fs_.writeFileSync)(entry, entryContent);
                 sourceEntry[id] = entry;
             });
         });
@@ -139,16 +595,16 @@ var __webpack_exports__ = {};
       render(() => <App /> , document.getElementById('root'));
     `;
             const renderContent = 'solid' === framework ? solidContent : reactContent;
-            const id = `_${toValidVarName(key)}`;
-            const entry = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.entry.tsx`);
-            (0, external_node_fs_namespaceObject.writeFileSync)(entry, renderContent);
+            const id = `_${(0, utils.nI)(key)}`;
+            const entry = (0, external_node_path_.join)(constant.qp, `${id}.entry.tsx`);
+            (0, external_node_fs_.writeFileSync)(entry, renderContent);
             sourceEntry[id] = entry;
         });
         return sourceEntry;
     }
     function generateEntry(demos, framework, position) {
         const sourceEntry = {};
-        const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
+        const entryCssPath = (0, external_node_path_.join)(constant.Dh, 'global-styles', 'entry.css');
         if ('follow' === position) {
             const entries = generateEntryForPerComponent(demos, entryCssPath, framework);
             Object.assign(sourceEntry, entries);
@@ -163,293 +619,8 @@ var __webpack_exports__ = {};
         }
         return sourceEntry;
     }
-    const node_utils_namespaceObject = require("@rspress/shared/node-utils");
-    const convert = function(test) {
-        if (null == test) return ok;
-        if ('string' == typeof test) return typeFactory(test);
-        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
-        if ('function' == typeof test) return castFactory(test);
-        throw new Error('Expected function, string, or object as test');
-    };
-    function anyFactory(tests) {
-        const checks = [];
-        let index = -1;
-        while(++index < tests.length)checks[index] = convert(tests[index]);
-        return castFactory(any);
-        function any(...parameters) {
-            let index = -1;
-            while(++index < checks.length)if (checks[index].call(this, ...parameters)) return true;
-            return false;
-        }
-    }
-    function propsFactory(check) {
-        return castFactory(all);
-        function all(node) {
-            let key;
-            for(key in check)if (node[key] !== check[key]) return false;
-            return true;
-        }
-    }
-    function typeFactory(check) {
-        return castFactory(type);
-        function type(node) {
-            return node && node.type === check;
-        }
-    }
-    function castFactory(check) {
-        return assertion;
-        function assertion(node, ...parameters) {
-            return Boolean(node && 'object' == typeof node && 'type' in node && Boolean(check.call(this, node, ...parameters)));
-        }
-    }
-    function ok() {
-        return true;
-    }
-    function color(d) {
-        return '\u001B[33m' + d + '\u001B[39m';
-    }
-    const CONTINUE = true;
-    const EXIT = false;
-    const SKIP = 'skip';
-    const visitParents = function(tree, test, visitor, reverse) {
-        if ('function' == typeof test && 'function' != typeof visitor) {
-            reverse = visitor;
-            visitor = test;
-            test = null;
-        }
-        const is = convert(test);
-        const step = reverse ? -1 : 1;
-        factory(tree, void 0, [])();
-        function factory(node, index, parents) {
-            const value = node && 'object' == typeof node ? node : {};
-            if ('string' == typeof value.type) {
-                const name = 'string' == typeof value.tagName ? value.tagName : 'string' == typeof value.name ? value.name : void 0;
-                Object.defineProperty(visit, 'name', {
-                    value: 'node (' + color(node.type + (name ? '<' + name + '>' : '')) + ')'
-                });
-            }
-            return visit;
-            function visit() {
-                let result = [];
-                let subresult;
-                let offset;
-                let grandparents;
-                if (!test || is(node, index, parents[parents.length - 1] || null)) {
-                    result = toResult(visitor(node, parents));
-                    if (result[0] === EXIT) return result;
-                }
-                if (node.children && result[0] !== SKIP) {
-                    offset = (reverse ? node.children.length : -1) + step;
-                    grandparents = parents.concat(node);
-                    while(offset > -1 && offset < node.children.length){
-                        subresult = factory(node.children[offset], offset, grandparents)();
-                        if (subresult[0] === EXIT) return subresult;
-                        offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
-                    }
-                }
-                return result;
-            }
-        }
-    };
-    function toResult(value) {
-        if (Array.isArray(value)) return value;
-        if ('number' == typeof value) return [
-            CONTINUE,
-            value
-        ];
-        return [
-            value
-        ];
-    }
-    const lib_visit = function(tree, test, visitor, reverse) {
-        if ('function' == typeof test && 'function' != typeof visitor) {
-            reverse = visitor;
-            visitor = test;
-            test = null;
-        }
-        visitParents(tree, test, overload, reverse);
-        function overload(node, parents) {
-            const parent = parents[parents.length - 1];
-            return visitor(node, parent ? parent.children.indexOf(node) : null, parent);
-        }
-    };
-    const getASTNodeImport = (name, from)=>({
-            type: 'mdxjsEsm',
-            value: `import ${name} from ${JSON.stringify(from)}`,
-            data: {
-                estree: {
-                    type: 'Program',
-                    sourceType: 'module',
-                    body: [
-                        {
-                            type: 'ImportDeclaration',
-                            specifiers: [
-                                {
-                                    type: 'ImportDefaultSpecifier',
-                                    local: {
-                                        type: 'Identifier',
-                                        name
-                                    }
-                                }
-                            ],
-                            source: {
-                                type: 'Literal',
-                                value: from,
-                                raw: `${JSON.stringify(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 }) {
-        const routeMeta = getRouteMeta();
-        external_node_fs_default().mkdirSync(virtualDir, {
-            recursive: true
-        });
-        const data = this.data();
-        return (tree, vfile)=>{
-            const demoMdx = [];
-            const route = routeMeta.find((meta)=>(0, shared_namespaceObject.normalizePosixPath)(meta.absolutePath) === (0, shared_namespaceObject.normalizePosixPath)(vfile.path || vfile.history[0]));
-            if (!route) return;
-            const { pageName } = route;
-            remarkPlugin_demos[pageName] = [];
-            let title = pageName;
-            let index = 1;
-            let externalDemoIndex = 0;
-            function constructDemoNode(demoId, demoPath, currentNode, isMobileMode, externalDemoIndex) {
-                if (isMobileMode) {
-                    const relativePathReg = new RegExp(/^\.\.?\/.*$/);
-                    remarkPlugin_demos[pageName].push({
-                        title,
-                        id: demoId,
-                        path: relativePathReg.test(demoPath) ? (0, external_node_path_namespaceObject.resolve)(vfile.dirname || (0, external_node_path_namespaceObject.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: 'fixed-with-per-comp' === position ? 'ContainerFixedPerComp' : '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}`
-                        }
-                    ]
-                });
-            }
-            lib_visit(tree, 'heading', (node)=>{
-                if (1 === node.depth) {
-                    const firstChild = node.children[0];
-                    title = firstChild && 'value' in firstChild && firstChild.value || title;
-                }
-            });
-            lib_visit(tree, 'mdxJsxFlowElement', (node)=>{
-                if ('code' === node.name) {
-                    const src = (0, node_utils_namespaceObject.getNodeAttribute)(node, 'src');
-                    if ('string' != typeof src) return;
-                    const currentMode = (0, node_utils_namespaceObject.getNodeAttribute)(node, 'previewMode') ?? previewMode;
-                    const isMobileAttr = (0, node_utils_namespaceObject.getNodeAttribute)(node, 'isMobile');
-                    let isMobileMode = false;
-                    isMobileMode = void 0 === isMobileAttr ? 'iframe' === currentMode : null === isMobileAttr ? true : 'object' == typeof isMobileAttr ? 'false' !== isMobileAttr.value : 'false' !== isMobileAttr;
-                    const id = generateId(pageName, index++);
-                    constructDemoNode(id, src, node, isMobileMode, externalDemoIndex++);
-                }
-            });
-            lib_visit(tree, 'code', (node)=>{
-                if ('hasVisited' in node) return;
-                if (node.lang && previewLanguages.includes(node.lang)) {
-                    var _node_meta, _node_meta1, _node_meta2, _node_meta3, _node_meta4, _node_meta5;
-                    if ((null == (_node_meta = node.meta) ? void 0 : _node_meta.includes('pure')) || !(null == (_node_meta1 = node.meta) ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
-                    const value = injectDemoBlockImport(previewCodeTransform({
-                        language: node.lang,
-                        code: node.value
-                    }), demoBlockComponentPath);
-                    const isMobileMode = (null == (_node_meta2 = node.meta) ? void 0 : _node_meta2.includes('mobile')) || (null == (_node_meta3 = node.meta) ? void 0 : _node_meta3.includes('iframe')) || !(null == (_node_meta4 = node.meta) ? void 0 : _node_meta4.includes('web')) && !(null == (_node_meta5 = node.meta) ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
-                    const id = generateId(pageName, index++);
-                    const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.tsx`);
-                    constructDemoNode(id, virtualModulePath, node, isMobileMode);
-                    if (external_node_fs_default().existsSync(virtualModulePath)) {
-                        const content = external_node_fs_default().readFileSync(virtualModulePath, 'utf-8');
-                        if (content === value) return;
-                    }
-                    external_node_fs_default().writeFileSync(virtualModulePath, value);
-                }
-            });
-            tree.children.unshift(...demoMdx);
-            if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
-        };
-    };
-    let src_routeMeta;
+    var remarkPlugin = __webpack_require__("./src/remarkPlugin.ts");
+    let routeMeta;
     const DEFAULT_PREVIEW_LANGUAGES = [
         'jsx',
         'tsx'
@@ -458,7 +629,7 @@ var __webpack_exports__ = {};
         const { isMobile = false, iframeOptions = {}, iframePosition = 'follow', defaultRenderMode = 'preview', previewLanguages = DEFAULT_PREVIEW_LANGUAGES, previewCodeTransform = ({ code })=>code } = options ?? {};
         const previewMode = (null == options ? void 0 : options.previewMode) ?? (isMobile ? 'iframe' : 'internal');
         const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {} } = iframeOptions;
-        const getRouteMeta = ()=>src_routeMeta;
+        const getRouteMeta = ()=>routeMeta;
         let lastDemos;
         let devServer;
         let clientConfig;
@@ -471,7 +642,7 @@ var __webpack_exports__ = {};
                 return config;
             },
             routeGenerated (routes) {
-                src_routeMeta = routes;
+                routeMeta = routes;
             },
             async beforeBuild (_, isProd) {
                 if (!isProd) try {
@@ -493,12 +664,12 @@ var __webpack_exports__ = {};
             },
             async afterBuild (config, isProd) {
                 var _devServer_server;
-                if ((0, external_lodash_namespaceObject.isEqual)(remarkPlugin_demos, lastDemos)) return;
-                lastDemos = (0, external_lodash_namespaceObject.cloneDeep)(remarkPlugin_demos);
+                if ((0, external_lodash_namespaceObject.isEqual)(remarkPlugin.D, lastDemos)) return;
+                lastDemos = (0, external_lodash_namespaceObject.cloneDeep)(remarkPlugin.D);
                 await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                 devServer = void 0;
-                const sourceEntry = generateEntry(remarkPlugin_demos, framework, position);
-                const outDir = (0, external_node_path_namespaceObject.join)(config.outDir ?? 'doc_build', '~demo');
+                const sourceEntry = generateEntry(remarkPlugin.D, framework, position);
+                const outDir = (0, external_node_path_.join)(config.outDir ?? 'doc_build', '~demo');
                 if (0 === Object.keys(sourceEntry).length) return;
                 const { html, source, output, performance } = clientConfig ?? {};
                 const { preEntry, ...otherSourceOptions } = source ?? {};
@@ -522,7 +693,7 @@ var __webpack_exports__ = {};
                     },
                     output: {
                         ...output,
-                        assetPrefix: (null == output ? void 0 : output.assetPrefix) ? `${(0, shared_namespaceObject.removeTrailingSlash)(output.assetPrefix)}/~demo` : '/~demo',
+                        assetPrefix: (null == output ? void 0 : output.assetPrefix) ? `${(0, shared_.removeTrailingSlash)(output.assetPrefix)}/~demo` : '/~demo',
                         distPath: {
                             root: outDir
                         },
@@ -534,12 +705,14 @@ var __webpack_exports__ = {};
                     callerName: 'rspress',
                     rsbuildConfig
                 });
-                const { pluginSass } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rsbuild/plugin-sass"));
-                const { pluginLess } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rsbuild/plugin-less"));
-                rsbuildInstance.addPlugins([
-                    pluginSass(),
+                const { PLUGIN_SASS_NAME, pluginSass } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rsbuild/plugin-sass"));
+                const { PLUGIN_LESS_NAME, pluginLess } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rsbuild/plugin-less"));
+                if (!rsbuildInstance.isPluginExists(PLUGIN_LESS_NAME)) rsbuildInstance.addPlugins([
                     pluginLess()
                 ]);
+                if (!rsbuildInstance.isPluginExists(PLUGIN_SASS_NAME)) rsbuildInstance.addPlugins([
+                    pluginSass()
+                ]);
                 if ('solid' === framework) rsbuildInstance.addPlugins([
                     (0, plugin_babel_namespaceObject.pluginBabel)({
                         include: /\.(?:jsx|tsx)$/
@@ -555,7 +728,7 @@ var __webpack_exports__ = {};
             builderConfig: {
                 source: {
                     include: [
-                        (0, external_node_path_namespaceObject.join)(__dirname, '..')
+                        (0, external_node_path_.join)(__dirname, '..')
                     ]
                 },
                 tools: {
@@ -593,7 +766,7 @@ var __webpack_exports__ = {};
             markdown: {
                 remarkPlugins: [
                     [
-                        remarkCodeToDemo,
+                        remarkPlugin.T,
                         {
                             getRouteMeta,
                             position,
@@ -605,16 +778,16 @@ var __webpack_exports__ = {};
                     ]
                 ],
                 globalComponents: [
-                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Container.tsx'),
-                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'ContainerFixedPerComp.tsx')
+                    (0, external_node_path_.join)(constant.Dh, 'global-components', 'Container.tsx'),
+                    (0, external_node_path_.join)(constant.Dh, 'global-components', 'ContainerFixedPerComp.tsx')
                 ]
             },
             globalUIComponents: 'fixed-with-per-comp' === position ? [
-                (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'DeviceFixedPerComp.tsx')
+                (0, external_node_path_.join)(constant.Dh, 'global-components', 'DeviceFixedPerComp.tsx')
             ] : 'fixed' === position ? [
-                (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
+                (0, external_node_path_.join)(constant.Dh, 'global-components', 'Device.tsx')
             ] : [],
-            globalStyles: (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', `${previewMode}.css`)
+            globalStyles: (0, external_node_path_.join)(constant.Dh, 'global-styles', `${previewMode}.css`)
         };
     }
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "1.46.1",
+  "version": "1.47.0",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -25,8 +25,8 @@
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^3.2.0",
-    "@rspress/shared": "1.46.1",
-    "@rspress/theme-default": "1.46.1"
+    "@rspress/shared": "1.47.0",
+    "@rspress/theme-default": "1.47.0"
   },
   "devDependencies": {
     "@rslib/core": "~0.6.9",
@@ -45,7 +45,7 @@
     "unist-util-visit": "^4.1.2"
   },
   "peerDependencies": {
-    "@rspress/core": "^1.46.1",
+    "@rspress/core": "^1.47.0",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/env.d.ts

@@ -4,3 +4,9 @@ declare module 'virtual-meta' {
   const demos: Record<string, []>;
   export { demos };
 }
+
+declare module '@theme' {
+  const Tabs: React.FC<{ children: React.ReactNode }>;
+  const Tab: React.FC<{ children: React.ReactNode; label: string }>;
+  export { Tabs, Tab };
+}

package/static/global-components/ContainerFixedPerComp.tsx

@@ -1,4 +1,5 @@
 import { NoSSR, useLang, usePageData, withBase } from '@rspress/core/runtime';
+import { Tab, Tabs } from '@theme';
 import { type MouseEvent, useCallback, useState } from 'react';
 import IconCode from './icons/Code';
 import { publishIframeUrl } from './useIframeUrlPerComp';
@@ -7,9 +8,30 @@ type ContainerProps = {
   children: React.ReactNode[];
   isMobile: 'true' | 'false';
   demoId: string;
+  entryFile?: string;
+  otherFiles?: string[];
 };
 
-const MobileContainerFixedPerComp: React.FC<ContainerProps> = props => {
+const getTabs = (entryFile?: string, otherFiles?: string[], children?: any) => {
+  if (entryFile && otherFiles && otherFiles.length > 0) {
+    return (
+      <Tabs>
+        <Tab label={entryFile}>{children?.[0]}</Tab>
+        {children.slice(2).map((child: any, i: number) => {
+          const filename = otherFiles ? otherFiles[i] : `File ${i + 1}`;
+          return (
+            <Tab key={filename} label={filename}>
+              {child || null}
+            </Tab>
+          );
+        })}
+      </Tabs>
+    );
+  }
+  return null;
+};
+
+const MobileContainerFixedPerComp: React.FC<ContainerProps & {}> = props => {
   const { children, demoId } = props;
   const { page } = usePageData();
   const url = `/~demo/${demoId}`;
@@ -27,14 +49,12 @@ const MobileContainerFixedPerComp: React.FC<ContainerProps> = props => {
 
   const setIframeUrl = () => {
     const url = getPageUrl();
-    const fixedIframe = document.querySelector('.rspress-fixed-iframe');
-    fixedIframe?.setAttribute('src', url);
     publishIframeUrl(url);
   };
 
   return (
     <div className="rspress-preview-code" onClick={setIframeUrl}>
-      {children}
+      {getTabs(props.entryFile, props.otherFiles, children) || children}
     </div>
   );
 };
@@ -88,7 +108,8 @@ const ContainerFixedPerComp = (props: ContainerProps) => {
                     : 'rspress-preview-code-hide'
                 }`}
               >
-                {children?.[0]}
+                {getTabs(props.entryFile, props.otherFiles, children) ||
+                  children?.[0]}
               </div>
             </div>
           </div>

package/static/global-components/Device.scss

@@ -1,7 +1,10 @@
 .rspress-fixed-device {
   display: none;
   position: fixed;
-  top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
+  top: calc(
+    var(--rp-nav-height) + var(--rp-preview-padding) +
+      var(--rp-sidebar-menu-height)
+  );
   overflow: hidden;
 }
 
@@ -32,17 +35,8 @@
 }
 
 @media (min-width: 960px) {
-  .rspress-fixed-device {
-    display: inline;
-    left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
-    right: auto;
-  }
-}
-
-@media (min-width: 1280px) {
   .rspress-fixed-device {
     display: inline;
     right: var(--rp-preview-padding);
-    left: auto;
   }
 }

package/static/global-components/Device.tsx

@@ -1,10 +1,5 @@
-import {
-  NoSSR,
-  usePageData,
-  useWindowSize,
-  withBase,
-} from '@rspress/core/runtime';
-import { useCallback, useEffect, useState } from 'react';
+import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
+import { useCallback, useState } from 'react';
 // @ts-ignore
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
@@ -21,58 +16,29 @@ export default () => {
     if (page?.devPort) {
       return `http://localhost:${page.devPort}/${demoId}`;
     }
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}${withBase(url)}`;
-    }
-    // Do nothing in ssr
-    return '';
+    return withBase(url);
   };
-  const [asideWidth, setAsideWidth] = useState('0px');
-  const { width: innerWidth } = useWindowSize();
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());
   }, []);
 
-  // get default value from root
-  // listen resize and re-render
-  useEffect(() => {
-    const root = document.querySelector(':root');
-    if (root) {
-      const defaultAsideWidth =
-        getComputedStyle(root).getPropertyValue('--rp-aside-width');
-      setAsideWidth(defaultAsideWidth);
-    }
-  }, []);
-
-  useEffect(() => {
-    const node = document.querySelector('.rspress-doc-container');
-    const { style } = document.documentElement;
-    if (haveDemos) {
-      if (innerWidth > 1280) {
-        node?.setAttribute(
-          'style',
-          'padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2)',
-        );
-      } else if (innerWidth > 960) {
-        node?.setAttribute(
-          'style',
-          `padding-right: calc(${
-            innerWidth - 1280
-          }px + var(--rp-device-width) + var(--rp-preview-padding) * 2)`,
-        );
-      } else {
-        node?.removeAttribute('style');
-      }
-      style.setProperty('--rp-aside-width', '0px');
-    } else {
-      node?.removeAttribute('style');
-      style.setProperty('--rp-aside-width', asideWidth);
-    }
-  }, [haveDemos, asideWidth, innerWidth]);
-
   return haveDemos ? (
     <div className="rspress-fixed-device">
+      <style>
+        {`
+            body {
+              --rp-aside-width: 0px;
+            }
+            @media (min-width: 960px) {
+              .rspress-doc-container {
+                padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2);
+              }
+            }
+          `
+          .split('\n')
+          .join(' ')}
+      </style>
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR

package/static/global-components/DeviceFixedPerComp.tsx

@@ -1,9 +1,4 @@
-import {
-  NoSSR,
-  usePageData,
-  useWindowSize,
-  withBase,
-} from '@rspress/core/runtime';
+import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
 import { useCallback, useEffect, useState } from 'react';
 // @ts-ignore
 import { normalizeId } from '../../dist/utils';
@@ -22,11 +17,7 @@ export default () => {
     if (page?.devPort) {
       return `http://localhost:${page.devPort}/${demoId}`;
     }
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}${withBase(url)}`;
-    }
-    // Do nothing in ssr
-    return '';
+    return withBase(url);
   };
 
   const initialUrl = getPageUrl(url);
@@ -35,58 +26,33 @@ export default () => {
 
   const resetIframeUrl = useCallback(() => {
     publishIframeUrl(initialUrl);
-  }, [initialUrl, url]);
+  }, [initialUrl]);
 
   useEffect(() => {
     publishIframeUrl(initialUrl);
-  }, []);
+  }, [initialUrl]);
 
-  const [asideWidth, setAsideWidth] = useState('0px');
-  const { width: innerWidth } = useWindowSize();
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());
   }, []);
 
-  // get default value from root
-  // listen resize and re-render
-  useEffect(() => {
-    const root = document.querySelector(':root');
-    if (root) {
-      const defaultAsideWidth =
-        getComputedStyle(root).getPropertyValue('--rp-aside-width');
-      setAsideWidth(defaultAsideWidth);
-    }
-  }, []);
-
-  useEffect(() => {
-    const node = document.querySelector('.rspress-doc-container');
-    const { style } = document.documentElement;
-    if (haveDemos) {
-      if (innerWidth > 1280) {
-        node?.setAttribute(
-          'style',
-          'padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2)',
-        );
-      } else if (innerWidth > 960) {
-        node?.setAttribute(
-          'style',
-          `padding-right: calc(${
-            innerWidth - 1280
-          }px + var(--rp-device-width) + var(--rp-preview-padding) * 2)`,
-        );
-      } else {
-        node?.removeAttribute('style');
-      }
-      style.setProperty('--rp-aside-width', '0px');
-    } else {
-      node?.removeAttribute('style');
-      style.setProperty('--rp-aside-width', asideWidth);
-    }
-  }, [haveDemos, asideWidth, innerWidth]);
-
   return haveDemos ? (
     <div className="rspress-fixed-device">
+      <style>
+        {`
+            body {
+              --rp-aside-width: 0px;
+            }
+            @media (min-width: 960px) {
+              .rspress-doc-container {
+                padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2);
+              }
+            }
+          `
+          .split('\n')
+          .join(' ')}
+      </style>
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR

package/static/global-styles/entry.css

@@ -3,11 +3,11 @@
   --rp-iframe-nav-bg: #ffffff;
 }
 
-/* TODO: support dark mode */
-/* .dark {
+.dark {
+  /* TODO: support sync dark mode state */
   --rp-iframe-bg: #242424;
   --rp-iframe-nav-bg: #191d24;
-} */
+}
 
 body {
   background-color: var(--rp-iframe-bg) !important;

package/static/global-styles/iframe.css

@@ -7,25 +7,3 @@
 :root {
   --rp-preview-padding: 32px;
 }
-
-@media (min-width: 1280px) {
-  .rspress-doc-layout {
-    width: calc(100% - var(--rp-preview-padding));
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-sidebar {
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-doc-nav-container {
-    max-width: 100%;
-    margin-left: var(--rp-preview-padding);
-  }
-
-  .rspress-doc {
-    width: 100%;
-    padding-left: var(--rp-preview-padding);
-    padding-right: var(--rp-preview-padding);
-  }
-}