@sumotto/configs 0.0.13 → 0.0.15

package/helpers/sync-directory-webpack-plugin.js

@@ -0,0 +1,23 @@
+const syncDirectory = require( 'sync-directory' );
+
+class SyncDirectoryWebpackPlugin {
+	constructor( options ) {
+		this.sourceDir = options.sourceDir;
+		this.targetDir = options.targetDir;
+		this.watcher = syncDirectory( this.sourceDir, this.targetDir, {
+			watch: true,
+		} );
+	}
+
+	// noinspection JSUnusedGlobalSymbols
+	apply( compiler ) {
+		compiler.hooks.done.tap( 'SyncDirectoryPlugin', () => {
+			if ( 'development' !== compiler.options.mode ) {
+				// noinspection JSUnresolvedReference
+				this.watcher.close();
+			}
+		} );
+	}
+}
+
+module.exports = SyncDirectoryWebpackPlugin;

package/helpers/webpack.js

@@ -56,6 +56,32 @@ module.exports.Config = class {
 	constructor( config, name, port = 'auto' ) {
 		this.config = config;
 		this.config.name = name;
+		this.entries = {};
+		this.entriesFunctions = [];
+
+		if ( typeof this.config.entry === 'function' ) {
+			this.entriesFunctions.push( this.config.entry );
+		} else {
+			this.entries = {
+				...this.config.entry,
+			};
+		}
+
+		this.config.entry = () => {
+			let entries = {};
+
+			for ( const entriesFunction of this.entriesFunctions ) {
+				entries = {
+					...entries,
+					...entriesFunction(),
+				};
+			}
+
+			return {
+				...this.entries,
+				...entries,
+			};
+		};
 
 		if ( config.devServer ) {
 			// noinspection JSUnusedGlobalSymbols
@@ -90,23 +116,14 @@ module.exports.Config = class {
 	}
 
 	resetEntries() {
-		this.config.entry = {};
+		this.entries = {};
+		this.entriesFunctions = [];
 
 		return this;
 	}
 
 	addEntries( globPattern ) {
-		if ( typeof this.config.entry === 'function' ) {
-			this.config.entry = {
-				...this.config.entry(),
-				...getEntries( globPattern ),
-			};
-		} else {
-			this.config.entry = {
-				...this.config.entry,
-				...getEntries( globPattern ),
-			};
-		}
+		this.entriesFunctions.push( () => getEntries( globPattern ) );
 
 		return this;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sumotto/configs",
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"description": "Configs for my work",
 	"scripts": {
 		"release": "np --yolo"
@@ -26,16 +26,18 @@
 		"wp/*"
 	],
 	"dependencies": {
-		"@wordpress/scripts": "^28.1.0",
-		"clean-webpack-plugin": "^4.0.0",
+		"@wordpress/scripts": "^28.2.0",
 		"copy-webpack-plugin": "^12.0.2",
 		"dotenv": "^16.4.5",
+		"filemanager-webpack-plugin": "^8.0.0",
 		"find-free-port-sync": "^1.0.0",
 		"glob": "^10.4.2",
 		"image-minimizer-webpack-plugin": "^4.0.2",
 		"mini-css-extract-plugin": "^2.9.0",
+		"postcss-increase-specificity": "^0.6.0",
 		"rtlcss-webpack-plugin": "^4.0.7",
 		"svgo": "^3.3.2",
+		"sync-directory": "^6.0.5",
 		"webpack-remove-empty-scripts": "^1.0.4"
 	},
 	"eslintConfig": {

package/wp/postcss.theme.config.js

@@ -0,0 +1,32 @@
+module.exports = ( api ) => {
+	const isProduction = api.mode === 'production';
+
+	return {
+		ident: 'postcss',
+		sourceMap: ! isProduction,
+		plugins: [
+			[ 'autoprefixer', { grid: true } ],
+			[
+				'postcss-increase-specificity',
+				{
+					repeat: 1,
+					overrideIds: false,
+					stackableRoot: ':is(.is-root-container,.wp-site-blocks)',
+				},
+			],
+			isProduction && [
+				'cssnano',
+				{
+					preset: [
+						'default',
+						{
+							discardComments: {
+								removeAll: true,
+							},
+						},
+					],
+				},
+			],
+		],
+	};
+};

package/wp/webpack.blocks.config.js

@@ -1,13 +1,16 @@
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
-const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
 const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
+const FileManagerPlugin = require( 'filemanager-webpack-plugin' );
+const SyncDirectoryWebpackPlugin = require( '../helpers/sync-directory-webpack-plugin' );
 const findFreePort = require( 'find-free-port-sync' );
+const { resolve } = require( 'node:path' );
 const {
 	Config,
 	defaultConfigWP,
 	modulesConfigWP,
 } = require( '../helpers/webpack' );
+const root = process.cwd().replace( /\\/g, '/' );
 
 const port =
 	process.env.THEME_BLOCK_DEV_SERVER_PORT ||
@@ -28,28 +31,59 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
 		} )
 	)
 	.addPlugin(
-		new CleanWebpackPlugin( {
-			cleanOnceBeforeBuildPatterns: [
-				'**/*',
-				// Each link in the path has been added, because if this is not done,
-				// the scripts will be separated since it does not fall under the condition !blocks/*/scripts/module.*,
-				// and accordingly, the module files will be included with it...
-				'!blocks',
-				'!blocks/*',
-				'!blocks/*/scripts',
-				'!blocks/*/scripts/module.*',
-			],
-			cleanStaleWebpackAssets: false,
-		} ),
-		'before'
-	)
-	.addPlugin(
-		// For styles remove JS and styles .asset.php
-		new RemoveEmptyScriptsPlugin( {
-			enabled: ! Config.hasDevServer( defaultConfigWP ),
+		new FileManagerPlugin( {
+			events: {
+				onStart: {
+					delete: [
+						{
+							source: './build/*',
+							options: {
+								ignore: '**/module.*',
+							},
+						},
+					],
+				},
+			},
+			runOnceInWatchMode: true,
 		} )
 	);
 
-const modulesConfig = new Config( modulesConfigWP, 'modules' );
+if ( ! Config.hasDevServer( defaultConfigWP ) ) {
+	defaultConfig.addPlugin(
+		// For styles remove JS and styles .asset.php
+		new RemoveEmptyScriptsPlugin()
+	);
+} else {
+	defaultConfig.addWatch( 'src/blocks/*/scripts/module.{j,t}s' );
+}
+
+const modulesConfig = new Config( modulesConfigWP, 'modules' ).addPlugin(
+	new FileManagerPlugin( {
+		events: {
+			onStart: {
+				delete: [
+					{
+						source: '**/module.*',
+						options: {},
+					},
+				],
+			},
+		},
+		runOnceInWatchMode: true,
+	} )
+);
+
+if ( process.env.WP_CONTENT_DIR ) {
+	const syncDirectory = new SyncDirectoryWebpackPlugin( {
+		sourceDir: root,
+		targetDir: resolve(
+			process.env.WP_CONTENT_DIR,
+			'plugins/theme-blocks'
+		),
+	} );
+
+	defaultConfig.addPlugin( syncDirectory );
+	modulesConfig.addPlugin( syncDirectory );
+}
 
 module.exports = [ defaultConfig.get(), modulesConfig.get() ];

package/wp/webpack.the-modifications.config.js

@@ -0,0 +1,94 @@
+const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
+const glob = require( 'glob' );
+const path = require( 'path' );
+
+require( 'dotenv' ).config( {
+	path: [
+		path.resolve( process.cwd(), '.env.local' ),
+		path.resolve( process.cwd(), '.env' ),
+		path.resolve( process.cwd(), '../.env.local' ),
+		path.resolve( process.cwd(), '../.env' ),
+		path.resolve( process.cwd(), '../../.env.local' ),
+		path.resolve( process.cwd(), '../../.env' ),
+	],
+} );
+
+const [
+	defaultConfig,
+	modulesConfig,
+] = require( '@wordpress/scripts/config/webpack.config.js' );
+
+function getEntryName( entryPath ) {
+	const entryData = path.parse( entryPath );
+	return path
+		.normalize(
+			path.join(
+				path.relative(
+					path.join( process.cwd(), 'src' ),
+					entryData.dir
+				),
+				entryData.name
+			)
+		)
+		.replaceAll( '\\', '/' );
+}
+
+function getEntries( globPattern, replace = '' ) {
+	return glob
+		.sync( globPattern, {
+			absolute: true,
+			cwd: process.cwd(),
+		} )
+		.reduce( function ( entries, entryPath ) {
+			let name = getEntryName( entryPath ).replace( /^scripts\//, '' );
+			if ( replace ) {
+				name = name.replace( replace, '' );
+			}
+
+			entries[ name ] = entryPath;
+
+			return entries;
+		}, {} );
+}
+
+defaultConfig.entry = {
+	...getEntries( 'src/*.{j,t}s{,x}' ),
+};
+
+defaultConfig.plugins.forEach( ( plugin, number ) => {
+	if ( plugin instanceof RtlCssPlugin ) {
+		defaultConfig.plugins.splice( number, 1 );
+	}
+} );
+
+modulesConfig.entry = {
+	...getEntries( 'src/scripts/modules/*.{j,t}s', 'modules/' ),
+};
+
+defaultConfig.name = 'default';
+modulesConfig.name = 'modules';
+
+defaultConfig.output.path = path.resolve( __dirname, 'build/scripts' );
+modulesConfig.output.path = path.resolve( __dirname, 'build/modules' );
+
+const reactJSXRuntimeConfig = {
+	name: 'react',
+	entry: {
+		'react-jsx-runtime': {
+			import: 'react/jsx-runtime',
+		},
+	},
+	output: {
+		path: path.resolve( __dirname, 'build/polyfill' ),
+		filename: 'react-jsx-runtime.js',
+		library: {
+			name: 'ReactJSXRuntime',
+			type: 'window',
+		},
+	},
+	externals: {
+		react: 'React',
+	},
+};
+
+module.exports = [ defaultConfig, modulesConfig, reactJSXRuntimeConfig ];

package/wp/webpack.theme.config.js

@@ -1,15 +1,17 @@
-const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
 const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const ImageMinimizerPlugin = require( 'image-minimizer-webpack-plugin' );
-const { resolve } = require( 'node:path' );
+const SyncDirectoryWebpackPlugin = require( '../helpers/sync-directory-webpack-plugin' );
+const FileManagerPlugin = require( 'filemanager-webpack-plugin' );
 const findFreePort = require( 'find-free-port-sync' );
+const { resolve } = require( 'node:path' );
 const {
 	Config,
 	defaultConfigWP,
 	modulesConfigWP,
 } = require( '../helpers/webpack' );
+const root = process.cwd().replace( /\\/g, '/' );
 
 const port =
 	process.env.THEME_DEV_SERVER_PORT ||
@@ -23,7 +25,6 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
 	.addEntries( 'src/scripts/*.{j,t}s' )
 	.changeRule( '/\\.(sc|sa)ss$/', ( rule ) => {
 		const last = rule.use.length - 1;
-		const root = process.cwd();
 
 		rule.use[ last ].options.sassOptions = {
 			includePaths: [ resolve( root, 'src/styles/partials' ) ],
@@ -31,19 +32,21 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
 	} )
 	.removePlugin( RtlCssPlugin )
 	.addPlugin(
-		new CleanWebpackPlugin( {
-			cleanOnceBeforeBuildPatterns: [
-				'**/*',
-				// Each link in the path has been added, because if this is not done,
-				// the scripts will be separated since it does not fall under the condition !scripts/modules/*,
-				// and accordingly, the module files will be included with it...
-				'!scripts',
-				'!scripts/modules',
-				'!scripts/modules/*',
-			],
-			cleanStaleWebpackAssets: false,
-		} ),
-		'before'
+		new FileManagerPlugin( {
+			events: {
+				onStart: {
+					delete: [
+						{
+							source: './build/*',
+							options: {
+								ignore: './build/scripts/modules/**/*',
+							},
+						},
+					],
+				},
+			},
+			runOnceInWatchMode: true,
+		} )
 	)
 	.addPlugin(
 		// For styles remove JS and styles .asset.php
@@ -110,11 +113,35 @@ const defaultConfig = new Config( defaultConfigWP, 'default', port )
 				},
 			],
 		} )
-	)
-	.addWatch( 'src/scripts/modules/*' );
+	);
 
 const modulesConfig = new Config( modulesConfigWP, 'modules' )
 	.resetEntries()
-	.addEntries( 'src/scripts/modules/*.{j,t}s' );
+	.addEntries( 'src/scripts/modules/*.{j,t}s' )
+	.addPlugin(
+		new FileManagerPlugin( {
+			events: {
+				onStart: {
+					delete: [
+						{
+							source: './build/scripts/modules/*',
+							options: {},
+						},
+					],
+				},
+			},
+			runOnceInWatchMode: true,
+		} )
+	);
+
+if ( process.env.WP_CONTENT_DIR ) {
+	const syncDirectory = new SyncDirectoryWebpackPlugin( {
+		sourceDir: root,
+		targetDir: resolve( process.env.WP_CONTENT_DIR, 'themes/theme-child' ),
+	} );
+
+	defaultConfig.addPlugin( syncDirectory );
+	modulesConfig.addPlugin( syncDirectory );
+}
 
 module.exports = [ defaultConfig.get(), modulesConfig.get() ];