sdc-build-wp 2.1.0 → 2.6.0

package/index.js

@@ -9,6 +9,7 @@ import glob from 'glob';
 import bustCache from './lib/bustCache.js';
 import buildSass from './lib/style.js';
 import buildJS from './lib/scripts.js';
+import buildBlocks from './lib/blocks.js';
 import buildImages from './lib/images.js';
 import buildFonts from './lib/fonts.js';
 import buildBrowserSync from './lib/browsersync.js';
@@ -17,12 +18,14 @@ let chokidarOpts = {
 	ignoreInitial: true
 };
 
-let sassGlobPath = project.package?.sdc?.sassGlobPath || project.path + '/_src/style/**/*.scss';
+let sassGlobPath = project.package?.sdc?.sassGlobPath || project.path + '{/_src/style,/blocks}/**/*.scss';
 let sassGlob = glob.sync(sassGlobPath, {
 	ignore: [
 		project.path  + '/_src/style/partials/_theme.scss'
 	]
 });
+let blockGlobPath = project.package?.sdc?.blockGlobPath || project.path + '/_src/blocks/**/*.{js,jsx}';
+let blockGlob = glob.sync(blockGlobPath);
 
 function bustFunctionsCache() {
 	bustCache(project.path + '/functions.php');
@@ -45,6 +48,10 @@ for (const [name, files] of Object.entries(project.package.sdc.entries)) {
 		entries[name].push(project.path + file);
 	});
 }
+let sassBlocksGlob = glob.sync(project.path + '/blocks/*/*.scss');
+for (var filename of sassBlocksGlob) {
+	entries[`blocks/${path.basename(path.dirname(filename))}/style`] = [ filename ];
+}
 
 let filesSass = [];
 
@@ -52,7 +59,10 @@ for (const [name, files] of Object.entries(entries)) {
 	files.forEach(function(file) {
 		switch (path.parse(file).ext) {
 			case '.scss':
-				filesSass.push(file);
+				filesSass.push({
+					'name': name,
+					'file': file
+				});
 				break;
 			case '.js':
 				buildJS(file);
@@ -68,24 +78,31 @@ for (const [name, files] of Object.entries(entries)) {
 	});
 }
 
-filesSass.forEach((file) => {
-	buildSass(file, sassGlob);
-	bustFunctionsCache();
-});
+buildBlocks(blockGlob);
+bustFunctionsCache();
+if (argv.watch) {
+	chokidar.watch(blockGlob, chokidarOpts).on('all', (event, path) => {
+		buildBlocks(blockGlob);
+		bustFunctionsCache();
+	});
+}
+
+function runSass() {
+	for (var block of filesSass) {
+		buildSass(block.file, block.name, sassGlob);
+		bustFunctionsCache();
+	}
+}
+
+runSass();
 if (argv.watch) {
 	chokidar.watch(sassGlob, chokidarOpts).on('all', (event, path) => {
-		filesSass.forEach((file) => {
-			buildSass(file, sassGlob);
-			bustFunctionsCache();
-		});
+		runSass();
 	});
 }
 if (argv.watch) {
 	chokidar.watch(project.path + '/theme.json', chokidarOpts).on('all', (event, path) => {
-		filesSass.forEach((file) => {
-			buildSass(file, sassGlob);
-			bustFunctionsCache();
-		});
+		runSass();
 	});
 }
 

package/lib/blocks.js

@@ -0,0 +1,47 @@
+import path from 'path';
+import project from '../lib/project.js';
+import log from './logging.js';
+import esbuild from 'esbuild';
+import { ESLint } from 'eslint';
+import { readFile } from 'fs/promises';
+
+const buildBlocks = async (entries) => {
+	let timerStart = Date.now();
+	try {
+		const eslint = new ESLint({
+			baseConfig: JSON.parse(await readFile(new URL('../.eslintrc', import.meta.url))),
+			fix: true
+		});
+		const lintresults = await eslint.lintFiles(entries);
+		await ESLint.outputFixes(lintresults);
+		const formatter = await eslint.loadFormatter('stylish');
+		const formatterOutput = formatter.format(lintresults);
+		if (formatterOutput) { console.log(formatterOutput.replace(project.path + '/_src/blocks/', '')); }
+	} catch (error) {
+		console.log(error);
+		log('error', `Failed linting ${entries.length} blocks - See above error.`);
+		return false;
+	}
+	try {
+		const result = await esbuild.build({
+			platform: 'node',
+			entryPoints: entries,
+			bundle: true,
+			loader: { '.js' : 'jsx' },
+			minify: true,
+			outdir: 'dist/blocks/',
+			entryNames: '[dir]/[name].min',
+			plugins: [],
+			sourcemap: true
+		});
+		if (result.warnings.length > 0) {
+			log('warn', result.warnings);
+		}
+	} catch (error) {
+		log('error', `Failed building ${entries.length} blocks - See above error.`);
+		return false;
+	}
+	log('success', `Built ${entries.length} blocks in ${Date.now() - timerStart}ms`);
+};
+
+export default buildBlocks;

package/lib/browsersync.js

@@ -9,7 +9,8 @@ const buildBrowserSync = () => {
 		files: [
 			project.path + '/dist/**/*',
 			project.path + '/**/*.php',
-			project.path + '/**/*.html'
+			project.path + '/**/*.html',
+			project.path + '/**/*.json',
 		],
 		open: project.package.sdc?.open || false,
 		https: (process.env.SSL_KEY_PATH && process.env.SSL_CRT_PATH ? {

package/lib/style.js

@@ -39,10 +39,13 @@ const buildColors = async () => {
 	}
 };
 
-const buildSass = async (entry, entriesToLint) => {
+const buildSass = async (entry, name, entriesToLint) => {
 	await buildColors();
 	let timerStart = Date.now();
-	let outFile = project.path + '/dist/style/' + path.parse(entry).name + '.min.css';
+	let outFile = project.path + '/dist/' + name + '.min.css';
+	if (name.startsWith('blocks/')) {
+		outFile = project.path + '/' + name + '.min.css';
+	}
 	let entryLabel = outFile.replace(project.path, '');
 	stylelint.lint({
 		configFile: path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../.stylelintrc'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdc-build-wp",
-  "version": "2.1.0",
+  "version": "2.6.0",
   "description": "Custom WordPress build process.",
   "author": {
     "name": "Robert Sefer",