@rspress/plugin-preview 1.11.2 → 1.12.0

package/dist/index.js

@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,7 +27,51 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  pluginPreview: () => pluginPreview
+});
+module.exports = __toCommonJS(src_exports);
+var import_path4 = require("path");
+var import_node_net = __toESM(require("net"));
+var import_core = require("@rsbuild/core");
+var import_plugin_solid = require("@rsbuild/plugin-solid");
+var import_plugin_babel = require("@rsbuild/plugin-babel");
+var import_plugin_react = require("@rsbuild/plugin-react");
+var import_lodash = require("lodash");
+
+// src/remarkPlugin.ts
+var import_path2 = require("path");
+
 // ../../node_modules/.pnpm/unist-util-is@5.2.1/node_modules/unist-util-is/lib/index.js
+var convert = (
+  /**
+   * @type {(
+   *   (<Kind extends Node>(test: PredicateTest<Kind>) => AssertPredicate<Kind>) &
+   *   ((test?: Test) => AssertAnything)
+   * )}
+   */
+  /**
+   * @param {Test} [test]
+   * @returns {AssertAnything}
+   */
+  function(test) {
+    if (test === void 0 || test === null) {
+      return ok;
+    }
+    if (typeof test === "string") {
+      return typeFactory(test);
+    }
+    if (typeof test === "object") {
+      return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+    }
+    if (typeof test === "function") {
+      return castFactory(test);
+    }
+    throw new Error("Expected function, string, or object as test");
+  }
+);
 function anyFactory(tests) {
   const checks = [];
   let index = -1;
@@ -76,57 +117,81 @@ function castFactory(check) {
 function ok() {
   return true;
 }
-var convert;
-var init_lib = __esm({
-  "../../node_modules/.pnpm/unist-util-is@5.2.1/node_modules/unist-util-is/lib/index.js"() {
-    "use strict";
-    convert = /**
-     * @type {(
-     *   (<Kind extends Node>(test: PredicateTest<Kind>) => AssertPredicate<Kind>) &
-     *   ((test?: Test) => AssertAnything)
-     * )}
-     */
-    /**
-     * @param {Test} [test]
-     * @returns {AssertAnything}
-     */
-    function(test) {
-      if (test === void 0 || test === null) {
-        return ok;
-      }
-      if (typeof test === "string") {
-        return typeFactory(test);
-      }
-      if (typeof test === "object") {
-        return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
-      }
-      if (typeof test === "function") {
-        return castFactory(test);
-      }
-      throw new Error("Expected function, string, or object as test");
-    };
-  }
-});
-
-// ../../node_modules/.pnpm/unist-util-is@5.2.1/node_modules/unist-util-is/index.js
-var init_unist_util_is = __esm({
-  "../../node_modules/.pnpm/unist-util-is@5.2.1/node_modules/unist-util-is/index.js"() {
-    "use strict";
-    init_lib();
-  }
-});
 
 // ../../node_modules/.pnpm/unist-util-visit-parents@5.1.3/node_modules/unist-util-visit-parents/lib/color.js
 function color(d) {
   return "\x1B[33m" + d + "\x1B[39m";
 }
-var init_color = __esm({
-  "../../node_modules/.pnpm/unist-util-visit-parents@5.1.3/node_modules/unist-util-visit-parents/lib/color.js"() {
-    "use strict";
-  }
-});
 
 // ../../node_modules/.pnpm/unist-util-visit-parents@5.1.3/node_modules/unist-util-visit-parents/lib/index.js
+var CONTINUE = true;
+var EXIT = false;
+var SKIP = "skip";
+var visitParents = (
+  /**
+   * @type {(
+   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: BuildVisitor<Tree, Check>, reverse?: boolean | null | undefined) => void) &
+   *   (<Tree extends Node>(tree: Tree, visitor: BuildVisitor<Tree>, reverse?: boolean | null | undefined) => void)
+   * )}
+   */
+  /**
+   * @param {Node} tree
+   * @param {Test} test
+   * @param {Visitor<Node>} visitor
+   * @param {boolean | null | undefined} [reverse]
+   * @returns {void}
+   */
+  function(tree, test, visitor, reverse) {
+    if (typeof test === "function" && typeof visitor !== "function") {
+      reverse = visitor;
+      visitor = test;
+      test = null;
+    }
+    const is2 = convert(test);
+    const step = reverse ? -1 : 1;
+    factory(tree, void 0, [])();
+    function factory(node, index, parents) {
+      const value = node && typeof node === "object" ? node : {};
+      if (typeof value.type === "string") {
+        const name = (
+          // `hast`
+          typeof value.tagName === "string" ? value.tagName : (
+            // `xast`
+            typeof value.name === "string" ? value.name : void 0
+          )
+        );
+        Object.defineProperty(visit2, "name", {
+          value: "node (" + color(node.type + (name ? "<" + name + ">" : "")) + ")"
+        });
+      }
+      return visit2;
+      function visit2() {
+        let result = [];
+        let subresult;
+        let offset;
+        let grandparents;
+        if (!test || is2(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 = typeof subresult[1] === "number" ? subresult[1] : offset + step;
+          }
+        }
+        return result;
+      }
+    }
+  }
+);
 function toResult(value) {
   if (Array.isArray(value)) {
     return value;
@@ -136,154 +201,42 @@ function toResult(value) {
   }
   return [value];
 }
-var CONTINUE, EXIT, SKIP, visitParents;
-var init_lib2 = __esm({
-  "../../node_modules/.pnpm/unist-util-visit-parents@5.1.3/node_modules/unist-util-visit-parents/lib/index.js"() {
-    "use strict";
-    init_unist_util_is();
-    init_color();
-    CONTINUE = true;
-    EXIT = false;
-    SKIP = "skip";
-    visitParents = /**
-     * @type {(
-     *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: BuildVisitor<Tree, Check>, reverse?: boolean | null | undefined) => void) &
-     *   (<Tree extends Node>(tree: Tree, visitor: BuildVisitor<Tree>, reverse?: boolean | null | undefined) => void)
-     * )}
-     */
-    /**
-     * @param {Node} tree
-     * @param {Test} test
-     * @param {Visitor<Node>} visitor
-     * @param {boolean | null | undefined} [reverse]
-     * @returns {void}
-     */
-    function(tree, test, visitor, reverse) {
-      if (typeof test === "function" && typeof visitor !== "function") {
-        reverse = visitor;
-        visitor = test;
-        test = null;
-      }
-      const is2 = convert(test);
-      const step = reverse ? -1 : 1;
-      factory(tree, void 0, [])();
-      function factory(node, index, parents) {
-        const value = node && typeof node === "object" ? node : {};
-        if (typeof value.type === "string") {
-          const name = (
-            // `hast`
-            typeof value.tagName === "string" ? value.tagName : (
-              // `xast`
-              typeof value.name === "string" ? value.name : void 0
-            )
-          );
-          Object.defineProperty(visit2, "name", {
-            value: "node (" + color(node.type + (name ? "<" + name + ">" : "")) + ")"
-          });
-        }
-        return visit2;
-        function visit2() {
-          let result = [];
-          let subresult;
-          let offset;
-          let grandparents;
-          if (!test || is2(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 = typeof subresult[1] === "number" ? subresult[1] : offset + step;
-            }
-          }
-          return result;
-        }
-      }
-    };
-  }
-});
-
-// ../../node_modules/.pnpm/unist-util-visit-parents@5.1.3/node_modules/unist-util-visit-parents/index.js
-var init_unist_util_visit_parents = __esm({
-  "../../node_modules/.pnpm/unist-util-visit-parents@5.1.3/node_modules/unist-util-visit-parents/index.js"() {
-    "use strict";
-    init_lib2();
-  }
-});
 
 // ../../node_modules/.pnpm/unist-util-visit@4.1.1/node_modules/unist-util-visit/index.js
-var unist_util_visit_exports = {};
-__export(unist_util_visit_exports, {
-  CONTINUE: () => CONTINUE,
-  EXIT: () => EXIT,
-  SKIP: () => SKIP,
-  visit: () => visit
-});
-var visit;
-var init_unist_util_visit = __esm({
-  "../../node_modules/.pnpm/unist-util-visit@4.1.1/node_modules/unist-util-visit/index.js"() {
-    "use strict";
-    init_unist_util_visit_parents();
-    init_unist_util_visit_parents();
-    visit = /**
-     * @type {(
-     *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types.js').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
-     *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types.js').BuildVisitor<Tree>, reverse?: boolean) => void)
-     * )}
-     */
-    /**
-     * @param {Node} tree
-     * @param {Test} test
-     * @param {import('./complex-types.js').Visitor} visitor
-     * @param {boolean} [reverse]
-     */
-    function(tree, test, visitor, reverse) {
-      if (typeof test === "function" && typeof visitor !== "function") {
-        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 visit = (
+  /**
+   * @type {(
+   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types.js').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
+   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types.js').BuildVisitor<Tree>, reverse?: boolean) => void)
+   * )}
+   */
+  /**
+   * @param {Node} tree
+   * @param {Test} test
+   * @param {import('./complex-types.js').Visitor} visitor
+   * @param {boolean} [reverse]
+   */
+  function(tree, test, visitor, reverse) {
+    if (typeof test === "function" && typeof visitor !== "function") {
+      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
+      );
+    }
   }
-});
+);
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  demoMeta: () => demoMeta,
-  demoRoutes: () => demoRoutes,
-  normalizeId: () => normalizeId,
-  pluginPreview: () => pluginPreview,
-  routeMeta: () => routeMeta
-});
-module.exports = __toCommonJS(src_exports);
-var import_path3 = require("path");
-var import_rspack_plugin_virtual_module = require("rspack-plugin-virtual-module");
+// src/remarkPlugin.ts
 var import_shared2 = require("@rspress/shared");
-var import_lodash = require("lodash");
-
-// src/codeToDemo.ts
-var import_path2 = require("path");
-init_unist_util_visit();
 var import_fs_extra = __toESM(require("@rspress/shared/fs-extra"));
-var import_shared = require("@rspress/shared");
 
 // src/utils.ts
 var toValidVarName = (str) => {
@@ -296,63 +249,73 @@ var toValidVarName = (str) => {
 var generateId = (pageName, index) => {
   return `_${toValidVarName(pageName)}_${index}`;
 };
-var normalizeId = (routePath) => {
-  const result = routePath.replace(/\.(.*)?$/, "");
-  return toValidVarName(result);
-};
 var injectDemoBlockImport = (str, path2) => {
   return `
-    import DemoBlock from '${path2}';
+    import DemoBlock from ${JSON.stringify(path2)};
     ${str}
   `;
 };
 
 // src/constant.ts
 var import_path = __toESM(require("path"));
+var import_shared = require("@rspress/shared");
 var staticPath = import_path.default.join(__dirname, "..", "static");
-var demoComponentPath = import_path.default.join(
-  __dirname,
-  "..",
-  "dist",
-  "virtual-demo.js"
-);
 var demoBlockComponentPath = import_path.default.join(
   staticPath,
   "global-components",
   "DemoBlock.tsx"
 );
-
-// src/codeToDemo.ts
-var json = JSON.parse(
-  import_fs_extra.default.readFileSync((0, import_path2.resolve)(process.cwd(), "./package.json"), "utf8")
+var virtualDir = import_path.default.join(
+  process.cwd(),
+  "node_modules",
+  import_shared.RSPRESS_TEMP_DIR,
+  "virtual-demo"
 );
-var remarkCodeToDemo = ({ isMobile, getRouteMeta, iframePosition, defaultRenderMode }) => {
+
+// src/virtual-module.ts
+var import_rspack_plugin_virtual_module = __toESM(require("rspack-plugin-virtual-module"));
+var demos = {};
+var demoRuntimeModule = new import_rspack_plugin_virtual_module.default({
+  "virtual-meta": "export const demos = {}"
+});
+
+// src/remarkPlugin.ts
+var remarkCodeToDemo = ({
+  getRouteMeta,
+  previewMode,
+  defaultRenderMode,
+  position
+}) => {
   const routeMeta2 = getRouteMeta();
+  import_fs_extra.default.ensureDirSync(virtualDir);
   return (tree, vfile) => {
-    const demos = [];
+    const demoMdx = [];
     const route = routeMeta2.find(
-      (meta) => (0, import_shared.normalizePosixPath)(meta.absolutePath) === (0, import_shared.normalizePosixPath)(vfile.path || vfile.history[0])
+      (meta2) => (0, import_shared2.normalizePosixPath)(meta2.absolutePath) === (0, import_shared2.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, externalDemoIndex2) {
-      const demoRoute = `/~demo/${demoId}`;
       if (isMobileMode) {
-        demoRoutes.push({
-          path: demoRoute
+        demos[pageName].push({
+          title,
+          id: demoId,
+          path: (0, import_path2.isAbsolute)(demoPath) ? demoPath : (0, import_path2.join)(vfile.dirname || (0, import_path2.dirname)(vfile.path), demoPath)
         });
       } else {
-        demos.push(getASTNodeImport(`Demo${demoId}`, demoPath));
+        demoMdx.push(getASTNodeImport(`Demo${demoId}`, demoPath));
       }
       const tempVar = `externalDemoContent${externalDemoIndex2}`;
       if (externalDemoIndex2 !== void 0) {
-        demos.push(getASTNodeImport(tempVar, `!!${demoPath}?raw`));
+        demoMdx.push(getASTNodeImport(tempVar, `!!${demoPath}?raw`));
       }
-      if (isMobileMode && iframePosition === "fixed") {
+      if (isMobileMode && position === "fixed") {
         externalDemoIndex2 !== void 0 && Object.assign(currentNode, getExternalDemoContent(tempVar));
       } else {
         Object.assign(currentNode, {
@@ -366,18 +329,8 @@ var remarkCodeToDemo = ({ isMobile, getRouteMeta, iframePosition, defaultRenderM
             },
             {
               type: "mdxJsxAttribute",
-              name: "url",
-              value: demoRoute
-            },
-            {
-              type: "mdxJsxAttribute",
-              name: "content",
-              value: currentNode.value
-            },
-            {
-              type: "mdxJsxAttribute",
-              name: "packageName",
-              value: json.name
+              name: "demoId",
+              value: demoId
             }
           ],
           children: [
@@ -396,16 +349,29 @@ var remarkCodeToDemo = ({ isMobile, getRouteMeta, iframePosition, defaultRenderM
         });
       }
     }
+    visit(tree, "heading", (node) => {
+      if (node.depth === 1) {
+        if (node.children) {
+          title = node.children[0]?.value || title;
+        }
+      }
+    });
     visit(tree, "mdxJsxFlowElement", (node) => {
       if (node.name === "code") {
         const src = node.attributes.find(
           (attr) => attr.name === "src"
         )?.value;
+        if (!src) {
+          return;
+        }
+        const currtentMode = node.attributes.find(
+          (attr) => attr.name === "previewMode"
+        )?.value ?? previewMode;
         let isMobileMode = node.attributes.find(
           (attr) => attr.name === "isMobile"
         )?.value;
         if (isMobileMode === void 0) {
-          isMobileMode = isMobile;
+          isMobileMode = currtentMode === "iframe";
         } else if (isMobileMode === null) {
           isMobileMode = true;
         } else if (typeof isMobileMode === "object") {
@@ -413,9 +379,6 @@ var remarkCodeToDemo = ({ isMobile, getRouteMeta, iframePosition, defaultRenderM
         } else {
           isMobileMode = isMobileMode !== "false";
         }
-        if (!src) {
-          return;
-        }
         const id = generateId(pageName, index++);
         constructDemoNode(id, src, node, isMobileMode, externalDemoIndex++);
       }
@@ -426,42 +389,27 @@ var remarkCodeToDemo = ({ isMobile, getRouteMeta, iframePosition, defaultRenderM
       }
       if (node.lang === "jsx" || node.lang === "tsx") {
         const value = injectDemoBlockImport(node.value, demoBlockComponentPath);
-        const hasPureMeta = node?.meta?.includes("pure");
-        const hasPreviewMeta = node?.meta?.includes("preview");
-        let noTransform;
-        switch (defaultRenderMode) {
-          case "pure":
-            noTransform = !hasPreviewMeta;
-            break;
-          case "preview":
-            noTransform = hasPureMeta;
-            break;
-          default:
-            break;
-        }
-        if (noTransform) {
+        if (node?.meta?.includes("pure") || !node?.meta?.includes("preview") && defaultRenderMode === "pure") {
           return;
         }
-        const isMobileMode = node?.meta?.includes("mobile") || !node?.meta?.includes("web") && isMobile;
-        const demoDir = (0, import_path2.join)(
-          process.cwd(),
-          "node_modules",
-          import_shared.RSPRESS_TEMP_DIR,
-          `virtual-demo`
-        );
+        const isMobileMode = node?.meta?.includes("mobile") || node?.meta?.includes("iframe") || !node?.meta?.includes("web") && !node?.meta?.includes("internal") && previewMode === "iframe";
         const id = generateId(pageName, index++);
-        const virtualModulePath = (0, import_path2.join)(demoDir, `${id}.tsx`);
-        import_fs_extra.default.ensureDirSync((0, import_path2.join)(demoDir));
+        const virtualModulePath = (0, import_path2.join)(virtualDir, `${id}.tsx`);
+        constructDemoNode(id, virtualModulePath, node, isMobileMode);
         if (import_fs_extra.default.existsSync(virtualModulePath)) {
           const content = import_fs_extra.default.readFileSync(virtualModulePath, "utf-8");
-          if (content !== value) {
-            import_fs_extra.default.writeFileSync(virtualModulePath, value);
+          if (content === value) {
+            return;
           }
         }
-        constructDemoNode(id, virtualModulePath, node, isMobileMode);
+        import_fs_extra.default.writeFileSync(virtualModulePath, value);
       }
     });
-    tree.children.unshift(...demos);
+    tree.children.unshift(...demoMdx);
+    const meta = `
+      export const demos = ${JSON.stringify(demos)}
+      `;
+    demoRuntimeModule.writeModule("virtual-meta", meta);
   };
 };
 var getASTNodeImport = (name, from) => ({
@@ -541,17 +489,105 @@ var getExternalDemoContent = (tempVar) => ({
   ]
 });
 
+// src/generate-entry.ts
+var import_path3 = require("path");
+var import_fs = require("fs");
+function generateEntry(demos2, framework, position) {
+  const sourceEntry = {};
+  const entryCssPath = (0, import_path3.join)(staticPath, "global-styles", "entry.css");
+  if (position === "follow") {
+    Object.values(demos2).forEach((routes) => {
+      routes.forEach((route) => {
+        const { id, path: demoPath } = route;
+        const entry = (0, import_path3.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';
+        import ${JSON.stringify(entryCssPath)};
+        import Demo from ${JSON.stringify(demoPath)};
+        render(<Demo />, document.getElementById('root'));
+        `;
+        const entryContent = framework === "react" ? reactEntry : solidEntry;
+        (0, import_fs.writeFileSync)(entry, entryContent);
+        sourceEntry[id] = entry;
+      });
+    });
+  } else {
+    Object.entries(demos2).forEach(([key, routes]) => {
+      if (routes.length === 0) {
+        return;
+      }
+      const reactContent = `
+        import { render } from 'react-dom';
+        import ${JSON.stringify(entryCssPath)};
+        ${routes.map((demo, index) => {
+        return `import Demo_${index} from ${JSON.stringify(demo.path)}`;
+      }).join("\n")}
+        function App() {
+          return (
+            <div className="preview-container">
+              <div className="preview-nav">{"${routes[0].title}"}</div>
+              ${routes.map((demo, index) => {
+        return `<Demo_${index} />`;
+      }).join("\n")}
+            </div>
+          )
+        }
+        render(<App /> , document.getElementById('root'));
+      `;
+      const solidContent = `
+        import { render } from 'solid-js/web';
+        import ${JSON.stringify(entryCssPath)};
+        ${routes.map((demo, index) => {
+        return `import Demo_${index} from ${JSON.stringify(demo.path)}`;
+      }).join("\n")}
+        function App() {
+          return (
+            <div class="preview-container">
+              <div class="preview-nav">{"${routes[0].title}"}</div>
+              ${routes.map((_, index) => {
+        return `<Demo_${index} />`;
+      }).join("\n")}
+            </div>
+          )
+        }
+        render(() => <App /> , document.getElementById('root'));
+      `;
+      const renderContent = framework === "solid" ? solidContent : reactContent;
+      const id = `_${toValidVarName(key)}`;
+      const entry = (0, import_path3.join)(virtualDir, `${id}.entry.tsx`);
+      (0, import_fs.writeFileSync)(entry, renderContent);
+      sourceEntry[id] = entry;
+    });
+  }
+  return sourceEntry;
+}
+
 // src/index.ts
 var routeMeta;
-var demoRoutes = [];
-var demoMeta = {};
 function pluginPreview(options) {
-  const isMobile = options?.isMobile ?? false;
-  const iframePosition = options?.iframePosition ?? "follow";
-  const defaultRenderMode = options?.defaultRenderMode ?? "preview";
-  const demoRuntimeModule = new import_rspack_plugin_virtual_module.RspackVirtualModulePlugin({});
-  const globalUIComponents = iframePosition === "fixed" ? [(0, import_path3.join)(staticPath, "global-components", "Device.tsx")] : [];
+  const {
+    isMobile = false,
+    iframeOptions = {},
+    iframePosition = "follow",
+    defaultRenderMode = "preview"
+  } = options ?? {};
+  const previewMode = options?.previewMode ?? isMobile ? "iframe" : "internal";
+  const {
+    devPort = 7890,
+    framework = "react",
+    position = iframePosition
+  } = iframeOptions;
+  const globalUIComponents = iframePosition === "fixed" ? [(0, import_path4.join)(staticPath, "global-components", "Device.tsx")] : [];
   const getRouteMeta = () => routeMeta;
+  let lastDemos;
+  let devServer;
+  const port = devPort;
   return {
     name: "@rspress/plugin-preview",
     config(config) {
@@ -559,192 +595,141 @@ function pluginPreview(options) {
       config.markdown.mdxRs = false;
       return config;
     },
-    extendPageData(pageData) {
-      pageData.demoMeta = Object.values(demoMeta).flat();
-    },
-    addPages(_config, _isProd) {
-      return [
-        {
-          routePath: "/~demo/:id",
-          content: `---
-pageType: "blank"
----
-
-import Demo from ${JSON.stringify(demoComponentPath)}
-
-<Demo iframePosition="${iframePosition}"/>
-          `
-        }
-      ];
-    },
-    async routeGenerated(routes) {
+    routeGenerated(routes) {
       routeMeta = routes;
-      const files = routes.map((route) => route.absolutePath);
-      await Promise.all(
-        files.map(async (filepath, _index) => {
-          const isMdxFile = /\.mdx?$/.test(filepath);
-          if (!isMdxFile) {
-            return;
-          }
-          const { createProcessor } = await import("@mdx-js/mdx");
-          const { visit: visit2 } = await Promise.resolve().then(() => (init_unist_util_visit(), unist_util_visit_exports));
-          const { default: fs2 } = await import("@rspress/shared/fs-extra");
-          const { default: remarkGFM } = await import("remark-gfm");
-          let title = (0, import_path3.parse)(filepath).name;
-          try {
-            const processor = createProcessor({
-              format: (0, import_path3.extname)(filepath).slice(1),
-              remarkPlugins: [remarkGFM]
+    },
+    async beforeBuild(_, isProd) {
+      if (!isProd) {
+        try {
+          await new Promise((resolve, reject) => {
+            const server = import_node_net.default.createServer();
+            server.unref();
+            server.on("error", reject);
+            server.listen({ port, host: "0.0.0.0" }, () => {
+              server.close(resolve);
             });
-            const source = await fs2.readFile(filepath, "utf-8");
-            const ast = processor.parse(source);
-            let index = 1;
-            const { pageName } = routeMeta.find(
-              (meta) => (0, import_shared2.normalizePosixPath)(meta.absolutePath) === (0, import_shared2.normalizePosixPath)(filepath)
+          });
+        } catch (e) {
+          if (e.code !== "EADDRINUSE") {
+            throw e;
+          } else {
+            throw new Error(
+              `Port "${port}" is occupied, please choose another one.`
             );
-            const registerDemo = (demoId, demoPath, isMobileMode) => {
-              if (isMobileMode) {
-                demoMeta[filepath] = demoMeta[filepath] ?? [];
-                const isExist = demoMeta[filepath].find(
-                  (item) => item.id === demoId
-                );
-                if (!isExist) {
-                  demoMeta[filepath].push({
-                    id: demoId,
-                    title,
-                    virtualModulePath: demoPath
-                  });
-                }
-              }
-            };
-            visit2(ast, "heading", (node) => {
-              if (node.depth === 1) {
-                if (node.children) {
-                  title = node.children[0].value;
-                }
-              }
-            });
-            visit2(ast, "mdxJsxFlowElement", (node) => {
-              if (node.name === "code") {
-                const src = node.attributes.find(
-                  (attr) => attr.name === "src"
-                )?.value;
-                const isMobileMode = node.attributes.find(
-                  (attr) => attr.name === "isMobile"
-                )?.value ?? isMobile;
-                if (!src) {
-                  return;
-                }
-                const id = generateId(pageName, index++);
-                registerDemo(id, src, isMobileMode);
-              }
-            });
-            visit2(ast, "code", (node) => {
-              if (node.lang === "jsx" || node.lang === "tsx") {
-                const { value, meta } = node;
-                const hasPureMeta = meta?.includes("pure");
-                const hasPreviewMeta = meta?.includes("preview");
-                let noTransform;
-                switch (defaultRenderMode) {
-                  case "pure":
-                    noTransform = !hasPreviewMeta;
-                    break;
-                  case "preview":
-                    noTransform = hasPureMeta;
-                    break;
-                  default:
-                    break;
-                }
-                if (noTransform) {
-                  return;
-                }
-                const isMobileMode = node?.meta?.includes("mobile") || !node?.meta?.includes("web") && isMobile;
-                const { pageName: pageName2 } = routeMeta.find(
-                  (meta2) => (0, import_shared2.normalizePosixPath)(meta2.absolutePath) === (0, import_shared2.normalizePosixPath)(filepath)
-                );
-                const id = generateId(pageName2, index++);
-                const demoDir = (0, import_path3.join)(
-                  process.cwd(),
-                  "node_modules",
-                  import_shared2.RSPRESS_TEMP_DIR,
-                  `virtual-demo`
-                );
-                const virtualModulePath = (0, import_path3.join)(demoDir, `${id}.tsx`);
-                registerDemo(id, virtualModulePath, isMobileMode);
-                fs2.ensureDirSync((0, import_path3.join)(demoDir));
-                fs2.writeFileSync(
-                  virtualModulePath,
-                  injectDemoBlockImport(value, demoBlockComponentPath)
-                );
+          }
+        }
+      }
+    },
+    async afterBuild(config, isProd) {
+      if ((0, import_lodash.isEqual)(demos, lastDemos)) {
+        return;
+      }
+      lastDemos = (0, import_lodash.cloneDeep)(demos);
+      await devServer?.server?.close();
+      const sourceEntry = generateEntry(demos, framework, position);
+      const outDir = (0, import_path4.join)(config.outDir ?? "doc_build", "~demo");
+      if (Object.keys(sourceEntry).length === 0) {
+        return;
+      }
+      const rsbuildInstance = await (0, import_core.createRsbuild)({
+        rsbuildConfig: {
+          dev: {
+            progressBar: false
+          },
+          server: {
+            port: devPort,
+            printUrls: () => void 0,
+            strictPort: true
+          },
+          performance: {
+            printFileSize: false
+          },
+          source: {
+            entry: sourceEntry
+          },
+          output: {
+            distPath: {
+              root: outDir
+            }
+          },
+          tools: {
+            rspack: {
+              output: {
+                publicPath: "/~demo"
               }
-            });
-          } catch (e) {
-            console.error(e);
-            throw e;
+            }
           }
-        })
-      );
-      const virtualMeta = `
-        ${files.map((filepath, index) => {
-        return `import Route${index} from '${filepath}?meta';`;
-      }).join("\n")}
-        export const demos = [${files.map((_, index) => `Route${index}`).flat().join(",")}];
-        `;
-      demoRuntimeModule.writeModule("virtual-meta", virtualMeta);
+        }
+      });
+      if (framework === "solid") {
+        rsbuildInstance.addPlugins([
+          (0, import_plugin_babel.pluginBabel)({
+            include: /\.(?:jsx|tsx)$/
+          }),
+          (0, import_plugin_solid.pluginSolid)()
+        ]);
+      }
+      if (framework === "react") {
+        rsbuildInstance.addPlugins([(0, import_plugin_react.pluginReact)()]);
+      }
+      if (isProd) {
+        rsbuildInstance.build();
+      } else {
+        devServer = await rsbuildInstance.startDevServer();
+      }
     },
     builderConfig: {
       source: {
-        include: [(0, import_path3.join)(__dirname, "..")]
+        include: [(0, import_path4.join)(__dirname, "..")]
       },
       tools: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-        // @ts-ignore
         rspack: {
           plugins: [demoRuntimeModule]
         },
         bundlerChain(chain) {
-          chain.module.rule("Raw").resourceQuery(/raw/).type("asset/source").end().rule("MDX").oneOf("MDXMeta").before("MDXCompile").resourceQuery(/meta/).use("mdx-meta-loader").loader((0, import_path3.join)(__dirname, "../mdx-meta-loader.cjs")).end();
+          chain.module.rule("Raw").resourceQuery(/raw/).type("asset/source").end();
           chain.resolve.extensions.prepend(".md").prepend(".mdx");
         }
+      },
+      plugins: [
+        {
+          name: "close-demo-server",
+          setup: (api) => {
+            api.onCloseDevServer(async () => {
+              await devServer?.server?.close();
+            });
+          }
+        }
+      ]
+    },
+    extendPageData(pageData, isProd) {
+      if (!isProd) {
+        pageData.devPort = port;
       }
     },
     markdown: {
       remarkPlugins: [
         [
           remarkCodeToDemo,
-          { isMobile, getRouteMeta, iframePosition, defaultRenderMode }
+          {
+            getRouteMeta,
+            position,
+            previewMode,
+            defaultRenderMode
+          }
         ]
       ],
       globalComponents: [
-        (0, import_path3.join)(staticPath, "global-components", "Container.tsx")
+        (0, import_path4.join)(staticPath, "global-components", "Container.tsx")
       ]
     },
     globalUIComponents,
-    globalStyles: (0, import_path3.join)(
-      staticPath,
-      "global-styles",
-      `${isMobile ? "mobile" : "web"}.css`
-    ),
-    addSSGRoutes() {
-      if (iframePosition === "fixed") {
-        const normalizeRoutes = demoRoutes.map(({ path: item }) => {
-          const fragments = item.split("/").filter(Boolean);
-          const demoId = fragments.pop()?.replace(/_(\d+)$/, "");
-          return { path: `/${fragments.join("/")}/${demoId}` };
-        });
-        return (0, import_lodash.uniqBy)(normalizeRoutes, "path");
-      }
-      return demoRoutes;
-    }
+    globalStyles: (0, import_path4.join)(staticPath, "global-styles", `${previewMode}.css`)
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  demoMeta,
-  demoRoutes,
-  normalizeId,
-  pluginPreview,
-  routeMeta
+  pluginPreview
 });
 
 //# sourceMappingURL=index.js.map