Typed Variant & Compound Variant Proposal

[Denny09310]

I’ve been experimenting with a typed approach to handling variants and compound variants in Blazor. LumexUI already has a similar system, but this version aims to bring stronger typing and safer defaults while keeping flexibility.

I also want to be transparent: I used a bit of AI help to shape the design and documentation, but the implementation and direction come from real-world experimentation.

Curious to hear your thoughts: would a typed API like this be worth exploring for LumexUI, or should we keep the current dynamic approach?

This is the gist with the implementation and a button example. It could be a start

I've created a github repository, from which I'd like to expand to a nuget package. Watch this to review the structure instead of the gist 😁

Edit: I've realized now that I'm missing a big portion of the infrastructure, as for now I can't make a variant for more than one slot at a time

[Denny09310]

I think I want to revisit the infrastructure to make it more 1:1 with tailwind-variants if possible, while maintaining type-safety

[desmondinho]

Hey @Denny09310,

Good stuff! I spent quite a bit of time trying to figure out the best approach. I also tried the Fluent API, but even though it gives you a fully typed API, I found it loses readability compared to the tailwind-variants structure. Since I didn’t want to slow myself down when copying styles, I chose a more readable, similar API over a fully typed one. That said, I always planned to revisit this at some point. Really nice that you decided to dive deep into it!

I like what you have so far!

I have a couple of suggestions/concerns:

1. Consider encapsulating TwMerge somewhere lower. Maybe in a .Build() call?
2. I am concerned about re-creations of Expression on every render.

@_cardVariants.GetSlot(this, Tw, s => s.Avatar)

[desmondinho]

@Denny09310 I've updated the comment a bit.

[Denny09310]

Well, it started as a side project, then it expanded into a separate library. I think it loses readability too, and I’d like to make it more similar to the original. Retaining type safety on objects without involving Expressions is quite difficult, but any ideas you might have to help me would be very welcome 😁

Edit: I've read the new comment now.

1. It started like that but then I've removed it from "Build" to make it "static readonly" with a single evaluation at start
2. Yes, I've thought that too, but as I said I don't know how to make an object "type safe" like typescript does with tw-variants. I didn't thought Expression evaluation could be heavy

[desmondinho]

I’d be happy to help with this project! I think it would be a great addition to the Blazor ecosystem overall. Unfortunately, I haven’t had much time lately :( Most of my focus is on another project (a local startup) that we’ve been working on for the past 6 months, and we’re about to release it. I’m literally dreaming about the day when I can spend all my free time on LumexUI again... :D

[Denny09310]

Congrats on the (near) startup launch, that’s huge! 🎉 No worries at all about the variants library—I’ll keep improving it in the meantime. Whenever you have time to jump in again, it’ll be awesome to have your input 😁

[desmondinho]

Thank you, mate! You are awesome :)

[Denny09310]

I think I’ve got it figured out. I ended up rewriting the entire infrastructure, and now it’s almost identical to the original—about a 1:1 match. It’s still a work in progress: I need to verify everything works, split it into separate files, and add tests. But for now, I’d like your feedback specifically on the syntax inside the demo. The branch is refactor/tw-variants. When you have time obviously 🙂

I realize some of the same issues as before might still be present. However, I believe I’ve reduced the evaluations, and overall, I think I’ve made some improvements.

Edit: I'm experimenting with a source generator to avoid multiple Expression evaluation, I'm pretty satisfied. It could benefit some improvements, but for now it does the job. The branch is feature/slots-source-generator if you are interested in the option.

[desmondinho]

Good job! I've just looked at it a bit and it feels very good so far.

I will take a closer look tomorrow.

[desmondinho]

Hey @Denny09310,

Would you like to continue discussion here or maybe in Discord?

[Denny09310]

Whichever you prefer. Should I use the official LumexUI discord server?

[desmondinho]

DM me please :)