sdc-build-wp 5.6.1 → 5.6.3

package/.stylelintrc.json

@@ -1,14 +1,12 @@
 {
-	"plugins": [
-		"@stylistic/stylelint-plugin"
-	],
+	"plugins": ["@stylistic/stylelint-plugin", "stylelint-use-logical"],
 	"rules": {
 		"@stylistic/indentation": "tab",
 		"@stylistic/max-empty-lines": 1,
 		"rule-empty-line-before": [
 			"always",
 			{
-				"ignore": [ "after-comment" ]
+				"ignore": ["after-comment"]
 			}
 		],
 		"@stylistic/block-opening-brace-space-before": "always-multi-line",
@@ -21,6 +19,23 @@
 		"color-named": "never",
 		"shorthand-property-no-redundant-values": true,
 		"@stylistic/number-leading-zero": "always",
-		"@stylistic/no-eol-whitespace": true
+		"@stylistic/no-eol-whitespace": true,
+		"csstools/use-logical": [
+			"always",
+			{
+				"except": [
+					"width",
+					"height",
+					"min-width",
+					"max-width",
+					"min-height",
+					"max-height",
+					"top",
+					"right",
+					"bottom",
+					"left"
+				]
+			}
+		]
 	}
 }

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/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.1",
+	"version": "5.6.3",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"
@@ -22,28 +22,31 @@
 		"sdc-build-wp": "./index.js"
 	},
 	"dependencies": {
-		"@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",
+		"@mishieck/ink-titled-box": "^0.4.2",
+		"@stylistic/eslint-plugin": "^5.10.0",
+		"@stylistic/stylelint-plugin": "^5.0.1",
+		"@typescript-eslint/eslint-plugin": "^8.57.0",
+		"@typescript-eslint/parser": "^8.57.1",
+		"@wordpress/scripts": "^31.6.0",
 		"ajv": "^8.18.0",
-		"autoprefixer": "^10.4.24",
+		"autoprefixer": "^10.4.27",
 		"browser-sync": "^3.0.4",
 		"chokidar": "^5.0.0",
-		"esbuild": "^0.27.3",
-		"eslint": "^9.39.1",
+		"esbuild": "^0.27.4",
+		"eslint": "^10.0.3",
 		"ink": "^6.8.0",
-		"postcss": "^8.5.6",
+		"ink-spinner": "^5.0.0",
+		"postcss": "^8.5.8",
 		"postcss-scss": "^4.0.9",
-		"postcss-sort-media-queries": "^5.2.0",
+		"postcss-sort-media-queries": "^6.3.2",
 		"prettier": "^3.8.1",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
-		"sass": "^1.97.3",
+		"sass": "^1.98.0",
 		"sharp": "^0.34.5",
-		"stylelint": "^16.26.1",
-		"svgo": "^4.0.0",
+		"stylelint": "^17.4.0",
+		"stylelint-use-logical": "^2.1.3",
+		"svgo": "^4.0.1",
 		"tail": "^2.2.6",
 		"yargs": "^18.0.0"
 	}