@rspress/plugin-preview 1.43.13 → 1.44.0

package/dist/index.d.ts

@@ -11,7 +11,7 @@ declare type IframeOptions = {
      * position of the iframe
      * @default 'follow'
      */
-    position?: 'fixed' | 'follow';
+    position?: 'fixed' | 'follow' | 'fixed-with-per-comp';
     /**
      * dev server port for the iframe
      * @default 7890

package/dist/index.js

@@ -1,10 +1,14 @@
 "use strict";
 var __webpack_modules__ = {
     "@rsbuild/plugin-less": function(module) {
-        module.exports = import("@rsbuild/plugin-less");
+        module.exports = import("@rsbuild/plugin-less").then(function(module) {
+            return module;
+        });
     },
     "@rsbuild/plugin-sass": function(module) {
-        module.exports = import("@rsbuild/plugin-sass");
+        module.exports = import("@rsbuild/plugin-sass").then(function(module) {
+            return module;
+        });
     }
 };
 var __webpack_module_cache__ = {};
@@ -18,12 +22,8 @@ function __webpack_require__(moduleId) {
     return module.exports;
 }
 (()=>{
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
@@ -31,7 +31,7 @@ function __webpack_require__(moduleId) {
     };
 })();
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __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]
@@ -39,12 +39,10 @@ function __webpack_require__(moduleId) {
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __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'
         });
@@ -83,60 +81,63 @@ var __webpack_exports__ = {};
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-    function generateEntry(demos, framework, position) {
+    function generateEntryForPerComponent(demos, entryCssPath, framework) {
         const sourceEntry = {};
-        const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
-        if ('follow' === position) Object.values(demos).forEach((routes)=>{
+        Object.values(demos).forEach((routes)=>{
             routes.forEach((route)=>{
                 const { id, path: demoPath } = route;
                 const entry = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.entry.tsx`);
                 const solidEntry = `
-        import { render } from 'solid-js/web';
-        import ${JSON.stringify(entryCssPath)};
-        import Demo from ${JSON.stringify(demoPath)};
-        render(() => <Demo />, document.getElementById('root'));
-        `;
+      import { render } from 'solid-js/web';
+      import ${JSON.stringify(entryCssPath)};
+      import Demo from ${JSON.stringify(demoPath)};
+      render(() => <Demo />, document.getElementById('root'));
+      `;
                 const reactEntry = `
-        import { render } from 'react-dom';
-        import ${JSON.stringify(entryCssPath)};
-        import Demo from ${JSON.stringify(demoPath)};
-        render(<Demo />, document.getElementById('root'));
-        `;
+      import { render } from 'react-dom';
+      import ${JSON.stringify(entryCssPath)};
+      import Demo from ${JSON.stringify(demoPath)};
+      render(<Demo />, document.getElementById('root'));
+      `;
                 const entryContent = 'react' === framework ? reactEntry : solidEntry;
                 (0, external_node_fs_namespaceObject.writeFileSync)(entry, entryContent);
                 sourceEntry[id] = entry;
             });
         });
-        else Object.entries(demos).forEach(([key, routes])=>{
+        return sourceEntry;
+    }
+    function generateEntryForPage(demos, entryCssPath, framework) {
+        const sourceEntry = {};
+        Object.entries(demos).forEach(([key, routes])=>{
             if (0 === routes.length) return;
             const reactContent = `
-        import { render } from 'react-dom';
-        import ${JSON.stringify(entryCssPath)};
-        ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
-        function App() {
-          return (
-            <div className="preview-container">
-              <div className="preview-nav">{"${routes[0].title}"}</div>
-              ${routes.map((_demo, index)=>`<Demo_${index} />`).join('\n')}
-            </div>
-          )
-        }
-        render(<App /> , document.getElementById('root'));
-      `;
+      import { render } from 'react-dom';
+      import ${JSON.stringify(entryCssPath)};
+      ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
+      function App() {
+        return (
+          <div className="preview-container">
+            <div className="preview-nav">{"${routes[0].title}"}</div>
+            ${routes.map((_demo, index)=>`<Demo_${index} />`).join('\n')}
+          </div>
+        )
+      }
+      render(<App /> , document.getElementById('root'));
+    `;
             const solidContent = `
-        import { render } from 'solid-js/web';
-        import ${JSON.stringify(entryCssPath)};
-        ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
-        function App() {
-          return (
-            <div class="preview-container">
-              <div class="preview-nav">{"${routes[0].title}"}</div>
-              ${routes.map((_, index)=>`<Demo_${index} />`).join('\n')}
-            </div>
-          )
-        }
-        render(() => <App /> , document.getElementById('root'));
-      `;
+      import { render } from 'solid-js/web';
+      import ${JSON.stringify(entryCssPath)};
+      ${routes.map((demo, index)=>`import Demo_${index} from ${JSON.stringify(demo.path)}`).join('\n')}
+      function App() {
+        return (
+          <div class="preview-container">
+            <div class="preview-nav">{"${routes[0].title}"}</div>
+            ${routes.map((_, index)=>`<Demo_${index} />`).join('\n')}
+          </div>
+        )
+      }
+      render(() => <App /> , document.getElementById('root'));
+    `;
             const renderContent = 'solid' === framework ? solidContent : reactContent;
             const id = `_${toValidVarName(key)}`;
             const entry = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.entry.tsx`);
@@ -145,6 +146,23 @@ var __webpack_exports__ = {};
         });
         return sourceEntry;
     }
+    function generateEntry(demos, framework, position) {
+        const sourceEntry = {};
+        const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
+        if ('follow' === position) {
+            const entries = generateEntryForPerComponent(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, entries);
+        } else if ('fixed' === position) {
+            const entries = generateEntryForPage(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, entries);
+        } else if ('fixed-with-per-comp' === position) {
+            const entries = generateEntryForPerComponent(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, entries);
+            const perPageEntries = generateEntryForPage(demos, entryCssPath, framework);
+            Object.assign(sourceEntry, perPageEntries);
+        }
+        return sourceEntry;
+    }
     const node_utils_namespaceObject = require("@rspress/shared/node-utils");
     const convert = function(test) {
         if (null == test) return ok;
@@ -361,7 +379,7 @@ var __webpack_exports__ = {};
                 if (isMobileMode && 'fixed' === position) void 0 !== externalDemoIndex && Object.assign(currentNode, getExternalDemoContent(tempVar));
                 else Object.assign(currentNode, {
                     type: 'mdxJsxFlowElement',
-                    name: 'Container',
+                    name: 'fixed-with-per-comp' === position ? 'ContainerFixedPerComp' : 'Container',
                     attributes: [
                         {
                             type: 'mdxJsxAttribute',
@@ -411,12 +429,12 @@ var __webpack_exports__ = {};
                 if ('hasVisited' in node) return;
                 if (node.lang && previewLanguages.includes(node.lang)) {
                     var _node_meta, _node_meta1, _node_meta2, _node_meta3, _node_meta4, _node_meta5;
-                    if ((null === (_node_meta = node.meta) || void 0 === _node_meta ? void 0 : _node_meta.includes('pure')) || !(null === (_node_meta1 = node.meta) || void 0 === _node_meta1 ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
+                    if ((null == (_node_meta = node.meta) ? void 0 : _node_meta.includes('pure')) || !(null == (_node_meta1 = node.meta) ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
                     const value = injectDemoBlockImport(previewCodeTransform({
                         language: node.lang,
                         code: node.value
                     }), demoBlockComponentPath);
-                    const isMobileMode = (null === (_node_meta2 = node.meta) || void 0 === _node_meta2 ? void 0 : _node_meta2.includes('mobile')) || (null === (_node_meta3 = node.meta) || void 0 === _node_meta3 ? void 0 : _node_meta3.includes('iframe')) || !(null === (_node_meta4 = node.meta) || void 0 === _node_meta4 ? void 0 : _node_meta4.includes('web')) && !(null === (_node_meta5 = node.meta) || void 0 === _node_meta5 ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
+                    const isMobileMode = (null == (_node_meta2 = node.meta) ? void 0 : _node_meta2.includes('mobile')) || (null == (_node_meta3 = node.meta) ? void 0 : _node_meta3.includes('iframe')) || !(null == (_node_meta4 = node.meta) ? void 0 : _node_meta4.includes('web')) && !(null == (_node_meta5 = node.meta) ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
                     const id = generateId(pageName, index++);
                     const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.tsx`);
                     constructDemoNode(id, virtualModulePath, node, isMobileMode);
@@ -431,7 +449,7 @@ var __webpack_exports__ = {};
             if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
         };
     };
-    let src_rslib_entry_routeMeta;
+    let src_routeMeta;
     const DEFAULT_PREVIEW_LANGUAGES = [
         'jsx',
         'tsx'
@@ -440,10 +458,7 @@ var __webpack_exports__ = {};
         const { isMobile = false, iframeOptions = {}, iframePosition = 'follow', defaultRenderMode = 'preview', previewLanguages = DEFAULT_PREVIEW_LANGUAGES, previewCodeTransform = ({ code })=>code } = options ?? {};
         const previewMode = (null == options ? void 0 : options.previewMode) ?? (isMobile ? 'iframe' : 'internal');
         const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {} } = iframeOptions;
-        const globalUIComponents = 'fixed' === position ? [
-            (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
-        ] : [];
-        const getRouteMeta = ()=>src_rslib_entry_routeMeta;
+        const getRouteMeta = ()=>src_routeMeta;
         let lastDemos;
         let devServer;
         let clientConfig;
@@ -456,7 +471,7 @@ var __webpack_exports__ = {};
                 return config;
             },
             routeGenerated (routes) {
-                src_rslib_entry_routeMeta = routes;
+                src_routeMeta = routes;
             },
             async beforeBuild (_, isProd) {
                 if (!isProd) try {
@@ -480,7 +495,7 @@ var __webpack_exports__ = {};
                 var _devServer_server;
                 if ((0, external_lodash_namespaceObject.isEqual)(remarkPlugin_demos, lastDemos)) return;
                 lastDemos = (0, external_lodash_namespaceObject.cloneDeep)(remarkPlugin_demos);
-                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                 devServer = void 0;
                 const sourceEntry = generateEntry(remarkPlugin_demos, framework, position);
                 const outDir = (0, external_node_path_namespaceObject.join)(config.outDir ?? 'doc_build', '~demo');
@@ -515,6 +530,7 @@ var __webpack_exports__ = {};
                     plugins: null == config ? void 0 : config.builderPlugins
                 }, builderConfig);
                 const rsbuildInstance = await (0, core_namespaceObject.createRsbuild)({
+                    callerName: 'rspress',
                     rsbuildConfig
                 });
                 const { pluginSass } = await Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@rsbuild/plugin-sass"));
@@ -558,11 +574,11 @@ var __webpack_exports__ = {};
                         setup: (api)=>{
                             api.modifyRsbuildConfig((config)=>{
                                 var _config_output;
-                                if ((null === (_config_output = config.output) || void 0 === _config_output ? void 0 : _config_output.target) === 'web') clientConfig = config;
+                                if ((null == (_config_output = config.output) ? void 0 : _config_output.target) === 'web') clientConfig = config;
                             });
                             api.onCloseDevServer(async ()=>{
                                 var _devServer_server;
-                                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                                 devServer = void 0;
                             });
                         }
@@ -588,16 +604,21 @@ var __webpack_exports__ = {};
                     ]
                 ],
                 globalComponents: [
-                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Container.tsx')
+                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Container.tsx'),
+                    (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'ContainerFixedPerComp.tsx')
                 ]
             },
-            globalUIComponents,
+            globalUIComponents: 'fixed-with-per-comp' === position || '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`)
         };
     }
 })();
-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

@@ -1,7 +1,7 @@
 "use strict";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __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]
@@ -9,12 +9,10 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __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'
         });
@@ -44,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": "1.43.13",
+  "version": "1.44.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": {
@@ -17,7 +17,7 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.3.17",
+    "@rsbuild/core": "~1.3.18",
     "@rsbuild/plugin-babel": "~1.0.5",
     "@rsbuild/plugin-less": "~1.2.4",
     "@rsbuild/plugin-react": "~1.3.1",
@@ -25,11 +25,11 @@
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^3.2.0",
-    "@rspress/shared": "1.43.13",
-    "@rspress/theme-default": "1.43.13"
+    "@rspress/shared": "1.44.0",
+    "@rspress/theme-default": "1.44.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.5.2",
+    "@rslib/core": "~0.6.9",
     "@types/lodash": "^4.17.15",
     "@types/mdast": "^3.0.15",
     "@types/node": "^18.11.17",
@@ -45,7 +45,7 @@
     "unist-util-visit": "^4.1.2"
   },
   "peerDependencies": {
-    "@rspress/core": "^1.43.13",
+    "@rspress/core": "^1.44.0",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/Container.tsx

@@ -45,7 +45,7 @@ const Container: React.FC<ContainerProps> = props => {
     <NoSSR>
       <div className="rspress-preview">
         {isMobile === 'true' ? (
-          <div className="rspress-preview-wrapper flex">
+          <div className="rspress-preview-wrapper">
             <div className="rspress-preview-code">{children?.[0]}</div>
             <div className="rspress-preview-device">
               <iframe src={getPageUrl()} key={iframeKey}></iframe>

package/static/global-components/ContainerFixedPerComp.tsx

@@ -0,0 +1,46 @@
+import { NoSSR, usePageData, withBase } from '@rspress/core/runtime';
+
+type ContainerProps = {
+  children: React.ReactNode[];
+  isMobile: 'true' | 'false';
+  demoId: string;
+};
+
+const ContainerFixedPerComp: 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 '';
+  };
+
+  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]}
+          </div>
+        </div>
+      </div>
+    </NoSSR>
+  );
+};
+
+export default ContainerFixedPerComp;

package/static/global-components/Device.scss

@@ -1,11 +1,11 @@
-.fixed-device {
+.rspress-fixed-device {
   display: none;
   position: fixed;
   top: calc(var(--rp-nav-height) + var(--rp-preview-padding));
   overflow: hidden;
 }
 
-.fixed-iframe {
+.rspress-fixed-iframe {
   height: var(--rp-device-height);
   max-height: calc(
     100vh - var(--rp-preview-padding) * 2 - var(--rp-nav-height)
@@ -17,7 +17,7 @@
   border: var(--rp-device-border);
 }
 
-.fixed-operation {
+.rspress-fixed-operation {
   border: var(--rp-device-border);
   border-top: 0;
   border-radius: 0 0 var(--rp-device-border-radius)
@@ -32,7 +32,7 @@
 }
 
 @media (min-width: 960px) {
-  .fixed-device {
+  .rspress-fixed-device {
     display: inline;
     left: calc(1280px - var(--rp-device-width) - var(--rp-preview-padding));
     right: auto;
@@ -40,7 +40,7 @@
 }
 
 @media (min-width: 1280px) {
-  .fixed-device {
+  .rspress-fixed-device {
     display: inline;
     right: var(--rp-preview-padding);
     left: auto;

package/static/global-components/Device.tsx

@@ -72,18 +72,18 @@ export default () => {
   }, [haveDemos, asideWidth, innerWidth]);
 
   return haveDemos ? (
-    <div className="fixed-device">
+    <div className="rspress-fixed-device">
       <NoSSR>
         <iframe
           // refresh when load the iframe, then remove NoSSR
           src={getPageUrl(url)}
-          className="fixed-iframe"
+          className="rspress-fixed-iframe"
           key={iframeKey}
         ></iframe>
       </NoSSR>
       <MobileOperation
         url={getPageUrl(url)}
-        className="fixed-operation"
+        className="rspress-fixed-operation"
         refresh={refresh}
       />
     </div>

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

@@ -12,6 +12,7 @@
   padding: 16px 0;
 
   &-wrapper {
+    display: flex;
     border: 1px solid var(--rp-container-details-border);
     border-radius: var(--rp-radius-small);
   }