Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maxumka/blazorish
Naive implementation MVU in blazor inspired by elmish with hello world examples
https://github.com/maxumka/blazorish
blazor blazor-webassembly csharp-library elm-architecture mvu
Last synced: about 15 hours ago
JSON representation
Naive implementation MVU in blazor inspired by elmish with hello world examples
- Host: GitHub
- URL: https://github.com/maxumka/blazorish
- Owner: Maxumka
- License: mit
- Created: 2022-02-03T09:52:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-13T12:39:01.000Z (about 2 years ago)
- Last Synced: 2024-12-13T09:38:28.885Z (about 1 month ago)
- Topics: blazor, blazor-webassembly, csharp-library, elm-architecture, mvu
- Language: C#
- Homepage:
- Size: 408 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blazorish
Naive implementation MVU in Blazor inspired by elmish (without razor syntax).
I want to write applications in C# and Blazor based on model-view-update. If you too, try this.
# Warning
Its not production ready, its not ready for anything. I just making this in free time.
Just for fun.
# Commands
The following commands are currently ready:
* None
* OfMsg
* OfFuncEither
* OfFuncPerform
* OfTaskEither
* OfTaskPerform
# Usage
Just create class and inherintce BlazorishSimpleComponent, in generic parameters add your model and msg.
Write your model, like this
```csharp
public record Model(int Count);
```
And add your messages
```csharp
public abstract record Msg
{
public sealed record Increment : Msg;
public sealed record Decrement : Msg;
public sealed record Reset : Msg;
}
```
After that implement abstract methods: Update, Init and View.
```csharp
protected override Model Init() => new(0);
protected override Model Update(Model model, Msg msg) => msg switch
{
Msg.Increment => model with {Count = model.Count + 1},
Msg.Decrement => model with {Count = model.Count - 1},
_ => model with {Count = 0}
};
protected override Tag View(Model model) =>
div(
children(
h1(
content("Counter")
),
p(
content($"Current count: {model.Count}")
),
btn(
content("Increment"),
classes("btn btn-primary"),
onclick(_ => Dispatch(new Msg.Increment()))
),
btn(
content("Decrement"),
classes("btn btn-primary"),
onclick(_ => Dispatch(new Msg.Decrement()))
),
btn(
content("Reset"),
classes("btn btn-primary"),
onclick(_ => Dispatch(new Msg.Reset()))
)
)
);
```
Also add route attribute to your component
```csharp
[Route("/counter")]
public class CounterComponent : BlazorishSimpleComponent
```
Optional, add static using if you don't want write static class for dsl
```csharp
global using static Blazorish.Html.Tag;
global using static Blazorish.Html.Attr;
```
Congratulations! You create blazor component with MVU architecture.
Blazorish.Samples project has examples based on defaut blazor WASM template.