slidev-workspace 0.7.2 → 0.8.0

package/dist/cli.js

@@ -4,6 +4,7 @@ import { dirname, join, resolve } from "node:path";
 import { existsSync, mkdirSync, readdirSync } from "node:fs";
 import { cp, rm } from "node:fs/promises";
 import { execSync } from "node:child_process";
+import { Command } from "commander";
 import { build, createServer } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
@@ -124,83 +125,114 @@ if (import.meta.url === `file://${process.argv[1]}`) {
 	console.log(JSON.stringify(slides, null, 2));
 }
 
+//#endregion
+//#region src/scripts/collectSlides.ts
+function collectSlides({ slidesDirs, names = [], exclude = [] }) {
+	const entries = [];
+	for (const slidesDir of slidesDirs) {
+		if (!existsSync(slidesDir)) {
+			console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+			continue;
+		}
+		if (names.length > 0) {
+			for (const slideName of names) {
+				if (exclude.includes(slideName)) continue;
+				const slideDir = join(slidesDir, slideName);
+				if (!existsSync(slideDir)) continue;
+				entries.push({
+					slidesDir,
+					slideName,
+					slideDir
+				});
+			}
+			continue;
+		}
+		const slideNames = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !exclude.includes(dirent.name)).map((dirent) => dirent.name);
+		for (const slideName of slideNames) {
+			const slideDir = join(slidesDir, slideName);
+			entries.push({
+				slidesDir,
+				slideName,
+				slideDir
+			});
+		}
+	}
+	return entries;
+}
+
 //#endregion
 //#region src/scripts/devServer.ts
 const runningServers = new Map();
-async function startAllSlidesDevServer(workspaceCwd) {
-	const cwd = workspaceCwd || process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+async function startAllSlidesDevServer({ basePort = 3001 } = {}) {
+	const cwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
 	const config = loadConfig(cwd);
 	const slidesDirs = resolveSlidesDirs(config, cwd);
-	let currentPort = 3001;
+	let currentPort = basePort;
 	const devServers = [];
 	console.log("🚀 Starting Slidev dev servers for all slides...");
 	console.log("📁 Working directory:", cwd);
 	console.log("📂 Slides directories found:", slidesDirs);
-	for (const slidesDir of slidesDirs) {
-		if (!existsSync$1(slidesDir)) {
-			console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+	const slides = collectSlides({
+		slidesDirs,
+		exclude: config.exclude
+	});
+	for (const { slideDir, slideName } of slides) {
+		const packageJsonPath = join$1(slideDir, "package.json");
+		const slideKey = slideDir;
+		if (runningServers.has(slideKey)) {
+			console.log(`⏭️ ${slideName} dev server already running, skipping...`);
+			devServers.push(runningServers.get(slideKey));
 			continue;
 		}
-		const slides = readdirSync$1(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
-		for (const slideName of slides) {
-			const slideDir = join$1(slidesDir, slideName);
-			const packageJsonPath = join$1(slideDir, "package.json");
-			const slideKey = slideDir;
-			if (runningServers.has(slideKey)) {
-				console.log(`⏭️ ${slideName} dev server already running, skipping...`);
-				devServers.push(runningServers.get(slideKey));
-				continue;
-			}
-			if (!existsSync$1(packageJsonPath)) {
-				console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
-				continue;
-			}
-			const nodeModulesPath = join$1(slideDir, "node_modules");
-			if (!existsSync$1(nodeModulesPath)) {
-				console.warn(`⚠️ Skipping ${slideName}: dependencies not installed (run pnpm install)`);
-				continue;
-			}
-			console.log(`📦 Starting Slidev dev server for ${slideName} on port ${currentPort}...`);
-			try {
-				const devProcess = spawn("pnpm", [
-					"run",
-					"dev",
-					"--port",
-					currentPort.toString(),
-					"--open",
-					"false"
-				], {
-					cwd: slideDir,
-					stdio: [
-						"pipe",
-						"pipe",
-						"pipe"
-					],
-					detached: false,
-					env: {
-						...process.env,
-						PATH: process.env.PATH
-					},
-					shell: true
-				});
-				devProcess.stdout?.on("data", (data) => {
-					const output = data.toString();
-					if (output.includes("Local:") || output.includes("ready")) console.log(`✅ ${slideName} dev server ready on port ${currentPort}`);
-				});
-				devProcess.stderr?.on("data", (data) => {
-					console.error(`❌ ${slideName} dev server error:`, data.toString());
-				});
-				const serverInfo = {
-					name: slideName,
-					port: currentPort,
-					process: devProcess
-				};
-				devServers.push(serverInfo);
-				runningServers.set(slideKey, serverInfo);
-				currentPort++;
-			} catch (error) {
-				console.error(`❌ Failed to start dev server for ${slideName}:`, error);
-			}
+		if (!existsSync$1(packageJsonPath)) {
+			console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
+			continue;
+		}
+		const nodeModulesPath = join$1(slideDir, "node_modules");
+		if (!existsSync$1(nodeModulesPath)) {
+			console.warn(`⚠️ Skipping ${slideName}: dependencies not installed (run pnpm install)`);
+			continue;
+		}
+		console.log(`📦 Starting Slidev dev server for ${slideName} on port ${currentPort}...`);
+		try {
+			const devProcess = spawn("pnpm", [
+				"run",
+				"dev",
+				"--port",
+				currentPort.toString(),
+				"--open",
+				"false"
+			], {
+				cwd: slideDir,
+				stdio: [
+					"pipe",
+					"pipe",
+					"pipe"
+				],
+				detached: false,
+				env: {
+					...process.env,
+					PATH: process.env.PATH
+				},
+				shell: true
+			});
+			devProcess.stdout?.on("data", (data) => {
+				const output = data.toString();
+				if (output.includes("Local:") || output.includes("ready")) console.log(`✅ ${slideName} dev server ready on port ${currentPort}`);
+			});
+			devProcess.stderr?.on("data", (data) => {
+				console.error(`❌ ${slideName} dev server error:`, data.toString());
+			});
+			const serverInfo = {
+				name: slideName,
+				port: currentPort,
+				process: devProcess
+			};
+			devServers.push(serverInfo);
+			runningServers.set(slideKey, serverInfo);
+			currentPort++;
+		} catch (error) {
+			console.error(`❌ Failed to start dev server for ${slideName}:`, error);
 		}
 	}
 	return devServers;
@@ -242,8 +274,9 @@ async function transformIndexHtml(html) {
 
 //#endregion
 //#region src/vite/plugin-slides.ts
-function slidesPlugin() {
+function slidesPlugin(options = {}) {
 	let devServers = [];
+	const devServerBasePort = options.devServerBasePort ?? 3001;
 	return {
 		name: "vite-plugin-slides",
 		async transformIndexHtml(html) {
@@ -253,23 +286,23 @@ function slidesPlugin() {
 			try {
 				const config = loadConfig();
 				const slidesDirs = resolveSlidesDirs(config);
-				for (const slidesDir of slidesDirs) {
-					if (!existsSync$1(slidesDir)) continue;
-					const slideDirs = readdirSync$1(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !(config.exclude || []).includes(dirent.name)).map((dirent) => dirent.name);
-					for (const slideDir of slideDirs) {
-						const slideDistPath = join$1(slidesDir, slideDir, "dist");
-						const assetsPath = join$1(slideDistPath, "assets");
-						if (!existsSync$1(assetsPath)) continue;
-						const assetFiles = readdirSync$1(assetsPath);
-						const ogImageFile = assetFiles.find((file) => /^og-image-[a-zA-Z0-9]+\.png$/.test(file));
-						if (ogImageFile) {
-							const sourceFile = join$1(assetsPath, ogImageFile);
-							const destFile = join$1(slideDistPath, "og-image.png");
-							try {
-								cpSync(sourceFile, destFile, { force: true });
-							} catch (error) {
-								console.warn(`⚠ Failed to copy og-image for ${slideDir}:`, error);
-							}
+				const slides = collectSlides({
+					slidesDirs,
+					exclude: config.exclude
+				});
+				for (const { slideDir } of slides) {
+					const slideDistPath = join$1(slideDir, "dist");
+					const assetsPath = join$1(slideDistPath, "assets");
+					if (!existsSync$1(assetsPath)) continue;
+					const assetFiles = readdirSync$1(assetsPath);
+					const ogImageFile = assetFiles.find((file) => /^og-image-[a-zA-Z0-9]+\.png$/.test(file));
+					if (ogImageFile) {
+						const sourceFile = join$1(assetsPath, ogImageFile);
+						const destFile = join$1(slideDistPath, "og-image.png");
+						try {
+							cpSync(sourceFile, destFile, { force: true });
+						} catch (error) {
+							console.warn(`⚠ Failed to copy og-image for ${slideDir}:`, error);
 						}
 					}
 				}
@@ -282,7 +315,7 @@ function slidesPlugin() {
 			const config = loadConfig();
 			const slidesDirs = resolveSlidesDirs(config);
 			try {
-				devServers = await startAllSlidesDevServer();
+				devServers = await startAllSlidesDevServer({ basePort: devServerBasePort });
 			} catch (error) {
 				console.error("❌ Failed to start slides dev servers:", error);
 			}
@@ -337,25 +370,30 @@ export default configData;`;
 //#region src/cli.ts
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const args = process.argv.slice(2);
-const command = args[0];
-const dirsArg = args[1];
 const packageRoot = join(__dirname, "..");
-function createViteConfig() {
+const DEFAULT_PREVIEW_PORT = 3e3;
+function parsePortOption(value) {
+	const port = Number(value);
+	if (!Number.isInteger(port) || port <= 0) throw new Error(`Invalid port: ${value}`);
+	return port;
+}
+function createViteConfig(previewPort = DEFAULT_PREVIEW_PORT) {
 	const workspaceCwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
 	const config = loadConfig(workspaceCwd);
+	const devServerBasePort = previewPort + 1;
 	return {
 		root: resolve(packageRoot, "src/preview"),
 		base: config.baseUrl,
 		plugins: [
 			vue(),
 			tailwindcss(),
-			slidesPlugin()
+			slidesPlugin({ devServerBasePort })
 		],
 		resolve: { alias: { "@": resolve(packageRoot, "src/preview") } },
+		define: { __SLIDEV_WORKSPACE_DEV_PORT_BASE__: devServerBasePort },
 		build: { outDir: resolve(workspaceCwd, config.outputDir) },
 		server: {
-			port: 3e3,
+			port: previewPort,
 			open: true
 		}
 	};
@@ -365,34 +403,31 @@ async function buildSlides(names) {
 	const config = loadConfig(workspaceCwd);
 	const slidesDirs = resolveSlidesDirs(config, workspaceCwd);
 	console.log(names ? `🔨 Building slides: ${names.join(", ")}...` : "🔨 Building all slides...");
-	for (const slidesDir of slidesDirs) {
-		if (!existsSync(slidesDir)) {
-			console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+	const slides = collectSlides({
+		slidesDirs,
+		names,
+		exclude: config.exclude
+	});
+	for (const { slideDir, slideName } of slides) {
+		const packageJsonPath = join(slideDir, "package.json");
+		if (!existsSync(packageJsonPath)) {
+			console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
 			continue;
 		}
-		const slides = names ? names.filter((name) => existsSync(join(slidesDir, name))) : readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
-		for (const slideName of slides) {
-			const slideDir = join(slidesDir, slideName);
-			const packageJsonPath = join(slideDir, "package.json");
-			if (!existsSync(packageJsonPath)) {
-				console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
-				continue;
-			}
-			console.log(`📦 Building slide: ${slideName}`);
-			try {
-				const baseUrl = config.baseUrl.endsWith("/") ? config.baseUrl : config.baseUrl + "/";
-				const subDir = slideDir.startsWith(workspaceCwd) ? slideDir.replace(workspaceCwd, "").replace(/^\//, "") : slideDir;
-				const buildCmd = `pnpm --filter "./${subDir}" run build --base ${baseUrl}${slideName}/`;
-				console.log(buildCmd);
-				execSync(buildCmd, {
-					cwd: workspaceCwd,
-					stdio: "inherit"
-				});
-				console.log(`✅ Built slide: ${slideName}`);
-			} catch (error) {
-				console.error(`❌ Failed to build slide ${slideName}:`, error);
-				process.exit(1);
-			}
+		console.log(`📦 Building slide: ${slideName}`);
+		try {
+			const baseUrl = config.baseUrl.endsWith("/") ? config.baseUrl : config.baseUrl + "/";
+			const subDir = slideDir.startsWith(workspaceCwd) ? slideDir.replace(workspaceCwd, "").replace(/^\//, "") : slideDir;
+			const buildCmd = `pnpm --filter "./${subDir}" run build --base ${baseUrl}${slideName}/`;
+			console.log(buildCmd);
+			execSync(buildCmd, {
+				cwd: workspaceCwd,
+				stdio: "inherit"
+			});
+			console.log(`✅ Built slide: ${slideName}`);
+		} catch (error) {
+			console.error(`❌ Failed to build slide ${slideName}:`, error);
+			process.exit(1);
 		}
 	}
 }
@@ -407,28 +442,24 @@ async function exportOgImages() {
 			stdio: "inherit"
 		});
 		console.log("📦 Copying exported images to og-image.png...");
-		for (const slidesDir of slidesDirs) {
-			if (!existsSync(slidesDir)) {
-				console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
-				continue;
-			}
-			const slides = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
-			for (const slideName of slides) {
-				const slideDir = join(slidesDir, slideName);
-				const packageJsonPath = join(slideDir, "package.json");
-				if (!existsSync(packageJsonPath)) continue;
-				const exportedFile = join(slideDir, "slides-export", "1.png");
-				const targetFile = join(slideDir, "og-image.png");
-				const exportDir = join(slideDir, "slides-export");
-				if (existsSync(exportedFile)) {
-					await cp(exportedFile, targetFile);
-					console.log(`✅ Generated OG image for: ${slideName}`);
-					await rm(exportDir, {
-						recursive: true,
-						force: true
-					});
-				} else console.warn(`⚠️ Export file not found for ${slideName}: ${exportedFile}`);
-			}
+		const slides = collectSlides({
+			slidesDirs,
+			exclude: config.exclude
+		});
+		for (const { slideDir, slideName } of slides) {
+			const packageJsonPath = join(slideDir, "package.json");
+			if (!existsSync(packageJsonPath)) continue;
+			const exportedFile = join(slideDir, "slides-export", "1.png");
+			const targetFile = join(slideDir, "og-image.png");
+			const exportDir = join(slideDir, "slides-export");
+			if (existsSync(exportedFile)) {
+				await cp(exportedFile, targetFile);
+				console.log(`✅ Generated OG image for: ${slideName}`);
+				await rm(exportDir, {
+					recursive: true,
+					force: true
+				});
+			} else console.warn(`⚠️ Export file not found for ${slideName}: ${exportedFile}`);
 		}
 		console.log("✅ All OG images exported successfully!");
 	} catch (error) {
@@ -443,16 +474,17 @@ async function copySlidesToOutputDir(names) {
 	const deployDir = resolve(workspaceCwd, config.outputDir);
 	console.log(`📁 Copying slide builds into ${deployDir}...`);
 	if (!existsSync(deployDir)) mkdirSync(deployDir, { recursive: true });
-	for (const slidesDir of slidesDirs) {
-		if (!existsSync(slidesDir)) continue;
-		const slides = names ? names.filter((name) => existsSync(join(slidesDir, name))) : readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
-		for (const slideName of slides) {
-			const slideDistDir = join(slidesDir, slideName, "dist");
-			const targetDir = join(deployDir, slideName);
-			if (existsSync(slideDistDir)) {
-				console.log(`📋 Copying ${slideName}...`);
-				await cp(slideDistDir, targetDir, { recursive: true });
-			}
+	const slides = collectSlides({
+		slidesDirs,
+		names,
+		exclude: config.exclude
+	});
+	for (const { slideDir, slideName } of slides) {
+		const slideDistDir = join(slideDir, "dist");
+		const targetDir = join(deployDir, slideName);
+		if (existsSync(slideDistDir)) {
+			console.log(`📋 Copying ${slideName}...`);
+			await cp(slideDistDir, targetDir, { recursive: true });
 		}
 	}
 	console.log(`✅ All slide assets copied into ${deployDir}!`);
@@ -470,10 +502,10 @@ async function runViteBuild(names) {
 		process.exit(1);
 	}
 }
-async function runVitePreview() {
+async function runVitePreview(previewPort) {
 	try {
 		console.log("🚀 Starting Slidev Workspace development server...");
-		const config = createViteConfig();
+		const config = createViteConfig(previewPort);
 		const server = await createServer(config);
 		await server.listen();
 		server.printUrls();
@@ -491,13 +523,16 @@ Usage:
 
 Commands:
   dev                  Start the development server
-  build [names]        Build the project for production
-                       [names]: Optional comma-separated list of slide folder names to build
+  build [names]        Build the preview app and selected slides (or all if omitted)
+                       [names]: Optional slide folder names (comma-separated or space-separated)
   export-og            Export OG images for all slides
   help                 Show this help message
+Options:
+  --port, -p <number>  Set the preview server port (dev/preview only)
 
 Examples:
   slidev-workspace dev                                    # Start development server
+  slidev-workspace dev --port 3030                        # Start dev server on custom port
   slidev-workspace build                                  # Build all slides and preview app
   slidev-workspace build slide1,slide2                    # Build only specific slides by name
   slidev-workspace export-og                              # Export OG images for all slides
@@ -508,35 +543,37 @@ Configuration:
 For more information, visit: https://github.com/author/slidev-workspace
 `);
 }
+function setWorkspaceCwd() {
+	process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
+}
+function parseNames(names) {
+	if (!names || names.length === 0) return void 0;
+	const parsed = names.flatMap((name) => name.split(",")).map((name) => name.trim()).filter(Boolean);
+	return parsed.length > 0 ? parsed : void 0;
+}
 async function main() {
-	switch (command) {
-		case "dev":
-		case "preview":
-			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
-			await runVitePreview();
-			break;
-		case "build": {
-			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
-			const names = dirsArg ? dirsArg.split(",").map((d) => d.trim()) : void 0;
-			await runViteBuild(names);
-			break;
-		}
-		case "export-og":
-			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
-			await exportOgImages();
-			break;
-		case "help":
-		case "--help":
-		case "-h":
-			showHelp();
-			break;
-		default: if (!command) showHelp();
-		else {
-			console.error(`Unknown command: ${command}`);
-			console.error("Run \"slidev-workspace help\" for available commands.");
-			process.exit(1);
-		}
+	const program = new Command();
+	program.name("slidev-workspace").description("A tool for managing multiple Slidev presentations with a workspace preview app").showHelpAfterError();
+	program.command("dev").alias("preview").description("Start the development server").option("-p, --port <number>", "Set the preview server port", (value) => parsePortOption(value)).action(async (options) => {
+		setWorkspaceCwd();
+		await runVitePreview(options.port);
+	});
+	program.command("build").description("Build the preview app and selected slides (or all if omitted)").argument("[names...]", "Optional slide folder names (comma-separated or space-separated)").action(async (names) => {
+		setWorkspaceCwd();
+		await runViteBuild(parseNames(names));
+	});
+	program.command("export-og").description("Export OG images for all slides").action(async () => {
+		setWorkspaceCwd();
+		await exportOgImages();
+	});
+	program.command("help").description("Show this help message").action(() => {
+		showHelp();
+	});
+	if (process.argv.length <= 2) {
+		program.outputHelp();
+		return;
 	}
+	await program.parseAsync(process.argv);
 }
 main().catch((error) => {
 	console.error("❌ An error occurred:", error);

package/dist/index.js

@@ -94,6 +94,7 @@ function resolveImageUrl(slide, domain) {
 function useSlides() {
 	const slidesData = ref([]);
 	const isLoading = ref(true);
+	const devServerBasePort = typeof __SLIDEV_WORKSPACE_DEV_PORT_BASE__ === "number" ? __SLIDEV_WORKSPACE_DEV_PORT_BASE__ : 3001;
 	const loadSlidesData = async () => {
 		try {
 			const module = await import("slidev:content");
@@ -109,7 +110,7 @@ function useSlides() {
 	const slides = computed(() => {
 		if (!slidesData.value || slidesData.value.length === 0) return [];
 		return slidesData.value.map((slide, index) => {
-			const port = 3001 + index;
+			const port = devServerBasePort + index;
 			const devServerUrl = `http://localhost:${port}`;
 			const domain = IS_DEVELOPMENT ? devServerUrl : window.location.origin;
 			const imageUrl = resolveImageUrl(slide, domain);

package/dist/plugin-slides.d.ts

@@ -1,6 +1,9 @@
 import { Plugin } from "vite";
 
 //#region src/vite/plugin-slides.d.ts
-declare function slidesPlugin(): Plugin;
+interface SlidesPluginOptions {
+  devServerBasePort?: number;
+}
+declare function slidesPlugin(options?: SlidesPluginOptions): Plugin;
 //#endregion
 export { slidesPlugin };

package/dist/plugin-slides.js

@@ -2,6 +2,8 @@ import { cpSync, existsSync, readFileSync, readdirSync, watch } from "fs";
 import { basename, join, resolve } from "path";
 import { parse } from "yaml";
 import { spawn } from "child_process";
+import { existsSync as existsSync$1, readdirSync as readdirSync$1 } from "node:fs";
+import { join as join$1 } from "node:path";
 import { createHead, transformHtmlTemplate } from "unhead/server";
 
 //#region src/scripts/config.ts
@@ -115,83 +117,114 @@ if (import.meta.url === `file://${process.argv[1]}`) {
 	console.log(JSON.stringify(slides, null, 2));
 }
 
+//#endregion
+//#region src/scripts/collectSlides.ts
+function collectSlides({ slidesDirs, names = [], exclude = [] }) {
+	const entries = [];
+	for (const slidesDir of slidesDirs) {
+		if (!existsSync$1(slidesDir)) {
+			console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+			continue;
+		}
+		if (names.length > 0) {
+			for (const slideName of names) {
+				if (exclude.includes(slideName)) continue;
+				const slideDir = join$1(slidesDir, slideName);
+				if (!existsSync$1(slideDir)) continue;
+				entries.push({
+					slidesDir,
+					slideName,
+					slideDir
+				});
+			}
+			continue;
+		}
+		const slideNames = readdirSync$1(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !exclude.includes(dirent.name)).map((dirent) => dirent.name);
+		for (const slideName of slideNames) {
+			const slideDir = join$1(slidesDir, slideName);
+			entries.push({
+				slidesDir,
+				slideName,
+				slideDir
+			});
+		}
+	}
+	return entries;
+}
+
 //#endregion
 //#region src/scripts/devServer.ts
 const runningServers = new Map();
-async function startAllSlidesDevServer(workspaceCwd) {
-	const cwd = workspaceCwd || process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+async function startAllSlidesDevServer({ basePort = 3001 } = {}) {
+	const cwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
 	const config = loadConfig(cwd);
 	const slidesDirs = resolveSlidesDirs(config, cwd);
-	let currentPort = 3001;
+	let currentPort = basePort;
 	const devServers = [];
 	console.log("🚀 Starting Slidev dev servers for all slides...");
 	console.log("📁 Working directory:", cwd);
 	console.log("📂 Slides directories found:", slidesDirs);
-	for (const slidesDir of slidesDirs) {
-		if (!existsSync(slidesDir)) {
-			console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+	const slides = collectSlides({
+		slidesDirs,
+		exclude: config.exclude
+	});
+	for (const { slideDir, slideName } of slides) {
+		const packageJsonPath = join(slideDir, "package.json");
+		const slideKey = slideDir;
+		if (runningServers.has(slideKey)) {
+			console.log(`⏭️ ${slideName} dev server already running, skipping...`);
+			devServers.push(runningServers.get(slideKey));
 			continue;
 		}
-		const slides = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
-		for (const slideName of slides) {
-			const slideDir = join(slidesDir, slideName);
-			const packageJsonPath = join(slideDir, "package.json");
-			const slideKey = slideDir;
-			if (runningServers.has(slideKey)) {
-				console.log(`⏭️ ${slideName} dev server already running, skipping...`);
-				devServers.push(runningServers.get(slideKey));
-				continue;
-			}
-			if (!existsSync(packageJsonPath)) {
-				console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
-				continue;
-			}
-			const nodeModulesPath = join(slideDir, "node_modules");
-			if (!existsSync(nodeModulesPath)) {
-				console.warn(`⚠️ Skipping ${slideName}: dependencies not installed (run pnpm install)`);
-				continue;
-			}
-			console.log(`📦 Starting Slidev dev server for ${slideName} on port ${currentPort}...`);
-			try {
-				const devProcess = spawn("pnpm", [
-					"run",
-					"dev",
-					"--port",
-					currentPort.toString(),
-					"--open",
-					"false"
-				], {
-					cwd: slideDir,
-					stdio: [
-						"pipe",
-						"pipe",
-						"pipe"
-					],
-					detached: false,
-					env: {
-						...process.env,
-						PATH: process.env.PATH
-					},
-					shell: true
-				});
-				devProcess.stdout?.on("data", (data) => {
-					const output = data.toString();
-					if (output.includes("Local:") || output.includes("ready")) console.log(`✅ ${slideName} dev server ready on port ${currentPort}`);
-				});
-				devProcess.stderr?.on("data", (data) => {
-					console.error(`❌ ${slideName} dev server error:`, data.toString());
-				});
-				const serverInfo = {
-					name: slideName,
-					port: currentPort,
-					process: devProcess
-				};
-				devServers.push(serverInfo);
-				runningServers.set(slideKey, serverInfo);
-				currentPort++;
-			} catch (error) {
-				console.error(`❌ Failed to start dev server for ${slideName}:`, error);
-			}
+		if (!existsSync(packageJsonPath)) {
+			console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
+			continue;
+		}
+		const nodeModulesPath = join(slideDir, "node_modules");
+		if (!existsSync(nodeModulesPath)) {
+			console.warn(`⚠️ Skipping ${slideName}: dependencies not installed (run pnpm install)`);
+			continue;
+		}
+		console.log(`📦 Starting Slidev dev server for ${slideName} on port ${currentPort}...`);
+		try {
+			const devProcess = spawn("pnpm", [
+				"run",
+				"dev",
+				"--port",
+				currentPort.toString(),
+				"--open",
+				"false"
+			], {
+				cwd: slideDir,
+				stdio: [
+					"pipe",
+					"pipe",
+					"pipe"
+				],
+				detached: false,
+				env: {
+					...process.env,
+					PATH: process.env.PATH
+				},
+				shell: true
+			});
+			devProcess.stdout?.on("data", (data) => {
+				const output = data.toString();
+				if (output.includes("Local:") || output.includes("ready")) console.log(`✅ ${slideName} dev server ready on port ${currentPort}`);
+			});
+			devProcess.stderr?.on("data", (data) => {
+				console.error(`❌ ${slideName} dev server error:`, data.toString());
+			});
+			const serverInfo = {
+				name: slideName,
+				port: currentPort,
+				process: devProcess
+			};
+			devServers.push(serverInfo);
+			runningServers.set(slideKey, serverInfo);
+			currentPort++;
+		} catch (error) {
+			console.error(`❌ Failed to start dev server for ${slideName}:`, error);
 		}
 	}
 	return devServers;
@@ -233,8 +266,9 @@ async function transformIndexHtml(html) {
 
 //#endregion
 //#region src/vite/plugin-slides.ts
-function slidesPlugin() {
+function slidesPlugin(options = {}) {
 	let devServers = [];
+	const devServerBasePort = options.devServerBasePort ?? 3001;
 	return {
 		name: "vite-plugin-slides",
 		async transformIndexHtml(html) {
@@ -244,23 +278,23 @@ function slidesPlugin() {
 			try {
 				const config = loadConfig();
 				const slidesDirs = resolveSlidesDirs(config);
-				for (const slidesDir of slidesDirs) {
-					if (!existsSync(slidesDir)) continue;
-					const slideDirs = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !(config.exclude || []).includes(dirent.name)).map((dirent) => dirent.name);
-					for (const slideDir of slideDirs) {
-						const slideDistPath = join(slidesDir, slideDir, "dist");
-						const assetsPath = join(slideDistPath, "assets");
-						if (!existsSync(assetsPath)) continue;
-						const assetFiles = readdirSync(assetsPath);
-						const ogImageFile = assetFiles.find((file) => /^og-image-[a-zA-Z0-9]+\.png$/.test(file));
-						if (ogImageFile) {
-							const sourceFile = join(assetsPath, ogImageFile);
-							const destFile = join(slideDistPath, "og-image.png");
-							try {
-								cpSync(sourceFile, destFile, { force: true });
-							} catch (error) {
-								console.warn(`⚠ Failed to copy og-image for ${slideDir}:`, error);
-							}
+				const slides = collectSlides({
+					slidesDirs,
+					exclude: config.exclude
+				});
+				for (const { slideDir } of slides) {
+					const slideDistPath = join(slideDir, "dist");
+					const assetsPath = join(slideDistPath, "assets");
+					if (!existsSync(assetsPath)) continue;
+					const assetFiles = readdirSync(assetsPath);
+					const ogImageFile = assetFiles.find((file) => /^og-image-[a-zA-Z0-9]+\.png$/.test(file));
+					if (ogImageFile) {
+						const sourceFile = join(assetsPath, ogImageFile);
+						const destFile = join(slideDistPath, "og-image.png");
+						try {
+							cpSync(sourceFile, destFile, { force: true });
+						} catch (error) {
+							console.warn(`⚠ Failed to copy og-image for ${slideDir}:`, error);
 						}
 					}
 				}
@@ -273,7 +307,7 @@ function slidesPlugin() {
 			const config = loadConfig();
 			const slidesDirs = resolveSlidesDirs(config);
 			try {
-				devServers = await startAllSlidesDevServer();
+				devServers = await startAllSlidesDevServer({ basePort: devServerBasePort });
 			} catch (error) {
 				console.error("❌ Failed to start slides dev servers:", error);
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "@vueuse/core": "^13.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "commander": "^14.0.0",
     "lucide-vue-next": "^0.525.0",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.5",

package/src/preview/composables/useSlides.ts

@@ -89,6 +89,10 @@ export function resolveImageUrl(slide: SlideInfo, domain: string): string {
 export function useSlides() {
   const slidesData = ref<SlideInfo[]>([]);
   const isLoading = ref(true);
+  const devServerBasePort =
+    typeof __SLIDEV_WORKSPACE_DEV_PORT_BASE__ === "number"
+      ? __SLIDEV_WORKSPACE_DEV_PORT_BASE__
+      : 3001;
 
   // Dynamically import slidev:content to avoid build-time issues
   const loadSlidesData = async () => {
@@ -110,8 +114,8 @@ export function useSlides() {
     if (!slidesData.value || slidesData.value.length === 0) return [];
 
     return slidesData.value.map((slide, index) => {
-      // Generate port based on slide index: 3001, 3002, 3003...
-      const port = 3001 + index;
+      // Generate port based on slide index: base, base + 1, base + 2...
+      const port = devServerBasePort + index;
       // Create dev server URL
       const devServerUrl = `http://localhost:${port}`;
       const domain = IS_DEVELOPMENT ? devServerUrl : window.location.origin;