CC.CSX 0.1.11

CC.CSX

Links

• Repo Link

There are three packages packaged in this repo:

• CC.CSX providing the core functionality explained bellow in this document
• CC.CSX.Web useful extensions for using the core package in ASP.NET Core
• CC.CSX.Htmx collection of attribute methods for HTMX

About

CC.CSX provides the ability to define and generate, a HTML structure in a declarative fashion by just using pure C#.

The idea is to have strongly typed and readable structure, so the developer is be able to easily navigate and manipulate the final output. It is similar like JSX in the JS world, or even more similar to hiccup in clojure.

By using implicit operators there is no need to use new HtmlNode, or unnecessary quotes and brackets, so the layout is easily readable.

• Any attribute is a tuple of two strings (key and the value),

  • using static CC.CSX.HtmlAttributeKeys imports all the attribute keys existing in HTML

• Every HTML element has its defined method with the same name as the Element

  • using CC.CSX.HtmlElements imports all the methods that create HTML Elements.

Take a look at the following example:

Div((style, "background:silver;"),
  "Hello HTML",
  H1("Hello world"),
  Article((id, "article-1"),
    P("Some content here")))

You can also use the alternative flavor if you like it more. (Instead of using the import using static CC.CSX.HtmlAttributeKeys if you import using static CC.CSX.HtmlAttributes you will get the same html output with). In case there is some custom attribute the you want to use, just use a tuple pair ("hello", "attribute").

Div(style("background:silver;"),
  "Hello HTML",
  H1(("hello", "world"), 
    "Hello world"),
  Article(id("article-1"),
    P("Some content here")))

Finally, the result is following:

<div style="background:silver;">
  Hello HTML
  <h1 hello="world">
    Hello world
  </h1>
  <article id="article-1">
    <p>
      Some content here
    </p>
  </article>
</div>

How to use

Main usage would be as a Html Response builder.

For this you also need to install the CC.CSX.Web package from Nuget in order to have the ToResponse() extension available. You may also need the CC.CSX.Htmx package for additional Htmx related attributes if needed.

app.MapGet("/test", () => MainPage(
  Menu(
    A((hxGet, "https://codechem.com"), "Home"),
    A((href, "/about"), "About"),
    A((href, "/contact"), "Contact")),
  Article(
    H1("Hello, World!",
      hxGet($"/api/1/halicea/short-meeting/occupied/{DateTime.Now.ToString("yyyy-MM-dd")}"),
      hxSwap("outerHTML"),
      hxTarget("#results")),
    Button("Click me!",
      hxGet("/api/1/halicea/short-meeting/occupied/2021-10-10"),
      hxSwap("outerHTML"),
      hxTarget("#results")),
    P("Welcome to your new app."),
    Code(id("results")),
    P("This is a test of the new CC.CSX library."))).ToResult());

Because just by using pure methods, in the style of JSX. Future work will include optimizations and performance improvements.

Code: https://github.com/codechem/cc.csx

How it works

As you may have noticed, there is no type declaration anywhere, but that does not mean we are not using strong types. The strings, and tuples are being used in the example above, are converted to HtmlAttribute, and HtmlNode through implicit operators. But anyway, most of the Html elements and attributes are simple static methods that return HtmlNode or HtmlAttribute instances.

Contributions or ideas are welcome.

With 💚 from CodeChem