The "i18n:collect-phrases" command does not collect all translatable strings from JS

Question

During module development I trying to collect all translations to the i18n/en_US.csv file using regular command:

sudo -u www-data php bin/magento i18n:collect-phrases -o /var/www/html/app/code/Vendor/Module/i18n/en_US.csv /var/www/html/app/code/Vendor/Module

But it collected not all phrases. Phrases from JS was missed, which written like that one:

define([
    'jquery',
    'uiComponent',
    'ko',
    'Vendor_Module/js/action/generate-method',
    'uiRegistry',
    'mage/translate'
], function ($, Component, ko, methodsGenerator, registry, $tr) {
    'use strict';

    return Component.extend({
        defaults: {
            visible: false,
            changeLocationLabel: $tr('Change my location')
        },

As a result the 'Change my location' phrase was missed in the i18n/en_US.csv file.

Answer 1

Magento 2 use the \Magento\Setup\Module\I18n\Parser\Adapter\Js::_parse() method to collect all translatable lines (strings) from a files. It will open all js files one-by-one and read each line of code searching for a strings that match a pattern of regular expression:

'/mage\.__\(\s*([\'"])(.*?[^\\\])\1.*?[),]/'

or

'/\\$t\(\s*([\'"])(.*?[^\\\])\1.*?[),]/'

So, if you wish your string was added to the translation using phrase collector you should write it this way (using $t as a variable name, not the $tr):

define([
    'jquery',
    'uiComponent',
    'ko',
    'Vendor_Module/js/action/generate-method',
    'uiRegistry',
    'mage/translate'
], function ($, Component, ko, methodsGenerator, registry, $t) {
    'use strict';

    return Component.extend({
        defaults: {
            visible: false,
            changeLocationLabel: $t('Change my location')
        },

because the Magento accepts only the $t as a variable name for the mage/translate object. Another variables will be not parsed and strings from that functions will be not added to the .csv result file.

Another way is adding the mage/translate as a dependency in your class and use it calling $.mage.__('Change my location') which will be correctly parsed during phrase collecting too.