rsbuild-plugin-workspace-dev 0.0.1-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rspack Contrib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# rsbuild-plugin-workspace-dev

package/README.zh-CN.md

@@ -0,0 +1,141 @@
+# rsbuild-plugin-workspace-dev
+
+提供按拓扑顺序启动 monorepo 子项目的能力。
+
+`rsbuild-plugin-workspace-dev` 用于 monorepo 开发场景，它支持从当前项目开始计算依赖关系生成拓扑图，按拓扑顺序启动子项目。
+
+<p>
+  <a href="https://npmjs.com/package/rsbuild-plugin-workspace-dev">
+   <img src="https://img.shields.io/npm/v/rsbuild-plugin-workspace-dev?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
+</p>
+
+## 使用
+
+安装：
+
+```bash
+npm add rsbuild-plugin-workspace-dev -D
+```
+
+在 `rsbuild.config.ts` 里注册插件:
+
+```ts
+// rsbuild.config.ts
+import { pluginWorkspaceDev } from "rsbuild-plugin-workspace-dev";
+
+export default {
+  plugins: [pluginWorkspaceDev()],
+};
+```
+
+## 使用场景
+
+在 monorepo 中，一个项目可能依赖多个子项目，而子项目之间也可能存在依赖关系。
+
+比如 monorepo 中包含了一个 app 应用和多个 lib 包：
+
+```ts
+monorepo
+├── app
+└── lib1
+└── lib2
+└── lib3
+```
+
+其中，app 是基于 Rsbuild 构建的, lib 是基于 Rslib 构建的。app 依赖了 lib1 和 lib2：
+
+```json
+{
+  "name": "app",
+  "dependencies": {
+    "lib1": "workspace:*",
+    "lib2": "workspace:*"
+  }
+}
+```
+
+lib2 依赖了 lib3：
+
+```json
+{
+  "name": "lib2",
+  "dependencies": {
+    "lib3": "workspace:*"
+  }
+}
+```
+此时在 app 下执行 `pnpm dev` 后，会按照拓扑顺序先启动 lib1 和 lib3，再启动 lib2，最后启动 app。此处启动 lib 指的是执行 lib 的 dev 命令
+```json
+{
+  "scripts": {
+    "dev": "rslib build --watch"
+  }
+}
+```
+识别子项目是否启动完成是通过匹配子项目日志实现的，默认支持匹配 Rslib、tsup 子项目，同时支持手动配置 match 匹配日志。
+
+## 选项
+
+### projectConfig
+用于子项目的启动项配置和自定义日志匹配逻辑。
+
+- **类型：**:
+```
+interface ProjectConfig {
+  /**
+   * 自定义子项目启动命令，默认值为 `dev`, 即执行 `npm run dev`。
+   */
+  command?: string;
+  /**
+   * 自定义子项目启动完成匹配逻辑，默认支持 `Rsbuild`、`tsup` 子项目的日志匹配逻辑。
+   */
+  match?: (stdout: string) => boolean;
+  /**
+   * 是否跳过当前子项目的启动，默认值为 `false`，通常用于跳过一些不需要启动的子项目。
+   */
+  skip?: boolean;
+}
+```
+
+### ignoreSelf
+
+- **类型：** `boolean`
+- **默认值：** `true`
+- 
+是否忽略当前项目的启动，默认值为 `true`。一般无需手动配置，当前项目通常由用户手动执行 dev 启动，无需插件干预。
+考虑如下场景，docs 和 lib 是在同一个项目中，而 docs 需要调试 lib 的产物，此时需要启动 `pnpm doc` 命令，而 lib 则需要启动 `pnpm dev` 命令，配置该选项到 rspress 配置中后，启动 `pnpm doc` 时会自动执行 `pnpm dev` 命令，用于启动 lib 子项目。
+```
+├── docs
+│   └── index.mdx
+├── package.json
+├── src
+│   └── Button.tsx
+├── rslib.config.ts
+├── rspress.config.ts
+```
+```
+"scripts": {
+  "dev": "rslib build --watch",
+  "doc": "rspress dev"
+},
+```
+
+### cwd
+
+- **类型：** `string`
+- **默认值：** `process.cwd()`
+
+用于配置当前工作目录，默认值为当前项目目录，一般无需配置。
+
+### workspaceFileDir
+
+- **类型：** `string`
+- **默认值：** `process.cwd()`
+
+用于配置 workspace 文件目录，默认值为当前项目目录，一般无需配置。
+
+## License
+
+[MIT](./LICENSE).

package/dist/constant.d.ts

@@ -0,0 +1,5 @@
+export declare const PACKAGE_JSON = "package.json";
+export declare const DEBUG_LOG_TITLE = "[Rsbuild Workspace Dev Plugin]: ";
+export declare const RSLIB_READY_MESSAGE = "build complete, watching for changes";
+export declare const MODERN_MODULE_READY_MESSAGE = "Watching for file changes";
+export declare const TSUP_READY_MESSAGE = "Watching for changes in";

package/dist/index.cjs

@@ -0,0 +1,319 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    pluginWorkspaceDev: ()=>pluginWorkspaceDev,
+    WorkspaceDevRunner: ()=>WorkspaceDevRunner
+});
+const external_chalk_namespaceObject = require("chalk");
+var external_chalk_default = /*#__PURE__*/ __webpack_require__.n(external_chalk_namespaceObject);
+const PACKAGE_JSON = 'package.json';
+const DEBUG_LOG_TITLE = '[Rsbuild Workspace Dev Plugin]: ';
+const RSLIB_READY_MESSAGE = 'build complete, watching for changes';
+const MODERN_MODULE_READY_MESSAGE = 'Watching for file changes';
+const TSUP_READY_MESSAGE = 'Watching for changes in';
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+const logMap = {
+    ["stdout"]: 'log',
+    ["stderr"]: 'error'
+};
+class Logger {
+    appendLog(type, log) {
+        this[type] += log;
+    }
+    emitLog(type) {
+        console[logMap[type]](this[type]);
+    }
+    emitLogOnce(type, log) {
+        const logWithName = `${external_chalk_default().hex('#808080').bold(this.name)}: ${log}`;
+        console[logMap[type]](logWithName);
+    }
+    reset(type) {
+        this[type] = '';
+    }
+    setBanner(name) {
+        const startBanner = `\n------------ ${external_chalk_default().hex('#c95ab3').bold('log start:')} ${external_chalk_default().green(name)} ${'-'.repeat(Math.max(50 - name.toString().length, 5))}`;
+        this.stdout = startBanner + this.stdout;
+    }
+    flushStdout() {
+        this.setBanner(this.name);
+        this.emitLog("stdout");
+    }
+    static setEndBanner() {
+        const endBanner = `------------ ${external_chalk_default().hex('#c95ab3').bold('log end:')} ${external_chalk_default().green('all sub project have been started.')} ------------\n`;
+        console.log(endBanner);
+    }
+    constructor({ name }){
+        _define_property(this, "stdout", void 0);
+        _define_property(this, "stderr", void 0);
+        _define_property(this, "name", void 0);
+        _define_property(this, "logTitle", void 0);
+        this.name = name;
+        this.stdout = '';
+        this.stderr = '';
+        this.logTitle = DEBUG_LOG_TITLE;
+    }
+}
+const debugLog = (msg)=>{
+    const isDebug = 'rsbuild' === process.env.DEBUG || '*' === process.env.DEBUG;
+    if (isDebug) console.log(DEBUG_LOG_TITLE + msg);
+};
+const get_packages_namespaceObject = require("@manypkg/get-packages");
+const external_child_process_namespaceObject = require("child_process");
+const external_graphlib_namespaceObject = require("graphlib");
+var external_graphlib_default = /*#__PURE__*/ __webpack_require__.n(external_graphlib_namespaceObject);
+const external_path_namespaceObject = require("path");
+var external_path_default = /*#__PURE__*/ __webpack_require__.n(external_path_namespaceObject);
+const external_fs_namespaceObject = require("fs");
+var external_fs_default = /*#__PURE__*/ __webpack_require__.n(external_fs_namespaceObject);
+const external_json5_namespaceObject = require("json5");
+var external_json5_default = /*#__PURE__*/ __webpack_require__.n(external_json5_namespaceObject);
+async function pathExists(path) {
+    return external_fs_default().promises.access(path).then(()=>true).catch(()=>false);
+}
+const readJson = async (jsonFileAbsPath)=>{
+    if (!await pathExists(jsonFileAbsPath)) return {};
+    const content = await external_fs_default().promises.readFile(jsonFileAbsPath, 'utf-8');
+    const json = external_json5_default().parse(content);
+    return json;
+};
+const readPackageJson = async (pkgJsonFilePath)=>readJson(pkgJsonFilePath);
+function workspace_dev_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+class WorkspaceDevRunner {
+    async init() {
+        this.metaData = await readPackageJson(external_path_default().join(this.cwd, PACKAGE_JSON));
+        this.buildDependencyGraph();
+        debugLog(`Dependency graph:\nnodes: ${this.getNodes().join(', ')}\nedges: ${this.getEdges().map((edge)=>`${edge.v} -> ${edge.w}`).join(', ')}\n`);
+    }
+    buildDependencyGraph() {
+        const { packages } = (0, get_packages_namespaceObject.getPackagesSync)(this.workspaceFileDir);
+        const currentPackage = packages.find((pkg)=>pkg.packageJson.name === this.metaData.name);
+        this.packages = packages;
+        const initNode = (pkg)=>{
+            const { packageJson, dir } = pkg;
+            const { name, dependencies, devDependencies, peerDependencies } = packageJson;
+            const node = {
+                name,
+                packageJson,
+                path: dir
+            };
+            this.graph.setNode(name, node);
+            this.visited[name] = false;
+            this.visiting[name] = false;
+            this.matched[name] = false;
+            const packageName = name;
+            const deps = {
+                ...dependencies,
+                ...devDependencies,
+                ...peerDependencies
+            };
+            for (const depName of Object.keys(deps)){
+                const isInternalDep = this.packages.some((p)=>p.packageJson.name === depName);
+                if (isInternalDep) {
+                    this.graph.setEdge(packageName, depName);
+                    this.checkGraph();
+                    const depPackage = packages.find((pkg)=>pkg.packageJson.name === depName);
+                    if (!this.getNode(depName)) initNode(depPackage);
+                }
+            }
+        };
+        initNode(currentPackage);
+    }
+    checkGraph() {
+        const cycles = external_graphlib_default().alg.findCycles(this.graph);
+        const nonSelfCycles = cycles.filter((c)=>1 !== c.length);
+        debugLog(`cycles check: ${cycles}`);
+        if (nonSelfCycles.length) throw new Error(`${DEBUG_LOG_TITLE}Dependency graph do not allow cycles.`);
+    }
+    async start() {
+        const promises = [];
+        const allNodes = this.getNodes();
+        const filterSelfNodes = allNodes.filter((node)=>node !== this.metaData.name);
+        const nodes = this.options.ignoreSelf ? filterSelfNodes : allNodes;
+        for (const node of nodes){
+            const dependencies = this.getDependencies(node) || [];
+            const canStart = dependencies.every((dep)=>{
+                const selfStart = node === dep;
+                const isVisiting = this.visiting[dep];
+                const isVisited = selfStart || this.visited[dep];
+                return isVisited && !isVisiting;
+            });
+            if (canStart && !this.visited[node] && !this.visiting[node]) {
+                debugLog(`Start visit node: ${node}`);
+                const visitPromise = this.visitNodes(node);
+                promises.push(visitPromise);
+            }
+        }
+        await Promise.all(promises);
+    }
+    visitNodes(node) {
+        return new Promise((resolve)=>{
+            const { name, path } = this.getNode(node);
+            const logger = new Logger({
+                name
+            });
+            const config = this.options?.projectConfig?.[name];
+            if (config?.skip) {
+                this.visited[node] = true;
+                this.visiting[node] = false;
+                debugLog(`Skip visit node: ${node}`);
+                logger.flushStdout();
+                logger.emitLogOnce('stdout', `skip visit node: ${name}`);
+                return this.start().then(()=>resolve());
+            }
+            this.visiting[node] = true;
+            const child = (0, external_child_process_namespaceObject.spawn)('npm', [
+                'run',
+                config?.command ? config.command : 'dev'
+            ], {
+                cwd: path,
+                env: {
+                    ...process.env,
+                    FORCE_COLOR: '3'
+                },
+                shell: true
+            });
+            child.stdout.on('data', async (data)=>{
+                const stdout = data.toString();
+                if (this.matched[node]) {
+                    const content = data.toString().replace(/\n$/, '');
+                    logger.emitLogOnce('stdout', content);
+                    return;
+                }
+                logger.appendLog('stdout', stdout);
+                const match = config?.match;
+                const matchResult = match ? match(stdout) : stdout.match(RSLIB_READY_MESSAGE) || stdout.match(MODERN_MODULE_READY_MESSAGE) || stdout.match(TSUP_READY_MESSAGE);
+                if (matchResult) {
+                    logger.flushStdout();
+                    this.matched[node] = true;
+                    this.visited[node] = true;
+                    this.visiting[node] = false;
+                    await this.start();
+                    resolve();
+                }
+            });
+            child.stderr.on('data', (data)=>{
+                const stderr = data.toString();
+                logger.emitLogOnce('stderr', stderr);
+            });
+            child.on('close', ()=>{});
+        });
+    }
+    getDependencyGraph() {
+        return this.graph;
+    }
+    getNodes() {
+        return this.graph.nodes();
+    }
+    getEdges() {
+        return this.graph.edges();
+    }
+    getNode(name) {
+        return this.graph.node(name);
+    }
+    getDependents(packageName) {
+        return this.graph.predecessors(packageName);
+    }
+    getDependencies(packageName) {
+        return this.graph.successors(packageName);
+    }
+    constructor(options){
+        workspace_dev_define_property(this, "options", void 0);
+        workspace_dev_define_property(this, "cwd", void 0);
+        workspace_dev_define_property(this, "workspaceFileDir", void 0);
+        workspace_dev_define_property(this, "packages", []);
+        workspace_dev_define_property(this, "graph", void 0);
+        workspace_dev_define_property(this, "visited", void 0);
+        workspace_dev_define_property(this, "visiting", void 0);
+        workspace_dev_define_property(this, "matched", void 0);
+        workspace_dev_define_property(this, "metaData", void 0);
+        this.options = {
+            ignoreSelf: true,
+            ...options
+        };
+        this.cwd = options.cwd || process.cwd();
+        this.workspaceFileDir = options.workspaceFileDir || this.cwd;
+        this.packages = [];
+        this.visited = {};
+        this.visiting = {};
+        this.matched = {};
+        this.graph = new external_graphlib_namespaceObject.Graph({
+            directed: true
+        });
+    }
+}
+function pluginWorkspaceDev(options) {
+    return {
+        name: 'rsbuild-plugin-workspace-dev',
+        async setup (api) {
+            const rootPath = api.context.rootPath;
+            api.onBeforeStartDevServer(async ()=>{
+                const runner = new WorkspaceDevRunner({
+                    cwd: rootPath,
+                    ...options
+                });
+                await runner.init();
+                await runner.start();
+                Logger.setEndBanner();
+            });
+        }
+    };
+}
+exports.WorkspaceDevRunner = __webpack_exports__.WorkspaceDevRunner;
+exports.pluginWorkspaceDev = __webpack_exports__.pluginWorkspaceDev;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "WorkspaceDevRunner",
+    "pluginWorkspaceDev"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { pluginWorkspaceDev } from './plugin.js';
+export { WorkspaceDevRunner, type WorkspaceDevRunnerOptions, } from './workspace-dev.js';

package/dist/index.js

@@ -0,0 +1,268 @@
+import chalk from "chalk";
+import { getPackagesSync } from "@manypkg/get-packages";
+import { spawn } from "child_process";
+import graphlib, { Graph } from "graphlib";
+import path_0 from "path";
+import fs from "fs";
+import json5 from "json5";
+const PACKAGE_JSON = 'package.json';
+const DEBUG_LOG_TITLE = '[Rsbuild Workspace Dev Plugin]: ';
+const RSLIB_READY_MESSAGE = 'build complete, watching for changes';
+const MODERN_MODULE_READY_MESSAGE = 'Watching for file changes';
+const TSUP_READY_MESSAGE = 'Watching for changes in';
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+const logMap = {
+    ["stdout"]: 'log',
+    ["stderr"]: 'error'
+};
+class Logger {
+    appendLog(type, log) {
+        this[type] += log;
+    }
+    emitLog(type) {
+        console[logMap[type]](this[type]);
+    }
+    emitLogOnce(type, log) {
+        const logWithName = `${chalk.hex('#808080').bold(this.name)}: ${log}`;
+        console[logMap[type]](logWithName);
+    }
+    reset(type) {
+        this[type] = '';
+    }
+    setBanner(name) {
+        const startBanner = `\n------------ ${chalk.hex('#c95ab3').bold('log start:')} ${chalk.green(name)} ${'-'.repeat(Math.max(50 - name.toString().length, 5))}`;
+        this.stdout = startBanner + this.stdout;
+    }
+    flushStdout() {
+        this.setBanner(this.name);
+        this.emitLog("stdout");
+    }
+    static setEndBanner() {
+        const endBanner = `------------ ${chalk.hex('#c95ab3').bold('log end:')} ${chalk.green('all sub project have been started.')} ------------\n`;
+        console.log(endBanner);
+    }
+    constructor({ name }){
+        _define_property(this, "stdout", void 0);
+        _define_property(this, "stderr", void 0);
+        _define_property(this, "name", void 0);
+        _define_property(this, "logTitle", void 0);
+        this.name = name;
+        this.stdout = '';
+        this.stderr = '';
+        this.logTitle = DEBUG_LOG_TITLE;
+    }
+}
+const debugLog = (msg)=>{
+    const isDebug = 'rsbuild' === process.env.DEBUG || '*' === process.env.DEBUG;
+    if (isDebug) console.log(DEBUG_LOG_TITLE + msg);
+};
+async function pathExists(path) {
+    return fs.promises.access(path).then(()=>true).catch(()=>false);
+}
+const readJson = async (jsonFileAbsPath)=>{
+    if (!await pathExists(jsonFileAbsPath)) return {};
+    const content = await fs.promises.readFile(jsonFileAbsPath, 'utf-8');
+    const json = json5.parse(content);
+    return json;
+};
+const readPackageJson = async (pkgJsonFilePath)=>readJson(pkgJsonFilePath);
+function workspace_dev_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+class WorkspaceDevRunner {
+    async init() {
+        this.metaData = await readPackageJson(path_0.join(this.cwd, PACKAGE_JSON));
+        this.buildDependencyGraph();
+        debugLog(`Dependency graph:\nnodes: ${this.getNodes().join(', ')}\nedges: ${this.getEdges().map((edge)=>`${edge.v} -> ${edge.w}`).join(', ')}\n`);
+    }
+    buildDependencyGraph() {
+        const { packages } = getPackagesSync(this.workspaceFileDir);
+        const currentPackage = packages.find((pkg)=>pkg.packageJson.name === this.metaData.name);
+        this.packages = packages;
+        const initNode = (pkg)=>{
+            const { packageJson, dir } = pkg;
+            const { name, dependencies, devDependencies, peerDependencies } = packageJson;
+            const node = {
+                name,
+                packageJson,
+                path: dir
+            };
+            this.graph.setNode(name, node);
+            this.visited[name] = false;
+            this.visiting[name] = false;
+            this.matched[name] = false;
+            const packageName = name;
+            const deps = {
+                ...dependencies,
+                ...devDependencies,
+                ...peerDependencies
+            };
+            for (const depName of Object.keys(deps)){
+                const isInternalDep = this.packages.some((p)=>p.packageJson.name === depName);
+                if (isInternalDep) {
+                    this.graph.setEdge(packageName, depName);
+                    this.checkGraph();
+                    const depPackage = packages.find((pkg)=>pkg.packageJson.name === depName);
+                    if (!this.getNode(depName)) initNode(depPackage);
+                }
+            }
+        };
+        initNode(currentPackage);
+    }
+    checkGraph() {
+        const cycles = graphlib.alg.findCycles(this.graph);
+        const nonSelfCycles = cycles.filter((c)=>1 !== c.length);
+        debugLog(`cycles check: ${cycles}`);
+        if (nonSelfCycles.length) throw new Error(`${DEBUG_LOG_TITLE}Dependency graph do not allow cycles.`);
+    }
+    async start() {
+        const promises = [];
+        const allNodes = this.getNodes();
+        const filterSelfNodes = allNodes.filter((node)=>node !== this.metaData.name);
+        const nodes = this.options.ignoreSelf ? filterSelfNodes : allNodes;
+        for (const node of nodes){
+            const dependencies = this.getDependencies(node) || [];
+            const canStart = dependencies.every((dep)=>{
+                const selfStart = node === dep;
+                const isVisiting = this.visiting[dep];
+                const isVisited = selfStart || this.visited[dep];
+                return isVisited && !isVisiting;
+            });
+            if (canStart && !this.visited[node] && !this.visiting[node]) {
+                debugLog(`Start visit node: ${node}`);
+                const visitPromise = this.visitNodes(node);
+                promises.push(visitPromise);
+            }
+        }
+        await Promise.all(promises);
+    }
+    visitNodes(node) {
+        return new Promise((resolve)=>{
+            const { name, path } = this.getNode(node);
+            const logger = new Logger({
+                name
+            });
+            const config = this.options?.projectConfig?.[name];
+            if (config?.skip) {
+                this.visited[node] = true;
+                this.visiting[node] = false;
+                debugLog(`Skip visit node: ${node}`);
+                logger.flushStdout();
+                logger.emitLogOnce('stdout', `skip visit node: ${name}`);
+                return this.start().then(()=>resolve());
+            }
+            this.visiting[node] = true;
+            const child = spawn('npm', [
+                'run',
+                config?.command ? config.command : 'dev'
+            ], {
+                cwd: path,
+                env: {
+                    ...process.env,
+                    FORCE_COLOR: '3'
+                },
+                shell: true
+            });
+            child.stdout.on('data', async (data)=>{
+                const stdout = data.toString();
+                if (this.matched[node]) {
+                    const content = data.toString().replace(/\n$/, '');
+                    logger.emitLogOnce('stdout', content);
+                    return;
+                }
+                logger.appendLog('stdout', stdout);
+                const match = config?.match;
+                const matchResult = match ? match(stdout) : stdout.match(RSLIB_READY_MESSAGE) || stdout.match(MODERN_MODULE_READY_MESSAGE) || stdout.match(TSUP_READY_MESSAGE);
+                if (matchResult) {
+                    logger.flushStdout();
+                    this.matched[node] = true;
+                    this.visited[node] = true;
+                    this.visiting[node] = false;
+                    await this.start();
+                    resolve();
+                }
+            });
+            child.stderr.on('data', (data)=>{
+                const stderr = data.toString();
+                logger.emitLogOnce('stderr', stderr);
+            });
+            child.on('close', ()=>{});
+        });
+    }
+    getDependencyGraph() {
+        return this.graph;
+    }
+    getNodes() {
+        return this.graph.nodes();
+    }
+    getEdges() {
+        return this.graph.edges();
+    }
+    getNode(name) {
+        return this.graph.node(name);
+    }
+    getDependents(packageName) {
+        return this.graph.predecessors(packageName);
+    }
+    getDependencies(packageName) {
+        return this.graph.successors(packageName);
+    }
+    constructor(options){
+        workspace_dev_define_property(this, "options", void 0);
+        workspace_dev_define_property(this, "cwd", void 0);
+        workspace_dev_define_property(this, "workspaceFileDir", void 0);
+        workspace_dev_define_property(this, "packages", []);
+        workspace_dev_define_property(this, "graph", void 0);
+        workspace_dev_define_property(this, "visited", void 0);
+        workspace_dev_define_property(this, "visiting", void 0);
+        workspace_dev_define_property(this, "matched", void 0);
+        workspace_dev_define_property(this, "metaData", void 0);
+        this.options = {
+            ignoreSelf: true,
+            ...options
+        };
+        this.cwd = options.cwd || process.cwd();
+        this.workspaceFileDir = options.workspaceFileDir || this.cwd;
+        this.packages = [];
+        this.visited = {};
+        this.visiting = {};
+        this.matched = {};
+        this.graph = new Graph({
+            directed: true
+        });
+    }
+}
+function pluginWorkspaceDev(options) {
+    return {
+        name: 'rsbuild-plugin-workspace-dev',
+        async setup (api) {
+            const rootPath = api.context.rootPath;
+            api.onBeforeStartDevServer(async ()=>{
+                const runner = new WorkspaceDevRunner({
+                    cwd: rootPath,
+                    ...options
+                });
+                await runner.init();
+                await runner.start();
+                Logger.setEndBanner();
+            });
+        }
+    };
+}
+export { WorkspaceDevRunner, pluginWorkspaceDev };

package/dist/logger.d.ts

@@ -0,0 +1,17 @@
+export declare class Logger {
+    stdout: string;
+    stderr: string;
+    name: string;
+    logTitle: string;
+    constructor({ name, }: {
+        name: string;
+    });
+    appendLog(type: 'stdout' | 'stderr', log: string): void;
+    emitLog(type: 'stdout' | 'stderr'): void;
+    emitLogOnce(type: 'stdout' | 'stderr', log: string): void;
+    reset(type: 'stdout' | 'stderr'): void;
+    setBanner(name: string): void;
+    flushStdout(): void;
+    static setEndBanner(): void;
+}
+export declare const debugLog: (msg: string) => void;

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { RsbuildPlugin } from '@rsbuild/core';
+import { type WorkspaceDevRunnerOptions } from './workspace-dev.js';
+export declare function pluginWorkspaceDev(options?: WorkspaceDevRunnerOptions): RsbuildPlugin;

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Package } from '@manypkg/get-packages';
+export declare const readJson: <T>(jsonFileAbsPath: string) => Promise<T>;
+export declare const readPackageJson: (pkgJsonFilePath: string) => Promise<Package["packageJson"]>;

package/dist/workspace-dev.d.ts

@@ -0,0 +1,34 @@
+import graphlib from 'graphlib';
+export interface WorkspaceDevRunnerOptions {
+    cwd?: string;
+    workspaceFileDir?: string;
+    projectConfig?: Record<string, {
+        match?: (stdout: string) => boolean;
+        command?: string;
+        skip?: boolean;
+    }>;
+    ignoreSelf?: boolean;
+}
+export declare class WorkspaceDevRunner {
+    private options;
+    private cwd;
+    private workspaceFileDir;
+    private packages;
+    private graph;
+    private visited;
+    private visiting;
+    private matched;
+    private metaData;
+    constructor(options: WorkspaceDevRunnerOptions);
+    init(): Promise<void>;
+    buildDependencyGraph(): void;
+    checkGraph(): void;
+    start(): Promise<void>;
+    visitNodes(node: string): Promise<void>;
+    getDependencyGraph(): graphlib.Graph;
+    getNodes(): string[];
+    getEdges(): graphlib.Edge[];
+    getNode(name: string): any;
+    getDependents(packageName: string): void | string[];
+    getDependencies(packageName: string): void | string[];
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "rsbuild-plugin-workspace-dev",
+  "version": "0.0.1-beta.0",
+  "description": "An Rsbuild plugin to provides workspace recursive dev functionality for Monorepo topologies.",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-workspace-dev",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
+  "dependencies": {
+    "fast-glob": "^3.3.3",
+    "json5": "^2.2.3",
+    "yaml": "^2.8.1",
+    "@manypkg/get-packages": "^3.1.0",
+    "graphlib": "^2.1.8",
+    "chalk": "^5.6.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.3",
+    "@playwright/test": "^1.55.1",
+    "@rsbuild/core": "^1.6.1",
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rsbuild/plugin-type-check": "^1.3.0",
+    "@rslib/core": "^0.17.0",
+    "@types/node": "^22.18.8",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "playwright": "^1.55.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "simple-git-hooks": "^2.13.1",
+    "typescript": "^5.9.3",
+    "@types/graphlib": "^2.1.12",
+    "@rstest/core": "^0.6.6"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "1.x"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "test": "pnpm run test:unit && pnpm run test:e2e",
+    "test:unit": "rstest --config=./test/rstest.config.ts",
+    "test:e2e": "playwright test --config=./test/playwright.config.ts",
+    "bump": "npx bumpp"
+  }
+}