@sumotto/configs 0.0.1

package/.editorconfig

@@ -0,0 +1,36 @@
+# https://github.com/WordPress/gutenberg/blob/HEAD/.editorconfig
+
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2
+
+[*.{gradle,java,kt}]
+indent_style = space
+
+[packages/react-native-*/**.xml]
+indent_style = space
+
+# Here we digress from WP because such JSON is generated by ACF and it is better not to fight with it
+[acf-json/*.json]
+indent_style = space

package/helpers/webpack.js

@@ -0,0 +1,185 @@
+const path = require( 'node:path' );
+const glob = require( 'glob' );
+const fs = require( 'fs' );
+
+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' ),
+	],
+} );
+
+const [
+	defaultConfigWP,
+	modulesConfigWP,
+] = 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 ) {
+	return glob
+		.sync( globPattern, {
+			absolute: true,
+			cwd: process.cwd(),
+		} )
+		.reduce( function ( entries, entryPath ) {
+			if ( fs.statSync( entryPath ).size > 0 ) {
+				entries[ getEntryName( entryPath ) ] = entryPath;
+			}
+			return entries;
+		}, {} );
+}
+
+module.exports.defaultConfigWP = defaultConfigWP;
+module.exports.modulesConfigWP = modulesConfigWP;
+
+module.exports.Config = class {
+	constructor( config, name, port = 'auto' ) {
+		this.config = config;
+		this.config.name = name;
+
+		if ( config.devServer ) {
+			// noinspection JSUnusedGlobalSymbols
+			this.config.devServer = {
+				...config.devServer,
+				port,
+				allowedHosts: 'all',
+				client: {
+					...config.devServer?.client,
+					overlay: {
+						...config.devServer?.client?.overlay,
+						runtimeErrors: ( error ) => {
+							return (
+								error?.message !==
+								'ResizeObserver loop completed with undelivered notifications.'
+							);
+						},
+					},
+				},
+				watchFiles: [ 'src/scripts/modules/*' ],
+			};
+
+			this.config.optimization = {
+				...config.optimization,
+				runtimeChunk: 'single',
+			};
+		}
+	}
+
+	get() {
+		return this.config;
+	}
+
+	resetEntries() {
+		this.config.entry = {};
+
+		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 ),
+			};
+		}
+
+		return this;
+	}
+
+	changeRule( test, callBack ) {
+		this.config.module.rules.forEach( ( rule, index ) => {
+			if ( test === rule.test.toString() ) {
+				callBack( rule, index );
+			}
+		} );
+
+		return this;
+	}
+
+	removePlugin( pluginClass ) {
+		this.config.plugins.forEach( ( plugin, number ) => {
+			if ( plugin instanceof pluginClass ) {
+				this.config.plugins.splice( number, 1 );
+			}
+		} );
+
+		return this;
+	}
+
+	addPlugin( plugin, position = 'after' ) {
+		if ( typeof this.config.plugins === 'undefined' ) {
+			this.config.plugins = [];
+		}
+
+		if ( 'before' === position ) {
+			this.config.plugins.unshift( plugin );
+		} else {
+			this.config.plugins.push( plugin );
+		}
+
+		return this;
+	}
+
+	replacePlugin( newPlugin ) {
+		this.config.plugins.forEach( ( plugin, index ) => {
+			if ( plugin instanceof newPlugin.constructor ) {
+				this.config.plugins[ index ] = newPlugin;
+			}
+		} );
+
+		return this;
+	}
+
+	addMinimizer( minimizer ) {
+		if ( typeof this.config.optimization === 'undefined' ) {
+			this.config.optimization = {};
+		}
+
+		if ( typeof this.config.optimization.minimizer === 'undefined' ) {
+			this.config.optimization.minimizer = [];
+		}
+
+		this.config.optimization.minimizer.push( minimizer );
+
+		return this;
+	}
+
+	addWatch( globPattern ) {
+		if ( this.config.devServer ) {
+			this.config.devServer = {
+				...this.config.devServer,
+				watchFiles: [
+					...this.config.devServer?.watchFiles,
+					globPattern,
+				],
+			};
+		}
+
+		return this;
+	}
+
+	static hasDevServer( config ) {
+		return !! config.devServer;
+	}
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "@sumotto/configs",
+	"version": "0.0.1",
+	"description": "Configs for my work",
+	"scripts": {
+		"release": "np --yolo"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/SumoTTo/configs.git"
+	},
+	"author": {
+		"name": "Sigalin Kirill",
+		"email": "sumotto@yandex.ru"
+	},
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/SumoTTo/configs/issues"
+	},
+	"homepage": "https://github.com/SumoTTo/configs#readme",
+	"type": "module",
+	"devDependencies": {
+		"np": "^10.0.5"
+	},
+	"dependencies": {
+		"@wordpress/scripts": "^27.9.0",
+		"clean-webpack-plugin": "^4.0.0",
+		"copy-webpack-plugin": "^12.0.2",
+		"dotenv": "^16.4.5",
+		"glob": "^10.4.1",
+		"image-minimizer-webpack-plugin": "^4.0.1",
+		"mini-css-extract-plugin": "^2.9.0",
+		"rtlcss-webpack-plugin": "^4.0.7",
+		"sharp": "^0.33.4",
+		"svgo": "^3.3.2",
+		"webpack-remove-empty-scripts": "^1.0.4"
+	},
+	"eslintConfig": {
+		"extends": [
+			"plugin:@wordpress/eslint-plugin/recommended"
+		],
+		"rules": {
+			"import/no-extraneous-dependencies": 0
+		}
+	},
+	"prettier": "@wordpress/prettier-config"
+}

package/wp/phpcs.xml

@@ -0,0 +1,60 @@
+<?xml version="1.0"?>
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="theme"
+		 xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/squizlabs/PHP_CodeSniffer/master/phpcs.xsd">
+
+	<description>A custom set of rules to check for a WordPress project</description>
+
+	<exclude-pattern>/vendor/*</exclude-pattern>
+	<exclude-pattern>/node_modules/*</exclude-pattern>
+	<exclude-pattern>/dist/*</exclude-pattern>
+
+	<arg name="extensions" value="php" />
+
+	<!-- https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/wiki/Customizable-sniff-properties -->
+
+	<rule ref="WordPress-Extra">
+		<!-- I want to drop this exception after version 3 is released. -->
+		<exclude name="PSR12.Functions.ReturnTypeDeclaration" />
+		<!-- This needs to be discussed, since this is indeed not used correctly, including in our topic. -->
+		<exclude name="Universal.Operators.DisallowShortTernary" />
+	</rule>
+
+	<rule ref="WordPress.WP.I18n">
+		<properties>
+			<property name="text_domain" type="array">
+				<element value="theme" />
+				<element value="woocommerce" />
+				<element value="default" />
+			</property>
+		</properties>
+	</rule>
+
+	<rule ref="Universal.WhiteSpace.PrecisionAlignment">
+		<properties>
+			<property name="ignoreAlignmentBefore" type="array">
+				<element value="T_INLINE_HTML" />
+			</property>
+		</properties>
+	</rule>
+
+	<rule ref="WordPress.Security.EscapeOutput">
+		<properties>
+			<property name="customAutoEscapedFunctions" type="array">
+				<element value="wld_get" />
+				<element value="wld_get_as" />
+				<element value="wld_get_value" />
+				<element value="wld_get_attrs" />
+				<element value="wld_get_template_part" />
+			</property>
+		</properties>
+	</rule>
+
+	<rule ref="WordPress.WP.Capabilities">
+		<properties>
+			<property name="custom_capabilities" type="array">
+				<element value="manage_woocommerce" />
+			</property>
+		</properties>
+	</rule>
+
+</ruleset>

package/wp/tsconfig.json

@@ -0,0 +1,36 @@
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/tsconfig.base.json
+ */
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": false,
+		"checkJs": false,
+		"allowSyntheticDefaultImports": true,
+		"jsx": "preserve",
+		"target": "esnext",
+		"module": "esnext",
+		"lib": [ "DOM", "DOM.Iterable", "ESNext" ],
+		"declaration": true,
+		"declarationMap": true,
+		"composite": true,
+		"emitDeclarationOnly": true,
+		"isolatedModules": true,
+
+		/* Strict Type-Checking Options */
+		"strict": true,
+
+		/* Additional Checks */
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+
+		/* Module Resolution Options */
+		"moduleResolution": "node",
+
+		/* This needs to be false so our types are possible to consume without setting this */
+		"esModuleInterop": false,
+		"resolveJsonModule": true,
+	}
+}

package/wp/webpack.blocks.config.js

@@ -0,0 +1,37 @@
+const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
+const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
+const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
+const {
+	Config,
+	defaultConfigWP,
+	modulesConfigWP,
+} = require( '../helpers/webpack' );
+
+const defaultConfig = new Config(
+	defaultConfigWP,
+	'default',
+	process.env.THEME_BLOCK_DEV_SERVER_PORT || 'auto'
+)
+	.addEntries( 'src/**/styles/*.{pc,sc,sa,c}ss' )
+	.removePlugin( RtlCssPlugin )
+	.replacePlugin(
+		new MiniCSSExtractPlugin( {
+			filename( pathData ) {
+				return `${ pathData.chunk.name.replace(
+					'/scripts/',
+					'/styles/'
+				) }.css`;
+			},
+		} )
+	)
+	.addPlugin(
+		new CleanWebpackPlugin( {
+			cleanOnceBeforeBuildPatterns: [ '!**/*module*,' ],
+			cleanStaleWebpackAssets: false,
+		} ),
+		'before'
+	);
+
+const modulesConfig = new Config( modulesConfigWP, 'modules' );
+
+module.exports = [ defaultConfig.get(), modulesConfig.get() ];

package/wp/webpack.theme.config.js

@@ -0,0 +1,202 @@
+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 {
+	Config,
+	defaultConfigWP,
+	modulesConfigWP,
+} = require( '../helpers/webpack' );
+
+const defaultConfig = new Config(
+	defaultConfigWP,
+	'default',
+	process.env.THEME_DEV_SERVER_PORT || 'auto'
+)
+	.resetEntries()
+	.addEntries(
+		'src/styles/{*.{pc,sc,sa,c}ss,{blocks,variations,patterns}/**/*.{pc,sc,sa,c}ss}'
+	)
+	.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' ) ],
+		};
+	} )
+	.removePlugin( RtlCssPlugin )
+	.addPlugin(
+		new CleanWebpackPlugin( {
+			cleanOnceBeforeBuildPatterns: [ '!modules/**' ],
+			cleanStaleWebpackAssets: false,
+		} ),
+		'before'
+	)
+	.addPlugin(
+		// For styles remove JS and styles .asset.php
+		new RemoveEmptyScriptsPlugin( {
+			enabled: ! Config.hasDevServer( defaultConfigWP ),
+		} )
+	)
+	.addPlugin(
+		new CopyWebpackPlugin( {
+			patterns: [
+				{
+					from: 'src/fonts',
+					to: 'fonts',
+					noErrorOnMissing: true,
+					globOptions: {
+						ignore: [ '**/readme.md' ],
+					},
+				},
+				{
+					from: 'src/social-icons',
+					to: 'social-icons',
+					noErrorOnMissing: true,
+					globOptions: {
+						ignore: [ '**/readme.md' ],
+					},
+				},
+				{
+					from: 'src/menu-icons',
+					to: 'menu-icons',
+					noErrorOnMissing: true,
+					globOptions: {
+						ignore: [ '**/readme.md' ],
+					},
+				},
+			],
+		} )
+	)
+	.addMinimizer(
+		new ImageMinimizerPlugin( {
+			minimizer: {
+				implementation: ImageMinimizerPlugin.svgoMinify,
+				options: {
+					encodeOptions: {
+						multipass: true,
+						plugins: [
+							{
+								name: 'preset-default',
+								params: {
+									overrides: {
+										removeViewBox: false,
+									},
+								},
+							},
+							{
+								name: 'addAttributesToSVGElement',
+								params: {
+									attributes: [
+										{
+											'aria-hidden': 'true',
+										},
+									],
+								},
+							},
+						],
+					},
+				},
+			},
+		} )
+	)
+	.addMinimizer(
+		new ImageMinimizerPlugin( {
+			minimizer: {
+				implementation: ImageMinimizerPlugin.sharpMinify,
+			},
+			generator: [
+				{
+					type: 'asset',
+					preset: 'avif',
+					implementation: ImageMinimizerPlugin.sharpGenerate,
+					options: {
+						encodeOptions: {
+							avif: {
+								lossless: false,
+							},
+						},
+					},
+				},
+			],
+		} )
+	)
+	.addWatch( 'src/scripts/modules/*' );
+
+const modulesConfig = new Config( modulesConfigWP, 'modules' )
+	.resetEntries()
+	.addEntries( 'src/scripts/modules/*.{j,t}s' );
+
+const patternsConfig = new Config( { entry: {} }, 'patterns' )
+	.addPlugin(
+		new CopyWebpackPlugin( {
+			patterns: [
+				{
+					from: 'src/images-for-patterns',
+					to: '../patterns/images',
+					noErrorOnMissing: true,
+					globOptions: {
+						ignore: [ '**/readme.md' ],
+					},
+				},
+			],
+		} )
+	)
+	.addMinimizer(
+		new ImageMinimizerPlugin( {
+			minimizer: {
+				implementation: ImageMinimizerPlugin.svgoMinify,
+				options: {
+					encodeOptions: {
+						multipass: true,
+						plugins: [
+							{
+								name: 'preset-default',
+							},
+							{
+								name: 'addAttributesToSVGElement',
+								params: {
+									attributes: [
+										{
+											'aria-hidden': 'true',
+										},
+									],
+								},
+							},
+						],
+					},
+				},
+			},
+		} )
+	)
+	.addMinimizer(
+		new ImageMinimizerPlugin( {
+			minimizer: {
+				implementation: ImageMinimizerPlugin.sharpMinify,
+			},
+			generator: [
+				{
+					type: 'asset',
+					preset: 'avif',
+					implementation: ImageMinimizerPlugin.sharpGenerate,
+					options: {
+						encodeOptions: {
+							avif: {
+								lossless: false,
+							},
+						},
+					},
+				},
+			],
+		} )
+	);
+
+module.exports = [
+	defaultConfig.get(),
+	modulesConfig.get(),
+	patternsConfig.get(),
+];