UI loading improvements

Fixed: Caching for dynamically loaded JS files
Fixed: Incorrect caching of initialize.js

frontend/build/webpack.config.js

@@ -36,7 +36,7 @@ module.exports = (env) => {
     },
 
     entry: {
-      index: 'index.js'
+      index: 'index.ts'
     },
 
     resolve: {
@@ -67,17 +67,13 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name].js',
+      filename: '[name].[contenthash].js',
-      sourceMapFilename: '[file].map'
+      sourceMapFilename: '[file]-[contenthash].map'
     },
 
     optimization: {
       moduleIds: 'deterministic',
-      chunkIds: 'named',
+      chunkIds: 'named'
-      splitChunks: {
-        chunks: 'initial',
-        name: 'vendors'
-      }
     },
 
     performance: {
@@ -101,7 +97,8 @@ module.exports = (env) => {
       new HtmlWebpackPlugin({
         template: 'frontend/src/index.ejs',
         filename: 'index.html',
-        publicPath: '/'
+        publicPath: '/',
+        inject: false
       }),
 
       new FileManagerPlugin({

frontend/src/bootstrap.tsx

@@ -0,0 +1,23 @@
+import { createBrowserHistory } from 'history';
+import React from 'react';
+import { render } from 'react-dom';
+import createAppStore from 'Store/createAppStore';
+import { fetchTranslations } from 'Utilities/String/translate';
+import App from './App/App';
+
+import 'Diag/ConsoleApi';
+
+export async function bootstrap() {
+  const history = createBrowserHistory();
+  const store = createAppStore(history);
+  const hasTranslationsError = !(await fetchTranslations());
+
+  render(
+    <App
+      store={store}
+      history={history}
+      hasTranslationsError={hasTranslationsError}
+    />,
+    document.getElementById('root')
+  );
+}

frontend/src/index.ejs

@@ -48,7 +48,15 @@
     />
 
     <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">
-    <!-- webpack bundles head -->
+
+    <script>
+      window.Sonarr = {
+        urlBase: '__URL_BASE__'
+      };
+    </script>
+
+    <% for (key in htmlWebpackPlugin.files.js) { %><script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[key] %>" data-no-hash></script><% } %>
+    <% for (key in htmlWebpackPlugin.files.css) { %><link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet"></link><% } %>
 
     <title>Sonarr</title>
 
@@ -77,7 +85,4 @@
     <div id="portal-root"></div>
     <div id="root" class="root"></div>
   </body>
-
-  <script src="/initialize.js" data-no-hash></script>
-  <!-- webpack bundles body -->
 </html>

frontend/src/index.js

@@ -1,27 +0,0 @@
-import { createBrowserHistory } from 'history';
-import React from 'react';
-import { render } from 'react-dom';
-import { fetchTranslations } from 'Utilities/String/translate';
-
-import './preload';
-import './polyfills';
-import 'Diag/ConsoleApi';
-import 'Styles/globals.css';
-import './index.css';
-
-const history = createBrowserHistory();
-const hasTranslationsError = !await fetchTranslations();
-
-const { default: createAppStore } = await import('Store/createAppStore');
-const { default: App } = await import('./App/App');
-
-const store = createAppStore(history);
-
-render(
-  <App
-    store={store}
-    history={history}
-    hasTranslationsError={hasTranslationsError}
-  />,
-  document.getElementById('root')
-);

frontend/src/index.ts

@@ -0,0 +1,19 @@
+import './polyfills';
+import 'Styles/globals.css';
+import './index.css';
+
+const initializeUrl = `${
+  window.Sonarr.urlBase
+}/initialize.json?t=${Date.now()}`;
+const response = await fetch(initializeUrl);
+
+window.Sonarr = await response.json();
+
+/* eslint-disable no-undef, @typescript-eslint/ban-ts-comment */
+// @ts-ignore 2304
+__webpack_public_path__ = `${window.Sonarr.urlBase}/`;
+/* eslint-enable no-undef, @typescript-eslint/ban-ts-comment */
+
+const { bootstrap } = await import('./bootstrap');
+
+await bootstrap();

frontend/src/preload.js

@@ -1,2 +0,0 @@
-/* eslint no-undef: 0 */
-__webpack_public_path__ = `${window.Sonarr.urlBase}/`;

frontend/tsconfig.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
-      "target": "es6",
+      "target": "esnext",
       "allowJs": true,
       "checkJs": false,
       "baseUrl": "src",
       "jsx": "react",
-      "module": "commonjs",
+      "module": "esnext",
       "moduleResolution": "node",
       "allowSyntheticDefaultImports": true,
       "forceConsistentCasingInFileNames": true,

package.json

@@ -16,7 +16,7 @@
   "author": "Team Sonarr",
   "license": "GPL-3.0",
   "readmeFilename": "readme.md",
-  "main": "index.js",
+  "main": "index.ts",
   "browserslist": [
     "defaults"
   ],

src/Sonarr.Http/Frontend/InitializeJsController.cs

@@ -1,65 +0,0 @@
-using System.Text;
-using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Mvc;
-using NzbDrone.Common;
-using NzbDrone.Common.EnvironmentInfo;
-using NzbDrone.Core.Analytics;
-using NzbDrone.Core.Configuration;
-
-namespace Sonarr.Http.Frontend
-{
-    [Authorize(Policy = "UI")]
-    [ApiController]
-    public class InitializeJsController : Controller
-    {
-        private readonly IConfigFileProvider _configFileProvider;
-        private readonly IAnalyticsService _analyticsService;
-
-        private static string _apiKey;
-        private static string _urlBase;
-        private string _generatedContent;
-
-        public InitializeJsController(IConfigFileProvider configFileProvider,
-                                      IAnalyticsService analyticsService)
-        {
-            _configFileProvider = configFileProvider;
-            _analyticsService = analyticsService;
-
-            _apiKey = configFileProvider.ApiKey;
-            _urlBase = configFileProvider.UrlBase;
-        }
-
-        [HttpGet("/initialize.js")]
-        public IActionResult Index()
-        {
-            return Content(GetContent(), "application/javascript");
-        }
-
-        private string GetContent()
-        {
-            if (RuntimeInfo.IsProduction && _generatedContent != null)
-            {
-                return _generatedContent;
-            }
-
-            var builder = new StringBuilder();
-            builder.AppendLine("window.Sonarr = {");
-            builder.AppendLine($"  apiRoot: '{_urlBase}/api/v3',");
-            builder.AppendLine($"  apiKey: '{_apiKey}',");
-            builder.AppendLine($"  release: '{BuildInfo.Release}',");
-            builder.AppendLine($"  version: '{BuildInfo.Version.ToString()}',");
-            builder.AppendLine($"  instanceName: '{_configFileProvider.InstanceName.ToString()}',");
-            builder.AppendLine($"  theme: '{_configFileProvider.Theme.ToString()}',");
-            builder.AppendLine($"  branch: '{_configFileProvider.Branch.ToLower()}',");
-            builder.AppendLine($"  analytics: {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},");
-            builder.AppendLine($"  userHash: '{HashUtil.AnonymousToken()}',");
-            builder.AppendLine($"  urlBase: '{_urlBase}',");
-            builder.AppendLine($"  isProduction: {RuntimeInfo.IsProduction.ToString().ToLowerInvariant()}");
-            builder.AppendLine("};");
-
-            _generatedContent = builder.ToString();
-
-            return _generatedContent;
-        }
-    }
-}

src/Sonarr.Http/Frontend/InitializeJsonController.cs

@@ -0,0 +1,65 @@
+using System.Text;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using NzbDrone.Common;
+using NzbDrone.Common.EnvironmentInfo;
+using NzbDrone.Core.Analytics;
+using NzbDrone.Core.Configuration;
+
+namespace Sonarr.Http.Frontend
+{
+    [Authorize(Policy = "UI")]
+    [ApiController]
+    public class InitializeJsonController : Controller
+    {
+        private readonly IConfigFileProvider _configFileProvider;
+        private readonly IAnalyticsService _analyticsService;
+
+        private static string _apiKey;
+        private static string _urlBase;
+        private string _generatedContent;
+
+        public InitializeJsonController(IConfigFileProvider configFileProvider,
+                                      IAnalyticsService analyticsService)
+        {
+            _configFileProvider = configFileProvider;
+            _analyticsService = analyticsService;
+
+            _apiKey = configFileProvider.ApiKey;
+            _urlBase = configFileProvider.UrlBase;
+        }
+
+        [HttpGet("/initialize.json")]
+        public IActionResult Index()
+        {
+            return Content(GetContent(), "application/json");
+        }
+
+        private string GetContent()
+        {
+            if (RuntimeInfo.IsProduction && _generatedContent != null)
+            {
+                return _generatedContent;
+            }
+
+            var builder = new StringBuilder();
+            builder.AppendLine("{");
+            builder.AppendLine($"  \"apiRoot\": \"{_urlBase}/api/v3\",");
+            builder.AppendLine($"  \"apiKey\": \"{_apiKey}\",");
+            builder.AppendLine($"  \"release\": \"{BuildInfo.Release}\",");
+            builder.AppendLine($"  \"version\": \"{BuildInfo.Version.ToString()}\",");
+            builder.AppendLine($"  \"instanceName\": \"{_configFileProvider.InstanceName.ToString()}\",");
+            builder.AppendLine($"  \"theme\": \"{_configFileProvider.Theme.ToString()}\",");
+            builder.AppendLine($"  \"branch\": \"{_configFileProvider.Branch.ToLower()}\",");
+            builder.AppendLine($"  \"analytics\": {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},");
+            builder.AppendLine($"  \"userHash\": \"{HashUtil.AnonymousToken()}\",");
+            builder.AppendLine($"  \"urlBase\": \"{_urlBase}\",");
+            builder.AppendLine($"  \"isProduction\": {RuntimeInfo.IsProduction.ToString().ToLowerInvariant()}");
+            builder.AppendLine("}");
+
+            _generatedContent = builder.ToString();
+
+            return _generatedContent;
+        }
+    }
+}

src/Sonarr.Http/Frontend/Mappers/HtmlMapperBase.cs

@@ -62,9 +62,11 @@ namespace Sonarr.Http.Frontend.Mappers
                     url = cacheBreakProvider.AddCacheBreakerToPath(match.Groups["path"].Value);
                 }
 
-                return string.Format("{0}=\"{1}{2}\"", match.Groups["attribute"].Value, UrlBase, url);
+                return $"{match.Groups["attribute"].Value}=\"{UrlBase}{url}\"";
             });
 
+            text = text.Replace("__URL_BASE__", UrlBase);
+
             _generatedContent = text;
 
             return _generatedContent;

src/Sonarr.Http/Frontend/Mappers/StaticResourceMapper.cs

@@ -37,7 +37,7 @@ namespace Sonarr.Http.Frontend.Mappers
             }
 
             return resourceUrl.StartsWith("/content") ||
-                   (resourceUrl.EndsWith(".js") && !resourceUrl.EndsWith("initialize.js")) ||
+                   resourceUrl.EndsWith(".js") ||
                    resourceUrl.EndsWith(".map") ||
                    resourceUrl.EndsWith(".css") ||
                    (resourceUrl.EndsWith(".ico") && !resourceUrl.Equals("/favicon.ico")) ||

src/Sonarr.Http/Middleware/CacheableSpecification.cs

@@ -46,7 +46,7 @@ namespace Sonarr.Http.Middleware
                 return false;
             }
 
-            if (path.EndsWith("/initialize.js"))
+            if (path.EndsWith("/initialize.json"))
             {
                 return false;
             }