@rspress/plugin-preview 2.0.0-beta.9 → 2.0.0-rc.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { RsbuildConfig } from '@rsbuild/core';
-import { RspressPlugin } from '@rspress/shared';
+import { RspressPlugin } from '@rspress/core';
 
 declare interface CustomEntry {
     entryCssPath: string;

package/dist/index.js

@@ -1,15 +1,16 @@
-import * as __WEBPACK_EXTERNAL_MODULE_node_net_0373943e__ from "node:net";
-import * as __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__ from "node:path";
-import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_core_1b356efc__ from "@rsbuild/core";
-import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_babel_2a5a8b08__ from "@rsbuild/plugin-babel";
-import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react_7b149ee4__ from "@rsbuild/plugin-react";
-import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_solid_0a0a2645__ from "@rsbuild/plugin-solid";
-import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__ from "@rspress/shared";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";
-import * as __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__ from "node:fs";
-const staticPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(__dirname, '..', 'static');
-const demoBlockComponentPath = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(staticPath, 'global-components', 'DemoBlock.tsx');
-const virtualDir = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(process.cwd(), 'node_modules', __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.RSPRESS_TEMP_DIR, 'virtual-demo');
+import node_net from "node:net";
+import node_path, { dirname, join, resolve as external_node_path_resolve } from "node:path";
+import { createRsbuild, mergeRsbuildConfig } from "@rsbuild/core";
+import { pluginBabel } from "@rsbuild/plugin-babel";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { pluginSolid } from "@rsbuild/plugin-solid";
+import { RSPRESS_TEMP_DIR, normalizePosixPath, removeTrailingSlash } from "@rspress/core";
+import { cloneDeep, isEqual } from "lodash";
+import { mkdir, writeFile } from "node:fs/promises";
+import node_fs from "node:fs";
+const staticPath = node_path.join(__dirname, '..', 'static');
+const demoBlockComponentPath = node_path.join(staticPath, 'global-components', 'DemoBlock.tsx');
+const virtualDir = node_path.join(process.cwd(), 'node_modules', RSPRESS_TEMP_DIR, 'virtual-demo');
 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');
@@ -30,13 +31,15 @@ const getLangFileExt = (lang)=>{
             return lang;
     }
 };
-function generateEntry(demos, framework, position, customEntry) {
+async function generateEntry(demos, framework, position, customEntry) {
     const sourceEntry = {};
-    const entryCssPath = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-styles', 'entry.css');
-    if ('follow' === position) Object.values(demos).forEach((routes)=>{
-        routes.forEach((route)=>{
+    const entryCssPath = join(staticPath, 'global-styles', 'entry.css');
+    await mkdir(virtualDir, {
+        recursive: true
+    });
+    if ('follow' === position) await Promise.all(Object.values(demos).map((routes)=>routes.map(async (route)=>{
             const { id, path: demoPath } = route;
-            const entry = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(virtualDir, `${id}.entry.tsx`);
+            const entry = join(virtualDir, `${id}.entry.tsx`);
             const solidEntry = `
         import { render } from 'solid-js/web';
         import ${JSON.stringify(entryCssPath)};
@@ -54,11 +57,10 @@ function generateEntry(demos, framework, position, customEntry) {
                 entryCssPath,
                 demoPath
             }) : 'react' === framework ? reactEntry : solidEntry;
-            (0, __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__.writeFileSync)(entry, entryContent);
+            await writeFile(entry, entryContent);
             sourceEntry[id] = entry;
-        });
-    });
-    else Object.entries(demos).forEach(([key, routes])=>{
+        })).flat());
+    else await Promise.all(Object.entries(demos).map(async ([key, routes])=>{
         if (0 === routes.length) return;
         const reactContent = `
         import { createRoot } from 'react-dom/client';
@@ -91,10 +93,10 @@ function generateEntry(demos, framework, position, customEntry) {
       `;
         const renderContent = 'solid' === framework ? solidContent : reactContent;
         const id = `_${toValidVarName(key)}`;
-        const entry = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(virtualDir, `${id}.entry.tsx`);
-        (0, __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__.writeFileSync)(entry, renderContent);
+        const entry = join(virtualDir, `${id}.entry.tsx`);
+        await writeFile(entry, renderContent);
         sourceEntry[id] = entry;
-    });
+    }));
     return sourceEntry;
 }
 const convert = function(test) {
@@ -303,13 +305,13 @@ const getExternalDemoContent = (tempVar)=>({
 const remarkPlugin_demos = {};
 const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode, position, previewLanguages, previewCodeTransform }) {
     const routeMeta = getRouteMeta();
-    __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].mkdirSync(virtualDir, {
+    node_fs.mkdirSync(virtualDir, {
         recursive: true
     });
     const data = this.data();
     return (tree, vfile)=>{
         const demoMdx = [];
-        const route = routeMeta.find((meta)=>(0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.normalizePosixPath)(meta.absolutePath) === (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.normalizePosixPath)(vfile.path || vfile.history[0]));
+        const route = routeMeta.find((meta)=>normalizePosixPath(meta.absolutePath) === normalizePosixPath(vfile.path || vfile.history[0]));
         if (!route) return;
         const { pageName } = route;
         remarkPlugin_demos[pageName] = [];
@@ -321,7 +323,7 @@ const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode
                 remarkPlugin_demos[pageName].push({
                     title,
                     id: demoId,
-                    path: relativePathReg.test(demoPath) ? (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.resolve)(vfile.dirname || (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.dirname)(vfile.path), demoPath) : demoPath
+                    path: relativePathReg.test(demoPath) ? external_node_path_resolve(vfile.dirname || dirname(vfile.path), demoPath) : demoPath
                 });
             } else demoMdx.push(getASTNodeImport(`Demo${demoId}`, demoPath));
             const tempVar = `externalDemoContent${externalDemoIndex}`;
@@ -377,13 +379,13 @@ const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode
                 });
                 const isMobileMode = node.meta?.includes('mobile') || node.meta?.includes('iframe') || !node.meta?.includes('web') && !node.meta?.includes('internal') && 'iframe' === previewMode;
                 const id = generateId(pageName, index++);
-                const virtualModulePath = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
+                const virtualModulePath = join(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
                 constructDemoNode(id, virtualModulePath, node, isMobileMode);
-                if (__WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].existsSync(virtualModulePath)) {
-                    const content = __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].readFileSync(virtualModulePath, 'utf-8');
+                if (node_fs.existsSync(virtualModulePath)) {
+                    const content = node_fs.readFileSync(virtualModulePath, 'utf-8');
                     if (content === value) return;
                 }
-                __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__["default"].writeFileSync(virtualModulePath, value);
+                node_fs.writeFileSync(virtualModulePath, value);
             }
         });
         tree.children.unshift(...demoMdx);
@@ -400,7 +402,7 @@ function pluginPreview(options) {
     const previewMode = options?.previewMode ?? (isMobile ? 'iframe' : 'internal');
     const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {}, customEntry } = iframeOptions;
     const globalUIComponents = 'fixed' === position ? [
-        (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-components', 'Device.tsx')
+        join(staticPath, 'global-components', 'Device.tsx')
     ] : [];
     const getRouteMeta = ()=>src_routeMeta;
     let lastDemos;
@@ -419,7 +421,7 @@ function pluginPreview(options) {
         async beforeBuild (_, isProd) {
             if (!isProd) try {
                 await new Promise((resolve, reject)=>{
-                    const server = __WEBPACK_EXTERNAL_MODULE_node_net_0373943e__["default"].createServer();
+                    const server = node_net.createServer();
                     server.unref();
                     server.on('error', reject);
                     server.listen({
@@ -435,60 +437,54 @@ function pluginPreview(options) {
             }
         },
         async afterBuild (config, isProd) {
-            if ((0, __WEBPACK_EXTERNAL_MODULE_lodash__.isEqual)(remarkPlugin_demos, lastDemos)) return;
-            lastDemos = (0, __WEBPACK_EXTERNAL_MODULE_lodash__.cloneDeep)(remarkPlugin_demos);
+            if (isEqual(remarkPlugin_demos, lastDemos)) return;
+            lastDemos = cloneDeep(remarkPlugin_demos);
             await devServer?.server?.close();
             devServer = void 0;
-            const sourceEntry = generateEntry(remarkPlugin_demos, framework, position, customEntry);
-            const outDir = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(config.outDir ?? 'doc_build', '~demo');
+            const sourceEntry = await generateEntry(remarkPlugin_demos, framework, position, customEntry);
+            const outDir = join(config.outDir ?? 'doc_build', '~demo');
             if (0 === Object.keys(sourceEntry).length) return;
-            const { html, source, output, performance } = clientConfig ?? {};
-            const rsbuildConfig = (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_core_1b356efc__.mergeRsbuildConfig)({
-                dev: {
-                    progressBar: false
-                },
+            const { source, output, performance } = clientConfig ?? {};
+            const { preEntry, ...otherSourceOptions } = source ?? {};
+            const rsbuildConfig = mergeRsbuildConfig({
                 server: {
                     port: devPort,
                     printUrls: ()=>void 0,
                     strictPort: true
                 },
+                dev: {
+                    lazyCompilation: false
+                },
                 performance: {
                     ...performance,
-                    printFileSize: false
+                    printFileSize: false,
+                    buildCache: false
                 },
-                html,
                 source: {
-                    ...source,
+                    ...otherSourceOptions,
                     entry: sourceEntry
                 },
                 output: {
                     ...output,
-                    assetPrefix: output?.assetPrefix ? `${(0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.removeTrailingSlash)(output.assetPrefix)}/~demo` : '/~demo',
+                    assetPrefix: output?.assetPrefix ? `${removeTrailingSlash(output.assetPrefix)}/~demo` : '/~demo',
                     distPath: {
                         root: outDir
                     },
                     copy: void 0
-                },
-                plugins: config?.builderPlugins
+                }
             }, builderConfig);
-            const rsbuildInstance = await (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_core_1b356efc__.createRsbuild)({
+            const rsbuildInstance = await createRsbuild({
                 callerName: 'rspress',
                 rsbuildConfig
             });
-            const { pluginSass } = await import("@rsbuild/plugin-sass");
-            const { pluginLess } = await import("@rsbuild/plugin-less");
-            rsbuildInstance.addPlugins([
-                pluginSass(),
-                pluginLess()
-            ]);
             if ('solid' === framework) rsbuildInstance.addPlugins([
-                (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_babel_2a5a8b08__.pluginBabel)({
+                pluginBabel({
                     include: /\.(?:jsx|tsx)$/
                 }),
-                (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_solid_0a0a2645__.pluginSolid)()
+                pluginSolid()
             ]);
             if ('react' === framework) rsbuildInstance.addPlugins([
-                (0, __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react_7b149ee4__.pluginReact)()
+                pluginReact()
             ]);
             if (isProd) rsbuildInstance.build();
             else devServer = await rsbuildInstance.startDevServer();
@@ -496,7 +492,7 @@ function pluginPreview(options) {
         builderConfig: {
             source: {
                 include: [
-                    (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(__dirname, '..')
+                    join(__dirname, '..')
                 ]
             },
             tools: {
@@ -527,7 +523,6 @@ function pluginPreview(options) {
         },
         extendPageData (pageData, isProd) {
             if (!isProd) pageData.devPort = port;
-            pageData.extraHighlightLanguages = previewLanguages;
         },
         markdown: {
             remarkPlugins: [
@@ -544,11 +539,11 @@ function pluginPreview(options) {
                 ]
             ],
             globalComponents: [
-                (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-components', 'Container.tsx')
+                join(staticPath, 'global-components', 'Container.tsx')
             ]
         },
         globalUIComponents,
-        globalStyles: (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-styles', `${previewMode}.css`)
+        globalStyles: join(staticPath, 'global-styles', `${previewMode}.css`)
     };
 }
 export { pluginPreview };

package/index.d.ts

@@ -1,7 +1,6 @@
-declare module '@rspress/shared' {
+declare module '@rspress/core' {
   interface PageIndexInfo {
     devPort?: number;
-    extraHighlightLanguages?: string[];
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-rc.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": {
@@ -23,36 +23,32 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "~1.3.21",
-    "@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",
+    "@rsbuild/core": "~1.6.3",
+    "@rsbuild/plugin-babel": "~1.0.6",
+    "@rsbuild/plugin-react": "~1.4.2",
+    "@rsbuild/plugin-solid": "~1.0.6",
     "lodash": "4.17.21",
-    "qrcode.react": "^4.2.0",
-    "@rspress/shared": "2.0.0-beta.9",
-    "@rspress/theme-default": "2.0.0-beta.9"
+    "qrcode.react": "^4.2.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.8.0",
-    "@types/lodash": "^4.17.17",
+    "@rslib/core": "0.16.1",
+    "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.8.1",
-    "@types/react": "^18.3.22",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-router-dom": "^6.29.0",
-    "rsbuild-plugin-publint": "^0.3.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1",
+    "rsbuild-plugin-publint": "^0.3.3",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-beta.9",
+    "@rspress/core": "^2.0.0-rc.0",
     "react": ">=18.0.0",
     "react-router-dom": "^6.8.1"
   },
@@ -61,7 +57,6 @@
   },
   "publishConfig": {
     "access": "public",
-    "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {

package/static/global-components/Container.tsx

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

package/static/global-components/Device.tsx

@@ -5,7 +5,7 @@ import {
   withBase,
 } from '@rspress/core/runtime';
 import { useCallback, useEffect, useState } from 'react';
-// @ts-ignore
+// @ts-expect-error
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
 import './Device.css';
@@ -27,27 +27,14 @@ export default () => {
     // 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(
@@ -64,12 +51,10 @@ export default () => {
       } else {
         node?.removeAttribute('style');
       }
-      style.setProperty('--rp-aside-width', '0px');
     } else {
       node?.removeAttribute('style');
-      style.setProperty('--rp-aside-width', asideWidth);
     }
-  }, [haveDemos, asideWidth, innerWidth]);
+  }, [haveDemos, innerWidth]);
 
   return haveDemos ? (
     <div className="fixed-device">

package/static/global-styles/entry.css

@@ -15,13 +15,14 @@ body {
 }
 
 /* #region copied from preflight.css */
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+@layer rp-base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box; /* 1 */
+    border-width: 0; /* 2 */
+    border-style: solid; /* 2 */
+  }
 }
 /* #endregion copied from preflight.css */