Reworked all css and js imports using new bundler
This commit is contained in:
Marcel Baumgartner
@@ -4,39 +4,17 @@ namespace Moonlight.App.Services.Sessions;
|
|||||||
|
|
||||||
public class BundleService
|
public class BundleService
|
||||||
{
|
{
|
||||||
private readonly ConfigService ConfigService;
|
|
||||||
|
|
||||||
public BundleService(ConfigService configService)
|
public BundleService(ConfigService configService)
|
||||||
{
|
{
|
||||||
ConfigService = configService;
|
var url = configService
|
||||||
|
|
||||||
CacheId = Guid.NewGuid().ToString();
|
|
||||||
|
|
||||||
Task.Run(Bundle);
|
|
||||||
}
|
|
||||||
|
|
||||||
public string BundledJs { get; private set; }
|
|
||||||
public string BundledCss { get; private set; }
|
|
||||||
public string CacheId { get; private set; }
|
|
||||||
public bool BundledFinished { get; set; } = false;
|
|
||||||
private bool IsBundling { get; set; } = false;
|
|
||||||
|
|
||||||
public async Task Bundle()
|
|
||||||
{
|
|
||||||
if (!IsBundling)
|
|
||||||
IsBundling = true;
|
|
||||||
|
|
||||||
Logger.Info("Bundling js and css files");
|
|
||||||
|
|
||||||
BundledJs = "";
|
|
||||||
BundledCss = "";
|
|
||||||
|
|
||||||
var url = ConfigService
|
|
||||||
.GetSection("Moonlight")
|
.GetSection("Moonlight")
|
||||||
.GetValue<string>("AppUrl");
|
.GetValue<string>("AppUrl");
|
||||||
|
|
||||||
BundledJs = await BundleFiles(
|
#region JS
|
||||||
new[]
|
|
||||||
|
JsFiles = new();
|
||||||
|
|
||||||
|
JsFiles.AddRange(new[]
|
||||||
{
|
{
|
||||||
url + "/_framework/blazor.server.js",
|
url + "/_framework/blazor.server.js",
|
||||||
url + "/assets/plugins/global/plugins.bundle.js",
|
url + "/assets/plugins/global/plugins.bundle.js",
|
||||||
@@ -57,11 +35,15 @@ public class BundleService
|
|||||||
"moonlight.loading.registerXterm();",
|
"moonlight.loading.registerXterm();",
|
||||||
url + "/_content/Blazor-ApexCharts/js/apex-charts.min.js",
|
url + "/_content/Blazor-ApexCharts/js/apex-charts.min.js",
|
||||||
url + "/_content/Blazor-ApexCharts/js/blazor-apex-charts.js"
|
url + "/_content/Blazor-ApexCharts/js/blazor-apex-charts.js"
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
|
||||||
BundledCss = await BundleFiles(
|
#endregion
|
||||||
new[]
|
|
||||||
|
#region CSS
|
||||||
|
|
||||||
|
CssFiles = new();
|
||||||
|
|
||||||
|
CssFiles.AddRange(new[]
|
||||||
{
|
{
|
||||||
"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700",
|
"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700",
|
||||||
url + "/assets/css/style.bundle.css",
|
url + "/assets/css/style.bundle.css",
|
||||||
@@ -72,30 +54,76 @@ public class BundleService
|
|||||||
url + "/_content/XtermBlazor/XtermBlazor.css",
|
url + "/_content/XtermBlazor/XtermBlazor.css",
|
||||||
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css",
|
url + "/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css",
|
||||||
url + "/_content/Blazor.ContextMenu/blazorContextMenu.min.css",
|
url + "/_content/Blazor.ContextMenu/blazorContextMenu.min.css",
|
||||||
url + "/assets/plugins/global/plugins.bundle.css",
|
url + "/assets/plugins/global/plugins.bundle.css"
|
||||||
|
});
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
CacheId = Guid.NewGuid().ToString();
|
||||||
|
|
||||||
|
Task.Run(Bundle);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Javascript
|
||||||
|
public string BundledJs { get; private set; }
|
||||||
|
public readonly List<string> JsFiles;
|
||||||
|
|
||||||
|
// CSS
|
||||||
|
public string BundledCss { get; private set; }
|
||||||
|
public readonly List<string> CssFiles;
|
||||||
|
|
||||||
|
// States
|
||||||
|
public string CacheId { get; private set; }
|
||||||
|
public bool BundledFinished { get; set; } = false;
|
||||||
|
private bool IsBundling { get; set; } = false;
|
||||||
|
|
||||||
|
private async Task Bundle()
|
||||||
|
{
|
||||||
|
if (!IsBundling)
|
||||||
|
IsBundling = true;
|
||||||
|
|
||||||
|
Logger.Info("Bundling js and css files");
|
||||||
|
|
||||||
|
BundledJs = "";
|
||||||
|
BundledCss = "";
|
||||||
|
|
||||||
|
BundledJs = await BundleFiles(
|
||||||
|
JsFiles
|
||||||
|
);
|
||||||
|
|
||||||
|
BundledCss = await BundleFiles(
|
||||||
|
CssFiles
|
||||||
);
|
);
|
||||||
|
|
||||||
Logger.Info("Successfully bundled");
|
Logger.Info("Successfully bundled");
|
||||||
BundledFinished = true;
|
BundledFinished = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task<string> BundleFiles(string[] jsUrls)
|
private async Task<string> BundleFiles(IEnumerable<string> items)
|
||||||
{
|
{
|
||||||
var bundledJs = "";
|
var bundled = "";
|
||||||
|
|
||||||
using HttpClient client = new HttpClient();
|
using HttpClient client = new HttpClient();
|
||||||
foreach (string url in jsUrls)
|
foreach (string item in items)
|
||||||
{
|
{
|
||||||
if (url.StartsWith("http"))
|
// Item is a url, fetch it
|
||||||
|
if (item.StartsWith("http"))
|
||||||
{
|
{
|
||||||
var jsCode = await client.GetStringAsync(url);
|
try
|
||||||
bundledJs += jsCode + "\n";
|
{
|
||||||
|
var jsCode = await client.GetStringAsync(item);
|
||||||
|
bundled += jsCode + "\n";
|
||||||
}
|
}
|
||||||
else
|
catch (Exception e)
|
||||||
bundledJs += url + "\n";
|
{
|
||||||
|
Logger.Warn($"Error fetching '{item}' while bundling");
|
||||||
|
Logger.Warn(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else // If not, it is probably a manual addition, so add it
|
||||||
|
bundled += item + "\n";
|
||||||
}
|
}
|
||||||
|
|
||||||
return bundledJs;
|
return bundled;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -38,6 +38,7 @@
|
|||||||
|
|
||||||
<link rel="shortcut icon" href="@(moonlightConfig.GetValue<string>("AppUrl"))/api/moonlight/resources/images/logo.svg"/>
|
<link rel="shortcut icon" href="@(moonlightConfig.GetValue<string>("AppUrl"))/api/moonlight/resources/images/logo.svg"/>
|
||||||
|
|
||||||
|
@*This import is not in the bundle because the files it references are linked relative to the current lath*@
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/boxicons.min.css"/>
|
<link rel="stylesheet" type="text/css" href="/assets/css/boxicons.min.css"/>
|
||||||
|
|
||||||
@if (BundleService.BundledFinished)
|
@if (BundleService.BundledFinished)
|
||||||
@@ -46,20 +47,19 @@
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"/>
|
foreach (var cssFile in BundleService.CssFiles)
|
||||||
|
{
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/style.bundle.css"/>
|
if (cssFile.StartsWith("http"))
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/flashbang.css"/>
|
{
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/snow.css"/>
|
<link rel="stylesheet" type="text/css" href="@(cssFile)">
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/utils.css"/>
|
}
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/boxicons.min.css"/>
|
else
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/blazor.css"/>
|
{
|
||||||
|
<style>
|
||||||
<link rel="stylesheet" type="text/css" href="/_content/XtermBlazor/XtermBlazor.css"/>
|
@cssFile
|
||||||
<link rel="stylesheet" type="text/css" href="/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css"/>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="/_content/Blazor.ContextMenu/blazorContextMenu.min.css"/>
|
}
|
||||||
|
}
|
||||||
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
@@ -113,31 +113,17 @@
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<script src="/_framework/blazor.server.js"></script>
|
foreach (var jsFile in BundleService.JsFiles)
|
||||||
<script src="/assets/plugins/global/plugins.bundle.js"></script>
|
{
|
||||||
<script src="/_content/XtermBlazor/XtermBlazor.min.js"></script>
|
if (jsFile.StartsWith("http"))
|
||||||
<script src="/_content/BlazorTable/BlazorTable.min.js"></script>
|
{
|
||||||
<script src="/_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
|
<script src="@(jsFile)"></script>
|
||||||
<script src="/_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>
|
}
|
||||||
|
else
|
||||||
<script src="https://www.google.com/recaptcha/api.js"></script>
|
{
|
||||||
|
@Html.Raw("<script>" + jsFile +"</script>")
|
||||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
|
}
|
||||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-search@0.8.2/lib/xterm-addon-search.min.js"></script>
|
}
|
||||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.5.0/lib/xterm-addon-web-links.min.js"></script>
|
|
||||||
|
|
||||||
<script src="/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
|
|
||||||
<script>require.config({ paths: { 'vs': '/_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
|
|
||||||
<script src="/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
|
|
||||||
<script src="/_content/BlazorMonaco/jsInterop.js"></script>
|
|
||||||
|
|
||||||
<script src="/assets/js/scripts.bundle.js"></script>
|
|
||||||
<script src="/assets/js/moonlight.js"></script>
|
|
||||||
|
|
||||||
<script>moonlight.loading.registerXterm();</script>
|
|
||||||
|
|
||||||
<script src="/_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
|
|
||||||
<script src="/_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>
|
|
||||||
}
|
}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user