sdc-build-wp 5.2.0 → 5.3.0

package/lib/build.js

@@ -2,9 +2,20 @@ import { default as project } from './project.js';
 import * as utils from './utils.js';
 import log from './logging.js';
 import chalk from 'chalk';
+import tui from './tui.js';
 
 
 export async function build(watch = false) {
+
+	if (watch) {
+		tui.init();
+		tui.setComponents(project.builds, true);
+		const commands = `Commands: ${chalk.underline.green('r')}estart, ${chalk.underline.green('c')}lear cache, ${chalk.underline.green('p')}ause/resume, ${chalk.underline.green('n')}ew component, ${chalk.underline.green('q')}uit`;
+		tui.setCommands(commands);
+	}
+
+	log('info', `Started sdc-build-wp`);
+
 	if (project.builds.includes('cache')) {
 		try {
 			await project.components.cache.init();
@@ -44,15 +55,18 @@ export async function build(watch = false) {
 	}
 
 	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', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 		log('info', `Started watching [${project.builds.join(', ')}]`);
+
+		tui.setComponents(project.builds, true);
+
 		project.components.server.logURLs();
-		log('info', `${chalk.underline.green('r')}estart, ${chalk.underline.green('c')}lear cache, ${chalk.underline.green('p')}ause/resume, ${chalk.underline.green('n')}ew component, ${chalk.underline.green('q')}uit`);
 
 		for (let build of project.builds) {
 			try {
@@ -63,6 +77,7 @@ export async function build(watch = false) {
 			}
 		}
 	} else {
+		log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 		process.emit('SIGINT');
 	}
 }

package/lib/components/scripts.js

@@ -2,6 +2,7 @@ import BaseComponent from './base.js';
 import * as esbuild from 'esbuild';
 import { ESLint } from 'eslint';
 import * as eslintConfig from '../../eslint.config.js';
+import tui from '../tui.js';
 
 export default class ScriptsComponent extends BaseComponent {
 
@@ -35,7 +36,11 @@ export default class ScriptsComponent extends BaseComponent {
 				throw thisLint;
 			}
 		} catch (error) {
-			console.error(error);
+			if (tui.isInitialized) {
+				tui.log(String(error.stack || error));
+			} else {
+				console.error(error);
+			}
 			this.log('error', `Failed linting ${entry.replace(`${this.project.path}/${this.project.paths.src.src}/${this.project.paths.src.scripts}/`, '')} - See above error.`);
 			return false;
 		}
@@ -72,7 +77,11 @@ export default class ScriptsComponent extends BaseComponent {
 
 			await this.updateBuildCache(entry, outFile, dependencies);
 		} catch (error) {
-			console.error(error);
+			if (tui.isInitialized) {
+				tui.log(String(error.stack || error));
+			} else {
+				console.error(error);
+			}
 			this.log('error', `Failed building ${entryLabel} - See above error.`);
 			return false;
 		}
@@ -103,7 +112,11 @@ export default class ScriptsComponent extends BaseComponent {
 					await this.checkAndRebuildAffectedBlocks(path);
 				}
 			} catch (error) {
-				console.error(error);
+				if (tui.isInitialized) {
+					tui.log(String(error.stack || error));
+				} else {
+					console.error(error);
+				}
 				this.log('error', `Failed to process scripts`);
 			}
 		});
@@ -121,7 +134,11 @@ export default class ScriptsComponent extends BaseComponent {
 					affectedBlocks.add(blockPath);
 				}
 			} catch (error) {
-				console.error(error);
+				if (tui.isInitialized) {
+					tui.log(String(error.stack || error));
+				} else {
+					console.error(error);
+				}
 			}
 		}
 
@@ -149,10 +166,25 @@ export default class ScriptsComponent extends BaseComponent {
 			await ESLint.outputFixes(lintresults);
 			const formatter = await eslint.loadFormatter('stylish');
 			const formatterOutput = formatter.format(lintresults);
-			if (formatterOutput) { console.log(formatterOutput.replace(`${this.project.path}/${this.project.paths.src.src}/${this.project.paths.src.scripts}/`, '')); }
+			if (formatterOutput) {
+				const cleanedOutput = formatterOutput.replace(`${this.project.path}/${this.project.paths.src.src}/${this.project.paths.src.scripts}/`, '');
+				if (tui.isInitialized) {
+					cleanedOutput.split('\n').forEach(line => {
+						if (line.trim()) {
+							tui.log(line);
+						}
+					});
+				} else {
+					console.log(cleanedOutput);
+				}
+			}
 			return true;
 		} catch (error) {
-			console.error(error);
+			if (tui.isInitialized) {
+				tui.log(String(error.stack || error));
+			} else {
+				console.error(error);
+			}
 			return error;
 		}
 	}

package/lib/components/server.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 import { readFile } from 'fs/promises';
 import { create } from 'browser-sync';
 import chalk from 'chalk';
+import tui from '../tui.js';
 
 export default class ServerComponent extends BaseComponent {
 
@@ -115,9 +116,14 @@ export default class ServerComponent extends BaseComponent {
 		if (this.usedOptions.proxy) {
 			localURL = localURL.replace('localhost', this.usedOptions.proxy.url.host);
 		}
-		this.log('info', `Local server:    ${chalk.green(localURL)} (${this.usedOptions.urls.local})`);
-		if (this.usedOptions.urls.external) {
-			this.log('info', `External server: ${chalk.green(this.usedOptions.urls.external)}`);
+
+		if (tui.isInitialized) {
+			tui.setURLs(localURL, this.usedOptions.urls.external || '');
+		} else {
+			this.log('info', `Local server:    ${chalk.green(localURL)} (${this.usedOptions.urls.local})`);
+			if (this.usedOptions.urls.external) {
+				this.log('info', `External server: ${chalk.green(this.usedOptions.urls.external)}`);
+			}
 		}
 	}
 

package/lib/logging.js

@@ -2,59 +2,45 @@
 // https://github.com/callmenick/node-pretty-log
 import chalk from 'chalk';
 import { default as project } from './project.js';
+import tui from './tui.js';
 
 function getTime() {
 	return new Date().toLocaleTimeString('en-US');
 }
 
 function log(type, ...messages) {
+	let icon, time, prefix = '';
+
 	switch (type) {
 		case 'success':
-			console.log.call(
-				console,
-				chalk.green('✔'),
-				chalk.gray(getTime()),
-				...messages
-			);
+			icon = chalk.green('✔');
+			time = chalk.gray(getTime());
 			break;
 		case 'error':
-			console.log.call(
-				console,
-				chalk.red('✖'),
-				chalk.bgRed.gray(getTime()),
-				...messages
-			);
+			icon = chalk.red('✖');
+			time = chalk.bgRed.gray(getTime());
 			if (project.builds.includes('server') && project.isRunning) {
 				project.components.server.server.notify('ERROR', 2500);
 			}
 			break;
 		case 'warn':
-			console.log.call(
-				console,
-				chalk.yellow('⚠'),
-				chalk.bgYellow.gray(getTime()),
-				...messages
-			);
+			icon = chalk.yellow('⚠');
+			time = chalk.bgYellow.gray(getTime());
 			break;
 		case 'php':
-			console.log.call(
-				console,
-				chalk.blue('ℹ'),
-				chalk.gray(getTime()),
-				chalk.gray('PHP:  '),
-				...messages
-			);
+			icon = chalk.blue('ℹ');
+			time = chalk.gray(getTime());
+			prefix = chalk.gray('PHP:  ');
 			break;
 		case 'info':
 		default:
-			console.log.call(
-				console,
-				chalk.blue('ℹ'),
-				chalk.bgBlue.gray(getTime()),
-				...messages
-			);
+			icon = chalk.blue('ℹ');
+			time = chalk.bgBlue.gray(getTime());
 			break;
 	}
+
+	const logMessage = [icon, time, prefix, ...messages].filter(Boolean).join(' ');
+	tui.log(logMessage);
 }
 
 export default log;

package/lib/project.js

@@ -11,7 +11,7 @@ import log from './logging.js';
 import * as LibComponents from './components/index.js';
 import help from './help.js';
 import { validateConfig, mergeWithDefaults } from './config-validator.js';
-import { input, select } from '@inquirer/prompts';
+import tui from './tui.js';
 
 let project = {
 	config: {},
@@ -163,12 +163,19 @@ export async function init() {
 			await project.configWatcher.close();
 			project.configWatcher = null;
 		}
+		tui.destroy();
+		if (tui.getLogHistory) {
+			const logDump = tui.getLogHistory();
+			if (logDump && logDump.trim()) {
+				console.log(logDump);
+			}
+		}
 		log('info', `Exited sdc-build-wp`);
 		if (process.stdin.isTTY) {
 			process.stdin.setRawMode(false);
 			process.stdin.pause();
 		}
-		process.exit(0);
+		setTimeout(() => process.exit(0), 100);
 	});
 
 }
@@ -180,7 +187,9 @@ export function keypressListen() {
 
 	const installRaw = () => {
 		if (!process.stdin.isTTY) return;
-		try { process.stdin.setRawMode(true); } catch {}
+		if (!tui.isInitialized) {
+			try { process.stdin.setRawMode(true); } catch {}
+		}
 		process.stdin.resume();
 		process.stdin.setEncoding('utf8');
 	};
@@ -202,8 +211,10 @@ export function keypressListen() {
 				utils.clearScreen();
 				if (project.isRunning) {
 					log('success', 'Resumed build process');
+					tui.setPaused(false);
 				} else {
 					log('warn', 'Paused build process');
+					tui.setPaused(true);
 				}
 				break;
 			case 'c':
@@ -216,8 +227,8 @@ export function keypressListen() {
 			case 'n': // New menu
 				isPrompting = true;
 				process.stdin.removeListener('data', handler);
+
 				try {
-					try { process.stdin.setRawMode(false); } catch {}
 					await handleCreateNew();
 				} finally {
 					isPrompting = false;
@@ -235,28 +246,21 @@ async function handleCreateNew() {
 	if (!project.isRunning) {
 		log('warn', 'Build process paused. Press [p] to resume if needed. Continuing creation.');
 	}
-	let typeKey;
-	try {
-		typeKey = await select({
-			message: 'Create new:',
-			choices: [
-				{ name: 'Block', value: 'b' },
-				{ name: 'Pattern', value: 'p' },
-				{ name: 'Style variation', value: 's' },
-				{ name: 'Cancel', value: 'cancel' }
-			]
-		});
-	} catch (error) {
-		return;
-	}
-	if (typeKey === 'cancel') { return; }
+
+
+	const menuOptions = ['Block', 'Pattern', 'Style variation', 'Cancel'];
+	const menuMap = { Block: 'b', Pattern: 'p', 'Style variation': 's', Cancel: 'cancel' };
+	const menuPrompt = 'Create new:';
+	const blockPrompt = 'Block name:';
+	const patternPrompt = 'Pattern name:';
+	const stylePrompt = 'Style variation name:';
+
+	let menuResult = await tui.showMenu(menuOptions, menuPrompt);
+	if (!menuResult || menuMap[menuResult.value] === 'cancel') return;
+	let typeKey = menuMap[menuResult.value];
+
 	if (typeKey === 'b') {
-		let name;
-		try {
-			name = await input({ message: 'Block name:' });
-		} catch (error) {
-			return;
-		}
+		let name = await tui.showInput(blockPrompt);
 		if (!name) { log('warn', 'No name provided.'); return; }
 		const slug = utils.slugify(name);
 		const blockDir = `${project.path}/blocks/${slug}`;
@@ -290,8 +294,7 @@ async function handleCreateNew() {
 			log('error', `Failed to scaffold block`);
 		}
 	} else if (typeKey === 'p') {
-		let name;
-		try { name = await input({ message: 'Pattern name:' }); } catch (error) { return; }
+		let name = await tui.showInput(patternPrompt);
 		if (!name) { log('warn', 'No name provided.'); return; }
 		const slug = utils.slugify(name);
 		const patternsDir = `${project.path}/patterns`;
@@ -322,8 +325,7 @@ async function handleCreateNew() {
 			log('error', `Failed to create pattern`);
 		}
 	} else if (typeKey === 's') {
-		let name;
-		try { name = await input({ message: 'Style variation name:' }); } catch (error) { return; }
+		let name = await tui.showInput(stylePrompt);
 		if (!name) { log('warn', 'No name provided.'); return; }
 		const slug = utils.slugify(name);
 		const stylesDir = `${project.path}/styles`;
@@ -334,7 +336,7 @@ async function handleCreateNew() {
 			log('warn', `Style variation ${slug}.json already exists.`);
 			return;
 		} catch (error) {
-
+			//
 		}
 		try {
 			const libDir = path.dirname(fileURLToPath(import.meta.url));

package/lib/tui.js

@@ -0,0 +1,344 @@
+import blessed from 'blessed';
+import chalk from 'chalk';
+
+class TUI {
+	constructor() {
+		this.screen = null;
+		this.headerBox = null;
+		this.logBox = null;
+		this.isInitialized = false;
+		this.urls = {
+			local: '',
+			external: ''
+		};
+		this.commands = '';
+		this.components = [];
+		this.watchMode = false;
+		this.isPaused = false;
+		this._logHistory = [];
+	}
+
+	init() {
+		if (this.isInitialized) {
+			return;
+		}
+
+		this.screen = blessed.screen({
+			smartCSR: true,
+			fullUnicode: true,
+			title: 'SDC Build WP',
+			input: process.stdin,
+			output: process.stdout
+		});
+
+		this.headerBox = blessed.box({
+			top: 0,
+			left: 0,
+			width: '100%',
+			height: 5,
+			content: '',
+			tags: true,
+			style: {
+				fg: 'white',
+				bg: 'black',
+				border: {
+					fg: 'blue'
+				}
+			},
+			border: {
+				type: 'line',
+				bottom: true
+			},
+			shrink: false,
+			scrollable: false
+		});
+
+		this.logBox = blessed.log({
+			top: 5,
+			left: 0,
+			width: '100%',
+			height: '100%-5',
+			tags: true,
+			scrollable: true,
+			alwaysScroll: true,
+			scrollbar: {
+				ch: ' ',
+				track: {
+					bg: 'blue'
+				},
+				style: {
+					inverse: true
+				}
+			},
+			mouse: true,
+			keys: true,
+			vi: true,
+			style: {
+				fg: 'white',
+				bg: 'black'
+			}
+		});
+
+		this.screen.append(this.logBox);
+		this.screen.append(this.headerBox);
+
+		this.screen.on('resize', () => {
+			this.updateHeader();
+			this.screen.render();
+		});
+
+		this.screen.key(['escape', 'q', 'C-c'], () => {
+			return false;
+		});
+
+		this.screen.key(['enter', 'return'], () => {
+			this.logBox.log('');
+			this.screen.render();
+		});
+
+		this.screen.key(['down'], () => {
+			this.logBox.scroll(1);
+			this.screen.render();
+		});
+
+		this.screen.key(['up'], () => {
+			this.logBox.scroll(-1);
+			this.screen.render();
+		});
+
+		this.screen.key(['pagedown'], () => {
+			this.logBox.scroll(this.logBox.height);
+			this.screen.render();
+		});
+
+		this.screen.key(['pageup'], () => {
+			this.logBox.scroll(-this.logBox.height);
+			this.screen.render();
+		});
+
+		this.updateHeader();
+		this.screen.render();
+
+		this.isInitialized = true;
+	}
+
+	updateHeader() {
+		if (!this.isInitialized) {
+			return;
+		}
+
+		const lines = [];
+
+		let titleLine = ' ' + chalk.bold.blue('SDC Build WP');
+		if (this.watchMode) {
+			titleLine += chalk.gray(' (watch mode)');
+		}
+		if (this.isPaused) {
+			titleLine += chalk.bold.yellow(' [PAUSED]');
+		}
+		if (this.components.length > 0) {
+			titleLine += chalk.gray(' [') + chalk.cyan(this.components.join(', ')) + chalk.gray(']');
+		}
+		lines.push(titleLine);
+
+		if (this.urls.local || this.urls.external) {
+			let urlLine = ' ';
+			if (this.urls.local) {
+				urlLine += `Local: ${chalk.green(this.urls.local)}`;
+			}
+			if (this.urls.external) {
+				if (urlLine.length > 1) urlLine += '  ';
+				urlLine += `External: ${chalk.green(this.urls.external)}`;
+			}
+			lines.push(urlLine);
+		} else {
+			lines.push(' ');
+		}
+
+		if (this.commands) {
+			lines.push(' ' + this.commands);
+		} else {
+			lines.push(' ');
+		}
+
+		lines.push(' ');
+
+		this.headerBox.setContent(lines.join('\n'));
+	}
+
+	setURLs(local, external) {
+		this.urls.local = local;
+		this.urls.external = external;
+		this.updateHeader();
+		this.render();
+	}
+
+	setCommands(commands) {
+		this.commands = commands;
+		this.updateHeader();
+		this.render();
+	}
+
+	setPaused(isPaused) {
+		this.isPaused = isPaused;
+		this.updateHeader();
+		this.render();
+	}
+
+	setComponents(components, watchMode = false) {
+		this.components = components;
+		this.watchMode = watchMode;
+		this.updateHeader();
+		this.render();
+	}
+
+	log(message) {
+		this._logHistory.push(message);
+		if (!this.isInitialized) {
+			console.log(message);
+			return;
+		}
+		this.logBox.log(message);
+		this.render();
+	}
+
+	getLogHistory() {
+		return this._logHistory.join('\n');
+	}
+
+	render() {
+		if (this.isInitialized && this.screen) {
+			this.screen.render();
+		}
+	}
+
+	async showMenu(options, prompt = 'Choose an option:') {
+		return new Promise((resolve) => {
+			const menu = blessed.list({
+				parent: this.screen,
+				top: 'center',
+				left: 'center',
+				width: '50%',
+				height: options.length + 4,
+				label: ` ${prompt} `,
+				items: options,
+				keys: true,
+				mouse: true,
+				border: 'line',
+				style: {
+					fg: 'white',
+					bg: 'black',
+					border: { fg: 'blue' },
+					selected: { bg: 'blue', fg: 'white' }
+				}
+			});
+			menu.focus();
+			const stopLogScroll = (ch, key) => {
+				if (['up', 'down', 'pagedown', 'pageup'].includes(key.name)) {
+					return false;
+				}
+			};
+			this.logBox.ignoreKeys = true;
+			menu.on('detach', () => {
+				this.logBox.ignoreKeys = false;
+			});
+			menu.on('keypress', stopLogScroll);
+			this.screen.render();
+			menu.on('select', (item, idx) => {
+				menu.destroy();
+				this.screen.render();
+				resolve({ value: item.getText(), index: idx });
+			});
+			menu.on('cancel', () => {
+				menu.destroy();
+				this.screen.render();
+				resolve(null);
+			});
+			menu.key(['escape', 'q'], () => {
+				menu.emit('cancel');
+			});
+		});
+	}
+
+	async showInput(prompt = 'Enter value:') {
+		return new Promise((resolve) => {
+			const box = blessed.box({
+				parent: this.screen,
+				top: 'center',
+				left: 'center',
+				width: '50%',
+				height: 5,
+				label: ` ${prompt} `,
+				border: 'line',
+				style: {
+					fg: 'white',
+					bg: 'black',
+					border: { fg: 'blue' }
+				}
+			});
+			const input = blessed.textbox({
+				parent: box,
+				top: 2,
+				left: 2,
+				width: '90%',
+				height: 1,
+				inputOnFocus: true,
+				style: {
+					fg: 'white',
+					bg: 'black',
+					focus: { bg: 'blue' }
+				}
+			});
+			input.focus();
+			this.screen.render();
+			input.on('submit', (value) => {
+				box.destroy();
+				this.screen.render();
+				resolve(value);
+			});
+			input.on('cancel', () => {
+				box.destroy();
+				this.screen.render();
+				resolve(null);
+			});
+			input.key(['escape', 'q'], () => {
+				input.emit('cancel');
+			});
+		});
+	}
+
+	getState() {
+		return {
+			urls: { ...this.urls },
+			commands: this.commands,
+			components: [...this.components],
+			watchMode: this.watchMode,
+			isPaused: this.isPaused
+		};
+	}
+
+	setState(state) {
+		if (state) {
+			this.urls = { ...state.urls };
+			this.commands = state.commands;
+			this.components = [...state.components];
+			this.watchMode = state.watchMode;
+			this.isPaused = state.isPaused;
+			this.updateHeader();
+			this.render();
+		}
+	}
+
+	destroy() {
+		if (this.isInitialized && this.screen) {
+			this.screen.destroy();
+			this.isInitialized = false;
+			this.screen = null;
+			this.headerBox = null;
+			this.logBox = null;
+		}
+	}
+}
+
+const tui = new TUI();
+export default tui;

package/lib/utils.js

@@ -4,6 +4,7 @@ import { readdir } from 'node:fs/promises';
 import { fileURLToPath } from 'url';
 import project from './project.js';
 import log from './logging.js';
+import tui from './tui.js';
 
 export async function getThisPackageVersion() {
 	return JSON.parse(await fs.readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json'))).version
@@ -11,6 +12,7 @@ export async function getThisPackageVersion() {
 
 export function clearScreen() {
 	if (!process.stdout.isTTY) { return; }
+	if (tui.isInitialized) { return; }
 	process.stdout.write('\x1B[2J\x1B[0f');
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdc-build-wp",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"
@@ -22,13 +22,13 @@
 		"sdc-build-wp": "./index.js"
 	},
 	"dependencies": {
-		"@inquirer/prompts": "^7.9.0",
 		"@stylistic/eslint-plugin": "^5.4.0",
 		"@stylistic/stylelint-plugin": "^4.0.0",
 		"@typescript-eslint/eslint-plugin": "^8.46.1",
 		"@typescript-eslint/parser": "^8.46.1",
 		"@wordpress/scripts": "^30.25.0",
 		"autoprefixer": "^10.4.21",
+		"blessed": "^0.1.81",
 		"browser-sync": "^3.0.4",
 		"chalk": "^5.6.2",
 		"chokidar": "^4.0.3",