Skip to content

add LumexUI to the list (#18) #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions BlazorBenchmarks.sln
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FluentUI.Blazor.Benchmark.C
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "FluentUI", "FluentUI", "{02EA681E-C7D8-13C7-8484-4AC65E1B71E8}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "LumexUI.Blazor.Benchmark.Client", "LumexUI.Blazor.Benchmark\Client\LumexUI.Blazor.Benchmark.Client.csproj", "{ADCB62CD-1693-7A0F-A06D-F02001BCDC8E}"
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "LumexUI", "LumexUI", "{3384D406-88E8-417F-870D-DA0DBD7D1E6D}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "LumexUI.Blazor.Benchmark.Server", "LumexUI.Blazor.Benchmark\Server\LumexUI.Blazor.Benchmark.Server.csproj", "{9555DE6B-C270-0B8F-240D-5994DD10013A}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Expand Down Expand Up @@ -168,6 +174,14 @@ Global
{11B917E2-C872-36A1-A476-3A3236C73013}.Debug|Any CPU.Build.0 = Debug|Any CPU
{11B917E2-C872-36A1-A476-3A3236C73013}.Release|Any CPU.ActiveCfg = Release|Any CPU
{11B917E2-C872-36A1-A476-3A3236C73013}.Release|Any CPU.Build.0 = Release|Any CPU
{ADCB62CD-1693-7A0F-A06D-F02001BCDC8E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{ADCB62CD-1693-7A0F-A06D-F02001BCDC8E}.Debug|Any CPU.Build.0 = Debug|Any CPU
{ADCB62CD-1693-7A0F-A06D-F02001BCDC8E}.Release|Any CPU.ActiveCfg = Release|Any CPU
{ADCB62CD-1693-7A0F-A06D-F02001BCDC8E}.Release|Any CPU.Build.0 = Release|Any CPU
{9555DE6B-C270-0B8F-240D-5994DD10013A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{9555DE6B-C270-0B8F-240D-5994DD10013A}.Debug|Any CPU.Build.0 = Debug|Any CPU
{9555DE6B-C270-0B8F-240D-5994DD10013A}.Release|Any CPU.ActiveCfg = Release|Any CPU
{9555DE6B-C270-0B8F-240D-5994DD10013A}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
Expand Down Expand Up @@ -195,6 +209,8 @@ Global
{B99719A5-C51D-4E84-8C17-0232EFDB69F7} = {AA99018F-7582-4A3C-989D-6B18506F864B}
{2B91B5BA-16DD-60B5-6F3C-EA01E8C50200} = {02EA681E-C7D8-13C7-8484-4AC65E1B71E8}
{11B917E2-C872-36A1-A476-3A3236C73013} = {02EA681E-C7D8-13C7-8484-4AC65E1B71E8}
{ADCB62CD-1693-7A0F-A06D-F02001BCDC8E} = {3384D406-88E8-417F-870D-DA0DBD7D1E6D}
{9555DE6B-C270-0B8F-240D-5994DD10013A} = {3384D406-88E8-417F-870D-DA0DBD7D1E6D}
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {E284F5B4-146F-44A2-9962-B50F6216B1A7}
Expand Down
12 changes: 12 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/App.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
<TargetFramework>net9.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<InvariantTimezone>true</InvariantTimezone>
<InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="LumexUI" Version="1.1.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.2" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.2" PrivateAssets="all" />
</ItemGroup>

Copy link

@desmondinho desmondinho Feb 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add this in the project file to download the Tailwind CLI without npm and generate CSS

	<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')">
		<Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/tailwindcss-windows-x64.exe" />
		<Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
	</Target>

	<Target Name="RunTailwind" AfterTargets="InstallTailwind">
		<Exec Command="tailwindcss -i ./wwwroot/globals.css -o ./wwwroot/app.min.css --minify" />
	</Target>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems to be the hardest one among all BlazorUI libraries I've tested so far from 2019.
I'll keep this as draft, feel free to clone it and make it work and submit it to me (":

Copy link

@desmondinho desmondinho Feb 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, I can imagine it! No problem, I will just keep updating LumexUI to support Tailwind CSS v4. This change will significantly improve the installation process.

<Target Name="InstallTailwind" AfterTargets="PostBuildEvent" Condition="!Exists('tailwindcss.exe')">
<Exec Command="curl -LO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/tailwindcss-windows-x64.exe" />
<Exec Command="ren tailwindcss-windows-x64.exe tailwindcss.exe" />
</Target>

<Target Name="RunTailwind" AfterTargets="InstallTailwind">
<Exec Command="tailwindcss -i ./wwwroot/globals.css -o ./wwwroot/app.min.css --minify" />
</Target>

</Project>
7 changes: 7 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/MainLayout.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@inherits LayoutComponentBase

<main>
@Body
</main>

<LumexThemeProvider />
28 changes: 28 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/Pages/Index.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
@page "/"

<div class="container">
<LumexButton OnClick="IncreaseCounter" Color="@ThemeColor.Primary">@($"Counter: {counter}")</LumexButton>

<input type="date" placeholder="Select a date"/>

<lable For="label-input">A Label for An Input</lable>
<input type="text" name="label-input" id="label-input" />
</div>

<style>
.container{
display: flex;
flex-direction: column;
gap: 1rem;
width: 300px;
}
</style>

@code {
int counter;

void IncreaseCounter()
{
counter++;
}
}
13 changes: 13 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/Program.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
using LumexUI.Blazor.Benchmark.Client;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using LumexUI.Extensions;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddLumexServices();

await builder.Build().RunAsync();
12 changes: 12 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/Properties/launchSettings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"profiles": {
"LumexUI.Blazor.Benchmark.Client": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:52438;http://localhost:52439"
}
}
}
9 changes: 9 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/_Imports.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using LumexUI.Blazor.Benchmark.Client
@using LumexUI
@using LumexUI.Common
Binary file added LumexUI.Blazor.Benchmark/Client/tailwindcss.exe
Binary file not shown.
16 changes: 16 additions & 0 deletions LumexUI.Blazor.Benchmark/Client/wwwroot/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>LumexUI.Blazor.Benchmark</title>
<base href="/" />
<link href="output.css" rel="stylesheet" />
</head>

<body>
<div id="app">Loading...</div>
<script src="_content/LumexUI/js/LumexUI.js" type="module"></script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<Project Sdk="Microsoft.NET.Sdk.Web">

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

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="9.0.2" />
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\Client\LumexUI.Blazor.Benchmark.Client.csproj" />
</ItemGroup>

</Project>
45 changes: 45 additions & 0 deletions LumexUI.Blazor.Benchmark/Server/Program.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
using Microsoft.AspNetCore.ResponseCompression;
using System.IO.Compression;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

builder.Services.AddResponseCompression(opts =>
{
opts.EnableForHttps = true;
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
{
"application/octet-stream"
}).ToArray();
opts.Providers.Add<BrotliCompressionProvider>();
opts.Providers.Add<GzipCompressionProvider>();
})
.Configure<BrotliCompressionProviderOptions>(opt => opt.Level = CompressionLevel.Fastest)
.Configure<GzipCompressionProviderOptions>(opt => opt.Level = CompressionLevel.Fastest);

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseHsts();
}

app.UseHttpsRedirection();
if (app.Environment.IsProduction() || true)
{
app.UseResponseCompression();
}
app.UseBlazorFrameworkFiles();
app.MapStaticAssets();

app.UseRouting();

app.MapRazorPages();
app.MapFallbackToFile("index.html");

app.Run();
14 changes: 14 additions & 0 deletions LumexUI.Blazor.Benchmark/Server/Properties/launchSettings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"profiles": {
"https": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"dotnetRunMessages": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "https://localhost:7012;http://localhost:5249"
}
}
}
8 changes: 8 additions & 0 deletions LumexUI.Blazor.Benchmark/Server/appsettings.Development.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
}
}
9 changes: 9 additions & 0 deletions LumexUI.Blazor.Benchmark/Server/appsettings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ The table below provides an overview of the file sizes of various popular Blazor
| [**MudBlazor**](https://mudblazor.com/) | 2.0 MB | +0.5 MB |
| [**Microsoft FluentUI**](https://fluentui-blazor.net/) | 2.0 MB | +0.5 MB |
| [**MatBlazor**](https://matblazor.com/) | 2.1 MB | +0.6 MB |
| [**LumexUI**](https://lumexui.org/) | 2.5 MB | +1.0 MB |
| [**Blazorise**](https://blazorise.com/) | 3.1 MB | +1.6 MB |
| [**Ant Design**](https://antblazor.com/) | 3.6 MB | +2.1 MB |
| [**Syncfusion**](https://syncfusion.com/blazor-components/) | 4.3 MB | +2.8 MB |
Expand Down