Another templating system?

[geomagilles]

Hi,

the proposed templating model can be quite cumbersome, for example to produce this

<div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
  <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
      <div class="p-4">
        <div class="flex items-start">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-3 w-0 flex-1 pt-0.5">
            <p class="text-sm font-medium text-gray-900">Successfully saved!</p>
            <p class="mt-1 text-sm text-gray-500">Anyone with a link can now view this file.</p>
          </div>
          <div class="ml-4 flex flex-shrink-0">
            <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
              <span class="sr-only">Close</span>
              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I need to write something like this:

div()
          .classes(
              "pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6")
          .set("aria-live", "assertive")
          .new {
            div().classes("flex w-full flex-col items-center space-y-4 sm:items-end").new {
              div()
                  .classes(
                      show.map {
                        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" +
                            if (it) "" else " hidden"
                      })
                  .new {
                    div().classes("p-4").new {
                      div().classes("flex items-start").new {
                        div().classes("flex-shrink-0").new { notifOk() }
                        div().classes("ml-3 w-0 flex-1 pt-0.5").new {
                          p().classes("text-sm font-medium text-gray-900").text(title)
                          p().classes("mt-1 text-sm text-gray-500").new { content() }
                        }
                        div().classes("ml-4 flex flex-shrink-0").new {
                          button(type = ButtonType.button)
                              .let {
                                it.classes(
                                    "inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2")
                                it.on.click { show.value = false }
                              }
                              .new {
                                span().classes("sr-only").text("Close")
                                notifClose()
                              }
                        }
                      }
                    }
                  }
            }
          }

Would it be possible to use another templating engine, that do not require to rewrite the html string?

[geomagilles]

Note I started working on a parser function that does that:

private val notificationHtml =
            """
<div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
  <div class="p-4">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3 w-0 flex-1 pt-0.5">
        <p id="title" class="text-sm font-medium text-gray-900">Successfully saved!</p>
        <p id="content" class="mt-1 text-sm text-gray-500">Anyone with a <a href="https://google.com">link</a> can now view this file.</p>
      </div>
      <div class="ml-4 flex flex-shrink-0">
        <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
    """

fun ElementCreator<Element>.notification(
    show: KVar<Boolean>,
    title: String,
    content: ElementCreator<Element>.() -> Unit
) {

  parser(notificationHtml)
      .select("button") { on.click { show.value = false } }
      .select("#title") { innerHTML(title) }
      .select("#content") { new { content() } }
      .parse()
}

It builds automatically the element and apply modification to subpart targeted by the usual [selector-syntax}(https://jsoup.org/cookbook/extracting-data/selector-syntax)

[sanity]

Hi there.

If the HTML is "static" - ie. if Kweb isn't required to modify it then you can just do this like:

div().innerHtml("""<B>HTML goes here</B>""")

It does get more complicated to take advantage of Kweb's DOM modification and event mechanisms with this kind of pre-generated HTML because Kweb is only "aware" of HTML elements that it creates using the DSL.

It should be possible to "wire up" Element objects to HTML elements after the fact, although this isn't something I've played with and there may be complications.

While the Kweb DSL can get complicated, the ability to break it up using functions should allow developers to keep the code clean and avoid repetition.

However, as you point out - if you're translating some existing complex HTML into Kweb code it does get complicated.

Please let me know how you get along with your parser function.