Merge pull request #4848 from magento-performance/MC-19247

[Performance] Broken JS translations with advanced bundling

Author: vzabaznov

app/code/Magento/Backend/view/adminhtml/requirejs-config.js

@@ -6,7 +6,8 @@
 var config = {
     map: {
         '*': {
-            'mediaUploader':  'Magento_Backend/js/media-uploader'
+            'mediaUploader':  'Magento_Backend/js/media-uploader',
+            'mage/translate': 'Magento_Backend/js/translate'
         }
     }
 };

app/code/Magento/Backend/view/adminhtml/web/js/translate.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable strict */
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([
+            'jquery',
+            'mage/mage'
+        ], factory);
+    } else {
+        factory(jQuery);
+    }
+}(function ($) {
+    $.extend(true, $, {
+        mage: {
+            translate: (function () {
+                /**
+                 * Key-value translations storage
+                 * @type {Object}
+                 * @private
+                 */
+                var _data = {};
+
+                /**
+                 * Add new translation (two string parameters) or several translations (object)
+                 */
+                this.add = function () {
+                    if (arguments.length > 1) {
+                        _data[arguments[0]] = arguments[1];
+                    } else if (typeof arguments[0] === 'object') {
+                        $.extend(_data, arguments[0]);
+                    }
+                };
+
+                /**
+                 * Make a translation with parsing (to handle case when _data represents tuple)
+                 * @param {String} text
+                 * @return {String}
+                 */
+                this.translate = function (text) {
+                    return _data[text] ? _data[text] : text;
+                };
+
+                return this;
+            }())
+        }
+    });
+    $.mage.__ = $.proxy($.mage.translate.translate, $.mage.translate);
+
+    return $.mage.__;
+}));

app/code/Magento/Checkout/Test/Mftf/Section/CheckoutPaymentSection.xml

@@ -31,7 +31,7 @@
         <element name="cartItemsAreaActive" type="textarea" selector="div.block.items-in-cart.active" timeout="30"/>
         <element name="checkMoneyOrderPayment" type="radio" selector="input#checkmo.radio" timeout="30"/>
         <element name="placeOrder" type="button" selector=".payment-method._active button.action.primary.checkout" timeout="30"/>
-        <element name="paymentSectionTitle" type="text" selector="//*[@id='checkout-payment-method-load']//div[text()='Payment Method']" />
+        <element name="paymentSectionTitle" type="text" selector="//*[@id='checkout-payment-method-load']//div[@data-role='title']" />
         <element name="orderSummarySubtotal" type="text" selector="//tr[@class='totals sub']//span[@class='price']" />
         <element name="orderSummaryShippingTotal" type="text" selector="//tr[@class='totals shipping excl']//span[@class='price']" />
         <element name="orderSummaryShippingMethod" type="text" selector="//tr[@class='totals shipping excl']//span[@class='value']" />

app/code/Magento/Theme/composer.json

@@ -19,7 +19,6 @@
         "magento/module-widget": "*"
     },
     "suggest": {
-        "magento/module-translation": "*",
         "magento/module-theme-sample-data": "*",
         "magento/module-deploy": "*",
         "magento/module-directory": "*"

app/code/Magento/Theme/view/frontend/layout/default.xml

@@ -11,8 +11,6 @@
         <block name="require.js" class="Magento\Framework\View\Element\Template" template="Magento_Theme::page/js/require_js.phtml" />
         <referenceContainer name="after.body.start">
             <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
-            <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
-            <block class="Magento\Translation\Block\Js" name="translate" template="Magento_Translation::translate.phtml"/>
             <block class="Magento\Framework\View\Element\Js\Cookie" name="js_cookies" template="Magento_Theme::js/cookie.phtml"/>
             <block class="Magento\Theme\Block\Html\Notices" name="global_notices" template="Magento_Theme::html/notices.phtml"/>
         </referenceContainer>

app/code/Magento/Translation/view/base/templates/translate.phtml

@@ -6,6 +6,10 @@
 
 /** @var \Magento\Translation\Block\Js $block */
 ?>
+<!--
+    For frontend area dictionary file is inserted into html head in Magento/Translation/view/base/templates/dictionary.phtml
+    Same translation mechanism should be introduced for admin area in 2.4 version.
+-->
 <?php if ($block->dictionaryEnabled()) : ?>
     <script>
         require.config({

app/code/Magento/Translation/view/base/web/js/mage-translation-dictionary.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'text!js-translation.json'
+], function (dict) {
+    'use strict';
+
+    return JSON.parse(dict);
+});

app/code/Magento/Translation/view/frontend/layout/default.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="head.additional">
+            <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
+        </referenceBlock>
+    </body>
+</page>

app/code/Magento/Translation/view/frontend/requirejs-config.js

@@ -8,10 +8,12 @@ var config = {
         '*': {
             editTrigger: 'mage/edit-trigger',
             addClass: 'Magento_Translation/js/add-class',
-            'Magento_Translation/add-class': 'Magento_Translation/js/add-class'
+            'Magento_Translation/add-class': 'Magento_Translation/js/add-class',
+            mageTranslationDictionary: 'Magento_Translation/js/mage-translation-dictionary'
         }
     },
     deps: [
-        'mage/translate-inline'
+        'mage/translate-inline',
+        'mageTranslationDictionary'
     ]
 };

dev/tests/js/jasmine/tests/lib/mage/translate.test.js

@@ -9,11 +9,16 @@ define([
 ], function ($) {
     'use strict';
 
+    // be careful with test variation order as one variation can affect another one
     describe('Test for mage/translate jQuery plugin', function () {
         it('works with one string as parameter', function () {
             $.mage.translate.add('Hello World!');
             expect('Hello World!').toEqual($.mage.translate.translate('Hello World!'));
         });
+        it('works with translation alias __', function () {
+            $.mage.translate.add('Hello World!');
+            expect('Hello World!').toEqual($.mage.__('Hello World!'));
+        });
         it('works with one array as parameter', function () {
             $.mage.translate.add(['Hello World!', 'Bonjour tout le monde!']);
             expect('Hello World!').toEqual($.mage.translate.translate('Hello World!'));
@@ -40,10 +45,6 @@ define([
             $.mage.translate.add('Hello World!', 'Bonjour tout le monde!');
             expect('Bonjour tout le monde!').toEqual($.mage.translate.translate('Hello World!'));
         });
-        it('works with translation alias __', function () {
-            $.mage.translate.add('Hello World!');
-            expect('Hello World!').toEqual($.mage.__('Hello World!'));
-        });
     });
 
 });