Skip to content

Add i18n infrastructure for Playground web app #2113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: trunk
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 85 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
70 changes: 70 additions & 0 deletions packages/meta/src/wordpress-i18n-gettext-extractor/index.ts
Original file line number Diff line number Diff line change
@@ -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();
}
5 changes: 5 additions & 0 deletions packages/nx-extensions/executors.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
}
Original file line number Diff line number Diff line change
@@ -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 };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export interface WordPressI18nGettextExtractorSchema {
scriptGlobs: string[];
htmlGlobs: string[];
outputFile: string;
}
Original file line number Diff line number Diff line change
@@ -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"]
}
10 changes: 10 additions & 0 deletions packages/playground/website/project.json
Original file line number Diff line number Diff line change
@@ -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": {
3 changes: 2 additions & 1 deletion packages/playground/website/src/components/layout/index.tsx
Original file line number Diff line number Diff line change
@@ -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));
Loading

Unchanged files with check annotations Beta

import url from './sqlite-database-integration.zip?url';
/**
* This file was auto generated by packages/playground/wordpress-builds/build/refresh-sqlite-integration-plugin.js

Check warning on line 6 in packages/playground/wordpress-builds/src/sqlite-database-integration/get-sqlite-database-plugin-details.ts

GitHub Actions / Lint and typecheck

Comments may not exceed 100 characters
* DO NOT CHANGE MANUALLY!
* This file must statically exists in the project because of the way
* vite resolves imports.