sdc-build-wp 5.6.0 → 5.6.2

package/lib/build.js

@@ -4,17 +4,16 @@ import log from './logging.js';
 import { styleText } from 'node:util';
 import tui from './tui.js';
 
-
 export async function build(watch = false) {
 
 	if (watch) {
 		tui.init();
 		tui.setComponents(project.builds, true);
-		const commands = `Commands: ${styleText(['underline', 'green'], 'r')}estart, ${styleText(['underline', 'green'], 'c')}lear cache, ${styleText(['underline', 'green'], 'p')}ause/resume, ${styleText(['underline', 'green'], 'n')}ew component, ${styleText(['underline', 'green'], 'q')}uit`;
+		const commands = `${styleText('gray', 'Commands:')} ${styleText(['underline', 'green'], 'r')}estart, ${styleText(['underline', 'green'], 'c')}lear cache, ${styleText(['underline', 'green'], 'p')}ause/resume, ${styleText(['underline', 'green'], 'n')}ew component, ${styleText(['underline', 'green'], 'q')}uit`;
 		tui.setCommands(commands);
 	}
 
-	log('info', `Started sdc-build-wp`);
+	log('info', 'Started sdc-build-wp');
 
 	if (project.builds.includes('cache')) {
 		try {
@@ -61,6 +60,7 @@ export async function build(watch = false) {
 		project.builds.splice(project.builds.indexOf('server'), 1);
 		project.builds.push('server');
 
+		tui.finishInitialLoading();
 		log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 		log('info', `Started watching [${project.builds.join(', ')}]`);
 
@@ -77,6 +77,7 @@ export async function build(watch = false) {
 			}
 		}
 	} else {
+		tui.finishInitialLoading();
 		log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 		process.emit('SIGINT');
 	}

package/lib/components/blocks.js

@@ -1,6 +1,7 @@
+import { fileURLToPath } from 'url';
 import BaseComponent from './base.js';
-import { access, stat, readFile } from 'fs/promises';
-import { execFile } from 'child_process';
+import { stat, readFile } from 'fs/promises';
+import { exec } from 'child_process';
 import { promisify } from 'util';
 import { createHash } from 'crypto';
 
@@ -9,31 +10,6 @@ export default class BlocksComponent extends BaseComponent {
 	constructor() {
 		super();
 		this.description = `Process the theme's WordPress blocks`;
-		this._didLogWpScriptsFallback = false;
-	}
-
-	async getWpScriptsRunner() {
-		const localWpScripts = `${this.project.path}/node_modules/@wordpress/scripts/bin/wp-scripts.js`;
-
-		try {
-			await access(localWpScripts);
-			return {
-				command: process.execPath,
-				baseArgs: [localWpScripts]
-			};
-		} catch {
-			if (!this._didLogWpScriptsFallback) {
-				this.log('info', 'Using temporary @wordpress/scripts via npx for block builds');
-				this._didLogWpScriptsFallback = true;
-			}
-
-			const npxCommand = process.platform === 'win32' ? 'npx.cmd' : 'npx';
-
-			return {
-				command: npxCommand,
-				baseArgs: ['--yes', '--package', '@wordpress/scripts@31', 'wp-scripts']
-			};
-		}
 	}
 
 	async init() {
@@ -156,17 +132,17 @@ export default class BlocksComponent extends BaseComponent {
 		this.clearHashCache([workingBlockJson, ...dependencies]);
 
 		try {
-			const runner = await this.getWpScriptsRunner();
-			const args = [
-				...runner.baseArgs,
-				'build',
+			const cmds = [
+				`${this.project.path}/node_modules/@wordpress/scripts/bin/wp-scripts.js`,
+				`build`,
 				`--source-path=.${entry.replace(this.project.path, '')}/src`,
 				`--output-path=.${entry.replace(this.project.path, '')}/build`,
-				'--webpack-copy-php'
+				`--webpack-copy-php`,
+				`--config=${this.path.resolve(this.path.dirname(fileURLToPath(import.meta.url)), '../../webpack.config.js')}`,
 			];
-			const execFilePromise = promisify(execFile);
+			const execPromise = promisify(exec);
 			const timeoutMS = 40000;
-			const buildPromise = execFilePromise(runner.command, args, {
+			const buildPromise = execPromise(cmds.join(' '), {
 				maxBuffer: 1024 * 1024 * 10,
 				cwd: this.project.path
 			});

package/lib/tui.js

@@ -1,16 +1,31 @@
 import React from 'react';
 import { Box, Text, render as renderInk, useInput, useStdout } from 'ink';
+import Spinner from 'ink-spinner';
+import { TitledBox, titleStyles } from '@mishieck/ink-titled-box';
 import { styleText } from 'node:util';
 import log from './logging.js';
 
 const sgrMouseRegex = /\x1b\[<(\d+);(\d+);(\d+)([mM])/g;
+const ansiSgrRegex = /\x1b\[[0-9;]*m/g;
+const headerColumnGap = 2;
+
+function getVisibleTextLength(text) {
+	return (text || '').replace(ansiSgrRegex, '').length;
+}
+
+function getWrappedLineCount(text, width) {
+	return Math.max(1, Math.ceil(getVisibleTextLength(text) / Math.max(1, width)));
+}
 
 function TUIRoot({ tui }) {
 	const { stdout } = useStdout();
 	const terminalRows = stdout?.rows || 24;
-	const headerLines = tui.getHeaderLines();
+	const terminalColumns = stdout?.columns || 80;
+	const header = tui.getHeaderLayout(terminalColumns);
 	const promptLines = tui.getPromptRenderLines();
-	const availableLogRows = Math.max(3, terminalRows - headerLines.length - promptLines.length - 6);
+	const isInitialLoading = tui.isInitialLoading();
+	const loadingLineCount = isInitialLoading ? 1 : 0;
+	const availableLogRows = Math.max(3, terminalRows - header.lineCount - promptLines.length - loadingLineCount - 4);
 	const visibleLogs = tui.getVisibleLogLines(availableLogRows);
 
 	useInput((input, key) => {
@@ -51,23 +66,45 @@ function TUIRoot({ tui }) {
 		Box,
 		{ flexDirection: 'column' },
 		React.createElement(
-			Box,
+			TitledBox,
 			{
 				borderStyle: 'round',
+				titles: ['SDC Build WP'],
 				borderColor: 'blue',
 				paddingX: 1,
 				flexDirection: 'column'
 			},
-			headerLines.map((line, index) => React.createElement(Text, { key: `header-${index}` }, line))
+			header.titleLine || header.urlLine
+				? React.createElement(
+					Box,
+					{
+						flexDirection: 'row',
+						flexWrap: 'wrap',
+						columnGap: headerColumnGap
+					},
+					header.titleLine ? React.createElement(Text, { key: 'header-title' }, header.titleLine) : null,
+					header.urlLine ? React.createElement(Text, { key: 'header-url' }, header.urlLine) : null
+				)
+				: null,
+			header.detailLines.map((line, index) => React.createElement(Text, { key: `header-${index}` }, line)),
+			isInitialLoading
+				? React.createElement(
+					Text,
+					{ color: 'cyan' },
+					React.createElement(Spinner, { type: 'dots' }),
+					' Initial loading...'
+				)
+				: null
 		),
 		React.createElement(
 			Box,
 			{
 				borderStyle: 'single',
 				borderColor: 'blue',
+				borderTop: false,
 				paddingX: 1,
 				flexDirection: 'column',
-				height: availableLogRows + 2
+				height: availableLogRows + 1
 			},
 			visibleLogs.map((line, index) => React.createElement(Text, { key: `log-${index}` }, line))
 		),
@@ -104,14 +141,17 @@ class TUI {
 		this._logScrollOffset = 0;
 		this._activePrompt = null;
 		this._mouseDataHandler = null;
+		this._isInitialLoading = false;
 	}
 
 	init() {
 		if (this.isInitialized) {
+			this._isInitialLoading = true;
 			this.render();
 			return;
 		}
 
+		this._isInitialLoading = true;
 		this.isInitialized = true;
 		this.app = renderInk(React.createElement(TUIRoot, { tui: this }), {
 			exitOnCtrlC: false,
@@ -126,6 +166,19 @@ class TUI {
 		this.render();
 	}
 
+	isInitialLoading() {
+		return this._isInitialLoading;
+	}
+
+	finishInitialLoading() {
+		if (!this._isInitialLoading) {
+			return;
+		}
+
+		this._isInitialLoading = false;
+		this.render();
+	}
+
 	isMouseEscapeSequence(input) {
 		if (!input || typeof input !== 'string') {
 			return false;
@@ -189,50 +242,63 @@ class TUI {
 		process.stdout.write('\x1b[?1000l\x1b[?1002l\x1b[?1006l');
 	}
 
-	getHeaderLines() {
-		const lines = [];
+	getHeaderLayout(terminalColumns = 80) {
+		const detailLines = [];
+		const innerWidth = Math.max(1, terminalColumns - 4);
+		const statusMessages = [];
 
-		let titleLine = ' ' + styleText(['bold', 'blue'], 'SDC Build WP');
-		if (this.isPaused) {
-			titleLine += styleText(['bold', 'yellow'], ' [PAUSED]');
-		}
-		if (!this.isMouseEnabled) {
-			titleLine += styleText(['bold', 'yellow'], ' [TEXT SELECT - Press Enter to Exit]');
-		}
+		let titleLine = '';
 		if (this.components.length > 0) {
-			titleLine += styleText('gray', ' [') + styleText('cyan', this.components.join(', ')) + styleText('gray', ']');
+			titleLine = styleText('gray', 'Components: ') + styleText('cyan', this.components.join(', '));
 		}
-		lines.push(titleLine);
 
+		let urlLine = '';
 		if (this.urls.local || this.urls.external) {
-			let urlLine = ' ';
 			if (this.urls.local) {
-				urlLine += `Local: ${styleText('green', this.urls.local)}`;
+				urlLine = `${styleText('gray', 'Local:')} ${styleText('green', this.urls.local)}`;
 			}
 			if (this.urls.external) {
-				if (urlLine.length > 1) {
+				if (urlLine) {
 					urlLine += '  ';
 				}
-				urlLine += `External: ${styleText('green', this.urls.external)}`;
+				urlLine += `${styleText('gray', 'External:')} ${styleText('green', this.urls.external)}`;
 			}
-			lines.push(urlLine);
-		} else {
-			lines.push(' ');
 		}
 
 		if (this.commands) {
-			lines.push(' ' + this.commands);
-		} else {
-			lines.push(' ');
+			detailLines.push(this.commands);
+		}
+
+		if (this.isPaused) {
+			statusMessages.push(styleText(['bold', 'yellow'], 'PAUSED'));
 		}
 
 		if (!this.isMouseEnabled) {
-			lines.push(' ' + styleText('yellow', 'Text select on. Press Enter to enable mouse.'));
-		} else {
-			lines.push(' ');
+			statusMessages.push(styleText(['bold', 'yellow'], 'TEXT SELECT') + styleText('yellow', ' - Press [ENTER] to enable scroll.'));
 		}
 
-		return lines;
+		if (statusMessages.length > 0) {
+			detailLines.push(statusMessages.join(styleText('gray', ' | ')));
+		}
+
+		const hasTitleOrUrl = Boolean(titleLine || urlLine);
+		const titleWidth = getVisibleTextLength(titleLine);
+		const urlWidth = getVisibleTextLength(urlLine);
+		const topLineCount = hasTitleOrUrl
+			? (titleLine && urlLine
+				? (titleWidth + headerColumnGap + urlWidth <= innerWidth
+					? 1
+					: getWrappedLineCount(titleLine, innerWidth) + getWrappedLineCount(urlLine, innerWidth))
+				: getWrappedLineCount(titleLine || urlLine, innerWidth))
+			: 0;
+		const detailLineCount = detailLines.reduce((count, line) => count + getWrappedLineCount(line, innerWidth), 0);
+
+		return {
+			titleLine,
+			urlLine,
+			detailLines,
+			lineCount: topLineCount + detailLineCount
+		};
 	}
 
 	setURLs(local, external) {
@@ -325,7 +391,7 @@ class TUI {
 			return [
 				this._activePrompt.prompt,
 				`${styleText('gray', '>')} ${this._activePrompt.value}${cursor}`,
-				styleText('gray', 'Type your value, Enter to submit, Esc/q to cancel.')
+				styleText('gray', 'Type your value, Enter to submit, Esc to cancel.')
 			];
 		}
 
@@ -375,7 +441,7 @@ class TUI {
 				resolve(value);
 				return;
 			}
-			if (key.escape || input === 'q') {
+			if (key.escape) {
 				const resolve = this._activePrompt.resolve;
 				this._activePrompt = null;
 				this.render();
@@ -489,6 +555,7 @@ class TUI {
 		this.isMouseEnabled = true;
 		this._activePrompt = null;
 		this._logScrollOffset = 0;
+		this._isInitialLoading = false;
 
 		if (process.stdout.isTTY) {
 			process.stdout.write('\x1b[?25h');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdc-build-wp",
-	"version": "5.6.0",
+	"version": "5.6.2",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"
@@ -22,16 +22,20 @@
 		"sdc-build-wp": "./index.js"
 	},
 	"dependencies": {
+		"@mishieck/ink-titled-box": "^0.4.2",
 		"@stylistic/eslint-plugin": "^5.6.1",
 		"@stylistic/stylelint-plugin": "^4.0.0",
 		"@typescript-eslint/eslint-plugin": "^8.48.1",
 		"@typescript-eslint/parser": "^8.48.1",
+		"@wordpress/scripts": "^31.4.0",
+		"ajv": "^8.18.0",
 		"autoprefixer": "^10.4.24",
 		"browser-sync": "^3.0.4",
 		"chokidar": "^5.0.0",
 		"esbuild": "^0.27.3",
 		"eslint": "^9.39.1",
 		"ink": "^6.8.0",
+		"ink-spinner": "^5.0.0",
 		"postcss": "^8.5.6",
 		"postcss-scss": "^4.0.9",
 		"postcss-sort-media-queries": "^5.2.0",

package/webpack.config.js

@@ -1,11 +1,4 @@
-let defaultConfig = {};
-
-try {
-	const wpConfig = await import('@wordpress/scripts/config/webpack.config.js');
-	defaultConfig = wpConfig.default || {};
-} catch {
-	defaultConfig = {};
-}
+import defaultConfig from '@wordpress/scripts/config/webpack.config.js';
 
 export default {
 	...defaultConfig,