@rspress/plugin-preview 1.44.0 → 1.45.0

package/dist/index.js

@@ -608,7 +608,9 @@ var __webpack_exports__ = {};
                     (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'ContainerFixedPerComp.tsx')
                 ]
             },
-            globalUIComponents: 'fixed-with-per-comp' === position || 'fixed' === position ? [
+            globalUIComponents: 'fixed-with-per-comp' === position ? [
+                (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'DeviceFixedPerComp.tsx')
+            ] : 'fixed' === position ? [
                 (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
             ] : [],
             globalStyles: (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', `${previewMode}.css`)

package/package.json

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

package/static/global-components/ContainerFixedPerComp.tsx

@@ -1,4 +1,7 @@
-import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
+import { NoSSR, useLang, usePageData, withBase } from '@rspress/core/runtime';
+import { type MouseEvent, useCallback, useState } from 'react';
+import IconCode from './icons/Code';
+import { publishIframeUrl } from './useIframeUrlPerComp';
 
 type ContainerProps = {
   children: React.ReactNode[];
@@ -6,7 +9,7 @@ type ContainerProps = {
   demoId: string;
 };
 
-const ContainerFixedPerComp: React.FC<ContainerProps> = props => {
+const MobileContainerFixedPerComp: React.FC<ContainerProps> = props => {
   const { children, demoId } = props;
   const { page } = usePageData();
   const url = `/~demo/${demoId}`;
@@ -22,24 +25,76 @@ const ContainerFixedPerComp: React.FC<ContainerProps> = props => {
     return '';
   };
 
+  const setIframeUrl = () => {
+    const url = getPageUrl();
+    const fixedIframe = document.querySelector('.rspress-fixed-iframe');
+    fixedIframe?.setAttribute('src', url);
+    publishIframeUrl(url);
+  };
+
+  return (
+    <div className="rspress-preview-code" onClick={setIframeUrl}>
+      {children}
+    </div>
+  );
+};
+
+const ContainerFixedPerComp = (props: ContainerProps) => {
+  const { children, isMobile } = props;
+  const [showCode, setShowCode] = useState(false);
+  const lang = useLang();
+
+  const toggleCode = useCallback(
+    (ev: MouseEvent<HTMLButtonElement>) => {
+      if (!showCode) {
+        ev.currentTarget.blur();
+      }
+      setShowCode(!showCode);
+    },
+    [showCode],
+  );
+
   return (
-    <NoSSR>
-      <div className="rspress-preview">
-        <div className="rspress-preview-wrapper">
-          <div
-            className="rspress-preview-code"
-            onClick={() => {
-              const fixedIframe = document.querySelector(
-                '.rspress-fixed-iframe',
-              );
-              fixedIframe?.setAttribute('src', getPageUrl());
-            }}
-          >
-            {children?.[0]}
+    <>
+      {isMobile === 'true' ? (
+        <MobileContainerFixedPerComp {...props} />
+      ) : (
+        <NoSSR>
+          <div className="rspress-preview">
+            <div>
+              <div className="rspress-preview-card">
+                <div
+                  style={{
+                    overflow: 'auto',
+                    flex: 'auto',
+                  }}
+                >
+                  {children?.[1]}
+                </div>
+                <div className="rspress-preview-operations web">
+                  <button
+                    onClick={toggleCode}
+                    aria-label={lang === 'zh' ? '收起代码' : 'Collapse Code'}
+                    className={showCode ? 'button-expanded' : ''}
+                  >
+                    <IconCode />
+                  </button>
+                </div>
+              </div>
+              <div
+                className={`${
+                  showCode
+                    ? 'rspress-preview-code-show'
+                    : 'rspress-preview-code-hide'
+                }`}
+              >
+                {children?.[0]}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </NoSSR>
+        </NoSSR>
+      )}
+    </>
   );
 };
 

package/static/global-components/DeviceFixedPerComp.tsx

@@ -0,0 +1,106 @@
+import {
+  NoSSR,
+  usePageData,
+  useWindowSize,
+  withBase,
+} from '@rspress/core/runtime';
+import { useCallback, useEffect, useState } from 'react';
+// @ts-ignore
+import { normalizeId } from '../../dist/utils';
+import MobileOperation from './common/mobile-operation';
+import { publishIframeUrl, useIframeUrlPerComp } from './useIframeUrlPerComp';
+import './Device.scss';
+
+export default () => {
+  const { page } = usePageData();
+  const pageName = `${normalizeId(page.pagePath)}`;
+  const demoId = `_${pageName}`;
+  const url = `~demo/${demoId}`;
+  const { haveDemos } = page;
+
+  const getPageUrl = (url: string) => {
+    if (page?.devPort) {
+      return `http://localhost:${page.devPort}/${demoId}`;
+    }
+    if (typeof window !== 'undefined') {
+      return `${window.location.origin}${withBase(url)}`;
+    }
+    // Do nothing in ssr
+    return '';
+  };
+
+  const initialUrl = getPageUrl(url);
+
+  const iframeUrl = useIframeUrlPerComp() ?? initialUrl;
+
+  const resetIframeUrl = useCallback(() => {
+    publishIframeUrl(initialUrl);
+  }, [initialUrl, url]);
+
+  useEffect(() => {
+    publishIframeUrl(initialUrl);
+  }, []);
+
+  const [asideWidth, setAsideWidth] = useState('0px');
+  const { width: innerWidth } = useWindowSize();
+  const [iframeKey, setIframeKey] = useState(0);
+  const refresh = useCallback(() => {
+    setIframeKey(Math.random());
+  }, []);
+
+  // get default value from root
+  // listen resize and re-render
+  useEffect(() => {
+    const root = document.querySelector(':root');
+    if (root) {
+      const defaultAsideWidth =
+        getComputedStyle(root).getPropertyValue('--rp-aside-width');
+      setAsideWidth(defaultAsideWidth);
+    }
+  }, []);
+
+  useEffect(() => {
+    const node = document.querySelector('.rspress-doc-container');
+    const { style } = document.documentElement;
+    if (haveDemos) {
+      if (innerWidth > 1280) {
+        node?.setAttribute(
+          'style',
+          'padding-right: calc(var(--rp-device-width) + var(--rp-preview-padding) * 2)',
+        );
+      } else if (innerWidth > 960) {
+        node?.setAttribute(
+          'style',
+          `padding-right: calc(${
+            innerWidth - 1280
+          }px + var(--rp-device-width) + var(--rp-preview-padding) * 2)`,
+        );
+      } else {
+        node?.removeAttribute('style');
+      }
+      style.setProperty('--rp-aside-width', '0px');
+    } else {
+      node?.removeAttribute('style');
+      style.setProperty('--rp-aside-width', asideWidth);
+    }
+  }, [haveDemos, asideWidth, innerWidth]);
+
+  return haveDemos ? (
+    <div className="rspress-fixed-device">
+      <NoSSR>
+        <iframe
+          // refresh when load the iframe, then remove NoSSR
+          src={iframeUrl}
+          className="rspress-fixed-iframe"
+          key={iframeKey}
+        ></iframe>
+      </NoSSR>
+      <MobileOperation
+        url={iframeUrl}
+        className="rspress-fixed-operation"
+        refresh={refresh}
+        goBack={iframeUrl !== initialUrl ? resetIframeUrl : undefined}
+      />
+    </div>
+  ) : null;
+};

package/static/global-components/common/mobile-operation.tsx

@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import IconBack from '../icons/Back';
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
@@ -15,21 +16,24 @@ import './index.scss';
 const locales = {
   zh: {
     refresh: '刷新页面',
+    goBack: '返回',
     open: '在新页面打开',
   },
   en: {
     refresh: 'Refresh',
+    goBack: 'Go back',
     open: 'Open in new page',
   },
 };
 
-export default (props: {
+const MobileOperation = (props: {
   url: string;
   className?: string;
-  refresh: () => void;
+  refresh?: () => void;
+  goBack?: () => void;
 }) => {
+  const { url, className = '', refresh, goBack } = props;
   const [showQRCode, setShowQRCode] = useState(false);
-  const { url, className = '', refresh } = props;
   const lang = useLang();
   const triggerRef = useRef(null);
   const t = lang === 'zh' ? locales.zh : locales.en;
@@ -80,22 +84,46 @@ export default (props: {
 
   return (
     <div className={`rspress-preview-operations mobile ${className}`}>
-      <button onClick={refresh} aria-label={t.refresh}>
-        <IconRefresh />
-      </button>
+      {goBack && (
+        <button
+          onClick={goBack}
+          aria-label={t.goBack}
+          className="rspress-preview-operations-back"
+        >
+          <IconBack />
+        </button>
+      )}
+      {refresh && (
+        <button
+          onClick={refresh}
+          aria-label={t.refresh}
+          className="rspress-preview-operations-refresh"
+        >
+          <IconRefresh />
+        </button>
+      )}
       <div className="relative" ref={triggerRef}>
         {showQRCode && (
           <div className="rspress-preview-qrcode">
             <QRCodeSVG value={url} size={96} />
           </div>
         )}
-        <button onClick={toggleQRCode}>
+        <button
+          onClick={toggleQRCode}
+          className="rspress-preview-operations-qrcode"
+        >
           <IconQrcode />
         </button>
       </div>
-      <button onClick={openNewPage} aria-label={t.open}>
+      <button
+        onClick={openNewPage}
+        aria-label={t.open}
+        className="rspress-preview-operations-open"
+      >
         <IconLaunch />
       </button>
     </div>
   );
 };
+
+export default MobileOperation;

package/static/global-components/icons/Back.tsx

@@ -0,0 +1,31 @@
+const Back = ({ color = 'currentColor', ...props }) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      strokeWidth="4"
+      {...props}
+    >
+      <path
+        d="M12.9998 8L6 14L12.9998 21"
+        stroke="#333"
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6 14H28.9938C35.8768 14 41.7221 19.6204 41.9904 26.5C42.2739 33.7696 36.2671 40 28.9938 40H11.9984"
+        stroke="#333"
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Back;

package/static/global-components/useIframeUrlPerComp.ts

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useForceRefresh = () => {
+  const [_, setKey] = useState(0);
+
+  const forceRefresh = useCallback(() => {
+    return setKey(prevKey => prevKey + 1);
+  }, [setKey]);
+
+  return forceRefresh;
+};
+
+let iframeUrl: string | undefined;
+
+const observer = new Map<string, () => void>();
+
+const publishIframeUrl = (url: string) => {
+  iframeUrl = url;
+  for (const [, refresh] of observer) {
+    refresh();
+  }
+};
+
+const useIframeUrlPerComp = () => {
+  const forceRefresh = useForceRefresh();
+
+  useEffect(() => {
+    const id = Math.random().toString(36).slice(5);
+    observer.set(id, forceRefresh);
+
+    return () => {
+      observer.delete(id);
+    };
+  }, []);
+
+  return iframeUrl;
+};
+
+export { useIframeUrlPerComp, publishIframeUrl };