sdc-build-wp 5.0.2 → 5.1.0

package/lib/build.js

@@ -26,7 +26,8 @@ export async function build(watch = false) {
 
 		promisesBuilds.push(
 			project.components[build].init().catch(error => {
-				log('error', `Failed to initialize ${build} component: ${error.message}`);
+				console.error(error);
+				log('error', `Failed to initialize ${build} component`);
 				return { failed: true, component: build, error };
 			})
 		);
@@ -48,7 +49,7 @@ export async function build(watch = false) {
 		project.builds.splice(project.builds.indexOf('server'), 1);
 		project.builds.push('server');
 		log('info', `Started watching [${project.builds.join(', ')}]`);
-		log('info', `[r] to restart, [c] to clear cache, [p] to pause/resume, [q] to quit`);
+		log('info', `[r]estart, [c]lear cache, [p]ause/resume, [n]ew component, [q]uit`);
 
 		for (let build of project.builds) {
 			try {

package/lib/components/blocks.js

@@ -108,7 +108,7 @@ export default class BlocksComponent extends BaseComponent {
 			}
 		}
 		if (workingBlockJson === null) {
-			this.log('error', `Failed building ${entry} blocks - no block.json found.`);
+			this.log('error', `Failed building ${entryLabel} - no block.json found.`);
 			return false;
 		}
 
@@ -177,6 +177,19 @@ export default class BlocksComponent extends BaseComponent {
 		}
 	}
 
+	addBlock(blockPath) {
+		if (!this.globs.includes(blockPath)) {
+			this.globs.push(blockPath);
+			if (this.watcher) {
+				this.watcher.add([`${blockPath}/src`, `${blockPath}/src/**/*`]);
+			}
+			this.build(blockPath).catch(err => {
+				console.error(err);
+				this.log('error', `Failed initial build for new block ${blockPath}`);
+			});
+		}
+	}
+
 	watch() {
 		const watchPaths = this.globs.map(block => `${block}/src`);
 		const buildQueue = new Set();
@@ -277,7 +290,8 @@ export default class BlocksComponent extends BaseComponent {
 						if (path.endsWith('.js')) {
 							if (!this.project.components.scripts.isBuilding) {
 								this.project.components.scripts.lint(path).catch(lintError => {
-									this.log('warn', `Linting failed for ${path}: ${lintError.message}`);
+									console.error(lintError);
+									this.log('warn', `Linting failed for ${path}`);
 								});
 							}
 						}

package/lib/components/scripts.js

@@ -99,6 +99,9 @@ export default class ScriptsComponent extends BaseComponent {
 			if (!this.project.isRunning) { return; }
 			try {
 				await this.process();
+				if (this.project.components.blocks && (path.endsWith('.js') || path.endsWith('.jsx') || path.endsWith('.ts') || path.endsWith('.tsx'))) {
+					await this.checkAndRebuildAffectedBlocks(path);
+				}
 			} catch (error) {
 				console.error(error);
 				this.log('error', `Failed to process scripts`);
@@ -106,6 +109,35 @@ export default class ScriptsComponent extends BaseComponent {
 		});
 	}
 
+	async checkAndRebuildAffectedBlocks(changedPath) {
+		if (!this.project.components.blocks || !this.project.components.blocks.globs) {
+			return;
+		}
+		const affectedBlocks = new Set();
+		for (const blockPath of this.project.components.blocks.globs) {
+			try {
+				const dependencies = await this.project.components.blocks.getBlockDependencies(blockPath);
+				if (dependencies.includes(changedPath)) {
+					affectedBlocks.add(blockPath);
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		}
+
+		if (!affectedBlocks.size) { return; }
+		for (const blockPath of affectedBlocks) {
+			try {
+				if (this.project.components.server?.server) {
+					this.project.components.server.server.notify('Building block...', 5000);
+				}
+				await this.project.components.blocks.process(blockPath);
+			} catch (error) {
+				//
+			}
+		}
+	}
+
 	async lint(entry, options) {
 		try {
 			const eslint = new ESLint({

package/lib/project.js

@@ -3,6 +3,7 @@ import { hideBin } from 'yargs/helpers';
 import { readFile } from 'fs/promises';
 import path from 'path';
 import { promises as fs } from 'fs';
+import { fileURLToPath } from 'url';
 import chokidar from 'chokidar';
 import { restartBuild } from './build.js';
 import * as utils from './utils.js';
@@ -10,6 +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';
 
 let project = {
 	config: {},
@@ -114,7 +116,7 @@ export async function init() {
 	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');
+		project.builds = ['cache', ...project.builds];
 	}
 
 	if (Object.keys(project.entries).length === 0) {
@@ -174,11 +176,19 @@ export async function init() {
 export function keypressListen() {
 	if (!process.stdin.isTTY) { return; }
 
-	process.stdin.setRawMode(true);
-	process.stdin.resume();
-	process.stdin.setEncoding('utf8');
+	let isPrompting = false;
 
-	process.stdin.on('data', async (key) => {
+	const installRaw = () => {
+		if (!process.stdin.isTTY) return;
+		try { process.stdin.setRawMode(true); } catch {}
+		process.stdin.resume();
+		process.stdin.setEncoding('utf8');
+	};
+
+	installRaw();
+
+	const handler = async (key) => {
+		if (isPrompting) { return; }
 		switch (key) {
 			case '\r': // [Enter]/[Return]
 				console.log('\r');
@@ -203,8 +213,149 @@ export function keypressListen() {
 				log('info', 'Restarted build process');
 				await restartBuild();
 				break;
+			case 'n': // New menu
+				isPrompting = true;
+				process.stdin.removeListener('data', handler);
+				try {
+					try { process.stdin.setRawMode(false); } catch {}
+					await handleCreateNew();
+				} finally {
+					isPrompting = false;
+					installRaw();
+					process.stdin.on('data', handler);
+				}
+				break;
 		}
-	});
+	};
+
+	process.stdin.on('data', handler);
+}
+
+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; }
+	if (typeKey === 'b') {
+		let name;
+		try {
+			name = await input({ message: 'Block name:' });
+		} catch (error) {
+			return;
+		}
+		if (!name) { log('warn', 'No name provided.'); return; }
+		const slug = utils.slugify(name);
+		const blockDir = `${project.path}/blocks/${slug}`;
+		const srcDir = `${blockDir}/src`;
+		try {
+			await fs.access(blockDir);
+			log('warn', `Block ${slug} already exists.`);
+			return;
+		} catch (error) {
+			//
+		}
+		const created = await utils.ensureDir(srcDir);
+		if (!created) { return; }
+		const blockJsonPath = `${srcDir}/block.json`;
+		const indexJsPath = `${srcDir}/index.js`;
+		try {
+			const libDir = path.dirname(fileURLToPath(import.meta.url));
+			const templateBlockJsonRaw = await fs.readFile(path.resolve(libDir, 'templates/block/block.json'), 'utf8');
+			let templateBlock = JSON.parse(templateBlockJsonRaw);
+			templateBlock.name = `custom/${slug}`;
+			templateBlock.title = name;
+			await fs.writeFile(blockJsonPath, JSON.stringify(templateBlock, null, '\t'));
+			const templateIndex = await fs.readFile(path.resolve(libDir, 'templates/block/index.js'), 'utf8');
+			await fs.writeFile(indexJsPath, templateIndex);
+			log('success', `Created block at blocks/${slug}`);
+			if (project.components.blocks) {
+				project.components.blocks.addBlock(blockDir);
+			}
+		} catch (error) {
+			console.error(error);
+			log('error', `Failed to scaffold block`);
+		}
+	} else if (typeKey === 'p') {
+		let name;
+		try { name = await input({ message: 'Pattern name:' }); } catch (error) { return; }
+		if (!name) { log('warn', 'No name provided.'); return; }
+		const slug = utils.slugify(name);
+		const patternsDir = `${project.path}/patterns`;
+		await utils.ensureDir(patternsDir);
+		const filePath = `${patternsDir}/${slug}.php`;
+		try {
+			await fs.access(filePath);
+			log('warn', `Pattern ${slug}.php already exists.`);
+			return;
+		} catch (error) {
+			//
+		}
+		try {
+			const libDir = path.dirname(fileURLToPath(import.meta.url));
+			const templatePath = path.resolve(libDir, 'templates/pattern/pattern.php');
+			let template = await fs.readFile(templatePath, 'utf8');
+			template = template.replace(/Title:\s.*$/m, `Title: ${name}`);
+			template = template.replace(/Slug:\s.*$/m, `Slug: custom/${slug}`);
+			await fs.writeFile(filePath, template);
+			log('success', `Created pattern at patterns/${slug}.php`);
+			if (project.components.php?.watcher) {
+				project.components.php.watcher.add(filePath);
+			} else if (project.components.php?.globs && !project.components.php.globs.includes(filePath)) {
+				project.components.php.globs.push(filePath);
+			}
+		} catch (error) {
+			console.error(error);
+			log('error', `Failed to create pattern`);
+		}
+	} else if (typeKey === 's') {
+		let name;
+		try { name = await input({ message: 'Style variation name:' }); } catch (error) { return; }
+		if (!name) { log('warn', 'No name provided.'); return; }
+		const slug = utils.slugify(name);
+		const stylesDir = `${project.path}/styles`;
+		await utils.ensureDir(stylesDir);
+		const filePath = `${stylesDir}/${slug}.json`;
+		try {
+			await fs.access(filePath);
+			log('warn', `Style variation ${slug}.json already exists.`);
+			return;
+		} catch (error) {
+
+		}
+		try {
+			const libDir = path.dirname(fileURLToPath(import.meta.url));
+			const templatePath = path.resolve(libDir, 'templates/style/style.json');
+			let templateRaw = await fs.readFile(templatePath, 'utf8');
+			let templateObj;
+			try {
+				templateObj = JSON.parse(templateRaw);
+			} catch (error) {
+				console.error(error);
+				throw new Error('Invalid style variation template JSON');
+			}
+			templateObj.title = name;
+			templateObj.slug = slug;
+			await fs.writeFile(filePath, JSON.stringify(templateObj, null, '\t'));
+			log('success', `Created style variation at styles/${slug}.json`);
+		} catch (error) {
+			console.error(error);
+			log('error', `Failed to create style variation`);
+		}
+	}
 }
 
 export async function convertPackageToConfig() {

package/lib/templates/block/block.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"version": "1.0.0",
+	"name": "custom/name-of-block",
+	"title": "Name of Block",
+	"category": "custom",
+	"icon": "admin-page",
+	"editorScript": "file:./index.js"
+}

package/lib/templates/block/index.js

@@ -0,0 +1,19 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+
+import metadata from './block.json';
+
+// import './style.scss';
+// import './editor.scss';
+
+registerBlockType(metadata.name, {
+	edit: ({ attributes, setAttributes }) => {
+		const blockProps = useBlockProps();
+		return (
+			<div { ...blockProps }><em>Placeholder for {metadata.title}</em></div>
+		);
+	},
+	save: ({ attributes }) => {
+		return null;
+	},
+});

package/lib/templates/pattern/pattern.php

@@ -0,0 +1,8 @@
+<?php
+/**
+ * Title: New Pattern
+ * Slug: custom/new-pattern
+ */
+?>
+
+New Pattern

package/lib/templates/style/style.json

@@ -0,0 +1,10 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3,
+	"title": "New Style",
+	"slug": "new-style",
+	"blockTypes": [ "core/group" ],
+	"styles": {
+		"css": "& {}"
+	}
+}

package/lib/utils.js

@@ -3,6 +3,7 @@ import { promises as fs } from 'fs';
 import { readdir } from 'node:fs/promises';
 import { fileURLToPath } from 'url';
 import project from './project.js';
+import log from './logging.js';
 
 export async function getThisPackageVersion() {
 	return JSON.parse(await fs.readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json'))).version
@@ -197,3 +198,23 @@ export function addEntriesByFiletypes(filetypes = []) {
 	}
 	return finalFiles;
 }
+
+export function slugify(str) {
+	return str
+		.toLowerCase()
+		.replace(/[^a-z0-9\s-]/g, '')
+		.trim()
+		.replace(/\s+/g, '-')
+		.replace(/-+/g, '-');
+}
+
+export async function ensureDir(dir) {
+	try {
+		await fs.mkdir(dir, { recursive: true });
+		return true;
+	} catch (error) {
+		console.error(error);
+		log('error', `Failed to create directory ${dir}`);
+		return false;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdc-build-wp",
-	"version": "5.0.2",
+	"version": "5.1.0",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"
@@ -22,24 +22,25 @@
 		"sdc-build-wp": "./index.js"
 	},
 	"dependencies": {
-		"@stylistic/eslint-plugin": "^5.2.2",
+		"@inquirer/prompts": "^7.8.1",
+		"@stylistic/eslint-plugin": "^5.2.3",
 		"@stylistic/stylelint-plugin": "^4.0.0",
-		"@typescript-eslint/eslint-plugin": "^8.38.0",
-		"@typescript-eslint/parser": "^8.38.0",
-		"@wordpress/scripts": "^30.20.0",
+		"@typescript-eslint/eslint-plugin": "^8.39.0",
+		"@typescript-eslint/parser": "^8.39.0",
+		"@wordpress/scripts": "^30.21.0",
 		"autoprefixer": "^10.4.21",
 		"browser-sync": "^3.0.4",
-		"chalk": "^5.4.1",
+		"chalk": "^5.5.0",
 		"chokidar": "^4.0.3",
 		"esbuild": "^0.25.8",
-		"eslint": "^9.32.0",
-		"fs-extra": "^11.3.0",
+		"eslint": "^9.33.0",
+		"fs-extra": "^11.3.1",
 		"postcss": "^8.5.6",
 		"postcss-scss": "^4.0.9",
 		"postcss-sort-media-queries": "^5.2.0",
-		"sass": "^1.89.2",
+		"sass": "^1.90.0",
 		"sharp": "^0.34.3",
-		"stylelint": "^16.23.0",
+		"stylelint": "^16.23.1",
 		"svgo": "^4.0.0",
 		"tail": "^2.2.6",
 		"yargs": "^18.0.0"