sdc-build-wp 4.1.4 → 4.3.0

package/README.md

@@ -4,6 +4,7 @@
 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
 ```
 
 ## Develop

package/index.js

@@ -1,276 +1,46 @@
 #!/usr/bin/env node
-import path from 'path';
-import project from './lib/project.js';
 import parseArgs from 'minimist';
 const argv = parseArgs(process.argv.slice(2));
-import chokidar from 'chokidar';
-import { glob, readdir } from 'node:fs/promises';
-import { existsSync } from 'node:fs';
+import { promises as fs } from 'fs';
 import { Tail } from 'tail';
-
+import project from './lib/project.js';
 import log from './lib/logging.js';
-import { buildSass, buildSassTheme, getImportedFiles as getImportedFilesSass } from './lib/style.js';
-import buildJS from './lib/scripts.js';
-import { default as buildPHP, shouldPHPLint } from './lib/php.js';
-import buildBlock from './lib/blocks.js';
-import buildImages from './lib/images.js';
-import buildFonts from './lib/fonts.js';
-import buildBrowserSync from './lib/browsersync.js';
-
-let paths = {
-	theme: {
-		json: `${project.path}/theme.json`,
-		scss: `${project.path}/_src/style/partials/_theme.scss`
-	},
-	nodeModules: `${project.path}/node_modules`,
-	composer: {
-		vendor: `${project.path}/vendor`
-	},
-	images: project.package?.sdc?.imagesPath || `${project.path}/_src/images`,
-	errorLog: process.env.ERROR_LOG_PATH || project.package.sdc?.error_log_path || '../../../../../logs/php/error.log'
+import * as LibComponents from './lib/components/index.js';
+
+project.components = {
+	style: new LibComponents.style(),
+	scripts: new LibComponents.scripts(),
+	blocks: new LibComponents.blocks(),
+	images: new LibComponents.images(),
+	fonts: new LibComponents.fonts(),
+	php: new LibComponents.php(),
+	server: new LibComponents.server()
 };
 
-let chokidarOpts = {
-	ignoreInitial: true,
-	ignored: [
-		paths.nodeModules,
-		paths.composer.vendor,
-		paths.theme.scss
-	]
-};
-
-let globs = {};
-let entries = {};
-let filesSass = [];
-let filesJS = [];
-
-let builds = argv.builds ? argv.builds.split(',') : [
-	'sass',
-	'js',
-	'blocks',
-	'images',
-	'fonts',
-	'php'
-];
+let builds = argv.builds ? argv.builds.split(',') : Object.keys(project.components).map(key => project.components[key].slug);
 
 (async() => {
 
 	let initialBuildTimerStart = Date.now();
 	log('info', `Starting initial build`);
-
-	if (builds.includes('sass')) {
-		globs.sass = await Array.fromAsync(
-			glob(project.package?.sdc?.sassGlobPath ||
-			`${project.path}{/_src/style,/blocks}/**/*.scss`)
-		);
-	}
-	if (builds.includes('js')) {
-		globs.js = await Array.fromAsync(
-			glob(project.package?.sdc?.jsGlobPath ||
-			`${project.path}/_src/scripts/**/*.js`)
-		);
-	}
-	if (builds.includes('blocks')) {
-		globs.blocks = await Array.fromAsync(
-			glob(`${project.path}/blocks/*`)
-		);
-		globs.blocksSass = await Array.fromAsync(
-			glob(`${project.path}/blocks/*/src/*.scss`)
-		);
-		// for (var filename of globs.blocksSass) {
-		// 	entries[`blocks/${path.basename(path.dirname(filename))}/style`] = [ filename ];
-		// }
+	for (let build of builds) {
+		await project.components[build].init();
 	}
-	if (builds.includes('images')) {
-		globs.images = await Array.fromAsync(
-			glob(project.package?.sdc?.imagesPath ||
-			`${paths.images}/**/*`)
-		);
-		globs.imageDirectories = [
-			paths.images,
-			...await getAllSubdirectories(paths.images)
-		];
-	}
-	if (builds.includes('php')) {
-		globs.php = await Array.fromAsync(
-			glob(project.package?.sdc?.jsGlobPath ||
-			`${project.path}/**/*.php`)
-		);
-		globs.blocksPHP = await Array.fromAsync(
-			glob(`${project.path}/blocks/*/build/*.php`)
-		);
-		chokidarOpts.ignored = [
-			...chokidarOpts.ignored,
-			...globs.blocksPHP
-		];
-	}
-
-	for (const [name, files] of Object.entries(project.package.sdc.entries)) {
-		entries[name] = [];
-		files.forEach(function(file) {
-			entries[name].push(project.path + file);
-		});
-	}
-
-	for (const [name, files] of Object.entries(entries)) {
-		files.forEach(function(file) {
-			switch (path.parse(file).ext) {
-				case '.scss':
-					if (builds.includes('sass')) {
-						filesSass.push({
-							'name': name,
-							'file': file
-						});
-					}
-					break;
-				case '.js':
-					if (builds.includes('js')) {
-						filesJS.push({
-							'name': name,
-							'file': file
-						});
-					}
-					break;
-			}
-		});
-	}
-
-	if (builds.includes('sass')) {
-		await runSass(null, true);
-	}
-	if (builds.includes('js')) {
-		await runJS();
-	}
-	if (builds.includes('blocks')) {
-		await runBlocks();
-	}
-	if (builds.includes('images')) {
-		await frontrunImages();
-	}
-	if (builds.includes('fonts')) {
-		await buildFonts(project.path + '/_src/fonts');
-	}
-	// if (builds.includes('php') && shouldPHPLint) {
-	// 	await runPHP(null, 'warn'); // this errors "Fatal error: Allowed memory size"
-	// }
-
 	log('info', `Finished initial build in ${Math.round((Date.now() - initialBuildTimerStart) / 1000)} seconds`);
 
 	if (argv.watch) {
-
-		buildBrowserSync();
-
-		if (builds.includes('sass')) {
-			chokidar.watch([
-				...[paths.theme.json],
-				globs.sass
-			], {
-				...chokidarOpts
-			}).on('all', (event, path) => {
-				let hasRanSingle = false;
-				for (var block of filesSass) {
-					if (path == block.file || getImportedFilesSass(block.file).includes(path)) {
-						runSass(block.file, path == paths.theme.json);
-						hasRanSingle = true;
-					}
-				}
-				if (!hasRanSingle) {
-					runSass(null, path == paths.theme.json);
-				}
-			});
-		}
-
-		if (builds.includes('js')) {
-			chokidar.watch(globs.js, {
-				...chokidarOpts
-			}).on('all', (event, path) => {
-				runJS();
-			});
+		for (let build of builds) {
+			await project.components[build].watch();
 		}
-
-		if (builds.includes('blocks')) {
-			for (let block of globs.blocks) {
-				chokidar.watch(`${block}/src`, {
-					...chokidarOpts
-				}).on('all', (event, path) => {
-					runBlocks(block);
-				});
-			}
-		}
-
-		if (builds.includes('images')) {
-			chokidar.watch(paths.images, chokidarOpts).on('all', (event, path) => {
-				frontrunImages();
-			});
-		}
-
-		if (builds.includes('php') && shouldPHPLint) {
-			chokidar.watch(globs.php, {
-				...chokidarOpts
-			}).on('all', (event, path) => {
-				runPHP(path);
-			});
-		}
-
-		if (existsSync(paths.errorLog)) {
-			let errorLogTail = new Tail(paths.errorLog);
+		try {
+			await fs.access(project.paths.errorLog);
+			let errorLogTail = new Tail(project.paths.errorLog);
 			errorLogTail.on('line', function(data) {
 				log('php', data);
 			});
-		} else {
-			log('info', `Cannot find error log @ ${paths.errorLog}. Skipping watching php error logs`);
+		} catch (error) {
+			log('info', `Cannot find error log @ ${project.paths.errorLog}. Skipping watching php error logs`);
 		}
 	}
 
 })();
-
-async function frontrunImages() {
-	const promisesImages = globs.imageDirectories.map(directory => buildImages(directory));
-	await Promise.all(promisesImages);
-}
-
-async function runBlocks(singleBlock) {
-	if (singleBlock) {
-		await buildBlock(singleBlock);
-	} else {
-		const promisesBlocks = globs.blocks.map(block => buildBlock(block));
-		await Promise.all(promisesBlocks);
-	}
-}
-
-async function runSass(singleEntry, buildTheme = true) {
-	if (buildTheme) {
-		await buildSassTheme();
-	}
-	for (var block of filesSass) {
-		if (!singleEntry || singleEntry == block.file) {
-			await buildSass(block.file, block.name, globs.sass);
-			if (singleEntry == block.file) {
-				break;
-			}
-		}
-	}
-}
-
-async function runJS() {
-	const promisesJS = filesJS.map(block => buildJS(block.file, block.name, globs.js));
-	await Promise.all(promisesJS);
-}
-
-async function runPHP(file, method) {
-	await buildPHP(file, method);
-}
-
-async function getAllSubdirectories(dir) {
-	let subdirectories = [];
-	const subdirectoriesEntries = await readdir(dir, { withFileTypes: true });
-	for (const subdirectoriesEntry of subdirectoriesEntries) {
-		if (subdirectoriesEntry.isDirectory()) {
-			const subdirPath = path.join(dir, subdirectoriesEntry.name);
-			subdirectories.push(subdirPath);
-			const nestedSubdirs = await getAllSubdirectories(subdirPath);
-			subdirectories = subdirectories.concat(nestedSubdirs);
-		}
-	}
-	return subdirectories;
-}

package/lib/components/base.js

@@ -0,0 +1,47 @@
+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.timer = null;
+		this.path = path;
+		this.utils = utils;
+		this.project = project;
+		this.log = log;
+		this.chokidar = chokidar;
+		this.glob = glob;
+		this.files = [];
+		this.globs = [];
+		this.slug = 'base';
+	}
+
+	async init() {
+		//
+	}
+
+	start() {
+		this.timer = Date.now();
+	}
+
+	end(options) {
+		options = Object.assign({}, {
+			verb: 'Built',
+			itemLabel: null,
+			timerStart: this.timer,
+			timerEnd: Date.now()
+		}, options);
+		this.log('success', `${options.verb}${options.itemLabel ? ` ${options.itemLabel}` : ''} in ${options.timerEnd - options.timerStart}ms`);
+	}
+
+	async watch() {
+		//
+	}
+
+}
+
+export { BaseComponent as default }

package/lib/components/blocks.js

@@ -0,0 +1,112 @@
+import BaseComponent from './base.js';
+import { stat } from 'fs/promises';
+import { spawn } from 'child_process';
+import process from 'process';
+
+class BlocksComponent extends BaseComponent {
+
+	constructor() {
+		super();
+		this.slug = '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) {
+		options = Object.assign({}, {}, options);
+		let entryLabel = entry.replace(this.project.path, '');
+
+		let timerStart = Date.now();
+
+		this.start();
+
+		let workingBlockJson = null;
+		let potentialBlockJsonLocations = [
+			`${entry}/src/block.json`,
+			// `${entry}/block.json`
+		];
+		for (var location of potentialBlockJsonLocations) {
+			try {
+				await stat(location);
+				workingBlockJson = location
+				break;
+			} catch (error) {
+				//
+			}
+		}
+		if (workingBlockJson === null) {
+			this.log('error', `Failed building ${entry} blocks - no block.json found.`);
+			return false;
+		}
+		let 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`
+		];
+		await cmd(cmds, { entryLabel: entryLabel });
+
+		this.end({
+			itemLabel: entryLabel,
+			timerStart: timerStart,
+			timerEnd: Date.now()
+		});
+	}
+
+	async process(entry) {
+		if (entry) {
+			await this.build(entry);
+		} else {
+			const promisesBlocks = this.globs.map(block => this.build(block));
+			await Promise.all(promisesBlocks);
+		}
+	}
+
+	watch() {
+		for (let block of this.globs) {
+			this.chokidar.watch(`${block}/src`, {
+				...this.project.chokidarOpts
+			}).on('all', (event, path) => {
+				this.process(block);
+			});
+		}
+	}
+
+}
+
+function cmd(commands) {
+  let p = spawn(commands[0], commands.slice(1), {
+		shell: true
+	});
+  return new Promise((resolveFunc) => {
+    p.stdout.on('data', (x) => {
+			if (x.toString().includes('Error:')) {
+				process.stdout.write(x.toString());
+				log('error', `Failed building ${entryLabel} block - See above error.`);
+			}
+    });
+    p.stderr.on('data', (x) => {
+			if (x.toString().includes('Error:')) {
+				process.stderr.write(x.toString());
+				log('error', `Failed building ${entryLabel} block - See above error.`);
+			}
+    });
+    p.on('exit', (code) => {
+      resolveFunc(code);
+    });
+  });
+}
+
+export { BlocksComponent as default }

package/lib/components/fonts.js

@@ -0,0 +1,41 @@
+import BaseComponent from './base.js';
+import { readdir } from 'fs/promises';
+import fs from 'fs-extra';
+
+class FontsComponent extends BaseComponent {
+
+	constructor() {
+		super();
+		this.slug = 'fonts';
+	}
+
+	async init() {
+		await this.process();
+	}
+
+	async build(entry) {
+		let entryLabel = `/dist/fonts`;
+
+		this.start();
+
+		try {
+			const fontsDir = await readdir(entry);
+			if (fontsDir.length == 0) { throw new Error('No files present'); }
+			await fs.copy(entry, `${this.project.path}${entryLabel}`);
+		} catch(error) {
+			this.log('info', `${error} at ${entry.replace(this.project.path, '')}/. Skipping font copy`);
+			return false;
+		}
+
+		this.end({
+			itemLabel: entryLabel
+		});
+	}
+
+	async process() {
+		await this.build(`${this.project.path}/_src/fonts`);
+	}
+
+}
+
+export { FontsComponent as default }

package/lib/components/images.js

@@ -0,0 +1,60 @@
+import BaseComponent from './base.js';
+import imagemin from 'imagemin';
+import imageminJpegtran from 'imagemin-jpegtran';
+import imageminPngquant from 'imagemin-pngquant';
+import imageminSvgo from 'imagemin-svgo';
+
+class ImagesComponent extends BaseComponent {
+
+	constructor() {
+		super();
+		this.slug = 'images';
+	}
+
+	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) {
+		let timerStart = Date.now();
+		let dest = entry.replace('_src/images', 'dist/images');
+		const files = await imagemin([entry + '/*'], {
+			destination: dest,
+			plugins: [
+				imageminJpegtran(),
+				imageminPngquant(),
+				imageminSvgo()
+			]
+		});
+
+		this.end({
+			itemLabel: `${dest.replace(this.project.path, '')} (${files.length} image${files.length == 1 ? '' : 's'})`,
+			timerStart: timerStart,
+			timerEnd: Date.now()
+		});
+	}
+
+	async process() {
+		const promisesImages = this.globsDirectories.map(directory => this.build(directory));
+		await Promise.all(promisesImages);
+	}
+
+	watch() {
+		this.chokidar.watch(this.project.paths.images, {
+			...this.project.chokidarOpts
+		}).on('all', (event, path) => {
+			this.process();
+		});
+	}
+
+}
+
+export { ImagesComponent as default }

package/lib/components/index.js

@@ -0,0 +1,7 @@
+export { default as style } from './style.js';
+export { default as scripts } from './scripts.js';
+export { default as blocks } from './blocks.js';
+export { default as images } from './images.js';
+export { default as fonts } from './fonts.js';
+export { default as php } from './php.js';
+export { default as server } from './server.js';

package/lib/components/php.js

@@ -0,0 +1,107 @@
+import BaseComponent from './base.js';
+import { fileURLToPath } from 'url';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+class PHPComponent extends BaseComponent {
+
+	constructor() {
+		super();
+		this.slug = 'php';
+		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'
+		}, options);
+		let entryLabel = `all PHP files`;
+
+		this.start();
+		let workingLintBin = 'phpcbf';
+		if (options.lintType == 'warn') {
+			workingLintBin = 'phpcs';
+		}
+		let phpFiles = '.';
+		let additionalFlags = '';
+		if (entry) {
+			phpFiles = entry;
+			entryLabel = entry.replace(this.project.path, '');
+		} else {
+			additionalFlags += ' -d memory_limit=2G'; // FIXME: this doesn't solve error issue "Fatal error: Allowed memory size"
+		}
+		try {
+			const cmds = [
+				`vendor/bin/${workingLintBin}`,
+				`--parallel=5`,
+				`--error-severity=1`,
+				`--warning-severity=1`,
+				`--colors`,
+				`--basepath=${this.project.path}`,
+				phpFiles,
+				additionalFlags
+			];
+
+			const { stdout, stderr } = await this.execPromise(cmds.join(' '), {
+				cwd: this.path.resolve(this.path.dirname(fileURLToPath(import.meta.url)), '../../')
+			}); // returns an error if any violations are found, so we can't rely on the try/catch as usual
+		} catch (error) {
+			if (
+				error.stderr?.length ||
+				(
+					error.stdout?.length &&
+					(
+						error.stdout.startsWith('ERROR:') ||
+						error.stdout.includes('FAILED TO FIX')
+					)
+				)
+			) {
+				console.error(error.stderr?.length ? error.stderr : error.stdout);
+				this.log('error', `Failed linting ${entryLabel.replace(this.project.path, '')} - See above error.`);
+				return false;
+			} else {
+				if (error.stdout?.length) {
+					console.log(error.stdout);
+				}
+			}
+		}
+		if (this.project.components.server?.server) {
+			this.project.components.server?.server.reload();
+		}
+
+		this.end({
+			itemLabel: entryLabel,
+			verb: `Linted (${options.lintType})`
+		});
+	}
+
+	async process(entry, options) {
+		await this.build(entry, options);
+	}
+
+	watch() {
+		this.chokidar.watch(this.globs, {
+			...this.project.chokidarOpts
+		}).on('all', (event, path) => {
+			this.process(path);
+		});
+	}
+
+}
+
+export { PHPComponent as default }