@rspress/plugin-preview 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 import type { RsbuildConfig } from '@rsbuild/core';
 import { RspressPlugin } from '@rspress/shared';
 
+declare interface CustomEntry {
+    entryCssPath: string;
+    demoPath: string;
+}
+
 declare type IframeOptions = {
     /**
      * framework in the iframe
@@ -18,6 +23,10 @@ declare type IframeOptions = {
      */
     devPort?: number;
     builderConfig?: RsbuildConfig;
+    /**
+     * custom support for other web frameworks
+     */
+    customEntry?: (meta: CustomEntry) => string;
 };
 
 export declare type Options = {

package/dist/index.js

@@ -1,110 +1,68 @@
-"use strict";
-var __webpack_modules__ = {
-    "@rsbuild/plugin-less": function(module) {
-        module.exports = import("@rsbuild/plugin-less");
-    },
-    "@rsbuild/plugin-sass": function(module) {
-        module.exports = import("@rsbuild/plugin-sass");
-    }
+import * as __WEBPACK_EXTERNAL_MODULE_node_net_0373943e__ from "node:net";
+import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
+import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_core_1b356efc__ from "@rsbuild/core";
+import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_babel_2a5a8b08__ from "@rsbuild/plugin-babel";
+import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react_7b149ee4__ from "@rsbuild/plugin-react";
+import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_solid_0a0a2645__ from "@rsbuild/plugin-solid";
+import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__ from "@rspress/shared";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";
+import * as __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__ from "node:fs";
+import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__ from "@rspress/shared/node-utils";
+const staticPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(__dirname, '..', 'static');
+const demoBlockComponentPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(staticPath, 'global-components', 'DemoBlock.tsx');
+const virtualDir = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(process.cwd(), 'node_modules', __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.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');
 };
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-(()=>{
-    __webpack_require__.r(__webpack_exports__);
-    __webpack_require__.d(__webpack_exports__, {
-        pluginPreview: ()=>pluginPreview
-    });
-    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);
-    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");
-    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)=>`
+const generateId = (pageName, index)=>`_${toValidVarName(pageName)}_${index}`;
+const injectDemoBlockImport = (str, path)=>`
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-    function generateEntry(demos, framework, position) {
-        const sourceEntry = {};
-        const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
-        if ('follow' === position) 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 solidEntry = `
+const getLangFileExt = (lang)=>{
+    switch(lang){
+        case 'jsx':
+        case 'tsx':
+            return 'tsx';
+        case 'json':
+            return 'tsx';
+        default:
+            return lang;
+    }
+};
+function generateEntry(demos, framework, position, customEntry) {
+    const sourceEntry = {};
+    const entryCssPath = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-styles', 'entry.css');
+    if ('follow' === position) Object.values(demos).forEach((routes)=>{
+        routes.forEach((route)=>{
+            const { id, path: demoPath } = route;
+            const entry = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.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 { render } from 'react-dom';
+            const reactEntry = `
+        import { createRoot } from 'react-dom/client';
         import ${JSON.stringify(entryCssPath)};
         import Demo from ${JSON.stringify(demoPath)};
-        render(<Demo />, document.getElementById('root'));
+        const container = document.getElementById('root');
+        createRoot(container).render(<Demo />);
         `;
-                const entryContent = 'react' === framework ? reactEntry : solidEntry;
-                (0, external_node_fs_namespaceObject.writeFileSync)(entry, entryContent);
-                sourceEntry[id] = entry;
-            });
+            const entryContent = customEntry ? customEntry({
+                entryCssPath,
+                demoPath
+            }) : 'react' === framework ? reactEntry : solidEntry;
+            (0, __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__.writeFileSync)(entry, entryContent);
+            sourceEntry[id] = entry;
         });
-        else Object.entries(demos).forEach(([key, routes])=>{
-            if (0 === routes.length) return;
-            const reactContent = `
-        import { render } from 'react-dom';
+    });
+    else Object.entries(demos).forEach(([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() {
@@ -115,9 +73,10 @@ var __webpack_exports__ = {};
             </div>
           )
         }
-        render(<App /> , document.getElementById('root'));
+        const container = document.getElementById('root');
+        createRoot(container).render(<App />);
       `;
-            const solidContent = `
+        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')}
@@ -131,487 +90,478 @@ 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);
-            sourceEntry[id] = entry;
-        });
-        return sourceEntry;
-    }
-    const node_utils_namespaceObject = require("@rspress/shared/node-utils");
-    const convert = function(test) {
-        if (null == test) return ok;
-        if ('function' == typeof test) return castFactory(test);
-        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
-        if ('string' == typeof test) return typeFactory(test);
-        throw new Error('Expected function, string, or object as test');
-    };
-    function anyFactory(tests) {
-        const checks = [];
+        const renderContent = 'solid' === framework ? solidContent : reactContent;
+        const id = `_${toValidVarName(key)}`;
+        const entry = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(virtualDir, `${id}.entry.tsx`);
+        (0, __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__.writeFileSync)(entry, renderContent);
+        sourceEntry[id] = entry;
+    });
+    return sourceEntry;
+}
+const convert = function(test) {
+    if (null == test) return ok;
+    if ('function' == typeof test) return castFactory(test);
+    if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+    if ('string' == typeof test) return typeFactory(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 < tests.length)checks[index] = convert(tests[index]);
-        return castFactory(any);
-        function any(...parameters) {
-            let index = -1;
-            while(++index < checks.length)if (checks[index].apply(this, parameters)) return true;
-            return false;
-        }
+        while(++index < checks.length)if (checks[index].apply(this, parameters)) return true;
+        return false;
     }
-    function propsFactory(check) {
-        const checkAsRecord = check;
-        return castFactory(all);
-        function all(node) {
-            const nodeAsRecord = node;
-            let key;
-            for(key in check)if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
-            return true;
-        }
-    }
-    function typeFactory(check) {
-        return castFactory(type);
-        function type(node) {
-            return node && node.type === check;
-        }
-    }
-    function castFactory(testFunction) {
-        return check;
-        function check(value, index, parent) {
-            return Boolean(looksLikeANode(value) && testFunction.call(this, value, 'number' == typeof index ? index : void 0, parent || void 0));
-        }
-    }
-    function ok() {
+}
+function propsFactory(check) {
+    const checkAsRecord = check;
+    return castFactory(all);
+    function all(node) {
+        const nodeAsRecord = node;
+        let key;
+        for(key in check)if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
         return true;
     }
-    function looksLikeANode(value) {
-        return null !== value && 'object' == typeof value && 'type' in value;
+}
+function typeFactory(check) {
+    return castFactory(type);
+    function type(node) {
+        return node && node.type === check;
     }
-    function color(d) {
-        return '\u001B[33m' + d + '\u001B[39m';
+}
+function castFactory(testFunction) {
+    return check;
+    function check(value, index, parent) {
+        return Boolean(looksLikeANode(value) && testFunction.call(this, value, 'number' == typeof index ? index : void 0, parent || void 0));
     }
-    const empty = [];
-    const CONTINUE = true;
-    const EXIT = false;
-    const SKIP = 'skip';
-    function visitParents(tree, test, visitor, reverse) {
-        let check;
-        if ('function' == typeof test && 'function' != typeof visitor) {
-            reverse = visitor;
-            visitor = test;
-        } else check = test;
-        const is = convert(check);
-        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 + '>' : '')) + ')'
-                });
+}
+function ok() {
+    return true;
+}
+function looksLikeANode(value) {
+    return null !== value && 'object' == typeof value && 'type' in value;
+}
+function color(d) {
+    return '\u001B[33m' + d + '\u001B[39m';
+}
+const empty = [];
+const CONTINUE = true;
+const EXIT = false;
+const SKIP = 'skip';
+function visitParents(tree, test, visitor, reverse) {
+    let check;
+    if ('function' == typeof test && 'function' != typeof visitor) {
+        reverse = visitor;
+        visitor = test;
+    } else check = test;
+    const is = convert(check);
+    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 = empty;
+            let subresult;
+            let offset;
+            let grandparents;
+            if (!test || is(node, index, parents[parents.length - 1] || void 0)) {
+                result = toResult(visitor(node, parents));
+                if (result[0] === EXIT) return result;
             }
-            return visit;
-            function visit() {
-                let result = empty;
-                let subresult;
-                let offset;
-                let grandparents;
-                if (!test || is(node, index, parents[parents.length - 1] || void 0)) {
-                    result = toResult(visitor(node, parents));
-                    if (result[0] === EXIT) return result;
-                }
-                if ('children' in node && node.children) {
-                    const nodeAsParent = node;
-                    if (nodeAsParent.children && result[0] !== SKIP) {
-                        offset = (reverse ? nodeAsParent.children.length : -1) + step;
-                        grandparents = parents.concat(nodeAsParent);
-                        while(offset > -1 && offset < nodeAsParent.children.length){
-                            const child = nodeAsParent.children[offset];
-                            subresult = factory(child, offset, grandparents)();
-                            if (subresult[0] === EXIT) return subresult;
-                            offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
-                        }
+            if ('children' in node && node.children) {
+                const nodeAsParent = node;
+                if (nodeAsParent.children && result[0] !== SKIP) {
+                    offset = (reverse ? nodeAsParent.children.length : -1) + step;
+                    grandparents = parents.concat(nodeAsParent);
+                    while(offset > -1 && offset < nodeAsParent.children.length){
+                        const child = nodeAsParent.children[offset];
+                        subresult = factory(child, offset, grandparents)();
+                        if (subresult[0] === EXIT) return subresult;
+                        offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
                     }
                 }
-                return result;
             }
+            return result;
         }
     }
-    function toResult(value) {
-        if (Array.isArray(value)) return value;
-        if ('number' == typeof value) return [
-            CONTINUE,
-            value
-        ];
-        return null == value ? empty : [
-            value
-        ];
+}
+function toResult(value) {
+    if (Array.isArray(value)) return value;
+    if ('number' == typeof value) return [
+        CONTINUE,
+        value
+    ];
+    return null == value ? empty : [
+        value
+    ];
+}
+function lib_visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
+    let reverse;
+    let test;
+    let visitor;
+    if ('function' == typeof testOrVisitor && 'function' != typeof visitorOrReverse) {
+        test = void 0;
+        visitor = testOrVisitor;
+        reverse = visitorOrReverse;
+    } else {
+        test = testOrVisitor;
+        visitor = visitorOrReverse;
+        reverse = maybeReverse;
     }
-    function lib_visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
-        let reverse;
-        let test;
-        let visitor;
-        if ('function' == typeof testOrVisitor && 'function' != typeof visitorOrReverse) {
-            test = void 0;
-            visitor = testOrVisitor;
-            reverse = visitorOrReverse;
-        } else {
-            test = testOrVisitor;
-            visitor = visitorOrReverse;
-            reverse = maybeReverse;
-        }
-        visitParents(tree, test, overload, reverse);
-        function overload(node, parents) {
-            const parent = parents[parents.length - 1];
-            const index = parent ? parent.children.indexOf(node) : void 0;
-            return visitor(node, index, parent);
-        }
+    visitParents(tree, test, overload, reverse);
+    function overload(node, parents) {
+        const parent = parents[parents.length - 1];
+        const index = parent ? parent.children.indexOf(node) : void 0;
+        return visitor(node, index, 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
-                                    }
+}
+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)}`
                             }
+                        ],
+                        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 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();
+    __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].mkdirSync(virtualDir, {
+        recursive: true
+    });
+    const data = this.data();
+    return (tree, vfile)=>{
+        const demoMdx = [];
+        const route = routeMeta.find((meta)=>(0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.normalizePosixPath)(meta.absolutePath) === (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.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, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.resolve)(vfile.dirname || (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.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}`
+                    }
+                ]
+            });
+        }
+        lib_visit(tree, 'heading', (node)=>{
+            if (1 === node.depth) {
+                const firstChild = node.children[0];
+                title = firstChild && 'value' in firstChild && firstChild.value || title;
+            }
         });
-    const remarkPlugin_demos = {};
-    const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode, position, previewLanguages, previewCodeTransform }) {
-        const routeMeta = getRouteMeta();
-        external_node_fs_default().mkdirSync(virtualDir, {
-            recursive: true
+        lib_visit(tree, 'mdxJsxFlowElement', (node)=>{
+            if ('code' === node.name) {
+                const src = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'src');
+                if ('string' != typeof src) return;
+                const currentMode = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'previewMode') ?? previewMode;
+                const isMobileAttr = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.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++);
+            }
         });
-        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: '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, 'code', (node)=>{
+            if ('hasVisited' in node) 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({
+                    language: node.lang,
+                    code: node.value
                 });
-            }
-            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++);
+                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 = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
+                constructDemoNode(id, virtualModulePath, node, isMobileMode);
+                if (__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].existsSync(virtualModulePath)) {
+                    const content = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(virtualModulePath, 'utf-8');
+                    if (content === value) return;
                 }
-            });
-            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 ? void 0 : _node_meta.includes('pure')) || !(null === (_node_meta1 = node.meta) || void 0 === _node_meta1 ? 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 ? void 0 : _node_meta2.includes('mobile')) || (null === (_node_meta3 = node.meta) || void 0 === _node_meta3 ? void 0 : _node_meta3.includes('iframe')) || !(null === (_node_meta4 = node.meta) || void 0 === _node_meta4 ? void 0 : _node_meta4.includes('web')) && !(null === (_node_meta5 = node.meta) || void 0 === _node_meta5 ? 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;
-        };
+                __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].writeFileSync(virtualModulePath, value);
+            }
+        });
+        tree.children.unshift(...demoMdx);
+        if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
     };
-    let src_rslib_entry_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 = (null == options ? void 0 : options.previewMode) ?? (isMobile ? 'iframe' : 'internal');
-        const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {} } = iframeOptions;
-        const globalUIComponents = 'fixed' === position ? [
-            (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
-        ] : [];
-        const getRouteMeta = ()=>src_rslib_entry_routeMeta;
-        let lastDemos;
-        let devServer;
-        let clientConfig;
-        const port = devPort;
-        return {
-            name: '@rspress/plugin-preview',
-            config (config) {
-                config.markdown = config.markdown || {};
-                config.markdown.mdxRs = false;
-                return config;
-            },
-            routeGenerated (routes) {
-                src_rslib_entry_routeMeta = routes;
-            },
-            async beforeBuild (_, isProd) {
-                if (!isProd) try {
-                    await new Promise((resolve, reject)=>{
-                        const server = external_node_net_default().createServer();
-                        server.unref();
-                        server.on('error', reject);
-                        server.listen({
-                            port,
-                            host: '0.0.0.0'
-                        }, ()=>{
-                            server.close(resolve);
-                        });
+};
+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 ? [
+        (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-components', 'Device.tsx')
+    ] : [];
+    const getRouteMeta = ()=>src_routeMeta;
+    let lastDemos;
+    let devServer;
+    let clientConfig;
+    const port = devPort;
+    return {
+        name: '@rspress/plugin-preview',
+        config (config) {
+            config.markdown = config.markdown || {};
+            return config;
+        },
+        routeGenerated (routes) {
+            src_routeMeta = routes;
+        },
+        async beforeBuild (_, isProd) {
+            if (!isProd) try {
+                await new Promise((resolve, reject)=>{
+                    const server = __WEBPACK_EXTERNAL_MODULE_node_net_0373943e__["default"].createServer();
+                    server.unref();
+                    server.on('error', reject);
+                    server.listen({
+                        port,
+                        host: '0.0.0.0'
+                    }, ()=>{
+                        server.close(resolve);
                     });
-                } catch (e) {
-                    if (!!e && 'object' == typeof e && 'code' in e && 'EADDRINUSE' !== e.code) throw e;
-                    throw new Error(`Port "${port}" is occupied, please choose another one.`);
-                }
-            },
-            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);
-                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _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');
-                if (0 === Object.keys(sourceEntry).length) return;
-                const { html, source, output, performance } = clientConfig ?? {};
-                const rsbuildConfig = (0, core_namespaceObject.mergeRsbuildConfig)({
-                    dev: {
-                        progressBar: false
-                    },
-                    server: {
-                        port: devPort,
-                        printUrls: ()=>void 0,
-                        strictPort: true
-                    },
-                    performance: {
-                        ...performance,
-                        printFileSize: false
-                    },
-                    html,
-                    source: {
-                        ...source,
-                        entry: sourceEntry
-                    },
-                    output: {
-                        ...output,
-                        assetPrefix: (null == output ? void 0 : output.assetPrefix) ? `${(0, shared_namespaceObject.removeTrailingSlash)(output.assetPrefix)}/~demo` : '/~demo',
-                        distPath: {
-                            root: outDir
-                        },
-                        copy: void 0
-                    },
-                    plugins: null == config ? void 0 : config.builderPlugins
-                }, builderConfig);
-                const rsbuildInstance = await (0, core_namespaceObject.createRsbuild)({
-                    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(),
-                    pluginLess()
-                ]);
-                if ('solid' === framework) rsbuildInstance.addPlugins([
-                    (0, plugin_babel_namespaceObject.pluginBabel)({
-                        include: /\.(?:jsx|tsx)$/
-                    }),
-                    (0, plugin_solid_namespaceObject.pluginSolid)()
-                ]);
-                if ('react' === framework) rsbuildInstance.addPlugins([
-                    (0, plugin_react_namespaceObject.pluginReact)()
-                ]);
-                if (isProd) rsbuildInstance.build();
-                else devServer = await rsbuildInstance.startDevServer();
-            },
-            builderConfig: {
+            } catch (e) {
+                if (!!e && 'object' == typeof e && 'code' in e && 'EADDRINUSE' !== e.code) throw e;
+                throw new Error(`Port "${port}" is occupied, please choose another one.`);
+            }
+        },
+        async afterBuild (config, isProd) {
+            if ((0, __WEBPACK_EXTERNAL_MODULE_lodash__.isEqual)(remarkPlugin_demos, lastDemos)) return;
+            lastDemos = (0, __WEBPACK_EXTERNAL_MODULE_lodash__.cloneDeep)(remarkPlugin_demos);
+            await devServer?.server?.close();
+            devServer = void 0;
+            const sourceEntry = generateEntry(remarkPlugin_demos, framework, position, customEntry);
+            const outDir = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(config.outDir ?? 'doc_build', '~demo');
+            if (0 === Object.keys(sourceEntry).length) return;
+            const { html, source, output, performance } = clientConfig ?? {};
+            const rsbuildConfig = (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_core_1b356efc__.mergeRsbuildConfig)({
+                dev: {
+                    progressBar: false
+                },
+                server: {
+                    port: devPort,
+                    printUrls: ()=>void 0,
+                    strictPort: true
+                },
+                performance: {
+                    ...performance,
+                    printFileSize: false
+                },
+                html,
                 source: {
-                    include: [
-                        (0, external_node_path_namespaceObject.join)(__dirname, '..')
-                    ]
+                    ...source,
+                    entry: sourceEntry
                 },
-                tools: {
-                    bundlerChain (chain) {
-                        chain.module.rule('Raw').resourceQuery(/raw/).type('asset/source').end();
-                        chain.resolve.extensions.prepend('.md').prepend('.mdx');
+                output: {
+                    ...output,
+                    assetPrefix: output?.assetPrefix ? `${(0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.removeTrailingSlash)(output.assetPrefix)}/~demo` : '/~demo',
+                    distPath: {
+                        root: outDir
                     },
-                    rspack: {
-                        watchOptions: {
-                            ignored: /\.git/
-                        }
-                    }
+                    copy: void 0
                 },
-                plugins: [
-                    {
-                        name: 'close-demo-server',
-                        setup: (api)=>{
-                            api.modifyRsbuildConfig((config)=>{
-                                var _config_output;
-                                if ((null === (_config_output = config.output) || void 0 === _config_output ? void 0 : _config_output.target) === 'web') clientConfig = config;
-                            });
-                            api.onCloseDevServer(async ()=>{
-                                var _devServer_server;
-                                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
-                                devServer = void 0;
-                            });
-                        }
-                    }
+                plugins: config?.builderPlugins
+            }, builderConfig);
+            const rsbuildInstance = await (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_core_1b356efc__.createRsbuild)({
+                rsbuildConfig
+            });
+            const { pluginSass } = await import("@rsbuild/plugin-sass");
+            const { pluginLess } = await import("@rsbuild/plugin-less");
+            rsbuildInstance.addPlugins([
+                pluginSass(),
+                pluginLess()
+            ]);
+            if ('solid' === framework) rsbuildInstance.addPlugins([
+                (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_babel_2a5a8b08__.pluginBabel)({
+                    include: /\.(?:jsx|tsx)$/
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_solid_0a0a2645__.pluginSolid)()
+            ]);
+            if ('react' === framework) rsbuildInstance.addPlugins([
+                (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react_7b149ee4__.pluginReact)()
+            ]);
+            if (isProd) rsbuildInstance.build();
+            else devServer = await rsbuildInstance.startDevServer();
+        },
+        builderConfig: {
+            source: {
+                include: [
+                    (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(__dirname, '..')
                 ]
             },
-            extendPageData (pageData, isProd) {
-                if (!isProd) pageData.devPort = port;
-                pageData.extraHighlightLanguages = previewLanguages;
+            tools: {
+                bundlerChain (chain) {
+                    chain.module.rule('Raw').resourceQuery(/raw/).type('asset/source').end();
+                    chain.resolve.extensions.prepend('.md').prepend('.mdx');
+                },
+                rspack: {
+                    watchOptions: {
+                        ignored: /\.git/
+                    }
+                }
             },
-            markdown: {
-                remarkPlugins: [
-                    [
-                        remarkCodeToDemo,
-                        {
-                            getRouteMeta,
-                            position,
-                            previewMode,
-                            defaultRenderMode,
-                            previewLanguages,
-                            previewCodeTransform
-                        }
-                    ]
-                ],
-                globalComponents: [
-                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Container.tsx')
+            plugins: [
+                {
+                    name: 'close-demo-server',
+                    setup: (api)=>{
+                        api.modifyRsbuildConfig((config)=>{
+                            if (config.output?.target === 'web') clientConfig = config;
+                        });
+                        api.onCloseDevServer(async ()=>{
+                            await devServer?.server?.close();
+                            devServer = void 0;
+                        });
+                    }
+                }
+            ]
+        },
+        extendPageData (pageData, isProd) {
+            if (!isProd) pageData.devPort = port;
+            pageData.extraHighlightLanguages = previewLanguages;
+        },
+        markdown: {
+            remarkPlugins: [
+                [
+                    remarkCodeToDemo,
+                    {
+                        getRouteMeta,
+                        position,
+                        previewMode,
+                        defaultRenderMode,
+                        previewLanguages,
+                        previewCodeTransform
+                    }
                 ]
-            },
-            globalUIComponents,
-            globalStyles: (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', `${previewMode}.css`)
-        };
-    }
-})();
-exports.pluginPreview = __webpack_exports__.pluginPreview;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "pluginPreview"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});
+            ],
+            globalComponents: [
+                (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-components', 'Container.tsx')
+            ]
+        },
+        globalUIComponents,
+        globalStyles: (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-styles', `${previewMode}.css`)
+    };
+}
+export { pluginPreview };

package/dist/utils.d.ts

@@ -1,5 +1,7 @@
 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;
 
 /**

package/dist/utils.js

@@ -1,34 +1,3 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    generateId: ()=>generateId,
-    injectDemoBlockImport: ()=>injectDemoBlockImport,
-    normalizeId: ()=>normalizeId,
-    toValidVarName: ()=>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');
@@ -42,16 +11,15 @@ const injectDemoBlockImport = (str, path)=>`
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-exports.generateId = __webpack_exports__.generateId;
-exports.injectDemoBlockImport = __webpack_exports__.injectDemoBlockImport;
-exports.normalizeId = __webpack_exports__.normalizeId;
-exports.toValidVarName = __webpack_exports__.toValidVarName;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "generateId",
-    "injectDemoBlockImport",
-    "normalizeId",
-    "toValidVarName"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});
+const getLangFileExt = (lang)=>{
+    switch(lang){
+        case 'jsx':
+        case 'tsx':
+            return 'tsx';
+        case 'json':
+            return 'tsx';
+        default:
+            return lang;
+    }
+};
+export { generateId, getLangFileExt, injectDemoBlockImport, normalizeId, toValidVarName };

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.1",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
     "type": "git",
-    "url": "https://github.com/web-infra-dev/rspress",
+    "url": "git+https://github.com/web-infra-dev/rspress.git",
     "directory": "packages/plugin-preview"
   },
   "license": "MIT",
-  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "types": "./index.d.ts",
   "files": [
     "index.d.ts",
@@ -17,19 +23,19 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.3.4",
-    "@rsbuild/plugin-babel": "~1.0.4",
+    "@rsbuild/core": "1.3.9",
+    "@rsbuild/plugin-babel": "~1.0.5",
     "@rsbuild/plugin-less": "~1.2.2",
     "@rsbuild/plugin-react": "~1.1.1",
     "@rsbuild/plugin-sass": "~1.3.1",
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^4.2.0",
-    "@rspress/shared": "2.0.0-alpha.9",
-    "@rspress/theme-default": "2.0.0-alpha.9"
+    "@rspress/shared": "2.0.0-beta.1",
+    "@rspress/theme-default": "2.0.0-beta.1"
   },
   "devDependencies": {
-    "@rslib/core": "0.6.1",
+    "@rslib/core": "0.6.5",
     "@types/lodash": "^4.17.16",
     "@types/mdast": "^4.0.4",
     "@types/node": "^18.11.17",
@@ -37,20 +43,21 @@
     "@types/react-dom": "^18.3.6",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-router-dom": "^6.29.0",
+    "rsbuild-plugin-publint": "^0.3.0",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-alpha.9",
-    "react": ">=17.0.0",
+    "@rspress/core": "^2.0.0-beta.1",
+    "react": ">=18.0.0",
     "react-router-dom": "^6.8.1"
   },
   "engines": {
-    "node": ">=14.17.6"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public",

package/static/global-components/Container.tsx

@@ -45,7 +45,7 @@ const Container: React.FC<ContainerProps> = props => {
     <NoSSR>
       <div className="rspress-preview">
         {isMobile === 'true' ? (
-          <div className="rspress-preview-wrapper flex">
+          <div className="rspress-preview-wrapper rp-flex">
             <div className="rspress-preview-code">{children?.[0]}</div>
             <div className="rspress-preview-device">
               <iframe src={getPageUrl()} key={iframeKey}></iframe>