@rspress/plugin-preview 2.0.0-beta.2 → 2.0.0-beta.21

package/README.md

@@ -2,4 +2,4 @@
 
 > Preview plugin for rspress
 
-[Documentation](https://rspress.dev/plugin/official-plugins/preview)
+[Documentation](https://rspress.rs/plugin/official-plugins/preview)

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,16 +1,15 @@
-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";
-import * as __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__ from "@rspress/shared/node-utils";
-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 { cloneDeep, isEqual } from "lodash";
+import { RSPRESS_TEMP_DIR, normalizePosixPath, removeTrailingSlash } from "rspress/core";
+import node_fs, { writeFileSync } 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');
@@ -33,11 +32,11 @@ const getLangFileExt = (lang)=>{
 };
 function generateEntry(demos, framework, position, customEntry) {
     const sourceEntry = {};
-    const entryCssPath = (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(staticPath, 'global-styles', 'entry.css');
+    const entryCssPath = join(staticPath, 'global-styles', 'entry.css');
     if ('follow' === position) Object.values(demos).forEach((routes)=>{
         routes.forEach((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)};
@@ -55,7 +54,7 @@ function generateEntry(demos, framework, position, customEntry) {
                 entryCssPath,
                 demoPath
             }) : 'react' === framework ? reactEntry : solidEntry;
-            (0, __WEBPACK_EXTERNAL_MODULE_node_fs_5ea92f0c__.writeFileSync)(entry, entryContent);
+            writeFileSync(entry, entryContent);
             sourceEntry[id] = entry;
         });
     });
@@ -92,8 +91,8 @@ 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`);
+        writeFileSync(entry, renderContent);
         sourceEntry[id] = entry;
     });
     return sourceEntry;
@@ -304,26 +303,25 @@ 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] = [];
         let title = pageName;
         let index = 1;
-        let externalDemoIndex = 0;
         function constructDemoNode(demoId, demoPath, currentNode, isMobileMode, externalDemoIndex) {
             if (isMobileMode) {
                 const relativePathReg = new RegExp(/^\.\.?\/.*$/);
                 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}`;
@@ -365,18 +363,6 @@ const remarkCodeToDemo = function({ getRouteMeta, previewMode, defaultRenderMode
                 title = firstChild && 'value' in firstChild && firstChild.value || title;
             }
         });
-        lib_visit(tree, 'mdxJsxFlowElement', (node)=>{
-            if ('code' === node.name) {
-                const src = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'src');
-                if ('string' != typeof src) return;
-                const currentMode = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'previewMode') ?? previewMode;
-                const isMobileAttr = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_node_utils_78947ce6__.getNodeAttribute)(node, 'isMobile');
-                let isMobileMode = false;
-                isMobileMode = void 0 === isMobileAttr ? 'iframe' === currentMode : null === isMobileAttr ? true : 'object' == typeof isMobileAttr ? 'false' !== isMobileAttr.value : 'false' !== isMobileAttr;
-                const id = generateId(pageName, index++);
-                constructDemoNode(id, src, node, isMobileMode, externalDemoIndex++);
-            }
-        });
         lib_visit(tree, 'code', (node)=>{
             if ('hasVisited' in node) return;
             if (node.lang && previewLanguages.includes(node.lang)) {
@@ -391,13 +377,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);
@@ -414,7 +400,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;
@@ -433,7 +419,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({
@@ -449,26 +435,27 @@ 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 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 rsbuildConfig = mergeRsbuildConfig({
                 server: {
                     port: devPort,
                     printUrls: ()=>void 0,
                     strictPort: true
                 },
+                dev: {
+                    lazyCompilation: false
+                },
                 performance: {
                     ...performance,
-                    printFileSize: false
+                    printFileSize: false,
+                    buildCache: false
                 },
                 html,
                 source: {
@@ -477,15 +464,15 @@ function pluginPreview(options) {
                 },
                 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");
@@ -495,13 +482,13 @@ function pluginPreview(options) {
                 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();
@@ -509,7 +496,7 @@ function pluginPreview(options) {
         builderConfig: {
             source: {
                 include: [
-                    (0, __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__.join)(__dirname, '..')
+                    join(__dirname, '..')
                 ]
             },
             tools: {
@@ -540,7 +527,6 @@ function pluginPreview(options) {
         },
         extendPageData (pageData, isProd) {
             if (!isProd) pageData.devPort = port;
-            pageData.extraHighlightLanguages = previewLanguages;
         },
         markdown: {
             remarkPlugins: [
@@ -557,11 +543,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.2",
+  "version": "2.0.0-beta.21",
   "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,38 +23,37 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.3.9",
+    "@rsbuild/core": "~1.4.6",
     "@rsbuild/plugin-babel": "~1.0.5",
-    "@rsbuild/plugin-less": "~1.2.2",
-    "@rsbuild/plugin-react": "~1.1.1",
-    "@rsbuild/plugin-sass": "~1.3.1",
+    "@rsbuild/plugin-less": "~1.2.5",
+    "@rsbuild/plugin-react": "~1.3.4",
+    "@rsbuild/plugin-sass": "~1.3.3",
     "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
     "qrcode.react": "^4.2.0",
-    "@rspress/shared": "2.0.0-beta.2",
-    "@rspress/theme-default": "2.0.0-beta.2"
+    "@rspress/theme-default": "2.0.0-beta.21"
   },
   "devDependencies": {
-    "@rslib/core": "0.6.5",
-    "@types/lodash": "^4.17.16",
+    "@rslib/core": "0.10.5",
+    "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^18.11.17",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
+    "@types/node": "^22.8.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "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.0",
+    "rsbuild-plugin-publint": "^0.3.2",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.0-beta.2",
     "react": ">=18.0.0",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.8.1",
+    "rspress": "^2.0.0-beta.21"
   },
   "engines": {
     "node": ">=18.0.0"

package/static/global-components/Container.tsx

@@ -1,5 +1,5 @@
-import { NoSSR, useLang, usePageData, withBase } from '@rspress/core/runtime';
 import { type MouseEvent, useCallback, useState } from 'react';
+import { NoSSR, useLang, usePageData, withBase } from 'rspress/runtime';
 import MobileOperation from './common/mobile-operation';
 import IconCode from './icons/Code';
 

package/static/global-components/Device.tsx

@@ -1,10 +1,5 @@
-import {
-  NoSSR,
-  usePageData,
-  useWindowSize,
-  withBase,
-} from '@rspress/core/runtime';
 import { useCallback, useEffect, useState } from 'react';
+import { NoSSR, usePageData, useWindowSize, withBase } from 'rspress/runtime';
 // @ts-ignore
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';

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

@@ -1,4 +1,3 @@
-import { useLang } from '@rspress/core/runtime';
 import { QRCodeSVG } from 'qrcode.react';
 import {
   type MouseEventHandler,
@@ -7,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useLang } from 'rspress/runtime';
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';

package/static/global-styles/entry.css

@@ -1,12 +1,29 @@
-@import url(@rspress/theme-default/bundle.css);
-
 :root {
-  --rp-iframe-bg: var(--rp-code-block-bg);
+  --rp-iframe-bg: #f6f8fa;
+  --rp-iframe-nav-bg: #ffffff;
 }
 
+/* TODO: support dark mode */
+/* .dark {
+  --rp-iframe-bg: #242424;
+  --rp-iframe-nav-bg: #191d24;
+} */
+
 body {
-  background-color: var(--rp-iframe-bg);
+  background-color: var(--rp-iframe-bg) !important;
+  margin: 0px; /* copied from preflight.css */
+}
+
+/* #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 */
 }
+/* #endregion copied from preflight.css */
 
 .preview-nav {
   position: relative;
@@ -14,7 +31,7 @@ body {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: var(--rp-c-bg);
+  background-color: var(--rp-iframe-nav-bg) !important;
   font-weight: 600;
   font-size: 17px;
 }