@elementor/extract-i18n-wordpress-expressions-webpack-plugin 0.2.2

package/src/index.ts

@@ -0,0 +1,201 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { Compilation, Compiler, Chunk, Module as WebpackModule } from 'webpack';
+
+type Module = WebpackModule & {
+	userRequest?: string;
+	rawRequest?: string;
+	_source?: {
+		_valueAsString?: string;
+	},
+	modules?: Module[];
+}
+
+type TranslationCallExpression = {
+	type: 'comment' | 'call-expression';
+	index: number;
+	value: string;
+};
+
+type TranslationCallExpressions = Map<string, TranslationCallExpression[]>;
+
+const MODULE_FILTERS = Object.freeze( [ /(([^!?\s]+?)(?:\.js|\.jsx|\.ts|\.tsx))$/, /^((?!node_modules).)*$/ ] );
+
+const COMMENTS_REGEXPS = Object.freeze( [
+	// Matches translators comment block: `/* translators: %s */`.
+	/\/\*[\t ]*translators:.*\*\//gm,
+	/// Matches translators inline comment: `// translators: %s`.
+	/(\/\/)[\t ]*translators:[^\r\n]*/gm,
+] );
+
+const TRANSLATIONS_REGEXPS = Object.freeze( [
+	// Matches translation functions: `__('Hello', 'elementor')`, `_n('Me', 'Us', 2, 'elementor-pro')`.
+	/\b_(?:_|n|nx|x)\(.*?,\s*(?<c>['"`])[\w-]+\k<c>\)/gm,
+] );
+
+export class ExtractI18nWordpressExpressionsWebpackPlugin {
+	apply( compiler: Compiler ) {
+		// Learn more about Webpack plugin system: https://webpack.js.org/api/plugins/
+
+		let translationCallExpressions: TranslationCallExpressions = new Map();
+
+		// Learn more about Webpack compilation process and hooks: https://webpack.js.org/api/compilation-hooks/
+		compiler.hooks.thisCompilation.tap( this.constructor.name, ( compilation ) => {
+			// We tap into the time that Webpack has finished processing all the other assets
+			// learn more: https://webpack.js.org/api/compilation-hooks/#processassets.
+			compilation.hooks.processAssets.tap( { name: this.constructor.name }, () => {
+				translationCallExpressions = this.getModuleExpressionsMap( compilation );
+			} );
+		} );
+
+		compiler.hooks.afterEmit.tapPromise( this.constructor.name, async ( compilation ) => {
+			// Create all the translations files based on the call expressions.
+			await this.createTranslationsFiles( compilation, translationCallExpressions );
+		} );
+	}
+
+	getModuleExpressionsMap( compilation: Compilation ) {
+		const moduleExpressionsMap = new Map();
+
+		[ ...compilation.chunks ].forEach( ( chunk ) => {
+			const chunkJSFile = this.getFileFromChunk( chunk );
+
+			if ( ! chunkJSFile ) {
+				// There's no JS file in this chunk, no work for us. Typically a `style.css` from cache group.
+				return;
+			}
+
+			compilation.chunkGraph.getChunkModules( chunk ).forEach( ( module ) => {
+				this.getSubModulesToCheck( module ).forEach( ( subModule ) => {
+					const mainEntryFile = this.findMainModuleOfEntry( subModule, compilation );
+
+					if ( ! moduleExpressionsMap.has( mainEntryFile ) ) {
+						moduleExpressionsMap.set( mainEntryFile, [] );
+					}
+
+					// Running over the submodules and find all the translation call expressions and their translators comment
+					// (e.g `/* translators: %s: name*/ __('Hello %s', 'elementor')`),
+					// extract them and add them to a Map, where the key is the main entry file, and the value is an array of all the
+					// translation call expressions.
+					this.extractExpressionsFromSubmodule( subModule ).forEach( ( expression ) => {
+						moduleExpressionsMap.get( mainEntryFile ).push( expression );
+					} );
+				} );
+			} );
+		} );
+
+		return moduleExpressionsMap;
+	}
+
+	async createTranslationsFiles( compilation: Compilation, translationCallExpressions: TranslationCallExpressions ) {
+		const promises = [ ...compilation.entrypoints ].map( ( [ id, entrypoint ] ) => {
+			const chunk = entrypoint.chunks.find( ( { name } ) => name === id );
+
+			if ( ! chunk ) {
+				return Promise.resolve();
+			}
+
+			const chunkJSFile = this.getFileFromChunk( chunk );
+
+			if ( ! chunkJSFile ) {
+				return Promise.resolve();
+			}
+
+			const { entry } = compilation.options;
+
+			if ( ! entry || typeof entry !== 'object' || ! ( id in entry ) ) {
+				throw new Error( `Entry must be an object. e.g: {app: './path/to/app.js'}` );
+			}
+
+			const mainFilePath = entry[ id ].import?.[ 0 ];
+
+			if ( ! mainFilePath ) {
+				throw new Error( 'Entry is invalid' );
+			}
+
+			const { path: outputPath } = compilation.options.output;
+
+			if ( ! outputPath ) {
+				throw new Error( 'Output path is invalid' );
+			}
+
+			const assetFilename = this.generateTranslationFilename(
+				outputPath,
+				compilation.getPath( '[file]', { filename: chunkJSFile } )
+			);
+
+			const assetFileContent = this.generateTranslationFileContent(
+				translationCallExpressions.get( mainFilePath ) || []
+			);
+
+			return fs.promises.writeFile( assetFilename, assetFileContent );
+		} );
+
+		return await Promise.all( promises );
+	}
+
+	getSubModulesToCheck( module: Module ) {
+		return [ ...( module.modules || [] ), module ]
+			.filter( ( subModule ) => this.shouldCheckModule( subModule ) );
+	}
+
+	getFileFromChunk( chunk: Chunk ) {
+		return [ ...chunk.files ].find( ( f ) => /\.js$/i.test( f ) );
+	}
+
+	shouldCheckModule( module: Module ) {
+		return MODULE_FILTERS.every( ( filter ) => filter.test( module.userRequest || '' ) );
+	}
+
+	findMainModuleOfEntry( module: Module, compilation: Compilation ) : string | null {
+		const issuer = compilation.moduleGraph.getIssuer( module );
+
+		if ( issuer ) {
+			return this.findMainModuleOfEntry( issuer, compilation );
+		}
+
+		return module.rawRequest || null;
+	}
+
+	extractExpressionsFromSubmodule( subModule: Module ) {
+		const source = subModule?._source?._valueAsString;
+
+		if ( ! source ) {
+			return [];
+		}
+
+		const translationCallExpressions: TranslationCallExpression[] = [];
+
+		[
+			...TRANSLATIONS_REGEXPS,
+			...COMMENTS_REGEXPS,
+		].forEach( ( regexp ) => {
+			[ ...source.matchAll( regexp ) ].forEach( ( res ) => {
+				translationCallExpressions.push( {
+					type: COMMENTS_REGEXPS.includes( regexp ) ? 'comment' : 'call-expression',
+					index: res.index || 0,
+					value: res[ 0 ],
+				} );
+			} );
+		} );
+
+		return translationCallExpressions;
+	}
+
+	generateTranslationFilename( basePath: string, filename: string ) {
+		return path.join(
+			basePath,
+			filename.replace( /(\.min)?\.js$/i, '.strings.js' )
+		);
+	}
+
+	generateTranslationFileContent( expressions: TranslationCallExpression[] ) {
+		return expressions
+			// Sort by the index it was found in the file based on the regexp (and not by the order it was added to the array).
+			.sort( ( a, b ) => a.index - b.index )
+			// Add a semicolon when needed.
+			.map( ( expr ) => `${ expr.value }${ expr.type === 'comment' ? '' : ';' }` )
+			// Join all the expressions to a single string with line-breaks between them.
+			.join( '\n' );
+	}
+}