@rspress/plugin-preview 2.0.6 → 2.0.8

package/dist/index.js

@@ -1,8 +1,8 @@
-import node_net from "node:net";
 import node_path, { join } from "node:path";
-import { createRsbuild, logger, mergeRsbuildConfig } from "@rsbuild/core";
+import { createLogger, createRsbuild, mergeRsbuildConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
 import { RSPRESS_TEMP_DIR, normalizePosixPath, removeTrailingSlash } from "@rspress/core";
+import picocolors from "picocolors";
 import { mkdir, writeFile } from "node:fs/promises";
 import node_fs from "node:fs";
 import { isDeepStrictEqual } from "node:util";
@@ -87,10 +87,19 @@ async function generateEntry_generateEntry(globalDemos, framework, customEntry)
     };
     return sourceEntry;
 }
+const prefix = picocolors.dim('[@rspress/plugin-preview]');
+const previewLogger = createLogger({
+    level: 'info',
+    prefix: prefix
+});
+const pluginLogger = createLogger({
+    level: 'error',
+    prefix: prefix
+});
 const convert = function(test) {
     if (null == test) return ok;
     if ('function' == typeof test) return castFactory(test);
-    if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+    if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propertiesFactory(test);
     if ('string' == typeof test) return typeFactory(test);
     throw new Error('Expected function, string, or object as test');
 };
@@ -105,7 +114,7 @@ function anyFactory(tests) {
         return false;
     }
 }
-function propsFactory(check) {
+function propertiesFactory(check) {
     const checkAsRecord = check;
     return castFactory(all);
     function all(node) {
@@ -273,7 +282,7 @@ function parsePreviewInfoFromMeta(options) {
         else result.previewMode = defaultPreviewMode;
         return result;
     }
-    if (meta.includes('iframe')) logger.warn('The "iframe" meta is deprecated, please use \`\`\`tsx preview="iframe-fixed" or \`\`\`tsx preview="iframe-follow" instead.');
+    if (meta.includes('iframe')) previewLogger.warn('The "iframe" meta is deprecated, please use \`\`\`tsx preview="iframe-fixed" or \`\`\`tsx preview="iframe-follow" instead.');
     if ('preview' === defaultRenderMode) {
         result.isPreview = true;
         result.previewMode = defaultPreviewMode;
@@ -385,31 +394,27 @@ function pluginPreview(options) {
     const getRouteMeta = ()=>src_routeMeta;
     let devServer;
     let clientConfig;
-    const port = devPort;
-    async function rsbuildStartOrBuild(config, isProd) {
-        if (devServer && !isProd && !isDirtyRef.current) return;
-        if (devServer && !isProd) {
-            await devServer.server.close();
-            devServer = void 0;
-            logger.info('[@rspress/plugin-preview] Restarting preview server due to demo changes...');
-        }
-        const outDir = join(config.outDir ?? 'doc_build', '~demo');
+    let port = devPort;
+    async function createDemoRsbuild() {
+        const distPath = clientConfig?.output?.distPath;
+        const distRoot = 'string' == typeof distPath ? distPath : distPath?.root ?? 'doc_build';
+        const outDir = join(distRoot, '~demo');
         const { source, output, performance, resolve } = clientConfig ?? {};
         const { preEntry: _, ...otherSourceOptions } = source ?? {};
-        const rsbuildConfig = mergeRsbuildConfig({
+        const rsbuildInstanceConfig = mergeRsbuildConfig({
+            customLogger: pluginLogger,
             server: {
                 host: true,
-                port: devPort,
-                printUrls: ()=>void 0,
-                strictPort: true
+                port,
+                printUrls: ()=>void 0
             },
             dev: {
                 lazyCompilation: false,
                 writeToDisk: true
             },
             performance: {
+                printFileSize: true,
                 ...performance,
-                printFileSize: false,
                 buildCache: false
             },
             source: {
@@ -451,13 +456,30 @@ function pluginPreview(options) {
         }, builderConfig);
         const rsbuildInstance = await createRsbuild({
             callerName: 'rspress',
-            rsbuildConfig
+            rsbuildConfig: rsbuildInstanceConfig
         });
         if ('react' === framework) rsbuildInstance.addPlugins([
             pluginReact()
         ]);
-        if (isProd) rsbuildInstance.build();
-        else devServer = await rsbuildInstance.startDevServer();
+        return rsbuildInstance;
+    }
+    async function buildDemo() {
+        const rsbuildInstance = await createDemoRsbuild();
+        await rsbuildInstance.build();
+    }
+    async function startDemoServer() {
+        if (devServer && !isDirtyRef.current) return;
+        if (devServer) {
+            await devServer.server.close();
+            devServer = void 0;
+            previewLogger.info(picocolors.dim('Restarting dev server due to demo changes...'));
+        }
+        const rsbuildInstance = await createDemoRsbuild();
+        devServer = await rsbuildInstance.startDevServer();
+        if (devServer.port !== port) {
+            previewLogger.info(`Port ${port} is in use, using port ${devServer.port} instead.`);
+            port = devServer.port;
+        }
         isDirtyRef.current = false;
     }
     return {
@@ -469,35 +491,11 @@ function pluginPreview(options) {
         routeGenerated (routes) {
             src_routeMeta = routes;
         },
-        async beforeBuild (_, isProd) {
-            if (!isProd) try {
-                await new Promise((resolve, reject)=>{
-                    const server = node_net.createServer();
-                    server.unref();
-                    server.on('error', reject);
-                    server.listen({
-                        port,
-                        host: '0.0.0.0'
-                    }, ()=>{
-                        server.close(resolve);
-                    });
-                });
-            } catch (e) {
-                if (!!e && 'object' == typeof e && 'code' in e && 'EADDRINUSE' !== e.code) throw e;
-                throw new Error(`Port "${port}" is occupied, please choose another one.`);
-            }
-        },
-        async afterBuild (config, isProd) {
-            await rsbuildStartOrBuild(config, isProd);
-        },
         builderConfig: {
             source: {
                 include: [
                     join(__dirname, '..')
-                ],
-                define: {
-                    'process.env.RSPRESS_IFRAME_DEV_PORT': JSON.stringify(devPort)
-                }
+                ]
             },
             tools: {
                 bundlerChain (chain) {
@@ -515,10 +513,19 @@ function pluginPreview(options) {
             },
             plugins: [
                 {
-                    name: 'close-demo-server',
+                    name: 'iframe-sync-rsbuild-instance',
                     setup: (api)=>{
                         api.modifyRsbuildConfig((config)=>{
                             if (config.output?.target === 'web') clientConfig = config;
+                            config.source ??= {};
+                            config.source.define ??= {};
+                            config.source.define['process.env.RSPRESS_IFRAME_DEV_PORT'] = JSON.stringify(port);
+                        });
+                        api.onAfterBuild(async ()=>{
+                            await buildDemo();
+                        });
+                        api.onAfterDevCompile(async ()=>{
+                            await startDemoServer();
                         });
                         api.onCloseDevServer(async ()=>{
                             await devServer?.server?.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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,13 +23,14 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "2.0.0-beta.6",
-    "@rsbuild/plugin-babel": "~1.1.0",
-    "@rsbuild/plugin-react": "~1.4.5",
+    "@rsbuild/core": "2.0.0-beta.11",
+    "@rsbuild/plugin-babel": "~1.1.2",
+    "@rsbuild/plugin-react": "~1.4.6",
+    "picocolors": "^1.1.1",
     "qrcode.react": "^4.2.0"
   },
   "devDependencies": {
-    "@rslib/core": "0.20.0",
+    "@rslib/core": "0.20.2",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.8.1",
     "@types/react": "^19.2.14",
@@ -38,14 +39,14 @@
     "mdast-util-mdxjs-esm": "^2.0.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.1",
+    "react-router-dom": "^7.13.2",
     "rsbuild-plugin-publint": "^0.3.4",
     "typescript": "^5.8.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^2.0.6",
+    "@rspress/core": "^2.0.8",
     "react": ">=18.0.0",
     "react-router-dom": "^6.8.1"
   },