mirror of
https://github.com/Radarr/Radarr.git
synced 2024-10-05 15:47:20 +02:00
UI loading improvements
Fixed: Caching for dynamically loaded JS files Fixed: Incorrect caching of initialize.js (cherry picked from commit f0cb5b81f140c67fa84162e094cc4e0f3476f5da)
This commit is contained in:
parent
2959f72a10
commit
e691253419
@ -36,7 +36,7 @@ module.exports = (env) => {
|
|||||||
},
|
},
|
||||||
|
|
||||||
entry: {
|
entry: {
|
||||||
index: 'index.js'
|
index: 'index.ts'
|
||||||
},
|
},
|
||||||
|
|
||||||
resolve: {
|
resolve: {
|
||||||
@ -97,7 +97,8 @@ module.exports = (env) => {
|
|||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: 'frontend/src/index.ejs',
|
template: 'frontend/src/index.ejs',
|
||||||
filename: 'index.html',
|
filename: 'index.html',
|
||||||
publicPath: '/'
|
publicPath: '/',
|
||||||
|
inject: false
|
||||||
}),
|
}),
|
||||||
|
|
||||||
new FileManagerPlugin({
|
new FileManagerPlugin({
|
||||||
|
21
frontend/src/bootstrap.tsx
Normal file
21
frontend/src/bootstrap.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
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')
|
||||||
|
);
|
||||||
|
}
|
@ -48,7 +48,15 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">
|
<link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">
|
||||||
<!-- webpack bundles head -->
|
|
||||||
|
<script>
|
||||||
|
window.Radarr = {
|
||||||
|
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>Radarr</title>
|
<title>Radarr</title>
|
||||||
|
|
||||||
@ -77,7 +85,4 @@
|
|||||||
<div id="portal-root"></div>
|
<div id="portal-root"></div>
|
||||||
<div id="root" class="root"></div>
|
<div id="root" class="root"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script src="/initialize.js" data-no-hash></script>
|
|
||||||
<!-- webpack bundles body -->
|
|
||||||
</html>
|
</html>
|
||||||
|
@ -1,26 +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 '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')
|
|
||||||
);
|
|
19
frontend/src/index.ts
Normal file
19
frontend/src/index.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import './polyfills';
|
||||||
|
import 'Styles/globals.css';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
const initializeUrl = `${
|
||||||
|
window.Radarr.urlBase
|
||||||
|
}/initialize.json?t=${Date.now()}`;
|
||||||
|
const response = await fetch(initializeUrl);
|
||||||
|
|
||||||
|
window.Radarr = await response.json();
|
||||||
|
|
||||||
|
/* eslint-disable no-undef, @typescript-eslint/ban-ts-comment */
|
||||||
|
// @ts-ignore 2304
|
||||||
|
__webpack_public_path__ = `${window.Radarr.urlBase}/`;
|
||||||
|
/* eslint-enable no-undef, @typescript-eslint/ban-ts-comment */
|
||||||
|
|
||||||
|
const { bootstrap } = await import('./bootstrap');
|
||||||
|
|
||||||
|
await bootstrap();
|
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es6",
|
"target": "esnext",
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"checkJs": false,
|
"checkJs": false,
|
||||||
"baseUrl": "src",
|
"baseUrl": "src",
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"module": "commonjs",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
"author": "Team Radarr",
|
"author": "Team Radarr",
|
||||||
"license": "GPL-3.0",
|
"license": "GPL-3.0",
|
||||||
"readmeFilename": "readme.md",
|
"readmeFilename": "readme.md",
|
||||||
"main": "index.js",
|
"main": "index.ts",
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"defaults"
|
"defaults"
|
||||||
],
|
],
|
||||||
|
@ -11,7 +11,7 @@ namespace Radarr.Http.Frontend
|
|||||||
[Authorize(Policy = "UI")]
|
[Authorize(Policy = "UI")]
|
||||||
[ApiController]
|
[ApiController]
|
||||||
[ApiExplorerSettings(IgnoreApi = true)]
|
[ApiExplorerSettings(IgnoreApi = true)]
|
||||||
public class InitializeJsController : Controller
|
public class InitializeJsonController : Controller
|
||||||
{
|
{
|
||||||
private readonly IConfigFileProvider _configFileProvider;
|
private readonly IConfigFileProvider _configFileProvider;
|
||||||
private readonly IAnalyticsService _analyticsService;
|
private readonly IAnalyticsService _analyticsService;
|
||||||
@ -20,7 +20,7 @@ public class InitializeJsController : Controller
|
|||||||
private static string _urlBase;
|
private static string _urlBase;
|
||||||
private string _generatedContent;
|
private string _generatedContent;
|
||||||
|
|
||||||
public InitializeJsController(IConfigFileProvider configFileProvider,
|
public InitializeJsonController(IConfigFileProvider configFileProvider,
|
||||||
IAnalyticsService analyticsService)
|
IAnalyticsService analyticsService)
|
||||||
{
|
{
|
||||||
_configFileProvider = configFileProvider;
|
_configFileProvider = configFileProvider;
|
||||||
@ -30,10 +30,10 @@ public InitializeJsController(IConfigFileProvider configFileProvider,
|
|||||||
_urlBase = configFileProvider.UrlBase;
|
_urlBase = configFileProvider.UrlBase;
|
||||||
}
|
}
|
||||||
|
|
||||||
[HttpGet("/initialize.js")]
|
[HttpGet("/initialize.json")]
|
||||||
public IActionResult Index()
|
public IActionResult Index()
|
||||||
{
|
{
|
||||||
return Content(GetContent(), "application/javascript");
|
return Content(GetContent(), "application/json");
|
||||||
}
|
}
|
||||||
|
|
||||||
private string GetContent()
|
private string GetContent()
|
||||||
@ -44,19 +44,19 @@ private string GetContent()
|
|||||||
}
|
}
|
||||||
|
|
||||||
var builder = new StringBuilder();
|
var builder = new StringBuilder();
|
||||||
builder.AppendLine("window.Radarr = {");
|
builder.AppendLine("{");
|
||||||
builder.AppendLine($" apiRoot: '{_urlBase}/api/v3',");
|
builder.AppendLine($" \"apiRoot\": \"{_urlBase}/api/v3\",");
|
||||||
builder.AppendLine($" apiKey: '{_apiKey}',");
|
builder.AppendLine($" \"apiKey\": \"{_apiKey}\",");
|
||||||
builder.AppendLine($" release: '{BuildInfo.Release}',");
|
builder.AppendLine($" \"release\": \"{BuildInfo.Release}\",");
|
||||||
builder.AppendLine($" version: '{BuildInfo.Version.ToString()}',");
|
builder.AppendLine($" \"version\": \"{BuildInfo.Version.ToString()}\",");
|
||||||
builder.AppendLine($" instanceName: '{_configFileProvider.InstanceName.ToString()}',");
|
builder.AppendLine($" \"instanceName\": \"{_configFileProvider.InstanceName.ToString()}\",");
|
||||||
builder.AppendLine($" theme: '{_configFileProvider.Theme.ToString()}',");
|
builder.AppendLine($" \"theme\": \"{_configFileProvider.Theme.ToString()}\",");
|
||||||
builder.AppendLine($" branch: '{_configFileProvider.Branch.ToLower()}',");
|
builder.AppendLine($" \"branch\": \"{_configFileProvider.Branch.ToLower()}\",");
|
||||||
builder.AppendLine($" analytics: {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},");
|
builder.AppendLine($" \"analytics\": {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},");
|
||||||
builder.AppendLine($" userHash: '{HashUtil.AnonymousToken()}',");
|
builder.AppendLine($" \"userHash\": \"{HashUtil.AnonymousToken()}\",");
|
||||||
builder.AppendLine($" urlBase: '{_urlBase}',");
|
builder.AppendLine($" \"urlBase\": \"{_urlBase}\",");
|
||||||
builder.AppendLine($" isProduction: {RuntimeInfo.IsProduction.ToString().ToLowerInvariant()}");
|
builder.AppendLine($" \"isProduction\": {RuntimeInfo.IsProduction.ToString().ToLowerInvariant()}");
|
||||||
builder.AppendLine("};");
|
builder.AppendLine("}");
|
||||||
|
|
||||||
_generatedContent = builder.ToString();
|
_generatedContent = builder.ToString();
|
||||||
|
|
@ -62,9 +62,11 @@ protected string GetHtmlText()
|
|||||||
url = cacheBreakProvider.AddCacheBreakerToPath(match.Groups["path"].Value);
|
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;
|
_generatedContent = text;
|
||||||
|
|
||||||
return _generatedContent;
|
return _generatedContent;
|
||||||
|
@ -37,7 +37,7 @@ public override bool CanHandle(string resourceUrl)
|
|||||||
}
|
}
|
||||||
|
|
||||||
return resourceUrl.StartsWith("/content") ||
|
return resourceUrl.StartsWith("/content") ||
|
||||||
(resourceUrl.EndsWith(".js") && !resourceUrl.EndsWith("initialize.js")) ||
|
resourceUrl.EndsWith(".js") ||
|
||||||
resourceUrl.EndsWith(".map") ||
|
resourceUrl.EndsWith(".map") ||
|
||||||
resourceUrl.EndsWith(".css") ||
|
resourceUrl.EndsWith(".css") ||
|
||||||
(resourceUrl.EndsWith(".ico") && !resourceUrl.Equals("/favicon.ico")) ||
|
(resourceUrl.EndsWith(".ico") && !resourceUrl.Equals("/favicon.ico")) ||
|
||||||
|
@ -46,7 +46,7 @@ public bool IsCacheable(HttpRequest request)
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (path.EndsWith("/initialize.js"))
|
if (path.EndsWith("/initialize.json"))
|
||||||
{
|
{
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user