From 243ccf34a5de37b48a2f1bfa3d383b5e72292dee Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Thu, 21 Jul 2022 13:56:59 +0300
Subject: [PATCH] Web: Doceditor: fixed adding script with src="undefined",
 client bundle optimization

---
 web/ASC.Web.Editor/src/client/App.js          |   2 +-
 .../src/server/lib/helpers/index.js           |  13 +
 web/ASC.Web.Editor/src/server/lib/template.js | 625 +++++++++---------
 web/ASC.Web.Editor/webpack/webpack.client.js  |   2 +-
 4 files changed, 336 insertions(+), 306 deletions(-)

diff --git a/web/ASC.Web.Editor/src/client/App.js b/web/ASC.Web.Editor/src/client/App.js
index 006c1b588b..351a11b859 100644
--- a/web/ASC.Web.Editor/src/client/App.js
+++ b/web/ASC.Web.Editor/src/client/App.js
@@ -32,7 +32,7 @@ const App = ({ initialLanguage, initialI18nStoreASC, ...rest }) => {
 
   useEffect(() => {
     const tempElm = document.getElementById("loader");
-    if (tempElm && !rest.error && !rest.needLoader) {
+    if (tempElm && !rest.error && !rest.needLoader && rest.docApiUrl) {
       tempElm.outerHTML = "";
     }
 
diff --git a/web/ASC.Web.Editor/src/server/lib/helpers/index.js b/web/ASC.Web.Editor/src/server/lib/helpers/index.js
index 85766a38d0..4214c2833b 100644
--- a/web/ASC.Web.Editor/src/server/lib/helpers/index.js
+++ b/web/ASC.Web.Editor/src/server/lib/helpers/index.js
@@ -126,3 +126,16 @@ export const getAssets = () => {
 
   return assets;
 };
+
+export const getScripts = (assets) => {
+  const regTest = /static\/js\/.*/;
+  const keys = [];
+
+  for (let key in assets) {
+    if (assets.hasOwnProperty(key) && regTest.test(key)) {
+      keys.push(key);
+    }
+  }
+
+  return keys;
+};
diff --git a/web/ASC.Web.Editor/src/server/lib/template.js b/web/ASC.Web.Editor/src/server/lib/template.js
index a4b599950f..6037a87d76 100644
--- a/web/ASC.Web.Editor/src/server/lib/template.js
+++ b/web/ASC.Web.Editor/src/server/lib/template.js
@@ -1,4 +1,4 @@
-import { getFavicon } from "./helpers";
+import { getFavicon, getScripts } from "./helpers";
 import pkg from "../../../package.json";
 
 export default function template(
@@ -11,10 +11,27 @@ export default function template(
 ) {
   const { title } = pkg;
   const { docApiUrl, error } = initialEditorState;
+
   const faviconHref = getFavicon(initialEditorState?.config?.documentType);
-  const docApi = error
-    ? ""
-    : `<script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>`;
+
+  let clientScripts =
+    assets && assets.hasOwnProperty("client.js")
+      ? `<script defer="defer" src='${assets["client.js"]}'></script>`
+      : "";
+
+  const editorApiScript =
+    error || !docApiUrl
+      ? ""
+      : `<script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>`;
+
+  if (!IS_DEVELOPMENT) {
+    const productionBundleKeys = getScripts(assets);
+    productionBundleKeys.map((key) => {
+      clientScripts =
+        clientScripts + `<script defer="defer" src='${assets[key]}'></script>`;
+    });
+  }
+
   const scripts = `   
     <script id="__ASC_INITIAL_EDITOR_STATE__">
       window.__ASC_INITIAL_EDITOR_STATE__ = ${JSON.stringify(
@@ -25,15 +42,15 @@ export default function template(
       window.initialI18nStoreASC = ${JSON.stringify(initialI18nStoreASC)}
       window.initialLanguage = '${initialLanguage}'
     </script>
-    <script defer="defer" src='${assets["client.js"]}'></script>
+    ${clientScripts}
     <script>
       const tempElm = document.getElementById("loader");
       tempElm.style.backgroundColor =
         localStorage.theme === "Dark" ? "#333333" : "#f4f4f4";
       console.log("It's Editor INIT");
     </script>
-    ${docApi}
-    
+    ${editorApiScript} 
+
 `;
   // <script defer="defer" src='${assets["runtime.js"]}'></script>
   // <script defer="defer" src='${assets["vendor.js"]}'></script>
@@ -56,302 +73,302 @@ export default function template(
           <link rel="apple-touch-icon" href="/appIcon.png" />
           ${styleTags}   
           <style type="text/css">
-      .loadmask {
-        left: 0;
-        top: 0;
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-        border: none;
-        background-color: #f4f4f4;
-        z-index: 1001;
-      }
-      .loader-page {
-        width: 100%;
-        height: 170px;
-        bottom: 42%;
-        position: absolute;
-        text-align: center;
-        line-height: 10px;
-        margin-bottom: 20px;
-      }
-      .loader-page-romb {
-        width: 40px;
-        display: inline-block;
-      }
-      .romb {
-        width: 40px;
-        height: 40px;
-        position: absolute;
-        background: red;
-        border-radius: 6px;
-        -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-        -moz-transform: rotate(135deg) skew(20deg, 20deg);
-        -ms-transform: rotate(135deg) skew(20deg, 20deg);
-        -o-transform: rotate(135deg) skew(20deg, 20deg);
-        -webkit-animation: movedown 3s infinite ease;
-        -moz-animation: movedown 3s infinite ease;
-        -ms-animation: movedown 3s infinite ease;
-        -o-animation: movedown 3s infinite ease;
-        animation: movedown 3s infinite ease;
-      }
-      #blue {
-        z-index: 3;
-        background: #55bce6;
-        -webkit-animation-name: blue;
-        -moz-animation-name: blue;
-        -ms-animation-name: blue;
-        -o-animation-name: blue;
-        animation-name: blue;
-      }
-      #red {
-        z-index: 1;
-        background: #de7a59;
-        -webkit-animation-name: red;
-        -moz-animation-name: red;
-        -ms-animation-name: red;
-        -o-animation-name: red;
-        animation-name: red;
-      }
-      #green {
-        z-index: 2;
-        background: #a1cb5c;
-        -webkit-animation-name: green;
-        -moz-animation-name: green;
-        -ms-animation-name: green;
-        -o-animation-name: green;
-        animation-name: green;
-      }
-      @-webkit-keyframes red {
-        0% {
-          top: 120px;
-          background: #de7a59;
-        }
-        10% {
-          top: 120px;
-          background: #f2cbbf;
-        }
-        14% {
-          background: #f4f4f4;
-          top: 120px;
-        }
-        15% {
-          background: #f4f4f4;
-          top: 0;
-        }
-        20% {
-          background: #e6e4e4;
-        }
-        30% {
-          background: #d2d2d2;
-        }
-        40% {
-          top: 120px;
-        }
-        100% {
-          top: 120px;
-          background: #de7a59;
-        }
-      }
-      @keyframesred {
-        0% {
-          top: 120px;
-          background: #de7a59;
-        }
-        10% {
-          top: 120px;
-          background: #f2cbbf;
-        }
-        14% {
-          background: #f4f4f4;
-          top: 120px;
-        }
-        15% {
-          background: #f4f4f4;
-          top: 0;
-        }
-        20% {
-          background: #e6e4e4;
-        }
-        30% {
-          background: #d2d2d2;
-        }
-        40% {
-          top: 120px;
-        }
-        100% {
-          top: 120px;
-          background: #de7a59;
-        }
-      }
-      @-webkit-keyframes green {
-        0% {
-          top: 110px;
-          background: #a1cb5c;
-          opacity: 1;
-        }
-        10% {
-          top: 110px;
-          background: #cbe0ac;
-          opacity: 1;
-        }
-        14% {
-          background: #f4f4f4;
-          top: 110px;
-          opacity: 1;
-        }
-        15% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 1;
-        }
-        20% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 0;
-        }
-        25% {
-          background: #efefef;
-          top: 0;
-          opacity: 1;
-        }
-        30% {
-          background: #e6e4e4;
-        }
-        70% {
-          top: 110px;
-        }
-        100% {
-          top: 110px;
-          background: #a1cb5c;
-        }
-      }
-      @keyframes green {
-        0% {
-          top: 110px;
-          background: #a1cb5c;
-          opacity: 1;
-        }
-        10% {
-          top: 110px;
-          background: #cbe0ac;
-          opacity: 1;
-        }
-        14% {
-          background: #f4f4f4;
-          top: 110px;
-          opacity: 1;
-        }
-        15% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 1;
-        }
-        20% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 0;
-        }
-        25% {
-          background: #efefef;
-          top: 0;
-          opacity: 1;
-        }
-        30% {
-          background: #e6e4e4;
-        }
-        70% {
-          top: 110px;
-        }
-        100% {
-          top: 110px;
-          background: #a1cb5c;
-        }
-      }
-      @-webkit-keyframes blue {
-        0% {
-          top: 100px;
-          background: #55bce6;
-          opacity: 1;
-        }
-        10% {
-          top: 100px;
-          background: #bfe8f8;
-          opacity: 1;
-        }
-        14% {
-          background: #f4f4f4;
-          top: 100px;
-          opacity: 1;
-        }
-        15% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 1;
-        }
-        20% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 0;
-        }
-        25% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 0;
-        }
-        45% {
-          background: #efefef;
-          top: 0;
-          opacity: 0.2;
-        }
-        100% {
-          top: 100px;
-          background: #55bce6;
-        }
-      }
-      @keyframes blue {
-        0% {
-          top: 100px;
-          background: #55bce6;
-          opacity: 1;
-        }
-        10% {
-          top: 100px;
-          background: #bfe8f8;
-          opacity: 1;
-        }
-        14% {
-          background: #f4f4f4;
-          top: 100px;
-          opacity: 1;
-        }
-        15% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 1;
-        }
-        20% {
-          background: #f4f4f4;
-          top: 0;
-          opacity: 0;
-        }
-        25% {
-          background: #fff;
-          top: 0;
-          opacity: 0;
-        }
-        45% {
-          background: #efefef;
-          top: 0;
-          opacity: 0.2;
-        }
-        100% {
-          top: 100px;
-          background: #55bce6;
-        }
-      }
-    </style>
+            .loadmask {
+              left: 0;
+              top: 0;
+              position: absolute;
+              height: 100%;
+              width: 100%;
+              overflow: hidden;
+              border: none;
+              background-color: #f4f4f4;
+              z-index: 1001;
+            }
+            .loader-page {
+              width: 100%;
+              height: 170px;
+              bottom: 42%;
+              position: absolute;
+              text-align: center;
+              line-height: 10px;
+              margin-bottom: 20px;
+            }
+            .loader-page-romb {
+              width: 40px;
+              display: inline-block;
+            }
+            .romb {
+              width: 40px;
+              height: 40px;
+              position: absolute;
+              background: red;
+              border-radius: 6px;
+              -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+              -moz-transform: rotate(135deg) skew(20deg, 20deg);
+              -ms-transform: rotate(135deg) skew(20deg, 20deg);
+              -o-transform: rotate(135deg) skew(20deg, 20deg);
+              -webkit-animation: movedown 3s infinite ease;
+              -moz-animation: movedown 3s infinite ease;
+              -ms-animation: movedown 3s infinite ease;
+              -o-animation: movedown 3s infinite ease;
+              animation: movedown 3s infinite ease;
+            }
+            #blue {
+              z-index: 3;
+              background: #55bce6;
+              -webkit-animation-name: blue;
+              -moz-animation-name: blue;
+              -ms-animation-name: blue;
+              -o-animation-name: blue;
+              animation-name: blue;
+            }
+            #red {
+              z-index: 1;
+              background: #de7a59;
+              -webkit-animation-name: red;
+              -moz-animation-name: red;
+              -ms-animation-name: red;
+              -o-animation-name: red;
+              animation-name: red;
+            }
+            #green {
+              z-index: 2;
+              background: #a1cb5c;
+              -webkit-animation-name: green;
+              -moz-animation-name: green;
+              -ms-animation-name: green;
+              -o-animation-name: green;
+              animation-name: green;
+            }
+            @-webkit-keyframes red {
+              0% {
+                top: 120px;
+                background: #de7a59;
+              }
+              10% {
+                top: 120px;
+                background: #f2cbbf;
+              }
+              14% {
+                background: #f4f4f4;
+                top: 120px;
+              }
+              15% {
+                background: #f4f4f4;
+                top: 0;
+              }
+              20% {
+                background: #e6e4e4;
+              }
+              30% {
+                background: #d2d2d2;
+              }
+              40% {
+                top: 120px;
+              }
+              100% {
+                top: 120px;
+                background: #de7a59;
+              }
+            }
+            @keyframesred {
+              0% {
+                top: 120px;
+                background: #de7a59;
+              }
+              10% {
+                top: 120px;
+                background: #f2cbbf;
+              }
+              14% {
+                background: #f4f4f4;
+                top: 120px;
+              }
+              15% {
+                background: #f4f4f4;
+                top: 0;
+              }
+              20% {
+                background: #e6e4e4;
+              }
+              30% {
+                background: #d2d2d2;
+              }
+              40% {
+                top: 120px;
+              }
+              100% {
+                top: 120px;
+                background: #de7a59;
+              }
+            }
+            @-webkit-keyframes green {
+              0% {
+                top: 110px;
+                background: #a1cb5c;
+                opacity: 1;
+              }
+              10% {
+                top: 110px;
+                background: #cbe0ac;
+                opacity: 1;
+              }
+              14% {
+                background: #f4f4f4;
+                top: 110px;
+                opacity: 1;
+              }
+              15% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 1;
+              }
+              20% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 0;
+              }
+              25% {
+                background: #efefef;
+                top: 0;
+                opacity: 1;
+              }
+              30% {
+                background: #e6e4e4;
+              }
+              70% {
+                top: 110px;
+              }
+              100% {
+                top: 110px;
+                background: #a1cb5c;
+              }
+            }
+            @keyframes green {
+              0% {
+                top: 110px;
+                background: #a1cb5c;
+                opacity: 1;
+              }
+              10% {
+                top: 110px;
+                background: #cbe0ac;
+                opacity: 1;
+              }
+              14% {
+                background: #f4f4f4;
+                top: 110px;
+                opacity: 1;
+              }
+              15% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 1;
+              }
+              20% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 0;
+              }
+              25% {
+                background: #efefef;
+                top: 0;
+                opacity: 1;
+              }
+              30% {
+                background: #e6e4e4;
+              }
+              70% {
+                top: 110px;
+              }
+              100% {
+                top: 110px;
+                background: #a1cb5c;
+              }
+            }
+            @-webkit-keyframes blue {
+              0% {
+                top: 100px;
+                background: #55bce6;
+                opacity: 1;
+              }
+              10% {
+                top: 100px;
+                background: #bfe8f8;
+                opacity: 1;
+              }
+              14% {
+                background: #f4f4f4;
+                top: 100px;
+                opacity: 1;
+              }
+              15% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 1;
+              }
+              20% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 0;
+              }
+              25% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 0;
+              }
+              45% {
+                background: #efefef;
+                top: 0;
+                opacity: 0.2;
+              }
+              100% {
+                top: 100px;
+                background: #55bce6;
+              }
+            }
+            @keyframes blue {
+              0% {
+                top: 100px;
+                background: #55bce6;
+                opacity: 1;
+              }
+              10% {
+                top: 100px;
+                background: #bfe8f8;
+                opacity: 1;
+              }
+              14% {
+                background: #f4f4f4;
+                top: 100px;
+                opacity: 1;
+              }
+              15% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 1;
+              }
+              20% {
+                background: #f4f4f4;
+                top: 0;
+                opacity: 0;
+              }
+              25% {
+                background: #fff;
+                top: 0;
+                opacity: 0;
+              }
+              45% {
+                background: #efefef;
+                top: 0;
+                opacity: 0.2;
+              }
+              100% {
+                top: 100px;
+                background: #55bce6;
+              }
+            }
+          </style>
         </head>
         <body>
           <div id="loader" class="loadmask">
@@ -366,7 +383,7 @@ export default function template(
           <div id="root">${appComponent}</div>
           <noscript> You need to enable JavaScript to run this app. </noscript>
           ${scripts}
-          </body>
+        </body>
       </html>
   `;
 
diff --git a/web/ASC.Web.Editor/webpack/webpack.client.js b/web/ASC.Web.Editor/webpack/webpack.client.js
index 5cfe79847b..401e5f1d88 100644
--- a/web/ASC.Web.Editor/webpack/webpack.client.js
+++ b/web/ASC.Web.Editor/webpack/webpack.client.js
@@ -110,7 +110,7 @@ module.exports = (env, argv) => {
   if (argv.mode === "production") {
     clientConfig.mode = "production";
     clientConfig.optimization = {
-      //   splitChunks: { chunks: "all" },
+      splitChunks: { chunks: "all" },
       minimize: !env.minimize,
       minimizer: [new TerserPlugin()],
     };