Html Builder

[TimWhiting]

@kuchta Let's continue the HTML building discussion here, I'll copy some of the context. Would you be alright with deleting / editing selected parts of the other discussion to streamline it for when Daan takes a look at it?

The basic idea for everyone else who finds this discussion is finding a way to have a domain specific language DSL or nice syntax for building nested tree structures.

[TimWhiting]

kuchta:

I quite often think of koka as one of the best languages for the web, because it has compatible syntax that allow dashes in indentifiers. I image a future where I can write JSX like expressions in it. Writing html in a template languages (even tagged strings) never felt very pleasant to me and it would miss a lot of opportinities the React world already realized...

[TimWhiting]

Tim:
@kuchta Of course, I was thinking about string interpolation specific to this issue, not saying that AST is bad, but one heavily used use case for advanced string interpolation would be a server side renderer, and especially if you do not use the ast in any way and just plan to convert it to a string, it seems a bit wasteful.

Yes, your syntax with trailing lambdas would be a great way to be build an AST unfortunately we need #491. Currently named parameters have to come last, including after trailing lambdas (since they just get desugared I think to the last parameter). With the change in the PR you could make the trailing lambda be a positional argument. Alternatively we could adjust the desugarer to put trailing lambdas after all positional arguments, but before named ones.

[TimWhiting]

kuchta:

@TimWhiting Exactly and those advanced server-side renderers might want to have features like React Server Components (RCS) for which some form of (build-time) code transformation (compilation) would be probably needed anyway.

Aren't trailing lambdas always a positional argument, if as you say must come before named ones? But it then can't have a default value. That's unfortunatte...

[TimWhiting]

Tim:
@kuchta By the way #533 was just merged, and Daan is planning on releasing a new version of Koka soon, so you can add named arguments when using trailing lambdas.

[TimWhiting]

kuchta:

fun some-component(attr1="default", attr2="default" attr3="default", children={})
   div(attr1=att1, attr2=attr2)
      span(att3=att3)
          children()
      other-component()

I know this isn't pobably the best place to discuss this, but the the context is here, so why not. I've realized this syntax would probably not work, since it would only allow for one node per children. In the stated example div children would evaluate just to other-component, since span would be thrown away. So the children would have to evaluate to explicit list/array, but it would require using some delimiters anyway, like:

fun some-component(attr1="default", attr2="default" attr3="default", children={})
    [
    div(attr1=att1, attr2=attr2)
        [
        span(att3=att3)
            [
            children()
            ]
        , other-component()
        ]
    ]

Which is not so nice anymore... 😥

Even more so when I consider, that in such tree like structure, the most obvious/safe place where to put list separators is either on its own line or in front of the list item. Maybe another reason to make separators (comma) optional? 😊 At least in cases where items are separeted by newlines?

[TimWhiting]

I don't think that multiple children are an issue with the other syntax actually.

Though until Daan releases the update with trailing lambdas this won't work for you.

import std/core/undiv

struct component
  tag: string
  // child components or inner html
  children: either<list<component>, string>
  classes: list<string> = []

effect html-tree
  fun register-child(t: component): ()

fun html(build-tree: () -> <html-tree> ()): component
  var children := ctx _
  with handler 
    fun register-child(cdata)
      children := children ++ ctx Cons(cdata, _)
    return(x)
      Component("html", Left(children ++. Nil), [])
  build-tree()

fun nested/component(tag: string, classes: list<string> = [], build-tree: () -> <html-tree> ())
  var children := ctx _
  with override
     fun register-child(cdata)
        children := children ++ ctx Cons(cdata, _)
     return(x)
        register-child(Component(tag, Left(children ++. Nil), classes))
  build-tree()

fun component/show(c: component, indent: int = 0): string
  match c
    Component(tag, Left(children), classes) ->
      val child-indent = indent + 2
      val child-indentation = indentation(child-indent)
      "<" ++ tag ++ " class=\"" ++ classes.join(" ") ++ "\">\n" 
        ++ child-indentation ++
        children.map(
          fn(child) child.pretend-decreasing.show(indent = child-indent)
        ).join("\n" ++ child-indentation) ++ "\n" ++
      indent.indentation ++ "</" ++ tag ++ ">"
    Component(_, Right(inner)) -> inner

fun indentation(indent: int): string
  " ".repeat(indent)

fun component/div(build-tree: () -> <html-tree> (), classes: list<string> = []): <html-tree> ()
  nested/component("div", classes=classes, build-tree=build-tree)

fun component/br(): <html-tree> ()
  nested/component("br", classes=[], build-tree=fn() ())

fun component/text(s: string): <html-tree> ()
  register-child(Component("div", Right(s)))

fun component/span(build-tree: () -> <html-tree> (), classes: list<string> = []): <html-tree> ()
  nested/component("span", classes=classes, build-tree=build-tree)

fun other-component()
  text("Done!")

fun some-component()
  html
    div
      span(classes=["red"])
        text("Hello, World!")
      span(classes=["blue"])
        text("Goodbye, World!")
      other-component()

fun main()
  println(some-component().show)

Prints:

<html class="">
  <div class="">
    <span class="red">
      Hello, World!
    </span>
    <span class="blue">
      Goodbye, World!
    </span>
    Done!
  </div>
</html>

[kuchta]

@TimWhiting Thank you, Tim. Interesting... I wouldn't have thought of using effects to achieving that. Looking forward to play with it as soon as the new version is released. 🎉

[TimWhiting]

Might as well contribute to something the whole community can experiment and play around with, and since I had the skeleton here already, I cleaned it up and made a new repository here: https://github.com/koka-community/html.

If you aren't already a part of the unofficial community discord, see this #504.

[kuchta]

@TimWhiting Thanks, Tim. 🙏🏻

Some time ago I've come across ESX, which I've found quite interesting. It's based on JSX, but I think we can do better (or maybe not, we'll see 🙂)

https://es.discourse.group/t/proposal-esx-as-core-js-feature/1511
https://gist.github.com/WebReflection/2d64f34cf58daa812ec876242c91a97c
https://github.com/WebReflection/udomsay

[complyue]

Greetings!

To get myself familiar with latest Koka, I'm playing with the html repo, set to add templating support, however I can't figure out how it can be properly typed at:

https://github.com/complyue/html/blob/cf4dd28f0ab492d28a6ef270aeeb20006d39481f/html/layout.kk#L61-L69

pub fun layout-html(
  page : html-page<e>, 
  create-component : (() -> e component) -> e component
) : e component

  with val page-title = "?!?"

  with fun body-begin-scripts() {()}
  with fun body-content() {()}
  with fun body-end-scripts() {()}

/*
effects do not match
  inferred effect: $e
  expected effect: <body-end-scripts|_e1>
*/
  create-component
    html
      page-head(page)()
      page-body(page)()

Help pls!

FYI, a template-using example at: https://github.com/complyue/html/blob/cyue-play/examples/front.kk

---

I created a PR for better context:

koka-community/html#1

[complyue]

Used a type aliasing approach, now does it seem like a typing bug of Koka?

https://github.com/complyue/html/blob/cca192b0be4cb5a15e98c27d9f813908fb998219/html/layout.kk#L63-L71

pub alias html-tmpl = <
  page-title,
  body-begin-scripts,
  body-content,
  body-end-scripts
>

/*
effects do not match
  inferred effect: <body-begin-scripts,body-content,body-end-scripts,page-title|$e>
  expected effect: <html-tmpl,html-builder/html-tree|$e>
*/
  create-component
    html
      page-head(page)()
      page-body(page)()