This is a component library that provides Blazor-style static file embedding for Razor Components/Blazor.
Changelog:
- Update to Preview9
- Add BlazorFileProvider : Static File Provider that serves embedded files from Blazor Libraries
- Add usage example to RazorComponentSample to serve files from BlazorComponentSample
- Restructure source folders
- Add ability to handle multiple component assemblies in one go
- Add ability to block specific content files -- Including in Blazor
- Add compatibility with Pre-Rendering
- Initial release
- Enable support for embedded content files (CSS/JS) in Razor Components
Projects in this repo:
This is the component library that provides all the functionality.
It is a netstandard component library (i.e. a netstandard2.0 library).
Add the nuget package BlazorEmbedLibrary
https://www.nuget.org/packages/BlazorEmbedLibrary/
I recommend placing this in your MainLayout (or equivalent), but you can do it on individual pages if that suits your project.
Add a Using statement to the page to make it easier to reference the component
MainLayout.razor
@using BlazorEmbedLibrary...add the component :
<EmbeddedContent BaseType="@(typeof(Component1))" />@code
{
bool hasConnected = false;
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
StateHasChanged();
hasConnected = true;
}
}
}Note, by default the EmbeddedContent component has Debug turned off - if you enable it by setting Debug=true, it outputs the list of embedded resources.
This will read any CSS or Js files, which are embedded resources, from the Component1 library and add them to the head of the document.
From version 0.1.0-beta-3 onwards, you can now handle multiple component libraries in one hit using the Assemblies Parameter
<EmbeddedContent Assemblies="@Assemblies" />
@code
{
List<System.Reflection.Assembly> Assemblies = new List<System.Reflection.Assembly>()
{
typeof(BlazorComponentSample.Component1).Assembly,
typeof(Blazored.Toast.BlazoredToasts).Assembly
};
}
From version 0.1.0-beta-3 onwards, you can now block individual files using the BlockCss Parameter
This example will load content from Blazored.Toast and Component1, but will block the styles.css from BlazorComponentSample.
<EmbeddedContent Assemblies="@Assemblies" BlockCssFiles="@BlockCss" />
@code
{
List<string> BlockCss = new List<string>()
{
"BlazorComponentSample,styles.css"
};
List<System.Reflection.Assembly> Assemblies = new List<System.Reflection.Assembly>()
{
typeof(BlazorComponentSample.Component1).Assembly,
typeof(Blazored.Toast.BlazoredToasts).Assembly
};
}
Available in 0.1.0-beta-4 is a new class that provides aspnetcore middleware to server embedded resources as static files in the pipeline.
To use this facility in a Razor Components project, add the nuget to your project and simply add the new BlazorFileProvider to your Configure method and pass it a list of Blazor Library assemblies.
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new BlazorFileProvider(
new List<Assembly>()
{
typeof(BlazorComponentSample.Component1).Assembly
}
)
});
Note: Currently, there is a restriction that this provider will not allow duplicate file names. This is because CSS files added via the EmbeddedComponent appear in the root of the application, so any images requested by a relative URL will need to come from the root path as well, which means there is no way to distinguish between files with the same name. If two libraries have a file with the same name, the first one found will be used.
I have included Blazored.Toast and a simple custom component in the Razorcomponents and Blazor Apps
An out-of-the-box sample Blazor component library with static files.
A sample Blazor app to show how this library detects if Blazor has already linked the static files, and does not duplicate them.
Also shows how we can toggle CSS files on/off at runtime.
A sample Razor Components App to show static files working.
Also shows how we can toggle CSS files on/off at runtime.