@rspress/plugin-preview 2.0.0-alpha.0 → 2.0.0-alpha.10

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'
         });
@@ -142,9 +142,9 @@ var __webpack_exports__ = {};
     const node_utils_namespaceObject = require("@rspress/shared/node-utils");
     const convert = function(test) {
         if (null == test) return ok;
-        if ('string' == typeof test) return typeFactory(test);
-        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
         if ('function' == typeof test) return castFactory(test);
+        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+        if ('string' == typeof test) return typeFactory(test);
         throw new Error('Expected function, string, or object as test');
     };
     function anyFactory(tests) {
@@ -154,15 +154,17 @@ var __webpack_exports__ = {};
         return castFactory(any);
         function any(...parameters) {
             let index = -1;
-            while(++index < checks.length)if (checks[index].call(this, ...parameters)) return true;
+            while(++index < checks.length)if (checks[index].apply(this, parameters)) return true;
             return false;
         }
     }
     function propsFactory(check) {
+        const checkAsRecord = check;
         return castFactory(all);
         function all(node) {
+            const nodeAsRecord = node;
             let key;
-            for(key in check)if (node[key] !== check[key]) return false;
+            for(key in check)if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
             return true;
         }
     }
@@ -172,28 +174,32 @@ var __webpack_exports__ = {};
             return node && node.type === check;
         }
     }
-    function castFactory(check) {
-        return assertion;
-        function assertion(node, ...parameters) {
-            return Boolean(node && 'object' == typeof node && 'type' in node && Boolean(check.call(this, node, ...parameters)));
+    function castFactory(testFunction) {
+        return check;
+        function check(value, index, parent) {
+            return Boolean(looksLikeANode(value) && testFunction.call(this, value, 'number' == typeof index ? index : void 0, parent || void 0));
         }
     }
     function ok() {
         return true;
     }
+    function looksLikeANode(value) {
+        return null !== value && 'object' == typeof value && 'type' in value;
+    }
     function color(d) {
         return '\u001B[33m' + d + '\u001B[39m';
     }
+    const empty = [];
     const CONTINUE = true;
     const EXIT = false;
     const SKIP = 'skip';
-    const visitParents = function(tree, test, visitor, reverse) {
+    function visitParents(tree, test, visitor, reverse) {
+        let check;
         if ('function' == typeof test && 'function' != typeof visitor) {
             reverse = visitor;
             visitor = test;
-            test = null;
-        }
-        const is = convert(test);
+        } else check = test;
+        const is = convert(check);
         const step = reverse ? -1 : 1;
         factory(tree, void 0, [])();
         function factory(node, index, parents) {
@@ -206,49 +212,61 @@ var __webpack_exports__ = {};
             }
             return visit;
             function visit() {
-                let result = [];
+                let result = empty;
                 let subresult;
                 let offset;
                 let grandparents;
-                if (!test || is(node, index, parents[parents.length - 1] || null)) {
+                if (!test || is(node, index, parents[parents.length - 1] || void 0)) {
                     result = toResult(visitor(node, parents));
                     if (result[0] === EXIT) return result;
                 }
-                if (node.children && result[0] !== SKIP) {
-                    offset = (reverse ? node.children.length : -1) + step;
-                    grandparents = parents.concat(node);
-                    while(offset > -1 && offset < node.children.length){
-                        subresult = factory(node.children[offset], offset, grandparents)();
-                        if (subresult[0] === EXIT) return subresult;
-                        offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                if ('children' in node && node.children) {
+                    const nodeAsParent = node;
+                    if (nodeAsParent.children && result[0] !== SKIP) {
+                        offset = (reverse ? nodeAsParent.children.length : -1) + step;
+                        grandparents = parents.concat(nodeAsParent);
+                        while(offset > -1 && offset < nodeAsParent.children.length){
+                            const child = nodeAsParent.children[offset];
+                            subresult = factory(child, offset, grandparents)();
+                            if (subresult[0] === EXIT) return subresult;
+                            offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                        }
                     }
                 }
                 return result;
             }
         }
-    };
+    }
     function toResult(value) {
         if (Array.isArray(value)) return value;
         if ('number' == typeof value) return [
             CONTINUE,
             value
         ];
-        return [
+        return null == value ? empty : [
             value
         ];
     }
-    const lib_visit = function(tree, test, visitor, reverse) {
-        if ('function' == typeof test && 'function' != typeof visitor) {
-            reverse = visitor;
-            visitor = test;
-            test = null;
+    function lib_visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
+        let reverse;
+        let test;
+        let visitor;
+        if ('function' == typeof testOrVisitor && 'function' != typeof visitorOrReverse) {
+            test = void 0;
+            visitor = testOrVisitor;
+            reverse = visitorOrReverse;
+        } else {
+            test = testOrVisitor;
+            visitor = visitorOrReverse;
+            reverse = maybeReverse;
         }
         visitParents(tree, test, overload, reverse);
         function overload(node, parents) {
             const parent = parents[parents.length - 1];
-            return visitor(node, parent ? parent.children.indexOf(node) : null, parent);
+            const index = parent ? parent.children.indexOf(node) : void 0;
+            return visitor(node, index, parent);
         }
-    };
+    }
     const getASTNodeImport = (name, from)=>({
             type: 'mdxjsEsm',
             value: `import ${name} from ${JSON.stringify(from)}`,
@@ -590,8 +608,10 @@ var __webpack_exports__ = {};
         };
     }
 })();
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.pluginPreview = __webpack_exports__.pluginPreview;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "pluginPreview"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

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'
         });
@@ -42,8 +42,16 @@ const injectDemoBlockImport = (str, path)=>`
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.10",
   "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,35 +17,35 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.2.15",
+    "@rsbuild/core": "1.3.4",
     "@rsbuild/plugin-babel": "~1.0.4",
-    "@rsbuild/plugin-less": "~1.1.1",
+    "@rsbuild/plugin-less": "~1.2.2",
     "@rsbuild/plugin-react": "~1.1.1",
-    "@rsbuild/plugin-sass": "~1.2.2",
+    "@rsbuild/plugin-sass": "~1.3.1",
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
-    "qrcode.react": "^3.2.0",
-    "@rspress/shared": "2.0.0-alpha.0",
-    "@rspress/theme-default": "2.0.0-alpha.0"
+    "qrcode.react": "^4.2.0",
+    "@rspress/shared": "2.0.0-alpha.10",
+    "@rspress/theme-default": "2.0.0-alpha.10"
   },
   "devDependencies": {
-    "@rslib/core": "0.5.3",
+    "@rslib/core": "0.6.1",
     "@types/lodash": "^4.17.16",
-    "@types/mdast": "^3.0.15",
+    "@types/mdast": "^4.0.4",
     "@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",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "mdast-util-mdx-jsx": "^3.2.0",
+    "mdast-util-mdxjs-esm": "^2.0.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"
+    "typescript": "^5.8.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-alpha.0",
+    "@rspress/core": "^2.0.0-alpha.10",
     "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

@@ -1,9 +1,14 @@
-import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
+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';
+import './Device.css';
 
 export default () => {
   const { page } = usePageData();
@@ -22,10 +27,8 @@ export default () => {
     // Do nothing in ssr
     return '';
   };
-  const initialInnerWidth =
-    typeof window !== 'undefined' ? window.innerWidth : 0;
   const [asideWidth, setAsideWidth] = useState('0px');
-  const [innerWidth, setInnerWidth] = useState(initialInnerWidth);
+  const { width: innerWidth } = useWindowSize();
   const [iframeKey, setIframeKey] = useState(0);
   const refresh = useCallback(() => {
     setIframeKey(Math.random());
@@ -40,11 +43,6 @@ export default () => {
         getComputedStyle(root).getPropertyValue('--rp-aside-width');
       setAsideWidth(defaultAsideWidth);
     }
-    const handleResize = () => {
-      setInnerWidth(window.innerWidth);
-    };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
   }, []);
 
   useEffect(() => {

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