@rspress/plugin-preview 2.0.1 → 2.0.2

package/dist/index.js

@@ -398,6 +398,7 @@ function pluginPreview(options) {
         const { preEntry: _, ...otherSourceOptions } = source ?? {};
         const rsbuildConfig = mergeRsbuildConfig({
             server: {
+                host: true,
                 port: devPort,
                 printUrls: ()=>void 0,
                 strictPort: true
@@ -493,7 +494,10 @@ function pluginPreview(options) {
             source: {
                 include: [
                     join(__dirname, '..')
-                ]
+                ],
+                define: {
+                    'process.env.RSPRESS_IFRAME_DEV_PORT': JSON.stringify(devPort)
+                }
             },
             tools: {
                 bundlerChain (chain) {
@@ -524,9 +528,6 @@ function pluginPreview(options) {
                 }
             ]
         },
-        extendPageData (pageData, isProd) {
-            if (!isProd) pageData.devPort = port;
-        },
         markdown: {
             remarkPlugins: [
                 [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -23,13 +23,13 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "2.0.0-beta.0",
+    "@rsbuild/core": "2.0.0-beta.1",
     "@rsbuild/plugin-babel": "~1.1.0",
-    "@rsbuild/plugin-react": "~1.4.4",
+    "@rsbuild/plugin-react": "~1.4.5",
     "qrcode.react": "^4.2.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.19.3",
+    "@rslib/core": "0.19.4",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.8.1",
     "@types/react": "^19.2.10",
@@ -38,14 +38,14 @@
     "mdast-util-mdxjs-esm": "^2.0.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.12.0",
+    "react-router-dom": "^7.13.0",
     "rsbuild-plugin-publint": "^0.3.4",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.1",
+    "@rspress/core": "^2.0.2",
     "react": ">=18.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/FixedDevice.tsx

@@ -1,7 +1,8 @@
-import { NoSSR, useDark, usePage, withBase } from '@rspress/core/runtime';
+import { useDark, usePage } from '@rspress/core/runtime';
 import { useCallback, useEffect, useRef, useState } from 'react';
 // @ts-expect-error
 import { normalizeId } from '../../dist/utils';
+import { getPageFullUrl, getPageUrl } from './common/getPageUrl';
 import MobileOperation from './common/PreviewOperations';
 import './FixedDevice.css';
 
@@ -9,15 +10,8 @@ export default () => {
   const { page } = usePage();
   const pageName = `${normalizeId(page.pagePath)}`;
   const demoId = `_${pageName}`;
-  const url = `~demo/${demoId}`;
   const { haveIframeFixedDemos } = page;
 
-  const getPageUrl = (url: string) => {
-    if (page?.devPort) {
-      return `http://localhost:${page.devPort}/${demoId}`;
-    }
-    return withBase(url);
-  };
   const [iframeKey, setIframeKey] = useState(0);
   const dark = useDark();
   const refresh = useCallback(() => {
@@ -50,16 +44,14 @@ export default () => {
       }
     }
     `}</style>
-      <NoSSR>
-        <iframe
-          src={getPageUrl(url)}
-          className="rp-fixed-device__iframe"
-          key={iframeKey}
-          ref={iframeRef}
-        />
-      </NoSSR>
+      <iframe
+        src={getPageUrl(demoId)}
+        className="rp-fixed-device__iframe"
+        key={iframeKey}
+        ref={iframeRef}
+      />
       <MobileOperation
-        url={getPageUrl(url)}
+        url={getPageFullUrl(demoId)}
         className="rp-fixed-device__operations"
         refresh={refresh}
       />

package/static/global-components/Preview.tsx

@@ -1,4 +1,4 @@
-import { NoSSR, useDark, usePageData, withBase } from '@rspress/core/runtime';
+import { useDark } from '@rspress/core/runtime';
 import {
   type MouseEvent,
   useCallback,
@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { getPageFullUrl, getPageUrl } from './common/getPageUrl';
 import MobileOperation from './common/PreviewOperations';
 import IconCode from './icons/Code';
 import './Preview.css';
@@ -18,12 +19,12 @@ type PreviewProps = {
 
 interface BasePreviewProps {
   children: React.ReactNode[];
-  getPageUrl: () => string;
+  demoId: string;
 }
 
 const PreviewIframeFollow: React.FC<BasePreviewProps> = ({
   children,
-  getPageUrl,
+  demoId,
 }) => {
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
@@ -48,11 +49,11 @@ const PreviewIframeFollow: React.FC<BasePreviewProps> = ({
       <div className="rp-preview--iframe-follow__device">
         <iframe
           className="rp-preview--iframe-follow__device__iframe"
-          src={getPageUrl()}
+          src={getPageUrl(demoId)}
           key={iframeKey}
           ref={iframeRef}
         />
-        <MobileOperation url={getPageUrl()} refresh={refresh} />
+        <MobileOperation url={getPageFullUrl(demoId)} refresh={refresh} />
       </div>
     </div>
   );
@@ -104,26 +105,15 @@ const PreviewInternal: React.FC<{ children: React.ReactNode[] }> = ({
 
 const Preview: React.FC<PreviewProps> = props => {
   const { children, previewMode, demoId } = props;
-  const { page } = usePageData();
-
-  const getPageUrl = useCallback(() => {
-    const url = `/~demo/${demoId}`;
-    if (page?.devPort) {
-      return `http://localhost:${page.devPort}/${demoId}`;
-    }
-    return withBase(url);
-  }, [page?.devPort, demoId]);
 
   return (
-    <NoSSR>
+    <>
       {previewMode === 'iframe-follow' ? (
-        <PreviewIframeFollow getPageUrl={getPageUrl}>
-          {children}
-        </PreviewIframeFollow>
+        <PreviewIframeFollow demoId={demoId}>{children}</PreviewIframeFollow>
       ) : (
         <PreviewInternal>{children}</PreviewInternal>
       )}
-    </NoSSR>
+    </>
   );
 };
 

package/static/global-components/common/getPageUrl.ts

@@ -0,0 +1,26 @@
+import { withBase } from '@rspress/core/runtime';
+
+const DEV_PORT = process.env.RSPRESS_IFRAME_DEV_PORT;
+
+/*
+ * We must provide the complete address for scanning QR Code.
+ */
+export const getPageFullUrl = (demoId: string) => {
+  if (DEV_PORT && import.meta.env.DEV) {
+    return `http://${window.location.hostname}:${DEV_PORT}/${demoId}`;
+  }
+  const url = `/~demo/${demoId}`;
+  if (typeof window !== 'undefined') {
+    return `${window.location.origin}${withBase(url)}`;
+  }
+  // do nothing in ssr
+  return '';
+};
+
+export const getPageUrl = (demoId: string) => {
+  if (DEV_PORT && import.meta.env.DEV) {
+    return `http://${window.location.hostname}:${DEV_PORT}/${demoId}`;
+  }
+  const url = `/~demo/${demoId}`;
+  return withBase(url);
+};