How to avoid manual reference to Microsoft.Fast.Components.FluentUI when using Fluent-UI Blazor in a Razor Class Library

[LuohuaRain]

I have encountered an issue where my components wrapped with Fluent-UI Blazor in a Razor Class Library (RCL) do not work when I add the RCL reference to my BlazorApp1 project. Specifically, the components do not work unless I manually add a reference to Microsoft.Fast.Components.FluentUI.

I have tried only adding the reference to the RCL project file as shown in the second example below, but it still doesn't work.

Example 1 (does work):

<Project Sdk="Microsoft.NET.Sdk.Web">

	<PropertyGroup>
		<TargetFramework>net7.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
	</PropertyGroup>

	<ItemGroup>
		<PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="2.3.0" />
	</ItemGroup>

	<ItemGroup>
		<ProjectReference Include="..\RazorClassLibrary1\RazorClassLibrary1.csproj" />
	</ItemGroup>

</Project>

Example 2 (doesn't work):

<Project Sdk="Microsoft.NET.Sdk.Web">

	<PropertyGroup>
		<TargetFramework>net7.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
	</PropertyGroup>

	<ItemGroup>
		<ProjectReference Include="..\RazorClassLibrary1\RazorClassLibrary1.csproj" />
	</ItemGroup>

</Project>

I do not want to add the reference manually, since I have already added it in the RCL. What am I missing? Any suggestions would be appreciated.

[vnbaaij]

Hi, unfortunately this is not something we can change at the moment. This has to do with the way we currently handle icons/emoji.
It is still something that is on the 'ToDo' list but no ETA and no promise of a solution.

[andreisaperski]

Hi Vincent,

I'm just curious, is there any other issue besides conflict of generated ConfigurationGenerator for icons/emoji in app and RCL?
The issue with the conflicting generated classes can be resolved in a couple of ways:

• allow to opt-out from creation of ConfigurationGenerator with parameter like DisableConfigurationGenerator;
• allow customization of generated class name using parameter or marker attribute.
  I've tried the latter option locally and haven't noticed new issues

[vnbaaij]

I'm not sure if there are other issue at play.
Would be interested in what you have though. Does that make having the library only in a RCL possible?

[andreisaperski]

I've started with BlazorApp1 (Blazor Server App) and RazorClassLibrary1 (RCL). Added Microsoft.Fast.Components.FluentUI to RazorClassLibrary1 and a simple component with FluentButton. Added componet from RCL to Index page in BlazorApp1.
When i run BlazorApp1, there was no Microsoft.Fast.Components.FluentUI.lib.module.js among the loaded scripts - static web assets of Microsoft.Fast.Components.FluentUI were not loading.
So i commented out the following lines in Microsoft.Fast.Components.FluentUI.csproj (src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj):

<StaticWebAssetsDisableProjectBuildMultiTargetingPropsFileGeneration>true</StaticWebAssetsDisableProjectBuildMultiTargetingPropsFileGeneration>
<StaticWebAssetsDisableProjectBuildTransitivePropsFileGeneration>true</StaticWebAssetsDisableProjectBuildTransitivePropsFileGeneration>

This made static web assets of Microsoft.Fast.Components.FluentUI available for transitive build. Then created a new version of nuget package and updated RazorClassLibrary1 with it. Started BlazorApp1 and saw that Microsoft.Fast.Components.FluentUI.lib.module.js has been loaded and it has imported web-components.min.js.
So at this point Fluent components were working fine. Then i saw your comment about icons/emoji and added some icons and emoji to the componet in RazorClassLibrary1. Settings for icons/emoji were added to BlazorApp1.csproj. But when tried to set IconConfiguration in BlazorApp1's Program.cs:

options.IconConfiguration = ConfigurationGenerator.GetIconConfiguration();

compiler started complaining that Microsoft.Fast.Components.FluentUI.ConfigurationGenerator exists in BlazorApp1 and RazorClassLibrary1 and it cannot figure out which one to use.
At first i just copied code for configuration from ConfigurationGenerator of BlazorApp1:

builder.Services.AddFluentUIComponents(options =>
{
    options.HostingModel = BlazorHostingModel.Server;
    options.IconConfiguration = new(true)
    {
        Sizes = new[] { IconSize.Size20, IconSize.Size32 },
        Variants = new[] { IconVariant.Filled, IconVariant.Regular }
    };
    options.EmojiConfiguration = new(true)
    {
        Groups = new[] { EmojiGroup.Activities, EmojiGroup.Flags },
        Styles = new[] { EmojiStyle.Color }
    };
});

Run BlazorApp1 and icons/emoji rendered fine. Then i tried to override ConfigurationGenerator class name using a new parameter (to change class name only) and marker attribute (to add config methods to marked partial static class) - this allowed to replace hardcoded configuration to:

        options.IconConfiguration = FluentUIAssetsConfiguration.GetIconConfiguration();
        options.EmojiConfiguration = FluentUIAssetsConfiguration.GetEmojiConfiguration();

So, with enabled BuildMultiTargeting and BuildTransitive props generation, you can reference the library only in RCL.
Additional changes in configuration generator will resolve the class names conflict, but, technically, they are not required.

[vnbaaij]

I fixed having the double ConfigurationGenerator by adding the following to the RCL project:

<Target Name="DisableAnalyzers" BeforeTargets="CoreCompile">
	<ItemGroup>
		<Analyzer Remove="@(Analyzer)" Condition="'%(Filename)' == 'Microsoft.Fast.Components.FluentUI.Configuration'" />
	</ItemGroup>
</Target>

As the target name says, this disables the analyzers specified. The generated class is immediately removed from the RCL project and now only exists in the Blazor project!!

Going to run some more test, but I think we (mostly you) cracked it!

[vnbaaij]

As far as I can see, the only difference in the package (when commenting out or deleting the mentioned lines in Microsoft.Fast.Components.FluentUI.csproj) is that now the following two files are added:

• \buildMultiTargeting\Microsoft.Fast.Components.FluentUI.props
• \buildTransitive\Microsoft.Fast.Components.FluentUI.props

...which kind of makes sense if we dissect the name of the properties 😁. I just did not know that these are the ones that caused issues with running from an RCL.

Expect a V2.3.4 version package with these changes soon.

[LuohuaRain]

Thank you both so much for your help. You've successfully solved my problem.
However, it seems that:

• In Blazor Hybrid MAUI/ WPF, I still need to write a PropertyGroup.
• I haven't found the right approach for Blazor Hybrid (WPF) in debug mode. Icons/emojis don't work in debug mode, but they work fine after publishing with PropertyGroup. I suspect that the issue might lie in FileBasedStaticAssetService.cs

public class FileBasedStaticAssetService : IStaticAssetService
{
    public async Task<string> GetAsync(string assetUrl, bool useCache = false)
    {
        string result = null;
        HttpRequestMessage message = CreateMessage(assetUrl);
        if (string.IsNullOrEmpty(result))
        {
            result = await ReadData(assetUrl);
        }
        return result;
    }
    private static HttpRequestMessage CreateMessage(string url) => new(HttpMethod.Get, url);

    private static async Task<string> ReadData(string file)
    {
        await using var stream = File.OpenRead($"wwwroot/{file}");
        using var reader = new StreamReader(stream);
        return await reader.ReadToEndAsync();
    }
}

Any guidance on this matter would be greatly appreciated.😊

[vnbaaij]

• in Blazor Hybrid (MAUI), I still need to write a PropertyGroup.

Not sure what you mean. You have defined the PropertyGroup somewhere else already? Are you using a RCL in you MAUI app that references library? Or library direct in MAUI?

• I haven't yet found the correct approach for Blazor Hybrid (WPF) (Blazor WPF app doesn't work with icons/emojis).
  Sorry, I have not done anything with WPF yet. Your guess is as good as mine..

[andreisaperski]

Re icons/emoji, Publish copies static web assets to 'wwwroot' folder, so FileBasedStaticAssetService works fine.
In case of debug mode, Build doesn't copy assets, but generates [AppName].staticwebassets.runtime.json in 'bin' folder to reduce build time. As a result FileBasedStaticAssetService cannot find asset files, something like ManifestStaticWebAssetFileProvider from Microsoft.AspNetCore.Hosting needs to be used instead. ManifestStaticWebAssetFileProvider is internal so it cannot be used directly, replication of its behavior would take some time and probably not a good idea in the long run.
...There's another way, not sure if it's legal :)

• change Sdk of WPF app to "Microsoft.NET.Sdk.Web":

<Project Sdk="Microsoft.NET.Sdk.Web">

• add ManifestBasedStaticAssetService class:

using System.IO;

using Microsoft.Extensions.FileProviders;
using Microsoft.Fast.Components.FluentUI.Infrastructure;

namespace WpfApp1;

public class ManifestBasedStaticAssetService : IStaticAssetService
{
    private readonly IFileProvider _fileProvider;

    public ManifestBasedStaticAssetService(IFileProvider fileProvider)
    {
        _fileProvider = fileProvider;
    }

    public async Task<string> GetAsync(string assetUrl, bool useCache = true)
    {
        var fileInfo = _fileProvider.GetFileInfo(assetUrl);
        using var reader = new StreamReader(fileInfo.PhysicalPath);
        return await reader.ReadToEndAsync();
    }
}

• update ctor in MainWindow.xaml.cs:

    public MainWindow()
    {
        InitializeComponent();

#if DEBUG
        var builder = WebApplication.CreateBuilder();
        StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);

        var serviceCollection = builder.Services;
        serviceCollection.AddTransient<IStaticAssetService, ManifestBasedStaticAssetService>(
            _ => new ManifestBasedStaticAssetService(builder.Environment.WebRootFileProvider));
#else
        var serviceCollection = new ServiceCollection();
        serviceCollection.AddTransient<IStaticAssetService, FileBasedStaticAssetService>();
#endif

        serviceCollection.AddWpfBlazorWebView();
        serviceCollection.AddFluentUIComponents(options =>
        {
            options.HostingModel = BlazorHostingModel.Hybrid;
            options.IconConfiguration = ConfigurationGenerator.GetIconConfiguration();
            options.EmojiConfiguration = ConfigurationGenerator.GetEmojiConfiguration();
        });

#if DEBUG
        serviceCollection.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
#endif

        Resources.Add("services", serviceCollection.BuildServiceProvider());
    }

When built and run in debug, icons/emoji are displayed without an issue:

[LuohuaRain]

Thank you so much! It works perfectly fine!♥