@rspress/plugin-preview 0.0.0-canary-20250521

package/dist/utils.js

@@ -0,0 +1,57 @@
+"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');
+};
+const generateId = (pageName, index)=>`_${toValidVarName(pageName)}_${index}`;
+const normalizeId = (routePath)=>{
+    const result = routePath.replace(/\.(.*)?$/, '');
+    return toValidVarName(result);
+};
+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
+});

package/index.d.ts

@@ -0,0 +1,8 @@
+declare module '@rspress/shared' {
+  interface PageIndexInfo {
+    devPort?: number;
+    extraHighlightLanguages?: string[];
+  }
+}
+
+export * from './dist'

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@rspress/plugin-preview",
+  "version": "0.0.0-canary-20250521",
+  "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",
+    "directory": "packages/plugin-preview"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./index.d.ts",
+  "files": [
+    "index.d.ts",
+    "dist",
+    "static"
+  ],
+  "dependencies": {
+    "@rsbuild/core": "~1.3.18",
+    "@rsbuild/plugin-babel": "~1.0.5",
+    "@rsbuild/plugin-less": "~1.2.4",
+    "@rsbuild/plugin-react": "~1.3.1",
+    "@rsbuild/plugin-sass": "~1.3.1",
+    "@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"
+  },
+  "devDependencies": {
+    "@rslib/core": "~0.6.9",
+    "@types/lodash": "^4.17.15",
+    "@types/mdast": "^3.0.15",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "mdast-util-mdx-jsx": "^2.1.4",
+    "mdast-util-mdxjs-esm": "^1.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.29.0",
+    "typescript": "^5.5.3",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^4.1.2"
+  },
+  "peerDependencies": {
+    "@rspress/core": "^1.44.0",
+    "react": ">=17.0.0",
+    "react-router-dom": "^6.8.1"
+  },
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build -w",
+    "reset": "rimraf ./**/node_modules"
+  }
+}

package/static/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types='@rslib/core/types' />
+
+declare module 'virtual-meta' {
+  const demos: Record<string, []>;
+  export { demos };
+}

package/static/global-components/Container.tsx

@@ -0,0 +1,92 @@
+import { NoSSR, useLang, usePageData, withBase } from '@rspress/core/runtime';
+import { type MouseEvent, useCallback, useState } from 'react';
+import MobileOperation from './common/mobile-operation';
+import IconCode from './icons/Code';
+
+type ContainerProps = {
+  children: React.ReactNode[];
+  isMobile: 'true' | 'false';
+  demoId: string;
+};
+
+const Container: React.FC<ContainerProps> = props => {
+  const { children, isMobile, demoId } = props;
+  const { page } = usePageData();
+  const [showCode, setShowCode] = useState(false);
+  const lang = useLang();
+  const url = `/~demo/${demoId}`;
+
+  const getPageUrl = () => {
+    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 toggleCode = useCallback(
+    (ev: MouseEvent<HTMLButtonElement>) => {
+      if (!showCode) {
+        ev.currentTarget.blur();
+      }
+      setShowCode(!showCode);
+    },
+    [showCode],
+  );
+
+  const [iframeKey, setIframeKey] = useState(0);
+  const refresh = useCallback(() => {
+    setIframeKey(Math.random());
+  }, []);
+
+  return (
+    <NoSSR>
+      <div className="rspress-preview">
+        {isMobile === 'true' ? (
+          <div className="rspress-preview-wrapper">
+            <div className="rspress-preview-code">{children?.[0]}</div>
+            <div className="rspress-preview-device">
+              <iframe src={getPageUrl()} key={iframeKey}></iframe>
+              <MobileOperation url={getPageUrl()} refresh={refresh} />
+            </div>
+          </div>
+        ) : (
+          <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>
+    </NoSSR>
+  );
+};
+
+export default Container;

package/static/global-components/ContainerFixedPerComp.tsx

@@ -0,0 +1,101 @@
+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[];
+  isMobile: 'true' | 'false';
+  demoId: string;
+};
+
+const MobileContainerFixedPerComp: React.FC<ContainerProps> = props => {
+  const { children, demoId } = props;
+  const { page } = usePageData();
+  const url = `/~demo/${demoId}`;
+
+  const getPageUrl = () => {
+    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 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 (
+    <>
+      {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>
+        </NoSSR>
+      )}
+    </>
+  );
+};
+
+export default ContainerFixedPerComp;

package/static/global-components/DemoBlock.scss

@@ -0,0 +1,21 @@
+:root {
+  --rp-demo-block-bg: #f7f8fa;
+}
+
+.dark {
+  --rp-demo-block-bg: #1a1a1a;
+}
+
+.rspress-demo-block {
+  padding-bottom: 12px;
+  background-color: var(--rp-demo-block-bg);
+  &-title {
+    padding: 12px 12px 8px;
+    color: #697b8c;
+    font-size: 14px;
+  }
+  &-main {
+    border-right: none;
+    border-left: none;
+  }
+}

package/static/global-components/DemoBlock.tsx

@@ -0,0 +1,16 @@
+import './DemoBlock.scss';
+
+interface Props {
+  title: string;
+  children?: React.ReactNode;
+}
+
+export default (props: Props) => {
+  const { title, children } = props;
+  return (
+    <div className="rspress-demo-block">
+      <div className="rspress-demo-block-title">{title}</div>
+      <div className="rspress-demo-block-main">{children}</div>
+    </div>
+  );
+};

package/static/global-components/Device.scss

@@ -0,0 +1,48 @@
+.rspress-fixed-device {
+  display: none;
+  position: fixed;
+  top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
+  overflow: hidden;
+}
+
+.rspress-fixed-iframe {
+  height: var(--rp-device-height);
+  max-height: calc(
+    100vh - var(--rp-preview-padding) * 2 - var(--rp-nav-height)
+  );
+  width: 360px;
+  pointer-events: auto;
+  border-radius: var(--rp-device-border-radius) var(--rp-device-border-radius) 0
+    0;
+  border: var(--rp-device-border);
+}
+
+.rspress-fixed-operation {
+  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) {
+  .rspress-fixed-device {
+    display: inline;
+    left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
+    right: auto;
+  }
+}
+
+@media (min-width: 1280px) {
+  .rspress-fixed-device {
+    display: inline;
+    right: var(--rp-preview-padding);
+    left: auto;
+  }
+}

package/static/global-components/Device.tsx

@@ -0,0 +1,91 @@
+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 './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 [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={getPageUrl(url)}
+          className="rspress-fixed-iframe"
+          key={iframeKey}
+        ></iframe>
+      </NoSSR>
+      <MobileOperation
+        url={getPageUrl(url)}
+        className="rspress-fixed-operation"
+        refresh={refresh}
+      />
+    </div>
+  ) : null;
+};

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;
+};