@rspress/plugin-preview 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/index.js

@@ -38,7 +38,7 @@ function __webpack_require__(moduleId) {
     __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });

package/dist/utils.js

@@ -12,7 +12,7 @@ var __webpack_require__ = {};
     __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -17,19 +17,19 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.2.16",
+    "@rsbuild/core": "1.2.19",
     "@rsbuild/plugin-babel": "~1.0.4",
     "@rsbuild/plugin-less": "~1.1.1",
     "@rsbuild/plugin-react": "~1.1.1",
     "@rsbuild/plugin-sass": "~1.2.2",
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
-    "qrcode.react": "^3.2.0",
-    "@rspress/shared": "2.0.0-alpha.1",
-    "@rspress/theme-default": "2.0.0-alpha.1"
+    "qrcode.react": "^4.2.0",
+    "@rspress/shared": "2.0.0-alpha.3",
+    "@rspress/theme-default": "2.0.0-alpha.3"
   },
   "devDependencies": {
-    "@rslib/core": "0.5.3",
+    "@rslib/core": "0.5.4",
     "@types/lodash": "^4.17.16",
     "@types/mdast": "^3.0.15",
     "@types/node": "^18.11.17",
@@ -40,12 +40,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.29.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.8.2",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-alpha.1",
+    "@rspress/core": "^2.0.0-alpha.3",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/{DemoBlock.scss → DemoBlock.css}

@@ -9,13 +9,15 @@
 .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;
-  }
+}
+
+.rspress-demo-block-title {
+  padding: 12px 12px 8px;
+  color: #697b8c;
+  font-size: 14px;
+}
+
+.rspress-demo-block-main {
+  border-right: none;
+  border-left: none;
 }

package/static/global-components/DemoBlock.tsx

@@ -1,4 +1,4 @@
-import './DemoBlock.scss';
+import './DemoBlock.css';
 
 interface Props {
   title: string;

package/static/global-components/Device.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 // @ts-ignore
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
-import './Device.scss';
+import './Device.css';
 
 export default () => {
   const { page } = usePageData();

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

@@ -0,0 +1,103 @@
+:root {
+  --rp-preview-button-hover-bg: #e5e6eb;
+  --rp-preview-button-bg: #e5e6eb;
+}
+
+.dark {
+  --rp-preview-button-hover-bg: #c5c5c5;
+  --rp-preview-button-bg: #c5c5c5;
+}
+
+.rspress-preview {
+  padding: 16px 0;
+}
+
+.rspress-preview-wrapper {
+  border: 1px solid var(--rp-container-details-border);
+  border-radius: var(--rp-radius-small);
+}
+
+.rspress-preview-card {
+  padding: 16px;
+  position: relative;
+  border: 1px solid var(--rp-container-details-border);
+  border-radius: var(--rp-radius-small);
+  display: flex;
+}
+
+.rspress-preview-qrcode {
+  background-color: #fff;
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  top: -132px;
+  right: -46px;
+  padding: 12px;
+}
+
+.rspress-preview-code {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1;
+  max-height: 700px;
+}
+
+.rspress-preview-code-hide {
+  position: relative;
+  overflow: hidden;
+  display: none;
+}
+
+.rspress-preview-code-show {
+  margin-top: 16px;
+  display: block;
+}
+
+.rspress-preview-device {
+  position: relative;
+  flex: 0 0;
+  border-left: 1px solid #e6e6e6;
+  display: flex;
+  flex-direction: column;
+}
+
+.rspress-preview-device iframe {
+  border-bottom: 1px solid #e6e6e6;
+  width: 360px;
+  height: 100%;
+  flex: auto;
+}
+
+.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;
+}
+
+.rspress-preview-operations button:hover {
+  background-color: var(--rp-preview-button-hover-bg);
+}
+
+.rspress-preview-operations svg {
+  display: inline-block;
+  vertical-align: -2px;
+}
+
+.rspress-preview-operations.mobile {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 6px;
+}
+
+.rspress-preview-operations.web {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: none;
+}

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

@@ -10,7 +10,7 @@ import {
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
-import './index.scss';
+import './index.css';
 
 const locales = {
   zh: {

package/static/global-styles/iframe.css

@@ -23,13 +23,9 @@
     margin-left: var(--rp-preview-padding);
   }
 
-  .rspress-doc-container {
-    padding-right: var(--rp-preview-padding);
-    padding-left: var(--rp-preview-padding);
-  }
-
   .rspress-doc {
     width: 100%;
+    padding-left: var(--rp-preview-padding);
     padding-right: var(--rp-preview-padding);
   }
 }

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

@@ -1,104 +0,0 @@
-:root {
-  --rp-preview-button-hover-bg: #e5e6eb;
-  --rp-preview-button-bg: #e5e6eb;
-}
-
-.dark {
-  --rp-preview-button-hover-bg: #c5c5c5;
-  --rp-preview-button-bg: #c5c5c5;
-}
-
-.rspress-preview {
-  padding: 16px 0;
-
-  &-wrapper {
-    border: 1px solid var(--rp-container-details-border);
-    border-radius: var(--rp-radius-small);
-  }
-
-  &-card {
-    padding: 16px;
-    position: relative;
-    border: 1px solid var(--rp-container-details-border);
-    border-radius: var(--rp-radius-small);
-    display: flex;
-  }
-
-  &-qrcode {
-    background-color: #fff;
-    width: 120px;
-    height: 120px;
-    position: absolute;
-    top: -132px;
-    right: -46px;
-    padding: 12px;
-  }
-
-  &-code {
-    position: relative;
-    overflow: hidden;
-    flex: 1 1;
-    max-height: 700px;
-  }
-
-  &-code-hide {
-    position: relative;
-    overflow: hidden;
-    display: none;
-  }
-
-  &-code-show {
-    margin-top: 16px;
-    display: block;
-  }
-
-  &-device {
-    position: relative;
-    flex: 0 0;
-    border-left: 1px solid #e6e6e6;
-    display: flex;
-    flex-direction: column;
-    iframe {
-      border-bottom: 1px solid #e6e6e6;
-      width: 360px;
-      height: 100%;
-      flex: auto;
-    }
-  }
-
-  &-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;
-    }
-  }
-}