How is js-translation.json file generated?

dmitrii_fediuk · October 22, 2015, 12:07am

If you want just to use JavaScript translation read the topics:

Here is in deep internal explanation of how the JavaScript translation dictionary js-translation.json is generated.

Step 1

Client part of Magento 2 requests the js-translation.json file from the server part.

Step 2

The js-translation.json file is generated dynamically.
The server uses \Magento\Translation\Model\Json\PreProcessor class instance to handle the request:

github.com

magento/magento2/blob/0be91a56d050791ac0b67a47185d79df31e79329/app/code/Magento/Translation/etc/di.xml#L76-L78


<item name="json_generation" xsi:type="array">
    <item name="class" xsi:type="string">Magento\Translation\Model\Json\PreProcessor</item>
</item>

Step 3

The \Magento\Translation\Model\Json\PreProcessor class instance parses the Knockout templates and JavaScript files to create a dictionary:

github.com

magento/magento2/blob/0be91a56d050791ac0b67a47185d79df31e79329/app/code/Magento/Translation/Model/Json/PreProcessor.php#L86




        if ($context instanceof FallbackContext) {
            $themePath = $context->getThemePath();
            $areaCode = $context->getAreaCode();
            $this->translate->setLocale($context->getLocale());
        }


        $area = $this->areaList->getArea($areaCode);
        $area->load(\Magento\Framework\App\Area::PART_TRANSLATE);


        $chain->setContent(json_encode($this->dataProvider->getData($themePath)));
        $chain->setContentType('json');
    }
}


/**
 * Is provided path the path to translation dictionary
 *
 * @param string $path
 * @return bool
 */

github.com

magento/magento2/blob/0be91a56d050791ac0b67a47185d79df31e79329/app/code/Magento/Translation/Model/Js/DataProvider.php#L106


        $this->filesUtility->getStaticHtmlFiles('base', $themePath),
        $this->filesUtility->getStaticHtmlFiles($areaCode, $themePath)
    );


    $dictionary = [];
    foreach ($files as $filePath) {
        /** @var \Magento\Framework\Filesystem\File\Read $read */
        $read = $this->fileReadFactory->create($filePath[0], \Magento\Framework\Filesystem\DriverPool::FILE);
        $content = $read->readAll();
        foreach ($this->getPhrases($content) as $phrase) {
            $translatedPhrase = $this->translate->render([$phrase], []);
            if ($phrase != $translatedPhrase) {
                $dictionary[$phrase] = $translatedPhrase;
            }
        }
    }


    return $dictionary;
}


/**

The parsing is implemented using regular expressions:

github.com

magento/magento2/blob/0be91a56d050791ac0b67a47185d79df31e79329/app/code/Magento/Translation/etc/di.xml#L60-L62


<item name="i18n_translation" xsi:type="string"><![CDATA[~i18n\:\s*(["'])(.*?)(?<!\\)\1~]]></item>
<item name="mage_translation_widget" xsi:type="string">~\$\.mage\.__\((['"])(.+?)\1\)~</item>
<item name="mage_translation_static" xsi:type="string">~\$t\((["'])(.+?)\1\)~</item>

dmitrii_fediuk · September 17, 2017, 5:12am

A more comprehensive analysis after 2 years:

How is a JavaScript translation dictionary (js-translation.json) generated on the static assets deployment (bin/magento setup:static-content:deploy)?