ENGCOM-6708: #18012: added i18n wrapper to be used in underscore templates for translation #26435

Author: slavvka

app/code/Magento/Translation/Test/Unit/Model/Js/DataProviderTest.php

@@ -15,7 +15,7 @@
 use Magento\Framework\Phrase\Renderer\Translate;
 
 /**
- * Class DataProviderTest
+ * Verify data provider translation
  *
  * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
  */
@@ -105,24 +105,31 @@ public function testGetData()
             'hello1' => 'hello1translated',
             'hello2' => 'hello2translated',
             'hello3' => 'hello3translated',
-            'hello4' => 'hello4translated'
+            'hello4' => 'hello4translated',
+            'ko i18' => 'ko i18 translated',
+            'underscore i18' => 'underscore i18 translated',
         ];
 
         $contentsMap = [
             'content1$.mage.__("hello1")content1',
             'content2$.mage.__("hello2")content2',
-            'content2$.mage.__("hello4")content4', // this value should be last after running data provider
-            'content2$.mage.__("hello3")content3',
+            'content2$.mage.__("hello4")content4 <!-- ko i18n: "ko i18" --><!-- /ko -->',
+            'content2$.mage.__("hello3")content3 <% _.i18n("underscore i18") %>',
         ];
 
         $translateMap = [
             [['hello1'], [], 'hello1translated'],
             [['hello2'], [], 'hello2translated'],
             [['hello3'], [], 'hello3translated'],
-            [['hello4'], [], 'hello4translated']
+            [['hello4'], [], 'hello4translated'],
+            [['ko i18'], [], 'ko i18 translated'],
+            [['underscore i18'], [], 'underscore i18 translated'],
         ];
 
-        $patterns = ['~\$\.mage\.__\(([\'"])(.+?)\1\)~'];
+        $patterns = [
+            '~\$\.mage\.__\(([\'"])(.+?)\1\)~',
+            '~(?:i18n\:|_\.i18n\()\s*(["\'])(.*?)(?<!\\\\)\1~',
+        ];
 
         $this->appStateMock->expects($this->once())
             ->method('getAreaCode')

app/code/Magento/Translation/etc/di.xml

@@ -64,7 +64,7 @@
     <type name="Magento\Translation\Model\Js\Config">
         <arguments>
             <argument name="patterns" xsi:type="array">
-                <item name="i18n_translation" xsi:type="string"><![CDATA[~i18n\:\s*(["'])(.*?)(?<!\\)\1~]]></item>
+                <item name="i18n_translation" xsi:type="string"><![CDATA[~(?:i18n\:|_\.i18n\()\s*(["'])(.*?)(?<!\\)\1~]]></item>
                 <item name="translate_wrapping" xsi:type="string"><![CDATA[~translate\=("')([^\'].*?)\'\"~]]></item>
                 <item name="mage_translation_widget" xsi:type="string"><![CDATA[~(?s)(?:\$|jQuery)\.mage\.__\(\s*(['"])(?<translate>.+?)(?<!\\)\1\s*(*SKIP)\)\s*(?s)~]]></item>
                 <item name="mage_translation_static" xsi:type="string"><![CDATA[~(?s)\$t\(\s*(['"])(?<translate>.+?)(?<!\\)\1\s*(*SKIP)\)(?s)~]]></item>

lib/web/mage/translate.js

@@ -6,8 +6,9 @@
 define([
     'jquery',
     'mage/mage',
-    'mageTranslationDictionary'
-], function ($, mage, dictionary) {
+    'mageTranslationDictionary',
+    'underscore'
+], function ($, mage, dictionary, _) {
     'use strict';
 
     $.extend(true, $, {
@@ -46,5 +47,18 @@ define([
     });
     $.mage.__ = $.proxy($.mage.translate.translate, $.mage.translate);
 
+    // Provide i18n wrapper to be used in underscore templates for translation
+    _.extend(_, {
+        /**
+         * Make a translation using $.mage.__
+         *
+         * @param {String} text
+         * @return {String}
+         */
+        i18n: function (text) {
+            return $.mage.__(text);
+        }
+    });
+
     return $.mage.__;
 });