https://github.com/nozzlegear/lackluster
Lackluster is an experiment in building a React-like HTML renderer in C#.
https://github.com/nozzlegear/lackluster
Last synced: 7 months ago
JSON representation
Lackluster is an experiment in building a React-like HTML renderer in C#.
- Host: GitHub
- URL: https://github.com/nozzlegear/lackluster
- Owner: nozzlegear
- License: mit
- Created: 2017-04-30T21:10:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T20:29:36.000Z (almost 3 years ago)
- Last Synced: 2025-01-16T13:16:57.963Z (9 months ago)
- Language: C#
- Size: 148 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lackluster
Lackluster is an experiment in building Electron apps with .NET, and using a React-like HTML renderer. The goal with Lackluster.React is to replace all HTML files in a simple static website (my blog) with Lackluster components.
Rather than working with Razor view files, React server-side rendering, or other view engines, I should be able to quickly set up Lackluster components and describe each page's markup with C#.
Like React, Lackluster components are reusable. For example, you could create `Navbar`, `Header` and `Footer` components to reuse throughout your website.
Right now Lackluster only supports static, server-side rendering. There are no plans (beyond perhaps my own curiousity) to build any sort of serious client-side framework that would interact with Lackluster in the same way that client-side React can interact with server-rendered React.
**This project is a work in progress**.
## Example
Documentation will be expanded on as Lackluster nears completion. For now, here's a quick example of composing a simple web page with Lackluster:
```cs
public class MainComponent : Component
{
public override async Task Render()
{
return (
Html()
.Id("My-Html-Document")
.ClassNames("html-1", "html-2", "test-class")
.Attributes(new Dictionary()
{
{"test", "test value"}
})
.Children(
Head(
Link("stylesheet", "https://nozzlegear.com/css/theme.css"),
Meta("robots", "index,follow")
),
Body().Id("document-body").Attribute("data-test", "test value").Children(
Section().ClassNames("test").Children(
Div(
P("I'm a paragraph.")
),
Div(
P("HTML text is escaped.")
),
Div(
new ChildComponent(),
P("I'm another paragraph!")
)
)
)
)
);
}
}
public class ChildComponent : Component
{
public override async Task Render()
{
return (
Div(
P(
"Hello world! This is the ChildComponent."
)
)
);
}
}
```
You can then render your `MainComponent` to static HTML:
```cs
MainComponent component = new MainComponent();
string html = await component.RenderToStaticHtml();
```
Which puts out the following HTML (formatted for readability):
```html
I'm a paragraph.
<a href="test">HTML text is escaped.</a>
Hello world! It's your boy the ChildComponent.
I'm another paragraph!
```
#### What's with the name?
The name Lackluster *could* be a cutting quip on the notion that this library could ever be compared to a more full-featured framework like React, Vue or even Razor. But in reality, it doesn't have any significant meaning. 🙃 I just needed something unique and I happen to like the way the word sounds.