Add i18n infrastructure for Playground web app

package.json

@@ -152,6 +152,7 @@
 		"@wordpress/core-data": "7.4.0",
 		"@wordpress/data": "10.4.0",
 		"@wordpress/element": "6.4.0",
+		"@wordpress/i18n": "5.14.0",
 		"@wordpress/notices": "5.4.0",
 		"chalk": "5.2.0",
 		"clsx": "^1.2.1",
@@ -171,6 +172,7 @@
 		"eslint-plugin-playground-dev": "file:packages/meta/src/eslint-plugin-playground-dev",
 		"eslint-plugin-react": "7.32.2",
 		"eslint-plugin-react-hooks": "4.6.0",
+		"gettext-extractor": "3.8.0",
 		"gh-pages": "5.0.0",
 		"glob": "^9.3.0",
 		"husky": "8.0.3",

packages/meta/src/wordpress-i18n-gettext-extractor/index.ts

@@ -0,0 +1,70 @@
+import {
+	GettextExtractor,
+	HtmlExtractors,
+	JsExtractors,
+} from 'gettext-extractor';
+
+export function extractWordPressI18nGettext({
+	scriptGlobs,
+	htmlGlobs,
+	outputFile: outputFile,
+}: {
+	scriptGlobs: string[];
+	htmlGlobs: string[];
+	outputFile: string;
+}) {
+	const extractor = new GettextExtractor();
+
+	const comments = {
+		otherLineLeading: true,
+		sameLineLeading: true,
+		sameLineTrailing: true,
+		regex: /translators.*/is,
+	};
+	const jsParser = extractor.createJsParser([
+		JsExtractors.callExpression('__', {
+			arguments: {
+				text: 0,
+			},
+			comments,
+		}),
+		JsExtractors.callExpression('_x', {
+			arguments: {
+				text: 0,
+				context: 1,
+			},
+			comments,
+		}),
+		JsExtractors.callExpression('_n', {
+			arguments: {
+				text: 0,
+				textPlural: 1,
+			},
+			comments,
+		}),
+		JsExtractors.callExpression('_nx', {
+			arguments: {
+				text: 0,
+				textPlural: 1,
+				context: 3,
+			},
+			comments,
+		}),
+	]);
+
+	for (const scriptGlob of scriptGlobs) {
+		jsParser.parseFilesGlob(scriptGlob);
+	}
+
+	const htmlParser = extractor.createHtmlParser([
+		HtmlExtractors.embeddedJs('script', jsParser),
+	]);
+
+	for (const htmlGlob of htmlGlobs) {
+		htmlParser.parseFilesGlob(htmlGlob);
+	}
+
+	extractor.savePotFile(outputFile);
+
+	return extractor.getStats();
+}

packages/nx-extensions/executors.json

@@ -20,6 +20,11 @@
 			"implementation": "./src/executors/assert-built-esm-and-cjs/executor",
 			"schema": "./src/executors/assert-built-esm-and-cjs/schema.json",
 			"description": "assert-built-esm-and-cjs executor"
+		},
+		"wordpress-i18n-gettext-extractor": {
+			"implementation": "./src/executors/wordpress-i18n-gettext-extractor/executor",
+			"schema": "./src/executors/wordpress-i18n-gettext-extractor/schema.json",
+			"description": "wordpress-i18n-gettext-extractor executor"
 		}
 	}
 }

packages/nx-extensions/src/executors/wordpress-i18n-gettext-extractor/executor.ts

@@ -0,0 +1,31 @@
+import { ExecutorContext } from '@nx/devkit';
+import * as path from 'path';
+import { WordPressI18nGettextExtractorSchema } from './schema';
+import { extractWordPressI18nGettext } from '../../../../meta/src/wordpress-i18n-gettext-extractor';
+
+/**
+ * Extract a POT file from WordPress i18n calls in scripts and HTML files.
+ *
+ * @param options
+ * @param context
+ * @returns
+ */
+export default async function runExecutor(
+	options: WordPressI18nGettextExtractorSchema,
+	context: ExecutorContext
+) {
+	const outputFile = path.isAbsolute(options.outputFile)
+		? options.outputFile
+		: path.join(context.root, options.outputFile);
+
+	const extractionStats = extractWordPressI18nGettext({
+		scriptGlobs: options.scriptGlobs,
+		htmlGlobs: options.htmlGlobs,
+		outputFile: outputFile,
+	});
+
+	console.log('Extraction stats:');
+	console.log(extractionStats);
+
+	return { success: true };
+}

packages/nx-extensions/src/executors/wordpress-i18n-gettext-extractor/schema.d.ts

@@ -0,0 +1,5 @@
+export interface WordPressI18nGettextExtractorSchema {
+	scriptGlobs: string[];
+	htmlGlobs: string[];
+	outputFile: string;
+}

packages/nx-extensions/src/executors/wordpress-i18n-gettext-extractor/schema.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "http://json-schema.org/schema",
+	"version": 2,
+	"title": "WordPress i18n gettext extractor",
+	"description": "",
+	"type": "object",
+	"properties": {
+		"scriptGlobs": {
+			"type": "array",
+			"description": "Globs for scripts to parse for gettext functions",
+			"items": {
+				"type": "string"
+			},
+			"defaultConfiguration": []
+		},
+		"htmlGlobs": {
+			"type": "array",
+			"description": "Globs for HTML documents to parse for gettext functions",
+			"items": {
+				"type": "string"
+			},
+			"defaultConfiguration": []
+		},
+		"outputFile": {
+			"type": "string",
+			"description": "The path to the resulting .pot file"
+		}
+	},
+	"required": ["outputFile"]
+}

packages/playground/website/project.json

@@ -116,6 +116,16 @@
 				]
 			}
 		},
+		"extract-i18n-strings": {
+			"executor": "@wp-playground/nx-extensions:wordpress-i18n-gettext-extractor",
+			"options": {
+				"outputFile": "packages/playground/website/website.pot",
+				"scriptGlobs": [
+					"packages/playground/website/src/**/*.@(ts|js|tsx|jsx)"
+				],
+				"htmlGlobs": ["packages/playground/website/index.html"]
+			}
+		},
 		"e2e": {
 			"executor": "@nx/cypress:cypress",
 			"options": {

packages/playground/website/src/components/layout/index.tsx

@@ -35,6 +35,7 @@ import {
 import { ImportFormModal } from '../import-form-modal';
 import { PreviewPRModal } from '../../github/preview-pr';
 import { MissingSiteModal } from '../missing-site-modal';
+import { __ } from '../../lib/i18n';
 
 acquireOAuthTokenIfNeeded();
 
@@ -90,7 +91,7 @@ export function Layout() {
 			<div className={css.siteView}>
 				{siteManagerIsOpen && (
 					<div
-						title="Open site"
+						title={__('Open site')}
 						className={css.siteViewOverlay}
 						onClick={() => {
 							dispatch(setSiteManagerOpen(false));