@rspress/plugin-preview 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/utils.js

@@ -7,10 +7,6 @@ const normalizeId = (routePath)=>{
     const result = routePath.replace(/\.(.*)?$/, '');
     return toValidVarName(result);
 };
-const injectDemoBlockImport = (str, path)=>`
-    import DemoBlock from ${JSON.stringify(path)};
-    ${str}
-  `;
 const getLangFileExt = (lang)=>{
     switch(lang){
         case 'jsx':
@@ -22,4 +18,4 @@ const getLangFileExt = (lang)=>{
             return lang;
     }
 };
-export { generateId, getLangFileExt, injectDemoBlockImport, normalizeId, toValidVarName };
+export { generateId, getLangFileExt, normalizeId, toValidVarName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.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,32 +23,29 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "~1.6.3",
+    "@rsbuild/core": "~1.6.13",
     "@rsbuild/plugin-babel": "~1.0.6",
     "@rsbuild/plugin-react": "~1.4.2",
-    "@rsbuild/plugin-solid": "~1.0.6",
-    "lodash": "4.17.21",
     "qrcode.react": "^4.2.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.16.1",
-    "@types/lodash": "^4.17.20",
+    "@rslib/core": "0.18.3",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.8.1",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^6.30.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router-dom": "^7.10.1",
     "rsbuild-plugin-publint": "^0.3.3",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-rc.0",
+    "@rspress/core": "^2.0.0-rc.2",
     "react": ">=18.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/{Device.css → FixedDevice.css}

@@ -1,48 +1,56 @@
-.fixed-device {
+/* FixedDevice Component Styles (BEM) */
+
+:root {
+  --rp-preview-padding: 32px;
+
+  --rp-device-width: 360px;
+  --rp-device-height: 640px;
+  --rp-device-border-radius: 20px;
+  --rp-device-border: 1px solid #e5e6e8;
+}
+
+/* Block: rp-fixed-device */
+.rp-fixed-device {
   display: none;
   position: fixed;
-  top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
+  top: calc(
+    var(--rp-nav-height) + var(--rp-sidebar-menu-height)+
+      var(--rp-preview-padding) + var(--rp-banner-height, 0px)
+  );
+  right: max(
+    calc(
+      var(--rp-outline-margin-right) + var(--rp-outline-width) -
+        var(--rp-device-width)
+    ),
+    0px
+  );
   overflow: hidden;
+  z-index: 100;
 }
 
-.fixed-iframe {
+/* Element: __iframe */
+.rp-fixed-device__iframe {
   height: var(--rp-device-height);
   max-height: calc(
     100vh - var(--rp-preview-padding) * 2 - var(--rp-nav-height)
   );
-  width: 360px;
+  width: var(--rp-device-width);
   pointer-events: auto;
   border-radius: var(--rp-device-border-radius) var(--rp-device-border-radius) 0
     0;
   border: var(--rp-device-border);
 }
 
-.fixed-operation {
+/* Element: __operations */
+.rp-fixed-device__operations {
   border: var(--rp-device-border);
   border-top: 0;
   border-radius: 0 0 var(--rp-device-border-radius)
     var(--rp-device-border-radius);
 }
 
-:root {
-  --rp-device-width: 360px;
-  --rp-device-height: 640px;
-  --rp-device-border-radius: 20px;
-  --rp-device-border: 1px solid #e5e6e8;
-}
-
 @media (min-width: 960px) {
-  .fixed-device {
-    display: inline;
-    left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
-    right: auto;
-  }
-}
-
-@media (min-width: 1280px) {
-  .fixed-device {
+  .rp-fixed-device {
     display: inline;
-    right: var(--rp-preview-padding);
-    left: auto;
   }
 }

package/static/global-components/FixedDevice.tsx

@@ -0,0 +1,68 @@
+import { NoSSR, useDark, usePage, withBase } from '@rspress/core/runtime';
+import { useCallback, useEffect, useRef, useState } from 'react';
+// @ts-expect-error
+import { normalizeId } from '../../dist/utils';
+import MobileOperation from './common/PreviewOperations';
+import './FixedDevice.css';
+
+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(() => {
+    setIframeKey(Math.random());
+  }, []);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        type: 'theme-change',
+        dark,
+      },
+      '*',
+    );
+  }, [dark]);
+
+  return haveIframeFixedDemos ? (
+    <div className="rp-fixed-device">
+      {/* hide the outline */}
+      <style>{`@media (min-width: 1280px) {
+      .rp-doc-layout__outline { 
+        display: none; 
+      }
+    }
+    @media (min-width: 960px) and (max-width: 1280px) {
+      .rp-doc-layout__doc-container {
+        padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding));
+      }
+    }
+    `}</style>
+      <NoSSR>
+        <iframe
+          src={getPageUrl(url)}
+          className="rp-fixed-device__iframe"
+          key={iframeKey}
+          ref={iframeRef}
+        />
+      </NoSSR>
+      <MobileOperation
+        url={getPageUrl(url)}
+        className="rp-fixed-device__operations"
+        refresh={refresh}
+      />
+    </div>
+  ) : null;
+};

package/static/global-components/Preview.css

@@ -0,0 +1,133 @@
+/* Preview Component Styles (BEM) */
+
+:root {
+  --rp-preview-button-hover-bg: #e5e6eb;
+  --rp-preview-button-bg: #e5e6eb;
+}
+
+.dark {
+  --rp-preview-button-hover-bg: #c5c5c5;
+  --rp-preview-button-bg: #c5c5c5;
+}
+
+/* Block: rp-preview */
+.rp-preview {
+  margin: 16px 0;
+}
+
+/* ==========================================================================
+   Preview--internal (internal mode)
+   ========================================================================== */
+
+.rp-preview--internal .rp-codeblock {
+  margin: 0;
+  border-radius: 0 0 var(--rp-radius) var(--rp-radius);
+  border-top: 0px;
+}
+
+.rp-preview--internal__card {
+  padding: 16px;
+  position: relative;
+  border: 1px solid var(--rp-container-details-border);
+  border-radius: var(--rp-radius);
+  display: flex;
+}
+
+.rp-preview--internal__card__content {
+  overflow: auto;
+  flex: auto;
+}
+
+/* Code collapse/expand animation using CSS Grid */
+.rp-preview--internal--show-code .rp-preview--internal__card {
+  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
+  transition: border-radius 0.2s ease-out;
+}
+
+.rp-preview--internal__code-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition:
+    grid-template-rows 0.2s ease-out,
+    opacity 0.2s ease-out;
+  opacity: 0;
+}
+
+.rp-preview--internal__code-wrapper--visible {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.rp-preview--internal__code {
+  overflow: hidden;
+}
+
+.rp-preview-operations__button--expanded {
+  background: var(--rp-c-bg-mute);
+  box-shadow: inset 1px 1px 0 1px var(--rp-c-divider-light);
+}
+
+/* ==========================================================================
+   Preview--iframe-follow (iframe-follow mode)
+   ========================================================================== */
+
+.rp-preview--iframe-follow {
+  border: 1px solid var(--rp-container-details-border);
+  border-radius: var(--rp-radius);
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 960px) {
+  .rp-preview--iframe-follow {
+    flex-direction: row;
+  }
+}
+
+.rp-preview--iframe-follow__code {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-height: 300px;
+}
+
+@media (min-width: 960px) {
+  .rp-preview--iframe-follow__code {
+    max-height: 700px;
+    min-height: auto;
+  }
+}
+
+.rp-preview--iframe-follow__code .rp-codeblock {
+  border: none;
+  margin: 0;
+}
+
+.rp-preview--iframe-follow__code .rp-codeblock,
+.rp-preview--iframe-follow__code .rp-codeblock__content,
+.rp-preview--iframe-follow__code
+  .rp-codeblock__content
+  .rp-codeblock__content__scroll-container {
+  height: 100%;
+}
+
+.rp-preview--iframe-follow__device {
+  position: relative;
+  flex: 1 1 auto;
+  border-top: 1px solid var(--rp-container-details-border);
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 960px) {
+  .rp-preview--iframe-follow__device {
+    border-top: none;
+    border-left: 1px solid var(--rp-container-details-border);
+  }
+}
+
+.rp-preview--iframe-follow__device iframe {
+  border-bottom: 1px solid var(--rp-container-details-border);
+  height: 100%;
+  flex: 1 1 auto;
+}

package/static/global-components/Preview.tsx

@@ -0,0 +1,130 @@
+import { NoSSR, useDark, usePageData, withBase } from '@rspress/core/runtime';
+import {
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import MobileOperation from './common/PreviewOperations';
+import IconCode from './icons/Code';
+import './Preview.css';
+
+type PreviewProps = {
+  children: React.ReactNode[];
+  previewMode: 'internal' | 'iframe-follow';
+  demoId: string;
+};
+
+interface BasePreviewProps {
+  children: React.ReactNode[];
+  getPageUrl: () => string;
+}
+
+const PreviewIframeFollow: React.FC<BasePreviewProps> = ({
+  children,
+  getPageUrl,
+}) => {
+  const [iframeKey, setIframeKey] = useState(0);
+  const refresh = useCallback(() => {
+    setIframeKey(Math.random());
+  }, []);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const dark = useDark();
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        type: 'theme-change',
+        dark,
+      },
+      '*',
+    );
+  }, [dark]);
+
+  return (
+    <div className="rp-preview rp-not-doc rp-preview--iframe-follow">
+      <div className="rp-preview--iframe-follow__code">{children?.[0]}</div>
+      <div className="rp-preview--iframe-follow__device">
+        <iframe
+          className="rp-preview--iframe-follow__device__iframe"
+          src={getPageUrl()}
+          key={iframeKey}
+          ref={iframeRef}
+        />
+        <MobileOperation url={getPageUrl()} refresh={refresh} />
+      </div>
+    </div>
+  );
+};
+
+const PreviewInternal: React.FC<{ children: React.ReactNode[] }> = ({
+  children,
+}) => {
+  const [showCode, setShowCode] = useState(false);
+
+  const toggleCode = useCallback(
+    (ev: MouseEvent<HTMLButtonElement>) => {
+      if (!showCode) {
+        ev.currentTarget.blur();
+      }
+      setShowCode(!showCode);
+    },
+    [showCode],
+  );
+
+  return (
+    <div
+      className={`rp-preview rp-not-doc rp-preview--internal ${showCode ? 'rp-preview--internal--show-code' : ''}`}
+    >
+      <div className="rp-preview--internal__card">
+        <div className="rp-preview--internal__card__content">
+          {children?.[1]}
+        </div>
+        <div className="rp-preview-operations rp-preview-operations--web">
+          <button
+            onClick={toggleCode}
+            aria-label="Collapse Code"
+            className={`rp-preview-operations__button ${showCode ? 'rp-preview-operations__button--expanded' : ''}`}
+          >
+            <IconCode />
+          </button>
+        </div>
+      </div>
+      <div
+        className={`rp-preview--internal__code-wrapper ${
+          showCode ? 'rp-preview--internal__code-wrapper--visible' : ''
+        }`}
+      >
+        <div className="rp-preview--internal__code">{children?.[0]}</div>
+      </div>
+    </div>
+  );
+};
+
+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>
+      ) : (
+        <PreviewInternal>{children}</PreviewInternal>
+      )}
+    </NoSSR>
+  );
+};
+
+export default Preview;

package/static/global-components/common/PreviewOperations.css

@@ -0,0 +1,61 @@
+/* PreviewOperations Component Styles (BEM) */
+
+/* Block: rp-preview-operations */
+.rp-preview-operations {
+  display: flex;
+}
+
+/* Modifier: --mobile */
+.rp-preview-operations--mobile {
+  justify-content: flex-end;
+  width: 100%;
+  padding: 6px;
+}
+
+/* Modifier: --web */
+.rp-preview-operations--web {
+  justify-content: center;
+  align-items: center;
+  flex: none;
+}
+
+/* Element: __button */
+.rp-preview-operations__button {
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+  padding: 0;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  background-color: var(--rp-c-bg-soft);
+  margin-left: 14px;
+
+  transition: background-color 0.2s ease-out;
+}
+
+.rp-preview-operations__button:hover {
+  background-color: var(--rp-preview-button-hover-bg);
+}
+
+.rp-preview-operations__button svg {
+  display: inline-block;
+  vertical-align: -2px;
+}
+
+/* Element: __qrcode */
+.rp-preview-operations__qrcode {
+  position: relative;
+}
+
+/* Element: __qrcode-popup */
+.rp-preview-operations__qrcode-popup {
+  background-color: #fff;
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  top: -132px;
+  right: -46px;
+  padding: 12px;
+  z-index: 999;
+}

package/static/global-components/common/{mobile-operation.tsx → PreviewOperations.tsx}

@@ -10,7 +10,7 @@ import {
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
-import './index.css';
+import './PreviewOperations.css';
 
 const locales = {
   zh: {
@@ -79,21 +79,34 @@ export default (props: {
   }, [showQRCode]);
 
   return (
-    <div className={`rspress-preview-operations mobile ${className}`}>
-      <button onClick={refresh} aria-label={t.refresh}>
+    <div
+      className={`rp-preview-operations rp-preview-operations--mobile ${className}`}
+    >
+      <button
+        className="rp-preview-operations__button"
+        onClick={refresh}
+        aria-label={t.refresh}
+      >
         <IconRefresh />
       </button>
-      <div className="relative" ref={triggerRef}>
+      <div className="rp-preview-operations__qrcode" ref={triggerRef}>
         {showQRCode && (
-          <div className="rspress-preview-qrcode">
+          <div className="rp-preview-operations__qrcode-popup">
             <QRCodeSVG value={url} size={96} />
           </div>
         )}
-        <button onClick={toggleQRCode}>
+        <button
+          className="rp-preview-operations__button"
+          onClick={toggleQRCode}
+        >
           <IconQrcode />
         </button>
       </div>
-      <button onClick={openNewPage} aria-label={t.open}>
+      <button
+        className="rp-preview-operations__button"
+        onClick={openNewPage}
+        aria-label={t.open}
+      >
         <IconLaunch />
       </button>
     </div>

package/static/{global-styles → iframe}/entry.css

@@ -3,11 +3,10 @@
   --rp-iframe-nav-bg: #ffffff;
 }
 
-/* TODO: support dark mode */
-/* .dark {
+.dark {
   --rp-iframe-bg: #242424;
   --rp-iframe-nav-bg: #191d24;
-} */
+}
 
 body {
   background-color: var(--rp-iframe-bg) !important;
@@ -26,7 +25,7 @@ body {
 }
 /* #endregion copied from preflight.css */
 
-.preview-nav {
+.rp-preview-nav {
   position: relative;
   display: flex;
   align-items: center;

package/static/iframe/entry.js

@@ -0,0 +1,25 @@
+const storageKey = 'rspress-plugin-preview-theme-appearance';
+
+function setDocumentTheme(isDark) {
+  if (isDark) {
+    document.documentElement.classList.add('dark');
+    document.documentElement.style.colorScheme = 'dark';
+  } else {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.style.colorScheme = 'light';
+  }
+  localStorage.setItem(
+    'rspress-plugin-preview-theme-appearance',
+    isDark ? 'dark' : 'light',
+  );
+}
+
+const saved = localStorage.getItem(storageKey) || 'light';
+setDocumentTheme(saved === 'dark');
+
+window.addEventListener('message', event => {
+  if (event.data.type === 'theme-change') {
+    const isDark = event.data.dark;
+    setDocumentTheme(isDark);
+  }
+});