MC-19247: Broken translations with advanced bundling

- Remove inline translation dictionary from html for production mode;

Author: adifucan

app/code/Magento/Translation/ViewModel/Dictionary.php

@@ -6,18 +6,15 @@
 
 namespace Magento\Translation\ViewModel;
 
-use Magento\Framework\App\Filesystem\DirectoryList;
 use Magento\Framework\Exception\FileSystemException;
 use Magento\Framework\Exception\LocalizedException;
-use Magento\Framework\Filesystem;
 use Magento\Framework\View\Asset\Repository as AssetRepository;
 use Magento\Framework\View\Element\Block\ArgumentInterface;
 use Magento\Translation\Model\Js\Config as JsConfig;
 use Magento\Framework\App\State as AppState;
-use Magento\Framework\Filesystem\DriverInterface;
 
 /**
- * View model responsible for getting translate dictionary file content for the layout.
+ * View model responsible for handling translation dictionary in layout.
  */
 class Dictionary implements ArgumentInterface
 {
@@ -31,32 +28,16 @@ class Dictionary implements ArgumentInterface
      */
     private $appState;
 
-    /**
-     * @var Filesystem
-     */
-    private $filesystem;
-
-    /**
-     * @var DriverInterface
-     */
-    private $filesystemDriver;
-
     /**
      * @param AssetRepository $assetRepo
      * @param AppState $appState
-     * @param Filesystem $filesystem
-     * @param DriverInterface $filesystemDriver
      */
     public function __construct(
         AssetRepository $assetRepo,
-        AppState $appState,
-        Filesystem $filesystem,
-        DriverInterface $filesystemDriver
+        AppState $appState
     ) {
         $this->assetRepo = $assetRepo;
         $this->appState = $appState;
-        $this->filesystem = $filesystem;
-        $this->filesystemDriver = $filesystemDriver;
     }
 
     /**
@@ -69,15 +50,30 @@ public function __construct(
     public function getTranslationDictionary(): string
     {
         $asset = $this->assetRepo->createAsset(JsConfig::DICTIONARY_FILE_NAME);
-        if ($this->appState->getMode() === AppState::MODE_PRODUCTION) {
-            $staticViewFilePath = $this->filesystem->getDirectoryRead(
-                DirectoryList::STATIC_VIEW
-            )->getAbsolutePath();
-            $content = $this->filesystemDriver->fileGetContents($staticViewFilePath . $asset->getPath());
-        } else {
-            $content = $asset->getContent();
-        }
 
-        return $content;
+        return $asset->getContent();
+    }
+
+    /**
+     * Get translation dictionary url.
+     *
+     * @return string
+     * @throws LocalizedException
+     */
+    public function getTranslationDictionaryUrl(): string
+    {
+        $asset = $this->assetRepo->createAsset(JsConfig::DICTIONARY_FILE_NAME);
+
+        return $asset->getUrl();
+    }
+
+    /**
+     * Check if application is in production mode.
+     *
+     * @return bool
+     */
+    public function isAppStateProduction(): bool
+    {
+        return $this->appState->getMode() === AppState::MODE_PRODUCTION;
     }
 }

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

@@ -6,12 +6,24 @@
 
 /** @var \Magento\Translation\ViewModel\Dictionary $viewModel */
 $viewModel = $block->getData('dictionary_view_model');
-$dictionary = json_encode($viewModel->getTranslationDictionary(), JSON_HEX_APOS | JSON_UNESCAPED_SLASHES);
+if (!$viewModel->isAppStateProduction()) {
+    $dictionary = json_encode($viewModel->getTranslationDictionary(), JSON_HEX_APOS | JSON_UNESCAPED_SLASHES);
+    // Use of JSON.parse below is intentional as JSON is significantly faster to parse than JavaScript
+    ?>
+    <script>
+        define('mageTranslationDictionary', function () {
+            var dict = <?= /* @noEscape */ $dictionary ?>;
+            return JSON.parse(dict);
+        });
+    </script>
+    <?php
+} else {
+    ?>
+    <script>
+        define('mageTranslationDictionary', ['text!<?= /* @noEscape */ $viewModel->getTranslationDictionaryUrl() ?>'], function (dict) {
+            return JSON.parse(dict);
+        });
+    </script>
+<?php
+}
 ?>
-<script>
-    define('dictionary', function () {
-        var dict = <?= /* @noEscape */ $dictionary ?>;
-        // Use of JSON.parse is intentional as JSON is significantly faster to parse than JavaScript
-        return JSON.parse(dict);
-    });
-</script>

dev/tests/js/jasmine/require.conf.js

@@ -21,7 +21,7 @@ require.config({
     },
     map: {
         '*': {
-            dictionary: '../../../../../../dev/tests/js/jasmine/tests/lib/mage/fake-dictionary'
+            mageTranslationDictionary: '../../../../../../dev/tests/js/jasmine/tests/lib/mage/fake-dictionary'
         }
     },
     shim: {

dev/tests/js/jasmine/tests/lib/mage/fake-dictionary.js

@@ -2,7 +2,7 @@
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
-// Fake dictionary for js unit tests as real dictionary is defined in template and cannot be initialized by requirejs
+// Fake translation dictionary for js unit tests as real dictionary is defined in template and cannot be initialized by requirejs
 define([], function () {
     'use strict';
 

lib/web/mage/translate.js

@@ -6,7 +6,7 @@
 define([
     'jquery',
     'mage/mage',
-    'dictionary'
+    'mageTranslationDictionary'
 ], function ($, mage, dictionary) {
     'use strict';