Merge pull request #181 from bjoaquinc/react-build-watcher

Fix React build crashing watch-client and added watch mode

CONTRIBUTING.md

@@ -46,7 +46,7 @@ First, run `npm install -g node-gyp`. Then:
 To build Void, open `void/` inside VSCode. Then:
 
 1. `npm install` to install all dependencies.
-2. `npm run buildreact` to build Void's browser dependencies like React.
+2. `npm run watchreact` to build Void's browser dependencies like React.
 3. Build.
 	 - Press <kbd>Cmd+Shift+B</kbd> (Mac).
    - Press <kbd>Ctrl+Shift+B</kbd> (Windows/Linux).
@@ -74,7 +74,7 @@ Alternatively, if you want to build Void from the terminal, instead of pressing
 
 - Make sure you follow the prerequisite steps.
 - Make sure you have the same NodeJS version as `.nvmrc`.
-- If you make any React changes, you must re-run `npm run buildreact` and re-build.
+- Make sure your `npm run watchreact` is running if you change any React files, or else you'll need to re-build.
 - If you get `"TypeError: Failed to fetch dynamically imported module: vscode-file://vscode-app/.../workbench.desktop.main.js", source: file:///.../bootstrap-window.js`, make sure all imports end with `.js`.
 - If you have any questions, feel free to [submit an issue](https://github.com/voideditor/void/issues/new). For building questions, you can also refer to VSCode's full [How to Contribute](https://github.com/microsoft/vscode/wiki/How-to-Contribute) page.
 
@@ -83,7 +83,7 @@ Alternatively, if you want to build Void from the terminal, instead of pressing
 
 ## Bundling
 
-We don't usually recommend bundling. Instead, you should probably just build. If you're sure you want to bundle Void into an executable app, run one of the following commands. This will create a folder named `VSCode-darwin-arm64` (or similar) in the repo's parent's directory. Be patient - compiling can take ~25 minutes.
+We don't usually recommend bundling. Instead, you should probably just build. If you're sure you want to bundle Void into an executable app, make sure you've built first, then run one of the following commands. This will create a folder named `VSCode-darwin-arm64` (or similar) in the repo's parent's directory. Be patient - compiling can take ~25 minutes.
 
 ### Mac
 - `npm run gulp vscode-darwin-arm64` - most common (Apple Silicon)

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

@@ -18,7 +18,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