Added support for customizing where to find the javascript required to run

jlchavez · jlchavez · commit cd7431c4d236 · 2025-07-25T01:39:53.000-06:00
diff --git a/Demo/BlazorFluentUI.Demo.Server/Pages/_Layout.cshtml b/Demo/BlazorFluentUI.Demo.Server/Pages/_Layout.cshtml
@@ -14,7 +14,8 @@
     <link href="css/site.css" rel="stylesheet" />
 
     <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
-    <script src="_content/BlazorFluentUI.CoreComponents/richTextEditor.js"></script>    <title>Blazor Fluent UI Server Demo</title>
+    <script src="_content/BlazorFluentUI.CoreComponents/richTextEditor.js"></script>
+    <title>Blazor Fluent UI Server Demo</title>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <body>
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -13,7 +13,7 @@
 		<IsPackable>true</IsPackable>
 		<CopyLocalLockFileAssemblies>false</CopyLocalLockFileAssemblies>
 		<PackageOutputPath>../../packages</PackageOutputPath>
-		<Version>8.0.0.4</Version>
+		<Version>8.0.0.5</Version>
 		<!--<GeneratePackageOnBuild>false</GeneratePackageOnBuild>-->
 	</PropertyGroup>
 
diff --git a/src/BlazorFluentUI.CoreComponents/BaseComponent/FluentUIComponentBase.cs b/src/BlazorFluentUI.CoreComponents/BaseComponent/FluentUIComponentBase.cs
@@ -64,7 +64,18 @@ public class FluentUIComponentBase : ComponentBase, IAsyncDisposable
 
         [Inject] ScopedStatics? ScopedStatics { get; set; }
 
-        protected const string BasePath = "./_content/BlazorFluentUI.CoreComponents/baseComponent.js";
+        internal const string BaseComponentJs = "baseComponent.js";
+        internal const string BaseComponentPath = "_content/BlazorFluentUI.CoreComponents/";
+        internal const string DefaultBasePath = "./";
+
+        private static string? _appBasePath = null;
+        private static string? _baseComponentPath = null;
+
+        protected string AppBasePath => _appBasePath ??= (Settings.AssetsPath ?? ((Settings.BasePath ?? DefaultBasePath) + BaseComponentPath));
+
+        protected string BuildScriptPath(ref string? scriptPath, string scriptName) => scriptPath ??= AppBasePath + scriptName;
+
+        protected string BasePath => _baseComponentPath ??= BuildScriptPath(ref _baseComponentPath, BaseComponentJs);
         protected IJSObjectReference? baseModule;
 
         protected CancellationTokenSource cancellationTokenSource = new();
diff --git a/src/BlazorFluentUI.CoreComponents/Callout/CalloutContent.razor.cs b/src/BlazorFluentUI.CoreComponents/Callout/CalloutContent.razor.cs
@@ -11,7 +11,10 @@ namespace BlazorFluentUI
 {
     public partial class CalloutContent : FluentUIComponentBase, IAsyncDisposable
     {
-        private const string CalloutPath = "./_content/BlazorFluentUI.CoreComponents/callout.js";
+        private string? _calloutPath;
+
+        private string CalloutPath => _calloutPath ??= BuildScriptPath(ref _calloutPath, "callout.js");
+
         private IJSObjectReference? calloutModule;
 
 
diff --git a/src/BlazorFluentUI.CoreComponents/DocumentCard/DocumentCard.razor.cs b/src/BlazorFluentUI.CoreComponents/DocumentCard/DocumentCard.razor.cs
@@ -46,8 +46,9 @@ public partial class DocumentCard : FluentUIComponentBase, IAsyncDisposable
         /// </summary>
         [Parameter] public string? OnClickTarget { get; set; }
 
+        private string? _scriptPath;
 
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/documentCard.js";
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "documentCard.js");
         private IJSObjectReference? scriptModule;
 
         [Inject]
diff --git a/src/BlazorFluentUI.CoreComponents/DocumentCard/DocumentCardTitle.razor.cs b/src/BlazorFluentUI.CoreComponents/DocumentCard/DocumentCardTitle.razor.cs
@@ -35,7 +35,10 @@ public partial class DocumentCardTitle : FluentUIComponentBase, IAsyncDisposable
         /// </value>
         [Parameter] public bool ShowAsSecondaryTitle { get; set; }
 
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/documentCard.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "documentCard.js");
+
         private IJSObjectReference? scriptModule;
         private DotNetObjectReference<DocumentCardTitle>? selfReference;
 
diff --git a/src/BlazorFluentUI.CoreComponents/FluentUISettings.cs b/src/BlazorFluentUI.CoreComponents/FluentUISettings.cs
@@ -11,5 +11,9 @@ public sealed record FluentUISettings
         public static FluentUISettings Default { get; } = new FluentUISettings();
 
         public bool UseFluentUISystemIcons { get; set; } = true;
+
+        public string? BasePath { get; set; }
+
+        public string? AssetsPath { get; set; }
     }
 }
diff --git a/src/BlazorFluentUI.CoreComponents/FocusTrapZone/FocusTrapZone.razor.cs b/src/BlazorFluentUI.CoreComponents/FocusTrapZone/FocusTrapZone.razor.cs
@@ -8,7 +8,10 @@ namespace BlazorFluentUI
 {
     public partial class FocusTrapZone : FluentUIComponentBase, IAsyncDisposable
     {
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/focusTrapZone.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "focusTrapZone.js");
+
         private IJSObjectReference? scriptModule;
 
         [Parameter]
diff --git a/src/BlazorFluentUI.CoreComponents/FocusZone/FocusZone.razor.cs b/src/BlazorFluentUI.CoreComponents/FocusZone/FocusZone.razor.cs
@@ -12,7 +12,10 @@ namespace BlazorFluentUI
     public partial class FocusZone : FluentUIComponentBase, IAsyncDisposable
     {
         //[Inject] private IJSRuntime? JSRuntime { get; set; }
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/focusZone.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "focusZone.js");
+
         private IJSObjectReference? scriptModule;
         //private const string BasePath = "./_content/BlazorFluentUI.CoreComponents/baseComponent.js";
         //private IJSObjectReference? baseModule;
diff --git a/src/BlazorFluentUI.CoreComponents/List/List.cs b/src/BlazorFluentUI.CoreComponents/List/List.cs
@@ -48,8 +48,10 @@ public class List<TItem> : FluentUIComponentBase, IAsyncDisposable
         public bool IsVirtualizing { get; set; } = true;
         //[Parameter]
         //public EventCallback<Viewport> OnViewportChanged { get; set; }
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "list.js");
 
-        private const string scriptPath = "./_content/BlazorFluentUI.CoreComponents/list.js";
         private IJSObjectReference? scriptModule;
 
 
@@ -183,7 +185,7 @@ protected override void OnParametersSet()
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (scriptModule == null)
-                scriptModule = await JSRuntime!.InvokeAsync<IJSObjectReference>("import", scriptPath);
+                scriptModule = await JSRuntime!.InvokeAsync<IJSObjectReference>("import", ScriptPath);
             if (firstRender)
             {
                 _selfReference = DotNetObjectReference.Create(this);
diff --git a/src/BlazorFluentUI.CoreComponents/MarqueeSelection/MarqueeSelection.razor.cs b/src/BlazorFluentUI.CoreComponents/MarqueeSelection/MarqueeSelection.razor.cs
@@ -17,7 +17,10 @@ public partial class MarqueeSelection<TItem> : FluentUIComponentBase, IAsyncDisp
         [Parameter] public Func<bool>? OnShouldStartSelection { get; set; }
         [Parameter] public Selection<TItem>? Selection { get; set; }
 
-        private const string scriptPath = "./_content/BlazorFluentUI.CoreComponents/marqueeSelection.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "marqueeSelection.js");
+
         private IJSObjectReference? scriptModule;
 
 
diff --git a/src/BlazorFluentUI.CoreComponents/SelectionZone/SelectionZone.razor.cs b/src/BlazorFluentUI.CoreComponents/SelectionZone/SelectionZone.razor.cs
@@ -68,7 +68,10 @@ public Selection<TItem> Selection
         public bool SelectionPreservedOnEmptyClick { get; set; }
 
         private IJSObjectReference? scriptModule;
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/selectionZone.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "selectionZone.js");
+
 
         private bool isModal = false;
 
diff --git a/src/BlazorFluentUI.CoreComponents/Slider/Slider.razor.cs b/src/BlazorFluentUI.CoreComponents/Slider/Slider.razor.cs
@@ -41,7 +41,10 @@ public partial class Slider : FluentUIComponentBase, IAsyncDisposable
         private DotNetObjectReference<Slider>? selfReference;
         private Timer timer = new();
 
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/slider.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "Slider.js");
+
         private IJSObjectReference? scriptModule;
 
         private string LengthString => (Vertical ? "height" : "width");
diff --git a/src/BlazorFluentUI.CoreComponents/Theme/Theme.razor b/src/BlazorFluentUI.CoreComponents/Theme/Theme.razor
@@ -1,4 +1,5 @@
 ﻿@namespace BlazorFluentUI
+@using Microsoft.Extensions.Options
 @*This is a temporary solution until we find a better place for this css.*@
 <style>
     @BlazorFluentUI.Models.Keyframes.DefaultKeyFrames
@@ -9,11 +10,10 @@
 
     @@font-face {
         font-family: "FluentSystemIcons-Regular";
-        src: url("./_content/BlazorFluentUI.CoreComponents/FluentSystemIcons-Regular.ttf") format("truetype");
-    }
+        src: url("@(AppBasePath)FluentSystemIcons-Regular.ttf") format("truetype"); }
     @@font-face {
         font-family: "FluentSystemIcons-Filled";
-        src: url("./_content/BlazorFluentUI.CoreComponents/FluentSystemIcons-Filled.ttf") format("truetype");
+        src: url("@(AppBasePath)FluentSystemIcons-Filled.ttf") format("truetype");
     }
 
     i[class^="icon-"], i[class*=" icon-"] {
@@ -123,6 +123,11 @@
     [Inject]
     public ThemeProvider? ThemeProvider { get; set; }
 
+    [Inject] 
+    private IOptions<FluentUISettings>? _settingsOptions { get; set; }
+
+    protected FluentUISettings Settings => _settings ??= _settingsOptions?.Value ?? BlazorFluentUI.FluentUISettings.Default;
+
     [Parameter]
     public IPalette? InitialPalette { get; set; }
     [Parameter]
@@ -134,6 +139,11 @@
     public RenderFragment? ChildContent { get; set; }
 
     private bool firstThemeCheck;
+    private FluentUISettings? _settings;
+
+    private static string? _appBasePath = null;
+
+    protected string AppBasePath => _appBasePath ??= (Settings.AssetsPath ?? ((Settings.BasePath ?? FluentUIComponentBase.DefaultBasePath) + FluentUIComponentBase.BaseComponentPath));
 
     protected override void OnInitialized()
     {
diff --git a/src/BlazorFluentUI.ListComponents/DetailsList/DetailsHeader.razor.cs b/src/BlazorFluentUI.ListComponents/DetailsList/DetailsHeader.razor.cs
@@ -95,7 +95,10 @@ public partial class DetailsHeader<TItem> : FluentUIComponentBase, IAsyncDisposa
         [Parameter]
         public bool UseFastIcons { get; set; } = true;
 
-        private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/detailsList.js";
+        private string? _scriptPath;
+
+        private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "detailsList.js");
+
         private IJSObjectReference? scriptModule;
 
         private bool showCheckbox;

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,10 @@ namespace BlazorFluentUI`
`11`	`11`	`{`
`12`	`12`	`public partial class CalloutContent : FluentUIComponentBase, IAsyncDisposable`
`13`	`13`	`{`
`14`		`- private const string CalloutPath = "./_content/BlazorFluentUI.CoreComponents/callout.js";`
	`14`	`+ private string? _calloutPath;`
	`15`	`+`
	`16`	`+ private string CalloutPath => _calloutPath ??= BuildScriptPath(ref _calloutPath, "callout.js");`
	`17`	`+`
`15`	`18`	`private IJSObjectReference? calloutModule;`
`16`	`19`
`17`	`20`
Original file line number	Diff line number	Diff line change
`@@ -11,5 +11,9 @@ public sealed record FluentUISettings`
`11`	`11`	`public static FluentUISettings Default { get; } = new FluentUISettings();`
`12`	`12`
`13`	`13`	`public bool UseFluentUISystemIcons { get; set; } = true;`
	`14`	`+`
	`15`	`+ public string? BasePath { get; set; }`
	`16`	`+`
	`17`	`+ public string? AssetsPath { get; set; }`
`14`	`18`	`}`
`15`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,10 @@ namespace BlazorFluentUI`
`8`	`8`	`{`
`9`	`9`	`public partial class FocusTrapZone : FluentUIComponentBase, IAsyncDisposable`
`10`	`10`	`{`
`11`		`- private const string ScriptPath = "./_content/BlazorFluentUI.CoreComponents/focusTrapZone.js";`
	`11`	`+ private string? _scriptPath;`
	`12`	`+`
	`13`	`+ private string ScriptPath => _scriptPath ??= BuildScriptPath(ref _scriptPath, "focusTrapZone.js");`
	`14`	`+`
`12`	`15`	`private IJSObjectReference? scriptModule;`
`13`	`16`
`14`	`17`	`[Parameter]`