Aurelia I18N: Scan html sources for new keys and update translation.json files - aurelia

Question

Is there any tool to scan aurelia project sources (html, js) files and create (update) keys in translation.json files?
Especially I want to collect keys from HTML files that use TBindingBehavior and TValueConverter translation style.

Answer 1

Disclaimer: The packages suggested, are developed by my employer company.
Following are main steps involved in this process.
Generating i18n keys for the html templates, using gulp-i18n-update-localization-ids
Extract keys and values to an external resource, using gulp-i18n-extract
Manually translate the values for different languages
Compile the translations to generate locale files for different language, using gulp-i18n-compile2
Following are the minimalistic gulp tasks
const gulp = require("gulp");
const path = require("path");
const updateLocalizationIds = require('gulp-i18n-update-localization-ids');
const i18nExtract = require('gulp-i18n-extract');
const i18nCompile = require('gulp-i18n-compile2');
const src = path.resolve(__dirname, "src"),
json = path.resolve(src, "*.r.json"),
html = path.resolve(src, "*.html"),
translations = path.resolve(__dirname, "translations/i18n.json"),
locales = path.resolve(__dirname, "locales"),
i18nGlobalPrefixes = new Map();
const generateI18nKeys = function () {
return gulp.src(html)
.pipe(updateLocalizationIds({
emit: 'onChangeOnly',
ignore: [{ content: v => v.startsWith('${') && v.endsWith('}') }],
idTemplate: updateLocalizationIds.prefixFilename(i18nGlobalPrefixes),
whitelist: [
{ tagName: 'h2' },
{
tagName: 'another-custom-el',
attrs: ['some-other-value1', 'some-other-value2']
}
]
}))
.pipe(gulp.dest(src));
}
const i18nExtractOptions = {
plugIns: [
new i18nExtract.html(),
new i18nExtract.json()
],
markUpdates: true,
defaultLanguages: ['de', "fr"] // add more language here as per your need
};
const extractI18n = function () {
return gulp.src([html, json])
.pipe(i18nExtract.extract(translations, i18nExtractOptions))
.pipe(gulp.dest("."));
}
const compileOptions = {
fileName: "translation.json",
defaultLanguage: "en"
};
const compileI18n = function () {
return gulp.src(translations)
.pipe(i18nCompile(compileOptions))
.pipe(gulp.dest(locales));
}
gulp.task("i18n", gulp.series(generateI18nKeys, extractI18n, compileI18n));
What's happening here?
Let us assume that you have all the html files under src directory. You can also have some plain json files under src that act as external resources. Though it is not really needed, in this example, I have used the extension *.r.json for that (r indicates resource).
The first task generateI18nKeys generates i18n keys for the html templates. For example, it transforms the following edit.html
...
<!--edit.html-->
<h2>some text</h2>
<another-custom-el some-other-value1="value1" some-other-value2="value2"></another-custom-el>
... to the following
<!--edit.html-->
<h2 t="edit.t0">some text</h2>
<another-custom-el some-other-value1="value1" some-other-value2="value2"
t="[some-other-value1]edit.t1;[some-other-value2]edit.t2"></another-custom-el>
Use the whitelist property in the config option for this task, to mark elements and attributes for the key generation target.
In the next step, the keys and the corresponding values are extracted to a json file which looks like as follows.
{
"edit": {
"content": {
"edit.t0": {
"content": "some text",
"lastModified": "2019-05-26T16:23:42.306Z",
"needsUpdate": true,
"translations": {
"de": {
"content": "",
"lastModified": ""
},
"fr": {
"content": "",
"lastModified": ""
}
}
},
"edit.t1": {
"content": "value1",
"lastModified": "2019-05-26T16:23:42.306Z",
"needsUpdate": true,
"translations": {
"de": {
"content": "",
"lastModified": ""
},
"fr": {
"content": "",
"lastModified": ""
}
}
},
"edit.t2": {
"content": "value2",
"lastModified": "2019-05-26T16:23:42.306Z",
"needsUpdate": true,
"translations": {
"de": {
"content": "",
"lastModified": ""
},
"fr": {
"content": "",
"lastModified": ""
}
}
}
},
"src": "src\\edit.html"
}
}
Note that empty contents are generated for the localeIds, specified in the task. You can manually change this file to add translations for every language, configured.
Lastly, the compileI18n task generates files for every language from the last json, that looks something like below.
{
"edit": {
"t0": "some text",
"t1": "value1",
"t2": "value2"
}
}
Note that this file can directly be consumed by the aurelia-i18n plugin. For more details check the package specific documentation.
Hope this helps.