sdc-build-wp 4.2.0 → 4.3.1

package/README.md

@@ -4,6 +4,8 @@
 npm install sdc-build-wp
 sdc-build-wp # build
 sdc-build-wp --watch # build and watch
+sdc-build-wp --watch --builds=style,scripts # comma-seperated list of components to include
+sdc-build-wp --help
 ```
 
 ## Develop

package/index.js

@@ -1,150 +1,53 @@
 #!/usr/bin/env node
-import path from 'path';
 import parseArgs from 'minimist';
 const argv = parseArgs(process.argv.slice(2));
-import { glob } from 'node:fs/promises';
 import { promises as fs } from 'fs';
 import { Tail } from 'tail';
 import project from './lib/project.js';
-import * as utils from './lib/utils.js';
 import log from './lib/logging.js';
-import * as Components from './lib/components/index.js';
+import * as LibComponents from './lib/components/index.js';
 
-const styleComponent = new Components.style();
-const scriptsComponent = new Components.scripts();
-const blocksComponent = new Components.blocks();
-const imagesComponent = new Components.images();
-const fontsComponent = new Components.fonts();
-const phpComponent = new Components.php();
-const serverComponent = new Components.server();
+project.components = Object.fromEntries(Object.entries(LibComponents).map(([name, Class]) => [name, new Class()]));
 
-let builds = argv.builds ? argv.builds.split(',') : [
-	'sass',
-	'js',
-	'blocks',
-	'images',
-	'fonts',
-	'php'
-];
+if (argv.help || argv.h) {
+console.log(`
+Usage: sdc-build-wp [options] [arguments]
 
-for (const [name, files] of Object.entries(project.package.sdc.entries)) {
-	project.entries[name] = [];
-	files.forEach(function(file) {
-		project.entries[name].push(project.path + file);
-	});
-}
-
-for (const [name, files] of Object.entries(project.entries)) {
-	files.forEach(function(file) {
-		switch (path.parse(file).ext) {
-			case '.scss':
-				if (builds.includes('sass')) {
-					project.files.sass.push({
-						'name': name,
-						'file': file
-					});
-				}
-				break;
-			case '.js':
-				if (builds.includes('js')) {
-					project.files.js.push({
-						'name': name,
-						'file': file
-					});
-				}
-				break;
-		}
-	});
-}
+Options:
+  -h, --help					Show help message and exit
+  -w, --watch					Build and watch
+  -b, --build BUILDS  Build with specific components
 
-(async() => {
+Components:
 
-	let initialBuildTimerStart = Date.now();
-	log('info', `Starting initial build`);
+${Object.entries(project.components).map(([key, component]) => {
+	return `${key}\t\t${component.description}\r\n`;
+}).join('')}
+Examples:
 
-	if (builds.includes('sass')) {
-		project.globs.sass = await Array.fromAsync(
-			glob(project.package?.sdc?.sassGlobPath ||
-			`${project.path}{/_src/style,/blocks}/**/*.scss`)
-		);
-		await styleComponent.process();
-	}
+sdc-build-wp
+sdc-build-wp --watch
+sdc-build-wp --watch --builds=style,scripts
+`);
 
-	if (builds.includes('js')) {
-		project.globs.js = await Array.fromAsync(
-			glob(project.package?.sdc?.jsGlobPath ||
-			`${project.path}/_src/scripts/**/*.js`)
-		);
-		await scriptsComponent.process();
-	}
+process.exit(0);
+}
 
-	if (builds.includes('blocks')) {
-		project.globs.blocks = await Array.fromAsync(
-			glob(`${project.path}/blocks/*`)
-		);
-		project.globs.blocksSass = await Array.fromAsync(
-			glob(`${project.path}/blocks/*/src/*.scss`)
-		);
-		// for (var filename of project.globs.blocksSass) {
-		// 	project.entries[`blocks/${path.basename(path.dirname(filename))}/style`] = [ filename ];
-		// }
-		await blocksComponent.process();
-	}
+project.builds = argv.builds ? argv.builds.split(',') : Object.keys(project.components);
 
-	if (builds.includes('images')) {
-		project.globs.images = await Array.fromAsync(
-			glob(project.package?.sdc?.imagesPath ||
-			`${project.paths.images}/**/*`)
-		);
-		project.globs.imageDirectories = [
-			project.paths.images,
-			...await utils.getAllSubdirectories(project.paths.images)
-		];
-		await imagesComponent.process();
-	}
-
-	if (builds.includes('fonts')) {
-		await fontsComponent.process();
-	}
+(async() => {
 
-	if (builds.includes('php')) {
-		project.globs.php = await Array.fromAsync(
-			glob(project.package?.sdc?.jsGlobPath ||
-			`${project.path}/**/*.php`)
-		);
-		project.globs.blocksPHP = await Array.fromAsync(
-			glob(`${project.path}/blocks/*/build/*.php`)
-		);
-		project.chokidarOpts.ignored.concat(project.globs.blocksPHP);
-		// await phpComponent.process(null, { lintType: 'warn' }); // this errors "Fatal error: Allowed memory size"
+	let initialBuildTimerStart = Date.now();
+	log('info', `Starting initial build`);
+	for (let build of project.builds) {
+		await project.components[build].init();
 	}
-
 	log('info', `Finished initial build in ${Math.round((Date.now() - initialBuildTimerStart) / 1000)} seconds`);
 
-	if (argv.watch) {
-
-		serverComponent.start();
-
-		if (builds.includes('sass')) {
-			styleComponent.watch();
-		}
-
-		if (builds.includes('js')) {
-			scriptsComponent.watch();
+	if (argv.watch || argv.w) {
+		for (let build of project.builds) {
+			await project.components[build].watch();
 		}
-
-		if (builds.includes('blocks')) {
-			blocksComponent.watch();
-		}
-
-		if (builds.includes('images')) {
-			imagesComponent.watch();
-		}
-
-		if (builds.includes('php') && project.shouldPHPLint) {
-			phpComponent.watch();
-		}
-
 		try {
 			await fs.access(project.paths.errorLog);
 			let errorLogTail = new Tail(project.paths.errorLog);
@@ -154,7 +57,6 @@ for (const [name, files] of Object.entries(project.entries)) {
 		} catch (error) {
 			log('info', `Cannot find error log @ ${project.paths.errorLog}. Skipping watching php error logs`);
 		}
-
 	}
 
 })();

package/lib/components/base.js

@@ -1,16 +1,27 @@
 import path from 'path';
+import * as utils from '../utils.js';
 import project from '../project.js';
 import log from '../logging.js';
 import chokidar from 'chokidar';
+import { glob } from 'node:fs/promises';
 
 class BaseComponent {
 
 	constructor() {
+		this.description = '';
 		this.timer = null;
 		this.path = path;
+		this.utils = utils;
 		this.project = project;
 		this.log = log;
 		this.chokidar = chokidar;
+		this.glob = glob;
+		this.files = [];
+		this.globs = [];
+	}
+
+	async init() {
+		//
 	}
 
 	start() {
@@ -27,8 +38,8 @@ class BaseComponent {
 		this.log('success', `${options.verb}${options.itemLabel ? ` ${options.itemLabel}` : ''} in ${options.timerEnd - options.timerStart}ms`);
 	}
 
-	entryBasename(entry) {
-		return this.path.parse(entry).base;
+	async watch() {
+		//
 	}
 
 }

package/lib/components/blocks.js

@@ -3,10 +3,24 @@ import { stat } from 'fs/promises';
 import { spawn } from 'child_process';
 import process from 'process';
 
-class BlocksComponent extends BaseComponent {
+export default class BlocksComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Process the theme's WordPress blocks`;
+	}
+
+	async init() {
+		this.globs = await Array.fromAsync(
+			this.glob(`${this.project.path}/blocks/*`)
+		);
+		this.globsSass = await Array.fromAsync(
+			this.glob(`${this.project.path}/blocks/*/src/*.scss`)
+		);
+		// for (var filename of this.globsSass) {
+		// 	this.project.entries[`blocks/${this.path.basename(this.path.dirname(filename))}/style`] = [ filename ];
+		// }
+		await this.process();
 	}
 
 	async build(entry, options) {
@@ -55,13 +69,13 @@ class BlocksComponent extends BaseComponent {
 		if (entry) {
 			await this.build(entry);
 		} else {
-			const promisesBlocks = this.project.globs.blocks.map(block => this.build(block));
+			const promisesBlocks = this.globs.map(block => this.build(block));
 			await Promise.all(promisesBlocks);
 		}
 	}
 
 	watch() {
-		for (let block of this.project.globs.blocks) {
+		for (let block of this.globs) {
 			this.chokidar.watch(`${block}/src`, {
 				...this.project.chokidarOpts
 			}).on('all', (event, path) => {
@@ -94,5 +108,3 @@ function cmd(commands) {
     });
   });
 }
-
-export { BlocksComponent as default }

package/lib/components/fonts.js

@@ -2,10 +2,15 @@ import BaseComponent from './base.js';
 import { readdir } from 'fs/promises';
 import fs from 'fs-extra';
 
-class FontsComponent extends BaseComponent {
+export default class FontsComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Copy font files`;
+	}
+
+	async init() {
+		await this.process();
 	}
 
 	async build(entry) {
@@ -32,5 +37,3 @@ class FontsComponent extends BaseComponent {
 	}
 
 }
-
-export { FontsComponent as default }

package/lib/components/images.js

@@ -4,10 +4,23 @@ import imageminJpegtran from 'imagemin-jpegtran';
 import imageminPngquant from 'imagemin-pngquant';
 import imageminSvgo from 'imagemin-svgo';
 
-class ImagesComponent extends BaseComponent {
+export default class ImagesComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Compress image files`;
+	}
+
+	async init() {
+		this.globs = await Array.fromAsync(
+			this.glob(this.project.package?.sdc?.imagesPath ||
+			`${this.project.paths.images}/**/*`)
+		);
+		this.globsDirectories = [
+			this.project.paths.images,
+			...await this.utils.getAllSubdirectories(this.project.paths.images)
+		];
+		await this.process();
 	}
 
 	async build(entry, options) {
@@ -30,7 +43,7 @@ class ImagesComponent extends BaseComponent {
 	}
 
 	async process() {
-		const promisesImages = this.project.globs.imageDirectories.map(directory => this.build(directory));
+		const promisesImages = this.globsDirectories.map(directory => this.build(directory));
 		await Promise.all(promisesImages);
 	}
 
@@ -43,5 +56,3 @@ class ImagesComponent extends BaseComponent {
 	}
 
 }
-
-export { ImagesComponent as default }

package/lib/components/php.js

@@ -3,13 +3,29 @@ import { fileURLToPath } from 'url';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 
-class PHPComponent extends BaseComponent {
+export default class PHPComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Lint (and fix) php files`;
 		this.execPromise = promisify(exec);
 	}
 
+	async init() {
+		this.globs = await Array.fromAsync(
+			this.glob(this.project.package?.sdc?.phpGlobPath ||
+			`${this.project.path}/**/*.php`)
+		);
+		this.globsBlocks = await Array.fromAsync(
+			this.glob(`${this.project.path}/blocks/*/build/*.php`)
+		);
+		this.project.chokidarOpts.ignored = [
+			...this.project.chokidarOpts.ignored,
+			...this.globsBlocks
+		];
+		// await this.process(null, { lintType: 'warn' }); // this errors "Fatal error: Allowed memory size"
+	}
+
 	async build(entry, options) {
 		options = Object.assign({}, {
 			lintType: 'fix'
@@ -64,8 +80,8 @@ class PHPComponent extends BaseComponent {
 				}
 			}
 		}
-		if (this.project.server) {
-			this.project.server.reload();
+		if (this.project.components.server?.server) {
+			this.project.components.server?.server.reload();
 		}
 
 		this.end({
@@ -79,7 +95,7 @@ class PHPComponent extends BaseComponent {
 	}
 
 	watch() {
-		this.chokidar.watch(this.project.globs.php, {
+		this.chokidar.watch(this.globs, {
 			...this.project.chokidarOpts
 		}).on('all', (event, path) => {
 			this.process(path);
@@ -87,5 +103,3 @@ class PHPComponent extends BaseComponent {
 	}
 
 }
-
-export { PHPComponent as default }

package/lib/components/scripts.js

@@ -3,17 +3,27 @@ import * as esbuild from 'esbuild';
 import { ESLint } from 'eslint';
 import * as eslintConfig from '../../eslint.config.js';
 
-class ScriptsComponent extends BaseComponent {
+export default class ScriptsComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Process javascript files`;
+	}
+
+	async init() {
+		this.files = this.utils.addEntriesByFiletypes(['.js']);
+		this.globs = await Array.fromAsync(
+			this.glob(this.project.package?.sdc?.jsGlobPath ||
+			`${this.project.path}/_src/scripts/**/*.js`)
+		);
+		await this.process();
 	}
 
 	async build(entry, options) {
 		options = Object.assign({}, {
 			entriesToLint: null
 		}, options);
-		let entryLabel = `/dist/scripts/${this.entryBasename(entry).replace('.js', '.min.js')}`;
+		let entryLabel = `/dist/scripts/${this.utils.entryBasename(entry).replace('.js', '.min.js')}`;
 
 		this.start();
 
@@ -60,12 +70,12 @@ class ScriptsComponent extends BaseComponent {
 	}
 
 	async process() {
-		const promisesJS = this.project.files.js.map(block => this.build(block.file, { entriesToLint: this.project.globs.js }));
+		const promisesJS = this.files.map(block => this.build(block.file, { entriesToLint: this.globs }));
 		await Promise.all(promisesJS);
 	}
 
 	watch() {
-		this.chokidar.watch(this.project.globs.js, {
+		this.chokidar.watch(this.globs, {
 			...this.project.chokidarOpts
 		}).on('all', (event, path) => {
 			this.process();
@@ -73,5 +83,3 @@ class ScriptsComponent extends BaseComponent {
 	}
 
 }
-
-export { ScriptsComponent as default }

package/lib/components/server.js

@@ -1,12 +1,16 @@
 import BaseComponent from './base.js';
 import { create as bsCreate } from 'browser-sync';
 
-class ServerComponent extends BaseComponent {
+export default class ServerComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Run a dev proxy server for live reloading`;
 		this.server = bsCreate();
-		this.project.server = this.server;
+	}
+
+	async init() {
+		//
 	}
 
 	start() {
@@ -57,6 +61,8 @@ class ServerComponent extends BaseComponent {
 		this.server.init(bsOptions);
 	}
 
-}
+	async watch() {
+		this.start();
+	}
 
-export { ServerComponent as default }
+}

package/lib/components/style.js

@@ -1,5 +1,4 @@
 import BaseComponent from './base.js';
-import * as utils from '../utils.js';
 import fs from 'fs';
 import { promises } from 'fs';
 import { fileURLToPath } from 'url';
@@ -9,10 +8,20 @@ import autoprefixer from 'autoprefixer';
 import sortMQ from 'postcss-sort-media-queries';
 import stylelint from 'stylelint';
 
-class StyleComponent extends BaseComponent {
+export default class StyleComponent extends BaseComponent {
 
 	constructor() {
 		super();
+		this.description = `Process sass files`;
+	}
+
+	async init() {
+		this.files = this.utils.addEntriesByFiletypes(['.scss']);
+		this.globs = await Array.fromAsync(
+			this.glob(this.project.package?.sdc?.sassGlobPath ||
+			`${this.project.path}{/_src/style,/blocks}/**/*.scss`)
+		);
+		await this.process();
 	}
 
 	async buildTheme() {
@@ -22,11 +31,11 @@ class StyleComponent extends BaseComponent {
 			if (theme.settings?.custom) {
 				for (var customAttribute in theme.settings.custom) {
 					if (customAttribute == 'dirDist') {
-						themeFileData += `$themeDirDist: "${theme.settings.custom[customAttribute]}"; // --wp--custom--${utils.camelToDash(customAttribute)}\n`;
+						themeFileData += `$themeDirDist: "${theme.settings.custom[customAttribute]}"; // --wp--custom--${this.utils.camelToDash(customAttribute)}\n`;
 					} else if (['breakpoints-rem', 'breakpoint-mobile'].includes(customAttribute)) {
 						// handled later in file - see 'fontSizeBase'
 					} else {
-						themeFileData += `$${customAttribute}: "${theme.settings.custom[customAttribute]}"; // --wp--custom--${utils.camelToDash(customAttribute)}\n`;
+						themeFileData += `$${customAttribute}: "${theme.settings.custom[customAttribute]}"; // --wp--custom--${this.utils.camelToDash(customAttribute)}\n`;
 					}
 				}
 			}
@@ -151,12 +160,12 @@ class StyleComponent extends BaseComponent {
 		if (options.buildTheme) {
 			await this.buildTheme();
 		}
-		for (var block of this.project.files.sass) {
+		for (var block of this.files) {
 			if (!entry || entry == block.file) {
 				await this.build(block.file, {
 					name: block.name,
-					entriesToLint: this.project.globs.sass
-			});
+					entriesToLint: this.globs
+				});
 				if (entry == block.file) {
 					break;
 				}
@@ -167,13 +176,13 @@ class StyleComponent extends BaseComponent {
 	watch() {
 		this.chokidar.watch([
 			...[this.project.paths.theme.json],
-			this.project.globs.sass
+			this.globs
 		], {
 			...this.project.chokidarOpts
 		}).on('all', (event, path) => {
 			let hasRanSingle = false;
-			for (var block of this.project.files.sass) {
-				if (path == block.file || utils.getImportedSASSFiles(block.file).includes(path)) {
+			for (var block of this.files) {
+				if (path == block.file || this.utils.getImportedSASSFiles(block.file).includes(path)) {
 					this.process(block.file, { buildTheme: path == this.project.paths.theme.json });
 					hasRanSingle = true;
 				}
@@ -185,5 +194,3 @@ class StyleComponent extends BaseComponent {
 	}
 
 }
-
-export { StyleComponent as default }

package/lib/project.js

@@ -3,6 +3,8 @@ import { readFile } from 'fs/promises';
 let project = {
 	path: process.cwd(),
 	package: JSON.parse(await readFile(new URL(process.cwd() + '/package.json', import.meta.url))),
+	components: {},
+	builds: [],
 	globs: {},
 	entries: {},
 	files: {

package/lib/utils.js

@@ -1,11 +1,16 @@
 import fs from 'fs';
 import { readdir } from 'node:fs/promises';
 import path from 'path';
+import project from './project.js';
 
 export function camelToDash(camel) {
 	return camel.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
 }
 
+export function entryBasename(entry) {
+	return path.parse(entry).base;
+}
+
 export async function getAllSubdirectories(dir) {
 	let subdirectories = [];
 	const subdirectoriesEntries = await readdir(dir, { withFileTypes: true });
@@ -36,3 +41,20 @@ export function getImportedSASSFiles(filePath) {
 	}
 	return imports;
 }
+
+export function addEntriesByFiletypes(filetypes = []) {
+	let finalFiles = [];
+	for (const [name, files] of Object.entries(project.package.sdc.entries)) {
+		for (let file of files) {
+			let fullPath = project.path + file;
+			let extension = path.parse(fullPath).ext;
+			if (filetypes.includes(extension)) {
+				finalFiles.push({
+					'name': name,
+					'file': fullPath
+				});
+			}
+		}
+	}
+	return finalFiles;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "sdc-build-wp",
-	"version": "4.2.0",
+	"version": "4.3.1",
 	"description": "Custom WordPress build process.",
 	"engines": {
-		"node": ">=20"
+		"node": ">=22"
 	},
 	"author": {
 		"name": "Robert Sefer",