ENGCOM-1075: Removal of inline translate script block and load a require file. #14339

Author: Oleksii Korshenko

app/code/Magento/Translation/Block/Js.php

@@ -8,6 +8,7 @@
 
 use Magento\Framework\View\Element\Template;
 use Magento\Translation\Model\Js\Config;
+use Magento\Framework\Escaper;
 
 /**
  * @api

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

@@ -9,50 +9,19 @@
 /** @var \Magento\Translation\Block\Js $block */
 ?>
 <?php if ($block->dictionaryEnabled()): ?>
-    <script>
-        require.config({
-            deps: [
-                'jquery',
-                'mage/translate',
-                'jquery/jquery-storageapi'
-            ],
-            callback: function ($) {
-                'use strict';
-
-                var dependencies = [],
-                    versionObj;
-
-                $.initNamespaceStorage('mage-translation-storage');
-                $.initNamespaceStorage('mage-translation-file-version');
-                versionObj = $.localStorage.get('mage-translation-file-version');
-
-                <?php $version = $block->getTranslationFileVersion(); ?>
-
-                if (versionObj.version !== '<?= /* @escapeNotVerified */ $block->escapeJsQuote($version) ?>') {
-                    dependencies.push(
-                        'text!<?= /* @noEscape */ Magento\Translation\Model\Js\Config::DICTIONARY_FILE_NAME ?>'
-                    );
 
+<?php
+  $version = $block->getTranslationFileVersion();
+  $fileName = Magento\Translation\Model\Js\Config::DICTIONARY_FILE_NAME;
+?>
+    <script type="text/x-magento-init">
+        {
+            "*": {
+                "mage/translate-init": {
+                    "dictionaryFile": "text!<?= $block->escapeJs($fileName); ?>",
+                    "version": "<?= $block->escapeJs($version) ?>"
                 }
-
-                require.config({
-                    deps: dependencies,
-                    callback: function (string) {
-                        if (typeof string === 'string') {
-                            $.mage.translate.add(JSON.parse(string));
-                            $.localStorage.set('mage-translation-storage', string);
-                            $.localStorage.set(
-                                'mage-translation-file-version',
-                                {
-                                    version: '<?= /* @escapeNotVerified */ $block->escapeJsQuote($version) ?>'
-                                }
-                            );
-                        } else {
-                            $.mage.translate.add($.localStorage.get('mage-translation-storage'));
-                        }
-                    }
-                });
             }
-        });
+        }
     </script>
 <?php endif; ?>

lib/web/mage/translate-init.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'mage/translate',
+    'jquery/jquery-storageapi'
+], function ($) {
+    'use strict';
+
+    return function (pageOptions) {
+        var dependencies = [],
+            versionObj;
+
+        $.initNamespaceStorage('mage-translation-storage');
+        $.initNamespaceStorage('mage-translation-file-version');
+        versionObj = $.localStorage.get('mage-translation-file-version');
+
+        if (versionObj.version !== pageOptions.version) {
+            dependencies.push(
+              pageOptions.dictionaryFile
+            );
+        }
+
+        require.config({
+            deps: dependencies,
+
+            /**
+             * @param {String} string
+             */
+            callback: function (string) {
+                if (typeof string === 'string') {
+                    $.mage.translate.add(JSON.parse(string));
+                    $.localStorage.set('mage-translation-storage', string);
+                    $.localStorage.set(
+                        'mage-translation-file-version',
+                        {
+                            version: pageOptions.version
+                        }
+                    );
+                } else {
+                    $.mage.translate.add($.localStorage.get('mage-translation-storage'));
+                }
+            }
+        });
+    };
+});