Feat/add vite config new glob system

package.json

@@ -18,8 +18,8 @@
 		"packages/vite-config"
 	],
 	"scripts": {
-		"lint:js": "yard-toolkit lint js -m custom './packages/**/*.js'",
-		"format:js": "yard-toolkit format js -m custom './packages/**/*.js'",
+		"lint:js": "yard-toolkit lint js -m custom ./packages/**/*.js",
+		"format:js": "yard-toolkit format js -m custom ./packages/**/*.js",
 		"prepare": "husky"
 	},
 	"type": "commonjs",

packages/toolkit/README.md

@@ -25,9 +25,9 @@ Actions
 
 Filetypes
     js            JavaScript files (*.js)
-    jsx           JavaScript files (*.jsx)
     blade         Laravel Blade files (*.blade.php)
     css           Cascading Style Sheet files (*.css)
+    scss          SCSS files (custom mode only) (*.scss)
 
 Options
     -m, --mode <brave|custom>
@@ -204,7 +204,10 @@ export const modes = {
         paths: [
             {
                 filetype: filetypes.js.name,
-                path: './web/app/themes/**/resources/scripts/**/*.js',
+                path: [
+                    './web/app/themes/**/resources/scripts/**/*.js',
+                    './web/app/themes/**/resources/scripts/**/*.jsx',
+                ], // filetype with multiple glob paths
             },
             {
                 filetype: filetypes.blade.name,

packages/toolkit/src/actions/format.js

@@ -1,25 +1,20 @@
 import {
 	filetypeFromString,
-	getGlobByFormatModeAndFiletype,
+	getPathByFormatModeAndFiletype,
 	modesFromString,
-	runCommand,
+	runCommandForEveryPath,
 } from '../utils/helpers.js';
 
 export const format = ( options, filetype, userPath ) => {
 	const formatFiletype = filetypeFromString( filetype, true );
 	const formatMode = modesFromString( options.mode, true );
 
 	const command = 'prettier';
-	const glob = getGlobByFormatModeAndFiletype(
+	const globs = getPathByFormatModeAndFiletype(
 		formatMode,
-		formatFiletype.name
+		formatFiletype.name,
+		userPath
 	);
 
-	const args = [
-		...( glob?.path ? [ glob.path ] : [] ),
-		...( userPath ? [ userPath ] : [] ),
-		'--check',
-		'--write',
-	];
-	runCommand( command, args );
+	runCommandForEveryPath( command, globs, [ '--check', '--write' ] );
 };

packages/toolkit/src/actions/lint.js

@@ -1,21 +1,18 @@
 import {
 	filetypeFromString,
-	getGlobByFormatModeAndFiletype,
+	getPathByFormatModeAndFiletype,
 	modesFromString,
-	runCommand,
+	runCommandForEveryPath,
 } from '../utils/helpers.js';
 import log from '../utils/logger.js';
 import { filetypes } from '../config/filetypes.js';
 import { options as configOptions } from '../config/options.js';
 
 export const lint = ( options, filetype, userPath ) => {
 	const formatFiletype = filetypeFromString( filetype, true );
-	const formatMode = modesFromString( options.mode, true );
-	const isFix = options[ configOptions.fix.name ] ?? false;
 
-	let command = {
+	const command = {
 		[ filetypes.js.name ]: 'eslint',
-		[ filetypes.jsx.name ]: 'eslint',
 		[ filetypes.scss.name ]: 'stylelint',
 		[ filetypes.css.name ]: 'stylelint',
 	}[ formatFiletype.name ];
@@ -27,16 +24,17 @@ export const lint = ( options, filetype, userPath ) => {
 		return;
 	}
 
-	const glob = getGlobByFormatModeAndFiletype(
+	const formatMode = modesFromString( options.mode, true );
+
+	const globs = getPathByFormatModeAndFiletype(
 		formatMode,
-		formatFiletype.name
+		formatFiletype.name,
+		userPath
 	);
 
-	const args = [
-		...( glob?.path ? [ glob.path ] : [] ),
-		...( userPath ? [ userPath ] : [] ),
-		...( isFix ? [ '--fix' ] : [] ),
-	];
+	const isFix = options[ configOptions.fix.name ] ?? false;
 
-	runCommand( command, args );
+	runCommandForEveryPath( command, globs, [
+		...( isFix ? [ '--fix' ] : [] ),
+	] );
 };

packages/toolkit/src/config/filetypes.js

@@ -3,10 +3,6 @@ export const filetypes = {
 		name: 'js',
 		extension: '.js',
 	},
-	jsx: {
-		name: 'jsx',
-		extension: '.jsx',
-	},
 	blade: {
 		name: 'blade',
 		extension: '.blade.php',

packages/toolkit/src/config/help.js

@@ -18,9 +18,6 @@ Filetypes
     ${ filetypes.js.name }            JavaScript files (*${
 		filetypes.js.extension
 	})
-    ${ filetypes.jsx.name }           JSX files (*${
-		filetypes.jsx.extension
-	})
     ${ filetypes.blade.name }         Laravel Blade files (*${
 		filetypes.blade.extension
 	})

packages/toolkit/src/config/modes.js

@@ -6,11 +6,10 @@ export const modes = {
 		paths: [
 			{
 				filetype: filetypes.js.name,
-				path: './web/app/themes/**/resources/scripts/**/*.js',
-			},
-			{
-				filetype: filetypes.jsx.name,
-				path: './web/app/themes/**/resources/scripts/**/*.jsx',
+				path: [
+					'./web/app/themes/**/resources/scripts/**/*.js',
+					'./web/app/themes/**/resources/scripts/**/*.jsx',
+				],
 			},
 			{
 				filetype: filetypes.blade.name,

packages/toolkit/src/index.js

@@ -32,7 +32,7 @@ const path = cli.input[ 2 ];
 const currentAction = actions[ actionName ];
 
 if ( undefined === currentAction ) {
-	error( `Action "${ actionName }" not defined.`, false );
+	log.error( `Action "${ actionName }" not defined.`, false );
 	cli.showHelp( 5 );
 }
 

packages/toolkit/src/utils/get-all-theme-names.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import log from './logger.js';
+
 /**
  * External dependencies
  */
@@ -11,7 +16,7 @@ export const getAllThemeNames = () => {
 	const themesDir = path.resolve( 'web/app/themes' );
 
 	if ( ! fs.existsSync( themesDir ) ) {
-		console.error( 'Themes directory does not exist' );
+		log.error( 'Themes directory does not exist' );
 		return [];
 	}
 
@@ -29,7 +34,7 @@ export const getAllThemeNames = () => {
 			);
 			return hasStyleCss;
 		} catch {
-			console.error( `Error checking directory: ${ fullPath }` );
+			log.error( `Error checking directory: ${ fullPath }` );
 			return false;
 		}
 	} );

packages/toolkit/src/utils/helpers.js

@@ -3,8 +3,7 @@
  */
 import fs from 'fs';
 import util from 'util';
-import { exec } from 'child_process';
-import { spawn } from 'child_process';
+import { exec, spawn } from 'child_process';
 
 /**
  * Internal dependences
@@ -31,6 +30,18 @@ export const runCommand = async (
 	} );
 };
 
+export const runCommandForEveryPath = async ( command, paths, args = [] ) => {
+	paths?.forEach( ( path ) => {
+		if ( ! path ) return;
+		runCommand( command, [ addQuotsToStrings( path ), ...args ] );
+	} );
+};
+
+export const addQuotsToStrings = ( item ) => {
+	if ( item?.startsWith( "'" ) || item?.startsWith( '"' ) ) return item;
+	return "'" + item + "'";
+};
+
 const fromString = (
 	configObject,
 	nameString,
@@ -73,8 +84,22 @@ export const filterObjectByName = ( name, object ) => {
 	return null;
 };
 
-export const getGlobByFormatModeAndFiletype = ( formatMode, filetype ) => {
-	return formatMode.paths?.find( ( path ) => path.filetype === filetype );
+export const getPathByFormatModeAndFiletype = (
+	formatMode,
+	filetype,
+	defaultPath = ''
+) => {
+	const pathObj =
+		formatMode.paths?.find( ( path ) => path.filetype === filetype ) ?? {};
+
+	const paths = pathObj?.path ?? null;
+
+	if ( ! paths ) return [ defaultPath ];
+
+	// check if single value
+	if ( ! Array.isArray( paths ) ) return [ paths ];
+
+	return paths;
 };
 
 export const ensureFileExists = ( filePath, errorMsg = null ) => {

packages/vite-config/src/utils/get-all-theme-names.js

@@ -11,7 +11,7 @@ export const getAllThemeNames = () => {
 	const themesDir = path.resolve( 'web/app/themes' );
 
 	if ( ! fs.existsSync( themesDir ) ) {
-		console.error( 'Themes directory does not exist' );
+		console.error( 'Themes directory does not exist' ); // eslint-disable-line no-console
 		return [];
 	}
 
@@ -29,7 +29,7 @@ export const getAllThemeNames = () => {
 			);
 			return hasStyleCss;
 		} catch {
-			console.error( `Error checking directory: ${ fullPath }` );
+			console.error( `Error checking directory: ${ fullPath }` ); // eslint-disable-line no-console
 			return false;
 		}
 	} );