shpaq/Prowlarr-Prowlarr
1
0
Fork 0
mirror of https://github.com/Prowlarr/Prowlarr.git synced 2025-09-17 17:14:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

UI loading improvements

Browse Source 
Fixed: Caching for dynamically loaded JS files
Fixed: Incorrect caching of initialize.js
(cherry picked from commit f0cb5b81f140c67fa84162e094cc4e0f3476f5da)
This commit is contained in:
Mark McDowall
2023-07-17 20:37:02 -07:00
committed by Bogdan
parent bc53fab966
commit d55906d49a
12 changed files with 135 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/build/webpack.config.js
View File

@@ -35,7 +35,7 @@ module.exports = (env) => {
},
entry: {
index: 'index.js'
index: 'index.ts'
},
resolve: {
@@ -96,7 +96,8 @@ module.exports = (env) => {
new HtmlWebpackPlugin({
template: 'frontend/src/index.ejs',
filename: 'index.html',
publicPath: '/'
publicPath: '/',
inject: false
}),
new FileManagerPlugin({

15
frontend/src/Utilities/String/translate.js → frontend/src/Utilities/String/translate.ts
View File

@@ -4,14 +4,14 @@ function getTranslations() {
return createAjaxRequest({
global: false,
dataType: 'json',
url: '/localization'
url: '/localization',
}).request;
}
let translations = {};
let translations: Record<string, string> = {};
export function fetchTranslations() {
return new Promise(async(resolve) => {
export async function fetchTranslations(): Promise<boolean> {
return new Promise(async (resolve) => {
try {
const data = await getTranslations();
translations = data.Strings;
@@ -23,12 +23,15 @@ export function fetchTranslations() {
});
}
export default function translate(key, args = []) {
export default function translate(
key: string,
args?: (string | number | boolean)[]
) {
const translation = translations[key] || key;
if (args) {
return translation.replace(/\{(\d+)\}/g, (match, index) => {
return args[index];
return String(args[index]) ?? match;
});
}

21
frontend/src/bootstrap.tsx Normal file
View 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')
);
}

13
frontend/src/index.ejs
View File

@@ -48,7 +48,15 @@
/>
<link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">
<!-- webpack bundles head -->
<script>
window.Prowlarr = {
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>Prowlarr</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>

19
frontend/src/index.ts Normal file
View File

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

4
frontend/tsconfig.json
View File

@@ -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,

2
package.json
View File

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

66
src/Prowlarr.Http/Frontend/InitializeJsController.cs
View File

@@ -1,66 +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 Prowlarr.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()
{
// TODO: Move away from window.Prowlarr and prefetch the information returned here when starting the UI
return Content(GetContent(), "application/javascript");
}
private string GetContent()
{
if (RuntimeInfo.IsProduction && _generatedContent != null)
{
return _generatedContent;
}
var builder = new StringBuilder();
builder.AppendLine("window.Prowlarr = {");
builder.AppendLine($" apiRoot: '{_urlBase}/api/v1',");
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;
}
}
}

66
src/Prowlarr.Http/Frontend/InitializeJsonController.cs Normal file
View File

@@ -0,0 +1,66 @@
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 Prowlarr.Http.Frontend
{
[Authorize(Policy = "UI")]
[ApiController]
[ApiExplorerSettings(IgnoreApi = true)]
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/v1\",");
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;
}
}
}

4
src/Prowlarr.Http/Frontend/Mappers/HtmlMapperBase.cs
View File

@@ -62,9 +62,11 @@ namespace Prowlarr.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;

2
src/Prowlarr.Http/Frontend/Mappers/StaticResourceMapper.cs
View File

@@ -37,7 +37,7 @@ namespace Prowlarr.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")) ||

2
src/Prowlarr.Http/Middleware/CacheableSpecification.cs
View File

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