sdc-build-wp 4.7.1 → 4.9.0

package/README.md

@@ -8,13 +8,16 @@ sdc-build-wp --watch --builds=style,scripts # comma-seperated list of components
 sdc-build-wp --help
 ```
 
-## Develop
+## Caching
 
-Develop locally with the following command from within the test project directory:
+sdc-build-wp includes intelligent build caching to speed up subsequent builds by only rebuilding files that have changed or whose dependencies have changed.
 
+```sh
+sdc-build-wp --no-cache        # Disable caching for this build
+sdc-build-wp --clear-cache     # Clear all cached data
 ```
-node ~/sites/sdc/sdc-build-wp/index.js --watch
-```
+
+## Watch
 
 While watch is enabled, use the following keyboard commands to control the build process:
 
@@ -23,3 +26,11 @@ While watch is enabled, use the following keyboard commands to control the build
 [p]     Pause/Resume
 [q]     Quit
 ````
+
+## Develop
+
+Develop locally with the following command from within the test project directory:
+
+```
+node ~/sites/sdc/sdc-build-wp/index.js --watch
+```

package/index.js

@@ -1,130 +1,11 @@
 #!/usr/bin/env node
-import parseArgs from 'minimist';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { promises as fs } from 'fs';
-import project from './lib/project.js';
-import log from './lib/logging.js';
-import * as utils from './lib/utils.js';
-import * as LibComponents from './lib/components/index.js';
-
-project.components = Object.fromEntries(Object.entries(LibComponents).map(([name, Class]) => [name, new Class()]));
-
-const argv = parseArgs(process.argv.slice(2));
-
-if (argv.help || argv.h) {
-	console.log(`
-Usage: sdc-build-wp [options] [arguments]
-
-Options:
-  -h, --help           Show help message and exit
-  -v, --version        Version
-  -w, --watch          Build and watch
-  -b, --builds BUILDS  Build with specific components
-
-Components:
-
-${Object.entries(project.components).map(([key, component]) => {
-	return `${key}\t\t${component.description}\r\n`;
-}).join('')}
-Examples:
-
-sdc-build-wp
-sdc-build-wp --watch
-sdc-build-wp --watch --builds=style,scripts
-
-While watch is enabled, use the following keyboard commands to control the build process:
-
-  [r]     Restart
-  [p]     Pause/Resume
-  [q]     Quit
-`);
-
-	process.exit(0);
-} else if (argv.version || argv.v) {
-	console.log(JSON.parse(await fs.readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), 'package.json'))).version);
-	process.exit(0);
-}
-
-project.builds = argv.builds ? (Array.isArray(argv.builds) ? argv.builds : argv.builds.split(',')) : Object.keys(project.components);
+import { default as project, init, keypressListen } from './lib/project.js';
+import build from './lib/build.js';
 
 (async () => {
-	keypressListen();
-	await runBuild();
-})();
-
-process.on('SIGINT', function () {
-	console.log(`\r`);
-	utils.stopActiveComponents();
-	project.isRunning = false;
-	utils.clearScreen();
-	log('info', `Exited sdc-build-wp`);
-	if (process.stdin.isTTY) {
-		process.stdin.setRawMode(false);
-		process.stdin.pause();
-	}
-	process.exit(0);
-});
-
-function keypressListen() {
-	if (!process.stdin.isTTY) { return; }
-
-	process.stdin.setRawMode(true);
-	process.stdin.resume();
-	process.stdin.setEncoding('utf8');
-
-	process.stdin.on('data', (key) => {
-		switch (key) {
-			case '\u0003': // Ctrl+C
-			case 'q':
-				process.emit('SIGINT');
-				return;
-			case 'p':
-				project.isRunning = !project.isRunning;
-				utils.clearScreen();
-				if (project.isRunning) {
-					log('success', 'Resumed build process');
-				} else {
-					log('warn', 'Paused build process');
-				}
-				break;
-			case 'r':
-				log('info', 'Restarted build process');
-				utils.stopActiveComponents();
-				setTimeout(() => {
-					utils.clearScreen();
-					runBuild();
-				}, 100);
-				break;
-		}
-	});
-}
-
-async function runBuild() {
-	project.isRunning = true;
-	if (argv.watch && project.builds.includes('server')) {
-		project.builds.splice(project.builds.indexOf('server'), 1);
-		project.builds.unshift('server');
-		project.components.server.serve(false);
+	await init();
+	if (project.argv.watch) {
+		keypressListen();
 	}
-
-	let initialBuildTimerStart = performance.now();
-	log('info', `Started initial build [${project.builds.join(', ')}]`);
-	let promisesBuilds = [];
-	for (let build of project.builds) {
-		promisesBuilds.push(project.components[build].init());
-	}
-	await Promise.all(promisesBuilds);
-	utils.clearScreen();
-	log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
-
-	if (argv.watch && project.builds.includes('server')) {
-		project.builds.splice(project.builds.indexOf('server'), 1);
-		project.builds.push('server');
-		log('info', `Started watching [${project.builds.join(', ')}]`);
-		log('info', `[r] to restart, [p] to pause/resume, [q] to quit`);
-		for (let build of project.builds) {
-			await project.components[build].watch();
-		}
-	}
-}
+	await build(project.argv.watch);
+})();

package/lib/build.js

@@ -0,0 +1,64 @@
+import { default as project } from './project.js';
+import * as utils from './utils.js';
+import log from './logging.js';
+
+export default async function(watch = false) {
+	if (project.components.cache && project.builds.includes('cache')) {
+		try {
+			await project.components.cache.init();
+		} catch (error) {
+			log('warn', `Failed to initialize cache: ${error.message}`);
+		}
+	}
+
+	if (watch && project.builds.includes('server')) {
+		project.builds.splice(project.builds.indexOf('server'), 1);
+		project.builds.unshift('server');
+		project.components.server.serve(false);
+	}
+
+	let initialBuildTimerStart = performance.now();
+	log('info', `Started initial build [${project.builds.join(', ')}]`);
+
+	let promisesBuilds = [];
+	for (let build of project.builds) {
+		if (build === 'cache') { continue; }
+
+		promisesBuilds.push(
+			project.components[build].init().catch(error => {
+				log('error', `Failed to initialize ${build} component: ${error.message}`);
+				return { failed: true, component: build, error };
+			})
+		);
+	}
+
+	const results = await Promise.all(promisesBuilds);
+
+	const failedComponents = results.filter(result => result && result.failed);
+	if (failedComponents.length > 0) {
+		log('warn', `Continuing without failed components: ${failedComponents.map(f => f.component).join(', ')}`);
+		project.builds = project.builds.filter(build => !failedComponents.some(f => f.component === build));
+	}
+
+	utils.clearScreen();
+	log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
+
+	if (watch && project.builds.includes('server')) {
+		project.isRunning = true;
+		project.builds.splice(project.builds.indexOf('server'), 1);
+		project.builds.push('server');
+		log('info', `Started watching [${project.builds.join(', ')}]`);
+		log('info', `[r] to restart, [p] to pause/resume, [q] to quit`);
+
+		for (let build of project.builds) {
+			try {
+				await project.components[build].watch();
+			} catch (error) {
+				log('error', `Failed to start watcher for ${build}: ${error.message}`);
+				log('warn', `Continuing without ${build} watcher`);
+			}
+		}
+	} else {
+		process.emit('SIGINT');
+	}
+}

package/lib/components/base.js

@@ -19,6 +19,7 @@ class BaseComponent {
 		this.glob = glob;
 		this.files = [];
 		this.globs = [];
+		this.useCache = true;
 	}
 
 	async init() {
@@ -34,9 +35,41 @@ class BaseComponent {
 			verb: 'Built',
 			itemLabel: null,
 			timerStart: this.timer,
-			timerEnd: performance.now()
+			timerEnd: performance.now(),
+			cached: false
 		}, options);
-		this.log('success', `${options.verb}${options.itemLabel ? ` ${options.itemLabel}` : ''} in ${Math.round(options.timerEnd - options.timerStart)}ms`);
+
+		const cacheIndicator = options.cached ? ' (cached)' : '';
+		this.log('success', `${options.verb}${options.itemLabel ? ` ${options.itemLabel}` : ''}${cacheIndicator} in ${Math.round(options.timerEnd - options.timerStart)}ms`);
+	}
+	async shouldSkipBuild(inputFile, outputFile, dependencies = []) {
+		if (!this.useCache || !this.project.components.cache || !this.project.components.cache.manifest?.entries) {
+			return false;
+		}
+
+		const needsRebuild = await this.project.components.cache.needsRebuild(
+			inputFile,
+			outputFile,
+			dependencies
+		);
+
+		return !needsRebuild;
+	}
+
+	async updateBuildCache(inputFile, outputFile, dependencies = []) {
+		if (!this.useCache || !this.project.components.cache || !this.project.components.cache.manifest?.entries) {
+			return;
+		}
+
+		await this.project.components.cache.updateCache(inputFile, outputFile, dependencies);
+	}
+
+	clearHashCache(filePaths) {
+		if (!this.useCache || !this.project.components.cache || !this.project.components.cache.manifest?.entries) {
+			return;
+		}
+
+		this.project.components.cache.clearHashCache(filePaths);
 	}
 
 	async watch() {

package/lib/components/blocks.js

@@ -59,10 +59,21 @@ export default class BlocksComponent extends BaseComponent {
 				`--webpack-copy-php`,
 				`--config=${this.path.resolve(this.path.dirname(fileURLToPath(import.meta.url)), '../../webpack.config.js')}`,
 			];
-			let execPromise = promisify(exec);
-			const { stdout, stderr } = await execPromise(cmds.join(' '));
+			const execPromise = promisify(exec);
+			const timeoutMS = 40000;
+			const buildPromise = execPromise(cmds.join(' '), {
+				maxBuffer: 1024 * 1024 * 10,
+				cwd: this.project.path
+			});
+			const timeoutPromise = new Promise((_, reject) => {
+				setTimeout(() => reject(new Error(`Build timeout after ${timeoutMS / 1000} seconds`)), timeoutMS);
+			});
+			const { stdout, stderr } = await Promise.race([buildPromise, timeoutPromise]);
+			if (stderr && stderr.trim()) {
+				this.log('warn', `Build warnings for ${entryLabel}: ${stderr.trim()}`);
+			}
 		} catch (error) {
-			console.log(error.stdout || error);
+			console.error(error.stdout || error.stderr || error.message);
 			this.log('error', `Failed building ${entryLabel} block - See above error.`);
 			return false;
 		}
@@ -84,19 +95,43 @@ export default class BlocksComponent extends BaseComponent {
 	}
 
 	watch() {
-		for (let block of this.globs) {
-			this.chokidar.watch(`${block}/src`, {
-				...this.project.chokidarOpts
-			}).on('all', (event, path) => {
-				if (!this.project.isRunning) { return; }
-				if (!['unlink', 'unlinkDir'].includes(event)) {
+		const watchPaths = this.globs.map(block => `${block}/src`);
+		const buildQueue = new Set();
+		const debounceTimers = new Map();
+		const DEBOUNCE_DELAY = 500;
+
+		this.watcher = this.chokidar.watch(watchPaths, {
+			...this.project.chokidarOpts
+		}).on('all', async (event, path) => {
+			if (!this.project.isRunning) { return; }
+			if (['unlink', 'unlinkDir'].includes(event)) { return; }
+
+			const block = this.globs.find(blockPath => path.startsWith(`${blockPath}/src`));
+			if (!block) { return; }
+			if (debounceTimers.has(block)) {
+				clearTimeout(debounceTimers.get(block));
+			}
+			debounceTimers.set(block, setTimeout(async () => {
+				if (buildQueue.has(block)) { return; }
+				try {
+					buildQueue.add(block);
+					this.project.components.server.server.notify('Building...', 10000);
 					if (path.endsWith('.js')) {
-						this.project.components.scripts.lint(path);
+						if (!this.project.components.scripts.isBuilding) {
+							this.project.components.scripts.lint(path).catch(lintError => {
+								this.log('warn', `Linting failed for ${path}: ${lintError.message}`);
+							});
+						}
 					}
-					this.process(block);
+					await this.process(block);
+				} catch (error) {
+					this.log('error', `Failed to process block ${block}: ${error.message}`);
+				} finally {
+					buildQueue.delete(block);
+					debounceTimers.delete(block);
 				}
-			});
-		}
+			}, DEBOUNCE_DELAY));
+		});
 	}
 
 }

package/lib/components/cache.js

@@ -0,0 +1,294 @@
+import BaseComponent from './base.js';
+import { promises as fs } from 'fs';
+import { createHash } from 'crypto';
+import path from 'path';
+
+export default class CacheComponent extends BaseComponent {
+
+	constructor() {
+		super();
+		this.description = 'Build caching';
+		this.cacheDir = `${this.project.path}/.sdc-build-wp/cache`;
+		this.manifestPath = `${this.cacheDir}/manifest.json`;
+		this.manifest = {};
+		this.hashCache = new Map();
+		this.dependencyGraph = new Map();
+	}
+
+	async init() {
+		await fs.mkdir(this.cacheDir, { recursive: true });
+		await this.loadManifest();
+		await this.cleanStaleEntries();
+		await this.ensureGitignore();
+	}
+
+	async loadManifest() {
+		const packageVersion = await this.getPackageVersion();
+		try {
+			const manifestData = await fs.readFile(this.manifestPath, 'utf8');
+			this.manifest = JSON.parse(manifestData);
+			if (this.manifest.version !== packageVersion) {
+				throw new Error(`Manifest version mismatch: expected ${packageVersion}, found ${this.manifest.version}`);
+			}
+		} catch (error) {
+			this.manifest = {
+				version: packageVersion,
+				timestamp: Date.now(),
+				entries: {},
+				dependencies: {}
+			};
+		}
+	}
+
+	async saveManifest() {
+		this.manifest.timestamp = Date.now();
+		await fs.writeFile(this.manifestPath, JSON.stringify(this.manifest, null, 2));
+	}
+
+	async ensureGitignore() {
+		const gitignorePath = path.join(this.project.path, '.gitignore');
+
+		try {
+			let gitignoreContent = '';
+			let gitignoreExists = false;
+
+			try {
+				gitignoreContent = await fs.readFile(gitignorePath, 'utf8');
+				gitignoreExists = true;
+			} catch (error) {
+				// .gitignore doesn't exist, we'll create it
+			}
+
+			const lines = gitignoreContent.split('\n');
+			let hasSDCBuild = lines.some(line => line.trim() === '.sdc-build-wp/cache');
+			let needsUpdate = false;
+
+			if (!hasSDCBuild) {
+				if (gitignoreContent && !gitignoreContent.endsWith('\n')) {
+					gitignoreContent += '\n';
+				}
+				gitignoreContent += '.sdc-build-wp/cache\n';
+				needsUpdate = true;
+				this.log('info', 'Added .sdc-build-wp/cache to .gitignore');
+			}
+
+			if (needsUpdate || !gitignoreExists) {
+				await fs.writeFile(gitignorePath, gitignoreContent);
+				if (!gitignoreExists) {
+					this.log('info', 'Created .gitignore file');
+				}
+			}
+		} catch (error) {
+			this.log('warn', `Failed to update .gitignore: ${error.message}`);
+		}
+	}
+
+	async getPackageVersion() {
+		try {
+			return await this.utils.getThisPackageVersion() || '1.0.0';
+		} catch (error) {
+			this.log('warn', `Failed to read package.json version: ${error.message}`);
+			return '1.0.0';
+		}
+	}
+
+	async getFileHash(filePath) {
+
+		if (this.hashCache.has(filePath)) {
+			return this.hashCache.get(filePath);
+		}
+
+		try {
+			const content = await fs.readFile(filePath);
+			const hash = createHash('sha256').update(content).digest('hex');
+			this.hashCache.set(filePath, hash);
+			return hash;
+		} catch (error) {
+			return null;
+		}
+	}
+
+	async getFileStatsHash(filePath) {
+		try {
+			const stats = await fs.stat(filePath);
+			const hash = createHash('sha256')
+				.update(`${stats.mtime.getTime()}-${stats.size}`)
+				.digest('hex');
+			return hash;
+		} catch (error) {
+			return null;
+		}
+	}
+
+	async needsRebuild(inputFile, outputFile, dependencies = []) {
+		const cacheKey = this.getCacheKey(inputFile, outputFile);
+		const cachedEntry = this.manifest.entries[cacheKey];
+
+		if (!cachedEntry) {
+			return true;
+		}
+
+		try {
+			await fs.access(outputFile);
+		} catch (error) {
+			return true;
+		}
+
+		const currentInputHash = await this.getFileHash(inputFile);
+		if (currentInputHash !== cachedEntry.inputHash) {
+			return true;
+		}
+
+		for (const dep of dependencies) {
+			const currentDepHash = await this.getFileHash(dep);
+			const cachedDepHash = cachedEntry.dependencies?.[dep];
+
+			if (currentDepHash !== cachedDepHash) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	async updateCache(inputFile, outputFile, dependencies = []) {
+		const cacheKey = this.getCacheKey(inputFile, outputFile);
+		const inputHash = await this.getFileHash(inputFile);
+
+		const dependencyHashes = {};
+		for (const dep of dependencies) {
+			dependencyHashes[dep] = await this.getFileHash(dep);
+		}
+
+		this.manifest.entries[cacheKey] = {
+			inputFile,
+			outputFile,
+			inputHash,
+			dependencies: dependencyHashes,
+			timestamp: Date.now()
+		};
+
+		await this.saveManifest();
+	}
+
+	getCacheKey(inputFile, outputFile) {
+		const relativePath = path.relative(this.project.path, inputFile);
+		const relativeOutput = path.relative(this.project.path, outputFile);
+		return createHash('md5').update(`${relativePath}:${relativeOutput}`).digest('hex');
+	}
+
+	async invalidateFile(filePath) {
+		const toRemove = [];
+		const filesToClearFromHashCache = new Set([filePath]);
+
+		for (const [cacheKey, entry] of Object.entries(this.manifest.entries)) {
+			if (entry.inputFile === filePath || entry.dependencies?.[filePath]) {
+				toRemove.push(cacheKey);
+				filesToClearFromHashCache.add(entry.inputFile);
+				if (entry.dependencies) {
+					Object.keys(entry.dependencies).forEach(dep => filesToClearFromHashCache.add(dep));
+				}
+			}
+		}
+
+		for (const key of toRemove) {
+			delete this.manifest.entries[key];
+		}
+
+		if (toRemove.length > 0) {
+			await this.saveManifest();
+		}
+
+		filesToClearFromHashCache.forEach(file => this.hashCache.delete(file));
+	}
+
+	async cleanStaleEntries() {
+		const toRemove = [];
+		const maxAge = 7 * 24 * 60 * 60 * 1000; // 7 days
+		const now = Date.now();
+
+		for (const [cacheKey, entry] of Object.entries(this.manifest.entries)) {
+			if (now - entry.timestamp > maxAge) {
+				toRemove.push(cacheKey);
+				continue;
+			}
+			try {
+				await fs.access(entry.inputFile);
+			} catch (error) {
+				toRemove.push(cacheKey);
+			}
+		}
+
+		for (const key of toRemove) {
+			delete this.manifest.entries[key];
+		}
+
+		if (toRemove.length > 0) {
+			this.log('info', `Cleaned ${toRemove.length} stale cache entries`);
+			await this.saveManifest();
+		}
+	}
+
+	async clearCache() {
+		try {
+			await fs.rm(this.cacheDir, { recursive: true, force: true });
+			await fs.mkdir(this.cacheDir, { recursive: true });
+			const packageVersion = await this.getPackageVersion();
+			this.manifest = {
+				version: packageVersion,
+				timestamp: Date.now(),
+				entries: {},
+				dependencies: {}
+			};
+			this.hashCache.clear();
+			this.log('info', 'Cache cleared');
+		} catch (error) {
+			this.log('error', `Failed to clear cache: ${error.message}`);
+		}
+	}
+
+	getCacheInfo(inputFile, outputFile) {
+		const cacheKey = this.getCacheKey(inputFile, outputFile);
+		const entry = this.manifest.entries[cacheKey];
+		return {
+			cacheKey,
+			exists: !!entry,
+			entry: entry || null,
+			inMemoryCache: this.hashCache.has(inputFile)
+		};
+	}
+
+	clearHashCache(filePaths) {
+		if (Array.isArray(filePaths)) {
+			filePaths.forEach(filePath => this.hashCache.delete(filePath));
+		} else {
+			this.hashCache.delete(filePaths);
+		}
+	}
+
+	async build() {
+		//
+	}
+
+	async process() {
+		//
+	}
+
+	async watch() {
+		this.watcher = this.chokidar.watch([
+			`${this.project.path}/**/*`,
+			`!${this.project.path}/.sdc-build-wp/**/*`,
+			`!${this.project.paths.nodeModules}/**/*`,
+			`!${this.project.paths.composer.vendor}/**/*`,
+			`!${this.project.path}/.git/**/*`
+		], {
+			...this.project.chokidarOpts,
+			ignoreInitial: true
+		}).on('unlink', async (filePath) => {
+			await this.invalidateFile(filePath);
+		}).on('change', async (filePath) => {
+			this.hashCache.delete(filePath);
+			await this.invalidateFile(filePath);
+		});
+	}
+}

package/lib/components/fonts.js

@@ -44,9 +44,13 @@ export default class FontsComponent extends BaseComponent {
 	watch() {
 		this.watcher = this.chokidar.watch(this.globs, {
 			...this.project.chokidarOpts
-		}).on('all', (event, path) => {
+		}).on('all', async (event, path) => {
 			if (!this.project.isRunning) { return; }
-			this.process();
+			try {
+				await this.process();
+			} catch (error) {
+				this.log('error', `Failed to process fonts: ${error.message}`);
+			}
 		});
 	}
 

package/lib/components/images.js

@@ -79,9 +79,13 @@ export default class ImagesComponent extends BaseComponent {
 	watch() {
 		this.watcher = this.chokidar.watch(this.project.paths.images, {
 			...this.project.chokidarOpts
-		}).on('all', (event, path) => {
+		}).on('all', async (event, path) => {
 			if (!this.project.isRunning) { return; }
-			this.process();
+			try {
+				await this.process();
+			} catch (error) {
+				this.log('error', `Failed to process images: ${error.message}`);
+			}
 		});
 	}
 

package/lib/components/index.js

@@ -6,3 +6,4 @@ export { default as fonts } from './fonts.js';
 export { default as php } from './php.js';
 export { default as server } from './server.js';
 export { default as errors } from './errors.js';
+export { default as cache } from './cache.js';

package/lib/components/php.js

@@ -89,10 +89,14 @@ export default class PHPComponent extends BaseComponent {
 	watch() {
 		this.watcher = this.chokidar.watch(this.globs, {
 			...this.project.chokidarOpts
-		}).on('all', (event, path) => {
+		}).on('all', async (event, path) => {
 			if (!this.project.isRunning) { return; }
 			if (!['unlink', 'unlinkDir'].includes(event)) {
-				this.process(path);
+				try {
+					await this.process(path);
+				} catch (error) {
+					this.log('error', `Failed to process PHP file ${path}: ${error.message}`);
+				}
 			}
 		});
 	}

package/lib/components/scripts.js

@@ -8,6 +8,7 @@ export default class ScriptsComponent extends BaseComponent {
 	constructor() {
 		super();
 		this.description = `Lint and process script files`;
+		this.isBuilding = false;
 	}
 
 	async init() {
@@ -24,6 +25,7 @@ export default class ScriptsComponent extends BaseComponent {
 			entriesToLint: null
 		}, options);
 		let entryLabel = `/${this.project.paths.dist}/${this.project.paths.src.scripts}/${this.utils.entryBasename(entry).replace(/\.js$|\.jsx$|\.ts$|\.tsx$/g, '.min.js')}`;
+		let outFile = `${this.project.path}${entryLabel}`;
 
 		this.start();
 
@@ -38,6 +40,18 @@ export default class ScriptsComponent extends BaseComponent {
 			return false;
 		}
 
+		const dependencies = this.utils.getAllJSDependencies(entry);
+
+		this.clearHashCache([entry, ...(options.entriesToLint || []), ...dependencies]);
+
+		if (await this.shouldSkipBuild(entry, outFile, dependencies)) {
+			this.end({
+				itemLabel: entryLabel,
+				cached: true
+			});
+			return true;
+		}
+
 		try {
 			const result = await esbuild.build({
 				platform: 'node',
@@ -52,6 +66,8 @@ export default class ScriptsComponent extends BaseComponent {
 			if (result.warnings.length > 0) {
 				this.log('warn', result.warnings);
 			}
+
+			await this.updateBuildCache(entry, outFile, dependencies);
 		} catch (error) {
 			console.error(error);
 			this.log('error', `Failed building ${entryLabel} - See above error.`);
@@ -64,16 +80,25 @@ export default class ScriptsComponent extends BaseComponent {
 	}
 
 	async process() {
-		const promisesScripts = this.files.map((group, index) => this.build(group.file, { entriesToLint: index == 0 ? this.globs : null }));
-		await Promise.all(promisesScripts);
+		this.isBuilding = true;
+		try {
+			const promisesScripts = this.files.map((group, index) => this.build(group.file, { entriesToLint: index == 0 ? this.globs : null }));
+			await Promise.all(promisesScripts);
+		} finally {
+			this.isBuilding = false;
+		}
 	}
 
 	watch() {
 		this.watcher = this.chokidar.watch(this.globs, {
 			...this.project.chokidarOpts
-		}).on('all', (event, path) => {
+		}).on('all', async (event, path) => {
 			if (!this.project.isRunning) { return; }
-			this.process();
+			try {
+				await this.process();
+			} catch (error) {
+				this.log('error', `Failed to process scripts: ${error.message}`);
+			}
 		});
 	}
 

package/lib/components/server.js

@@ -1,4 +1,7 @@
 import BaseComponent from './base.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { readFile } from 'fs/promises';
 import { create } from 'browser-sync';
 
 export default class ServerComponent extends BaseComponent {
@@ -6,6 +9,7 @@ export default class ServerComponent extends BaseComponent {
 	constructor() {
 		super();
 		this.description = `Run a dev proxy server for live reloading`;
+		this.sessions = {};
 		this.server = create('SDC WP Build Server');
 		this.watchedFiles = [
 			`${this.project.paths.dist}/**/*`,
@@ -23,10 +27,12 @@ export default class ServerComponent extends BaseComponent {
 	}
 
 	async init() {
-		//
+		this.project.pageScript = await readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), '../page-script.js'), 'utf8');
 	}
 
 	serve(watch = false) {
+
+		let thisProject = this.project;
 		let bsOptions = {
 			logPrefix: '',
 			logFileChanges: false,
@@ -58,36 +64,72 @@ export default class ServerComponent extends BaseComponent {
 					bottom: '0',
 					borderRadius: '5px 0px 0px'
 				}
-			}
-		};
-		if (this.project.package.sdc?.browsersync?.location == 'end') {
-			bsOptions.snippetOptions = {
+			},
+			snippetOptions: {
 				rule: {
-					match: /<\/body>/i,
+					match: thisProject.package.sdc?.browsersync?.location == 'end' ? /<\/body>/ : /<body[^>]*>/,
 					fn: function (snippet, match) {
-						return snippet + match;
+						const customScript = `<script async>${thisProject.pageScript}</script>`;
+						const allScripts = snippet + customScript;
+						return thisProject.package.sdc?.browsersync?.location == 'end' ? allScripts + match : match + allScripts;
 					}
 				}
-			};
-		}
-		this.server.init(bsOptions);
+			}
+    };
+
+		this.server.init(bsOptions, (err, bs) => {
+			if (err) {
+				this.log('error', `Failed to start BrowserSync server: ${err.message}`);
+				this.log('warn', 'Continuing without live reload server');
+				return;
+			}
+			try {
+				this.setupSocketHandlers(this);
+			} catch (setupError) {
+				this.log('error', `Failed to setup socket handlers: ${setupError.message}`);
+			}
+		});
 	}
 
-	async watch() {
-		this.server.watch(this.watchedFiles, {
-			ignored: this.ignoredFiles,
-			ignoreInitial: true
-		}, (event, file) => {
-			if (!this.project.isRunning) { return; }
-			if (['add', 'addDir', 'change'].includes(event)) {
-				this.server.reload(file);
-				if (file.split('.').pop() == 'css') {
-					this.server.notify('Style injected', 500);
+	setupSocketHandlers(serverComponent) {
+		this.server.sockets.on('connection', (socket) => {
+			socket.on('sdc:scriptsOnPage', (data) => {
+				if (!serverComponent.sessions[data.sessionID]) {
+					serverComponent.sessions[data.sessionID] = {
+						scripts: []
+					};
 				}
-			} else if (['unlink', 'unlinkDir'].includes(event)) {
-				this.server.reload();
-			}
+				serverComponent.sessions[data.sessionID].scripts = data.data;
+			});
 		});
 	}
 
+	async watch() {
+		try {
+			this.server.watch(this.watchedFiles, {
+				ignored: this.ignoredFiles,
+				ignoreInitial: true
+			}, (event, file) => {
+				if (!this.project.isRunning) { return; }
+				try {
+					if (['add', 'addDir', 'change'].includes(event)) {
+						this.server.reload(file);
+						if (file.split('.').pop() == 'css') {
+							this.server.notify('Style updated', 500);
+							return;
+						}
+					} else if (['unlink', 'unlinkDir'].includes(event)) {
+						this.server.reload();
+					}
+					this.server.notify('Reloading...', 10000);
+				} catch (reloadError) {
+					this.log('warn', `Failed to reload ${file}: ${reloadError.message}`);
+				}
+			});
+		} catch (watchError) {
+			this.log('error', `Failed to start file watcher: ${watchError.message}`);
+			throw watchError;
+		}
+	}
+
 }

package/lib/components/style.js

@@ -105,6 +105,7 @@ export default class StyleComponent extends BaseComponent {
 			outFile = this.project.path + '/' + options.name + '.min.css';
 		}
 		let entryLabel = outFile.replace(this.project.path, '');
+
 		this.start();
 
 		try {
@@ -112,6 +113,7 @@ export default class StyleComponent extends BaseComponent {
 		} catch(error) {
 			await fs.mkdir(`${this.project.path}/${this.project.paths.dist}/${this.project.paths.src.style}`, { recursive: true });
 		}
+
 		try {
 			const stylelinted = await stylelint.lint({
 				configFile: this.path.resolve(this.path.dirname(fileURLToPath(import.meta.url)), '../../.stylelintrc.json'),
@@ -124,6 +126,18 @@ export default class StyleComponent extends BaseComponent {
 				console.error(stylelinted.report);
 				throw Error('Linting error');
 			}
+
+			this.clearHashCache([entry, ...(options.entriesToLint || [])]);
+
+			const sassDependencies = this.utils.getImportedSASSFiles(entry);
+			if (await this.shouldSkipBuild(entry, outFile, sassDependencies)) {
+				this.end({
+					itemLabel: entryLabel,
+					cached: true
+				});
+				return true;
+			}
+
 			const compileResult = await sass.compileAsync(entry, {
 				style: 'compressed',
 				sourceMap: true
@@ -142,6 +156,9 @@ export default class StyleComponent extends BaseComponent {
 			if (process.env.NODE_ENV != 'production') {
 				await fs.writeFile(`${outFile}.map`, postcssResult.map.toString());
 			}
+
+			await this.updateBuildCache(entry, outFile, sassDependencies);
+
 			thisClass.end({
 				itemLabel: entryLabel
 			});
@@ -180,17 +197,21 @@ export default class StyleComponent extends BaseComponent {
 			this.globs
 		], {
 			...this.project.chokidarOpts
-		}).on('all', (event, path) => {
+		}).on('all', async (event, path) => {
 			if (!this.project.isRunning) { return; }
-			let hasRanSingle = false;
-			for (let group of this.files) {
-				if (path == group.file || this.utils.getImportedSASSFiles(group.file).includes(path)) {
-					this.process(group.file, { buildTheme: path == this.project.paths.theme.json });
-					hasRanSingle = true;
+			try {
+				let hasRanSingle = false;
+				for (let group of this.files) {
+					if (path == group.file || this.utils.getImportedSASSFiles(group.file).includes(path)) {
+						await this.process(group.file, { buildTheme: path == this.project.paths.theme.json });
+						hasRanSingle = true;
+					}
 				}
-			}
-			if (!hasRanSingle) {
-				this.process(null, { buildTheme: path == this.project.paths.theme.json });
+				if (!hasRanSingle) {
+					await this.process(null, { buildTheme: path == this.project.paths.theme.json });
+				}
+			} catch (error) {
+				this.log('error', `Failed to process styles for ${path}: ${error.message}`);
 			}
 		});
 	}

package/lib/help.js

@@ -0,0 +1,34 @@
+import project from './project.js';
+
+export default function() {
+	console.log(`
+Usage: sdc-build-wp [options] [arguments]
+
+Options:
+	-h, --help           Show help message and exit
+	-v, --version        Version
+	-w, --watch          Build and watch
+	-b, --builds BUILDS  Build with specific components
+	--no-cache           Disable build caching
+	--clear-cache        Clear build cache and exit
+
+Components:
+
+${Object.entries(project.components).map(([key, component]) => {
+	return `${key}\t\t${component.description}\r\n`;
+}).join('')}
+Examples:
+
+sdc-build-wp
+sdc-build-wp --watch
+sdc-build-wp --watch --builds=style,scripts
+sdc-build-wp --no-cache
+sdc-build-wp --clear-cache
+
+While watch is enabled, use the following keyboard commands to control the build process:
+
+	[r]     Restart
+	[p]     Pause/Resume
+	[q]     Quit
+`);
+}

package/lib/logging.js

@@ -1,6 +1,7 @@
 // based heavily on Nick Salloum's 'node-pretty-log'
 // https://github.com/callmenick/node-pretty-log
 import chalk from 'chalk';
+import { default as project } from './project.js';
 
 function getTime() {
 	return new Date().toLocaleTimeString('en-US');
@@ -23,6 +24,9 @@ function log(type, ...messages) {
 				chalk.bgRed.gray(getTime()),
 				...messages
 			);
+			if (project.builds.includes('server') && project.isRunning) {
+				project.components.server.server.notify('ERROR', 2500);
+			}
 			break;
 		case 'warn':
 			console.log.call(

package/lib/page-script.js

@@ -0,0 +1,19 @@
+let randomSessionID = Array.from({ length: 50 }, () => Math.random().toString(36)[2]).join('');
+
+let socket = window.___browserSync___?.socket;
+
+function getScriptsOnPage() {
+	socket.emit('sdc:scriptsOnPage', {
+		timestamp: Date.now(),
+		sessionID: randomSessionID,
+		data: Array.from(document.querySelectorAll('script') || []).map((script) => script.src || false).filter(script => script && script.length > 0)
+	});
+}
+
+const scriptsOnPageInterval = setInterval(() => {
+	socket = window.___browserSync___?.socket;
+	if (socket) {
+		getScriptsOnPage();
+		clearInterval(scriptsOnPageInterval);
+	}
+}, 500);

package/lib/project.js

@@ -1,6 +1,13 @@
+import parseArgs from 'minimist';
 import { readFile } from 'fs/promises';
+import build from './build.js';
+import * as utils from './utils.js';
+import log from './logging.js';
+import * as LibComponents from './components/index.js';
+import help from './help.js';
 
 let project = {
+	argv: null,
 	isRunning: false,
 	path: process.cwd(),
 	package: JSON.parse(await readFile(new URL(process.cwd() + '/package.json', import.meta.url))),
@@ -51,7 +58,107 @@ project.chokidarOpts = {
 		`${project.paths.composer.vendor}/**/*`,
 		project.paths.theme.scss,
 		`${project.path}/blocks/*/build/*.php`,
+		`${project.path}/.sdc-build-wp/**/*`,
 	]
 };
 
 export default project;
+
+export async function init() {
+	project.argv = parseArgs(process.argv.slice(2));
+	project.components = Object.fromEntries(Object.entries(LibComponents).map(([name, Class]) => [name, new Class()]));
+
+	process.on('unhandledRejection', (reason, promise) => {
+		log('error', `Unhandled Promise Rejection: ${reason}`);
+		log('warn', 'Continuing build process despite error');
+	});
+
+	process.on('uncaughtException', (error) => {
+		log('error', `Uncaught Exception: ${error.message}`);
+		log('warn', 'Attempting graceful shutdown');
+		utils.stopActiveComponents();
+		process.exit(1);
+	});
+
+	if (project.argv.help || project.argv.h) {
+		help();
+		process.exit(0);
+	} else if (project.argv.version || project.argv.v) {
+		console.log(await utils.getThisPackageVersion());
+		process.exit(0);
+	} else if (project.argv['clear-cache']) {
+		if (project.components.cache) {
+			try {
+				await project.components.cache.init();
+				await project.components.cache.clearCache();
+			} catch (error) {
+				console.log(`Error clearing cache: ${error.message}`);
+			}
+		}
+		process.exit(0);
+	}
+
+	if (project.argv['no-cache']) {
+		Object.values(project.components).forEach(component => {
+			if (component.useCache !== undefined) {
+				component.useCache = false;
+			}
+		});
+	}
+
+	project.builds = project.argv.builds ? (Array.isArray(project.argv.builds) ? project.argv.builds : project.argv.builds.split(',')) : Object.keys(project.components).filter(component => component !== 'cache');
+
+	if (!project.argv['no-cache'] && !project.builds.includes('cache')) {
+		project.builds.unshift('cache');
+	}
+
+	process.on('SIGINT', function () {
+		console.log(`\r`);
+		if (project.isRunning) {
+			utils.stopActiveComponents();
+			project.isRunning = false;
+			utils.clearScreen();
+		}
+		log('info', `Exited sdc-build-wp`);
+		if (process.stdin.isTTY) {
+			process.stdin.setRawMode(false);
+			process.stdin.pause();
+		}
+		process.exit(0);
+	});
+
+}
+
+export function keypressListen() {
+	if (!process.stdin.isTTY) { return; }
+
+	process.stdin.setRawMode(true);
+	process.stdin.resume();
+	process.stdin.setEncoding('utf8');
+
+	process.stdin.on('data', (key) => {
+		switch (key) {
+			case '\u0003': // Ctrl+C
+			case 'q':
+				process.emit('SIGINT');
+				return;
+			case 'p':
+				project.isRunning = !project.isRunning;
+				utils.clearScreen();
+				if (project.isRunning) {
+					log('success', 'Resumed build process');
+				} else {
+					log('warn', 'Paused build process');
+				}
+				break;
+			case 'r':
+				log('info', 'Restarted build process');
+				utils.stopActiveComponents();
+				setTimeout(() => {
+					utils.clearScreen();
+					build(true);
+				}, 100);
+				break;
+		}
+	});
+}

package/lib/utils.js

@@ -1,8 +1,14 @@
+import path from 'path';
 import fs from 'fs';
+import * as fsPromises from 'fs/promises';
 import { readdir } from 'node:fs/promises';
-import path from 'path';
+import { fileURLToPath } from 'url';
 import project from './project.js';
 
+export async function getThisPackageVersion() {
+	return JSON.parse(await fsPromises.readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json'))).version
+}
+
 export function clearScreen() {
 	if (!process.stdout.isTTY) { return; }
 	process.stdout.write('\x1B[2J\x1B[0f');
@@ -10,7 +16,23 @@ export function clearScreen() {
 
 export function stopActiveComponents() {
 	if (project.components.server?.server) {
-		project.components.server.server.exit();
+		try {
+			project.components.server.server.exit();
+		} catch (error) {
+			console.warn('Failed to stop server:', error.message);
+		}
+	}
+	Object.values(project.components).forEach(component => {
+		if (component.watcher) {
+			try {
+				component.watcher.close();
+			} catch (error) {
+				console.warn(`Failed to stop watcher for ${component.constructor.name}:`, error.message);
+			}
+		}
+	});
+	if (project.components.scripts) {
+		project.components.scripts.isBuilding = false;
 	}
 }
 
@@ -53,6 +75,68 @@ export function getImportedSASSFiles(filePath) {
 	return imports;
 }
 
+export function getImportedJSFiles(filePath) {
+	try {
+		const content = fs.readFileSync(filePath, 'utf8');
+		const regex = /(?:import\s+[^'"]*\s+from\s+['"`]([^'">`]+)['"`]|import\s*\(\s*['"`]([^'">`]+)['"`]\s*\)|require\s*\(\s*['"`]([^'">`]+)['"`]\s*\))/g;
+		const imports = [];
+		let match;
+
+		while ((match = regex.exec(content)) !== null) {
+			const importPath = match[1] || match[2] || match[3];
+			if (importPath.startsWith('.') || importPath.startsWith('/')) {
+				let resolvedPath;
+				if (importPath.startsWith('.')) {
+					resolvedPath = path.resolve(path.dirname(filePath), importPath);
+				} else {
+					resolvedPath = path.resolve(project.path, importPath.substring(1));
+				}
+				const extensions = ['.js', '.jsx', '.ts', '.tsx', '.mjs'];
+				if (!path.extname(resolvedPath)) {
+					for (const ext of extensions) {
+						const pathWithExt = resolvedPath + ext;
+						if (fs.existsSync(pathWithExt)) {
+							imports.push(pathWithExt);
+							break;
+						}
+					}
+					const indexPath = path.join(resolvedPath, 'index');
+					for (const ext of extensions) {
+						const pathWithExt = indexPath + ext;
+						if (fs.existsSync(pathWithExt)) {
+							imports.push(pathWithExt);
+							break;
+						}
+					}
+				} else {
+					if (fs.existsSync(resolvedPath)) {
+						imports.push(resolvedPath);
+					}
+				}
+			}
+		}
+		return [...new Set(imports)].filter(importPath =>
+			importPath.startsWith(project.path) && fs.existsSync(importPath)
+		);
+	} catch (error) {
+		return [];
+	}
+}
+
+export function getAllJSDependencies(filePath, visited = new Set()) {
+	if (visited.has(filePath)) {
+		return [];
+	}
+	visited.add(filePath);
+	const directDeps = getImportedJSFiles(filePath);
+	const allDeps = [...directDeps];
+	for (const dep of directDeps) {
+		const nestedDeps = getAllJSDependencies(dep, visited);
+		allDeps.push(...nestedDeps);
+	}
+	return [...new Set(allDeps)];
+}
+
 export function addEntriesByFiletypes(filetypes = []) {
 	let finalFiles = [];
 	for (const [name, files] of Object.entries(project.package.sdc.entries)) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdc-build-wp",
-	"version": "4.7.1",
+	"version": "4.9.0",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"