Added watchreact npm command, resolved watch-client crashes during updates, and included nodemon as a dependency

package.json

@@ -10,6 +10,7 @@
   "private": true,
   "scripts": {
     "buildreact": "cd ./src/vs/workbench/contrib/void/browser/react/ && node build.js && cd ../../../../../../../",
+    "watchreact": "cd ./src/vs/workbench/contrib/void/browser/react/ && node build.js --watch && cd ../../../../../../../",
     "test": "echo Please run any of the test scripts from the scripts folder.",
     "test-browser": "npx playwright install && node test/unit/browser/index.js",
     "test-browser-amd": "npx playwright install && node test/unit/browser/index.amd.js",
@@ -218,6 +219,7 @@
     "mocha": "^10.2.0",
     "mocha-junit-reporter": "^2.2.1",
     "mocha-multi-reporters": "^1.5.1",
+    "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
     "opn": "^6.0.0",
     "original-fs": "^1.2.0",

src/vs/workbench/contrib/void/browser/react/build.js

@@ -3,16 +3,63 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import { execSync } from 'child_process';
+import { spawn, execSync } from 'child_process';
 
-// clear temp dirs
-execSync('npx rimraf out/ && npx rimraf src2/')
+const args = process.argv.slice(2);
+const isWatch = args.includes('--watch') || args.includes('-w');
 
-// build and scope tailwind: https://www.npmjs.com/package/scope-tailwind
-execSync('npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p "void-" ')
+if (isWatch) {
+	// Watch mode
+	// Create a watcher for scope-tailwind using nodemon
+	const scopeTailwindWatcher = spawn('npx', [
+		'nodemon',
+		'--watch', 'src',
+		'--ext', 'ts,tsx,css',
+		'--exec',
+		'npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p "void-"'
+	]);
 
-// tsup to build src2/ into out/
-execSync('npx tsup')
+	// Create a watcher for tsup in watch mode
+	const tsupWatcher = spawn('npx', [
+		'tsup',
+		'--watch'
+	]);
 
+	// Handle scope-tailwind watcher output
+	scopeTailwindWatcher.stdout.on('data', (data) => {
+		console.log(`[scope-tailwind] ${data}`);
+	});
 
-console.log('✅ Done building! Kill your build script(s) (Ctrl+D in them), then press Cmd+Shift+B again.')
+	scopeTailwindWatcher.stderr.on('data', (data) => {
+		console.error(`[scope-tailwind] ${data}`);
+	});
+
+	// Handle tsup watcher output
+	tsupWatcher.stdout.on('data', (data) => {
+		console.log(`[tsup] ${data}`);
+	});
+
+	tsupWatcher.stderr.on('data', (data) => {
+		console.error(`[tsup] ${data}`);
+	});
+
+	// Handle process termination
+	process.on('SIGINT', () => {
+		scopeTailwindWatcher.kill();
+		tsupWatcher.kill();
+		process.exit();
+	});
+
+	console.log('🔄 Watchers started! Press Ctrl+C to stop both watchers.');
+} else {
+	// Build mode
+	console.log('📦 Building...');
+
+	// Run scope-tailwind once
+	execSync('npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p "void-"', { stdio: 'inherit' });
+
+	// Run tsup once
+	execSync('npx tsup', { stdio: 'inherit' });
+
+	console.log('✅ Build complete!');
+}

src/vs/workbench/contrib/void/browser/react/tsup.config.js

@@ -17,7 +17,7 @@ export default defineConfig({
 	// dts: true,
 	// sourcemap: true,
 
-	clean: true,
+	clean: false,
 	platform: 'browser', // 'node'
 	target: 'esnext',
 	injectStyle: true, // bundle css into the output file