@rspress/plugin-preview 0.0.0-next-20230927072732 → 0.0.0-next-20231108104528

package/dist/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts a string to a valid variable name. If the string is already a valid variable name, returns the original string.
+ * @param str - The string to convert.
+ * @returns The converted string.
+ */
+declare const toValidVarName: (str: string) => string;
+declare const generateId: (pageName: string, index: number) => string;
+/**
+ * remove .html extension and validate
+ * @param routePath id from pathname
+ * @returns normalized id
+ */
+declare const normalizeId: (routePath: string) => string;
+declare const injectDemoBlockImport: (str: string, path: string) => string;
+
+export { generateId, injectDemoBlockImport, normalizeId, toValidVarName };

package/dist/utils.js

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  generateId: () => generateId,
+  injectDemoBlockImport: () => injectDemoBlockImport,
+  normalizeId: () => normalizeId,
+  toValidVarName: () => toValidVarName
+});
+module.exports = __toCommonJS(utils_exports);
+var toValidVarName = (str) => {
+  if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str)) {
+    return str;
+  } else {
+    return str.replace(/[^0-9a-zA-Z_$]/g, "_").replace(/^([0-9])/, "_$1");
+  }
+};
+var generateId = (pageName, index) => {
+  return `_${toValidVarName(pageName)}_${index}`;
+};
+var normalizeId = (routePath) => {
+  const result = routePath.replace(/\.(.*)?$/, "");
+  return toValidVarName(result);
+};
+var injectDemoBlockImport = (str, path) => {
+  return `
+    import DemoBlock from '${path}';
+    ${str}
+  `;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateId,
+  injectDemoBlockImport,
+  normalizeId,
+  toValidVarName
+});
+
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,IAAM,iBAAiB,CAAC,QAAwB;AAErD,MAAI,6BAA6B,KAAK,GAAG,GAAG;AAC1C,WAAO;AAAA,EACT,OAAO;AAEL,WAAO,IAAI,QAAQ,mBAAmB,GAAG,EAAE,QAAQ,YAAY,KAAK;AAAA,EACtE;AACF;AAEO,IAAM,aAAa,CAAC,UAAkB,UAAkB;AAC7D,SAAO,IAAI,eAAe,QAAQ,CAAC,IAAI,KAAK;AAC9C;AAOO,IAAM,cAAc,CAAC,cAAsB;AAChD,QAAM,SAAS,UAAU,QAAQ,YAAY,EAAE;AAC/C,SAAO,eAAe,MAAM;AAC9B;AAEO,IAAM,wBAAwB,CAAC,KAAa,SAAyB;AAC1E,SAAO;AAAA,6BACoB,IAAI;AAAA,MAC3B,GAAG;AAAA;AAET;","names":[],"sources":["../src/utils.ts"],"sourcesContent":["/**\n * Converts a string to a valid variable name. If the string is already a valid variable name, returns the original string.\n * @param str - The string to convert.\n * @returns The converted string.\n */\nexport const toValidVarName = (str: string): string => {\n  // Check if the string is a valid variable name\n  if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(str)) {\n    return str; // If it is a valid variable name, return the original string\n  } else {\n    // If it is not a valid variable name, convert it to a valid variable name\n    return str.replace(/[^0-9a-zA-Z_$]/g, '_').replace(/^([0-9])/, '_$1');\n  }\n};\n\nexport const generateId = (pageName: string, index: number) => {\n  return `_${toValidVarName(pageName)}_${index}`;\n};\n\n/**\n * remove .html extension and validate\n * @param routePath id from pathname\n * @returns normalized id\n */\nexport const normalizeId = (routePath: string) => {\n  const result = routePath.replace(/\\.(.*)?$/, '');\n  return toValidVarName(result);\n};\n\nexport const injectDemoBlockImport = (str: string, path: string): string => {\n  return `\n    import DemoBlock from '${path}';\n    ${str}\n  `;\n};\n"]}

package/dist/virtual-demo.js

@@ -1,5 +1,4 @@
 // src/virtual-demo.tsx
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { demos } from "virtual-meta";
 import { createElement } from "react";
 import { NoSSR, useLocation } from "@rspress/core/runtime";
@@ -51,33 +50,22 @@ var css_248z = ":root {\n  --rp-iframe-bg: var(--rp-code-block-bg);\n}\n\nbody {
 style_inject_es_default(css_248z);
 
 // src/virtual-demo.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 function Demo(props) {
   const { pathname } = useLocation();
-  const id = pathname.split("/").pop();
-  const normalizedId = normalizeId(id || "");
+  const pureDemoPath = pathname.split("/").filter(Boolean).slice(1)?.join("/");
+  const normalizedId = normalizeId(pureDemoPath || "");
   if (props.iframePosition === "fixed") {
     const renderDemos = demos.flat().filter((item) => new RegExp(`${normalizedId}_\\d+`).test(item.id));
-    return renderDemos.length > 0 ? /* @__PURE__ */ _jsx(NoSSR, {
-      children: /* @__PURE__ */ _jsxs("div", {
-        className: "preview-container",
-        children: [
-          /* @__PURE__ */ _jsx("div", {
-            className: "preview-nav",
-            children: renderDemos[0].title
-          }),
-          renderDemos.map((renderDemo) => {
-            return /* @__PURE__ */ _jsx("div", {
-              children: /* @__PURE__ */ createElement(renderDemo.component)
-            }, renderDemo.id);
-          })
-        ]
+    return renderDemos.length > 0 ? /* @__PURE__ */ jsx(NoSSR, { children: /* @__PURE__ */ jsxs("div", { className: "preview-container", children: [
+      /* @__PURE__ */ jsx("div", { className: "preview-nav", children: renderDemos[0].title }),
+      renderDemos.map((renderDemo) => {
+        return /* @__PURE__ */ jsx("div", { children: createElement(renderDemo.component) }, renderDemo.id);
       })
-    }) : /* @__PURE__ */ _jsx(NotFoundLayout, {});
+    ] }) }) : /* @__PURE__ */ jsx(NotFoundLayout, {});
   } else {
     const component = demos.flat().find((item) => item.id === normalizedId)?.component;
-    return component ? /* @__PURE__ */ _jsx(NoSSR, {
-      children: /* @__PURE__ */ createElement(component)
-    }) : /* @__PURE__ */ _jsx(NotFoundLayout, {});
+    return component ? /* @__PURE__ */ jsx(NoSSR, { children: createElement(component) }) : /* @__PURE__ */ jsx(NotFoundLayout, {});
   }
 }
 export {

package/mdx-meta-loader.cjs

@@ -14,6 +14,7 @@ module.exports = async function () {
         .map(item => {
           return `{
             "id": "${item.id}",
+            "title": "${item.title}",
             "component": Demo_${item.id}
           }`;
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "0.0.0-next-20230927072732",
+  "version": "0.0.0-next-20231108104528",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -21,14 +21,18 @@
   ],
   "dependencies": {
     "@mdx-js/mdx": "2.2.1",
-    "@modern-js/utils": "2.35.1",
+    "@modern-js/utils": "2.39.2",
     "qrcode.react": "^3.1.0",
     "remark-gfm": "3.0.1",
-    "@rspress/shared": "0.0.0-next-20230927072732"
+    "rspack-plugin-virtual-module": "0.1.12",
+    "codesandbox": "2.2.3",
+    "lodash": "4.17.21",
+    "@rspress/shared": "0.0.0-next-20231108104528"
   },
   "devDependencies": {
     "@types/mdast": "^3.0.10",
     "@types/node": "^18.11.17",
+    "@types/lodash": "4.14.200",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "mdast-util-mdxjs-esm": "^1.3.0",
@@ -36,7 +40,6 @@
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6.8.1",
-    "rspack-plugin-virtual-module": "0.1.11",
     "typescript": "^5",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.1"
@@ -44,7 +47,7 @@
   "peerDependencies": {
     "react": ">=17",
     "react-router-dom": "^6.8.1",
-    "@rspress/core": "0.0.0-next-20230927072732"
+    "@rspress/core": "0.0.0-next-20231108104528"
   },
   "files": [
     "dist",

package/static/global-components/Container.scss

@@ -11,43 +11,6 @@
 .rspress-preview {
   padding: 16px 0;
 
-  &-operations {
-    button {
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      text-align: center;
-      border-radius: 50%;
-      border: 1px solid transparent;
-      background-color: var(--rp-c-bg-soft);
-      margin-left: 14px;
-
-      &:hover {
-        background-color: var(--rp-preview-button-hover-bg);
-      }
-    }
-
-    svg {
-      display: inline-block;
-      vertical-align: -2px;
-    }
-
-    &.mobile {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-      padding: 6px;
-    }
-
-    &.web {
-      display: flex;
-      justify-content: center;
-      position: absolute;
-      top: calc(50% - 14px);
-      right: 16px;
-    }
-  }
-
   &-wrapper {
     border: 1px solid #e6e6e6;
     border-radius: 8px;
@@ -58,6 +21,7 @@
     position: relative;
     border: 1px solid #e6e6e6;
     border-radius: 8px;
+    display: flex;
   }
 
   &-qrcode {

package/static/global-components/Container.tsx

@@ -1,17 +1,23 @@
 import { useCallback, useState } from 'react';
 import { withBase, useLang, NoSSR } from '@rspress/core/runtime';
+import { getParameters } from 'codesandbox/lib/api/define';
 import MobileOperation from './common/mobile-operation';
 import IconCode from './icons/Code';
+import IconCodesandbox from './icons/Codesandbox';
 import './Container.scss';
 
 type ContainerProps = {
   children: React.ReactNode[];
   isMobile: 'true' | 'false';
+  enableCodesandbox: 'true' | 'false';
   url: string;
+  content: string;
+  packageName: string;
 };
 
 const Container: React.FC<ContainerProps> = props => {
-  const { children, isMobile, url } = props;
+  const { children, isMobile, url, content, packageName, enableCodesandbox } =
+    props;
   const [showCode, setShowCode] = useState(false);
   const lang = useLang();
 
@@ -34,6 +40,54 @@ const Container: React.FC<ContainerProps> = props => {
     setIframeKey(Math.random());
   }, []);
 
+  const gotoCodeSandBox = () => {
+    const sandBoxConfig = {
+      files: {
+        'package.json': {
+          isBinary: false,
+          content: JSON.stringify({
+            dependencies: {
+              react: '18',
+              'react-dom': '18',
+              [packageName]: 'latest',
+            },
+          }),
+        },
+        [`demo.tsx`]: {
+          isBinary: false,
+          content,
+        },
+        [`index.tsx`]: {
+          isBinary: false,
+          content: [
+            `import React from 'react'`,
+            `import ReactDOM from 'react-dom'`,
+            `import Demo from './demo'`,
+            `ReactDOM.render(<Demo />, document.getElementById('root'))`,
+          ].join('\n'),
+        },
+      },
+    };
+
+    // to specific demo file
+    const query = `file=/demo.tsx`;
+    const form = document.createElement('form');
+    form.action = `https://codesandbox.io/api/v1/sandboxes/define?query=${encodeURIComponent(
+      query,
+    )}`;
+    form.target = '_blank';
+    form.method = 'POST';
+    form.style.display = 'none';
+    const field = document.createElement('input');
+    field.name = 'parameters';
+    field.type = 'hidden';
+    field.setAttribute('value', getParameters(sandBoxConfig));
+    form.appendChild(field);
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+  };
+
   return (
     <NoSSR>
       <div className="rspress-preview">
@@ -42,7 +96,13 @@ const Container: React.FC<ContainerProps> = props => {
             <div className="rspress-preview-code">{children?.[0]}</div>
             <div className="rspress-preview-device">
               <iframe src={getPageUrl()} key={iframeKey}></iframe>
-              <MobileOperation url={url} refresh={refresh} />
+              <MobileOperation
+                url={url}
+                refresh={refresh}
+                gotoCodeSandBox={
+                  enableCodesandbox === 'true' ? gotoCodeSandBox : undefined
+                }
+              />
             </div>
           </div>
         ) : (
@@ -51,16 +111,28 @@ const Container: React.FC<ContainerProps> = props => {
               <div
                 style={{
                   overflow: 'auto',
-                  marginRight: '44px',
+                  flex: 'auto',
                 }}
               >
                 {children?.[1]}
               </div>
               <div className="rspress-preview-operations web">
+                {enableCodesandbox === 'true' && (
+                  <button
+                    onClick={gotoCodeSandBox}
+                    aria-label={
+                      lang === 'zh'
+                        ? '在 Codesandbox 打开'
+                        : 'Open in Codesandbox'
+                    }
+                  >
+                    <IconCodesandbox />
+                  </button>
+                )}
                 <button
                   onClick={toggleCode}
-                  aria-label={lang === 'zh' ? '收起代码' : ''}
-                  className={showCode ? 'button-expanded' : 'Collapse Code'}
+                  aria-label={lang === 'zh' ? '收起代码' : 'Collapse Code'}
+                  className={showCode ? 'button-expanded' : ''}
                 >
                   <IconCode />
                 </button>

package/static/global-components/Device.tsx

@@ -1,6 +1,7 @@
 import { usePageData, withBase } from '@rspress/core/runtime';
 import { demos } from 'virtual-meta';
 import { useCallback, useEffect, useState } from 'react';
+import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
 import './Device.scss';
 
@@ -12,22 +13,17 @@ export default () => {
     // Do nothing in ssr
     return '';
   };
-  const removeLeadingSlash = (url: string) => {
-    return url.charAt(0) === '/' ? url.slice(1) : url;
-  };
-
-  const getPageKey = (route: string) => {
-    const cleanRoute = removeLeadingSlash(route);
-    return cleanRoute.replace(/\//g, '_').replace(/\.[^.]+$/, '') || 'index';
-  };
   const { page } = usePageData();
-  const pageName = getPageKey(page._relativePath);
+
+  const pageName = `_${normalizeId(page.pagePath)}`;
   const url = `~demo/${pageName}`;
   const haveDemos =
     demos.flat().filter(item => new RegExp(`${pageName}_\\d+`).test(item.id))
       .length > 0;
+  const initialInnerWidth =
+    typeof window !== 'undefined' ? window.innerWidth : 0;
   const [asideWidth, setAsideWidth] = useState('0px');
-  const [innerWidth, setInnerWidth] = useState(window.innerWidth);
+  const [innerWidth, setInnerWidth] = useState(initialInnerWidth);
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());

package/static/global-components/common/index.scss

@@ -0,0 +1,37 @@
+.rspress-preview {
+  &-operations {
+    button {
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      text-align: center;
+      border-radius: 50%;
+      border: 1px solid transparent;
+      background-color: var(--rp-c-bg-soft);
+      margin-left: 14px;
+
+      &:hover {
+        background-color: var(--rp-preview-button-hover-bg);
+      }
+    }
+
+    svg {
+      display: inline-block;
+      vertical-align: -2px;
+    }
+
+    &.mobile {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      padding: 6px;
+    }
+
+    &.web {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex: none;
+    }
+  }
+}

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

@@ -4,15 +4,19 @@ import { withBase, useLang } from '@rspress/core/runtime';
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
+import IconCodesandbox from '../icons/Codesandbox';
+import './index.scss';
 
 const locales = {
   zh: {
     refresh: '刷新页面',
     open: '在新页面打开',
+    codesandbox: '在 Codesandbox 打开',
   },
   en: {
-    refresh: 'refresh',
+    refresh: 'Refresh',
     open: 'Open in new page',
+    codesandbox: 'Open in Codesandbox',
   },
 };
 
@@ -20,9 +24,10 @@ export default (props: {
   url: string;
   className?: string;
   refresh: () => void;
+  gotoCodeSandBox?: () => void;
 }) => {
   const [showQRCode, setShowQRCode] = useState(false);
-  const { url, className = '', refresh } = props;
+  const { url, className = '', refresh, gotoCodeSandBox } = props;
   const lang = useLang();
   const triggerRef = useRef(null);
   const t = lang === 'zh' ? locales.zh : locales.en;
@@ -85,6 +90,11 @@ export default (props: {
 
   return (
     <div className={`rspress-preview-operations mobile ${className}`}>
+      {gotoCodeSandBox && (
+        <button onClick={gotoCodeSandBox} aria-label={t.codesandbox}>
+          <IconCodesandbox />
+        </button>
+      )}
       <button onClick={refresh} aria-label={t.refresh}>
         <IconRefresh />
       </button>

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

@@ -0,0 +1,22 @@
+const Codesandbox = ({ color = 'currentColor', ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 48 48"
+    fill="none"
+    stroke={color}
+    strokeWidth="4"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M25.0016 1.5998L42.9016 11.8998C43.5016 12.2998 43.9016 12.8998 43.9016 13.5998V34.2998C43.9016 34.9998 43.5016 35.6998 42.9016 35.9998L25.0016 46.3998C24.4016 46.7998 23.6016 46.7998 23.0016 46.3998L5.10156 36.0998C4.50156 35.6998 4.10156 35.0998 4.10156 34.3998V13.6998C4.10156 12.9998 4.50156 12.2998 5.10156 11.9998L23.0016 1.5998C23.6016 1.1998 24.4016 1.1998 25.0016 1.5998ZM38.5016 13.9998L30.6016 9.49981L24.0016 13.9998L17.5016 9.9998L10.2016 14.2998L24.0016 22.9998L38.5016 13.9998ZM22.0016 40.3998V26.2998L8.00156 17.3998V25.2998L16.0016 30.7998V36.9998L22.0016 40.3998ZM26.0016 40.3998L32.0016 36.8998V31.6998L40.0016 26.1998V17.2998L26.0016 26.1998V40.3998Z"
+      fill="currentColor"
+      stroke="none"
+      stroke-width="none"
+      stroke-linecap="butt"
+    ></path>
+  </svg>
+);
+
+export default Codesandbox;

package/static/global-styles/web.css

@@ -1,9 +1,3 @@
-:root {
-  --rp-sidebar-width: 210px;
-  --rp-aside-width: 192px;
-  --rp-preview-padding: 32px;
-}
-
 :root .preview-code div[class*='language-'] {
   margin: 0;
   border-radius: 0;