html literals?

[borkdude]

Experiment in html branch. Works with this input in playground:

(require
  '["https://cdn.jsdelivr.net/npm/[email protected]/lit-html.js"
    :as lit])

(defn Ul []
  #html ^lit/html
  [:ul
   (mapv #(do #html ^lit/html [:li %])
     (shuffle (range 3)))])

(defn my-html
  []
  #html ^lit/html
  [:div "Hello"
   (Ul)])

(defn app-elt []
  (or
    (js/document.getElementById "app1")
    (doto (js/document.createElement "div")
      (set! -id "app1")
      (js/document.body.prepend))))

(lit/render (my-html) (app-elt))

#_(set! (.-innerHTML (app-elt)) my-html) 
(defn bar [ev]
  (js/console.log ev.target)
  (let [elt (js/document.getElementById "counter")
        v (-> elt .-innerHTML parse-long)
        v (inc v)]
    (set! elt -innerHTML v)))

(set! js/globalThis.bar bar)

(defn Foo []
  #html [:div
         [:div "Clicks: " [:span {:id "counter"} 0]]
         [:button {:onclick "bar(this)"}
          "Click me!"]
         (let [x "works"]
           #html [:div "Nesting " x "!"])])

(defn App [{:keys [name]}]
  #html [:div (str "Hello, " name)
         (Foo)])

#_(let [html (App {:name "Michiel Borkent"})
        elt (app-elt)]
    (set! elt.innerHTML html))

It could get annoying to have to write #html ^lit/html [....].

If users could write a macro to get rid of that boilerplate, e.g. (lit [:Ul ..]) this would be nice.
But then #html likely also has to be a macro instead of a reader tag (which is technically not impossible).

[borkdude]

One problem with HTML literals is nesting of sequences, e.g. ul + li.

Another approach is to just use functions as in Van.js:

https://squint-cljs.github.io/squint/?src=KHJlcXVpcmUgJ1siaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL3ZhbmpzLW9yZy92YW4vcHVibGljL3Zhbi0xLjIuNy5taW4uanMkZGVmYXVsdCIKICAgICAgICAgICA6YXMgdmFuXSkKCihkZWYgYnV0dG9uIHZhbi90YWdzLmJ1dHRvbikKKGRlZiBzcGFuIHZhbi90YWdzLnNwYW4pCgooZGVmbiBDb3VudGVyIFtdCiAgKGxldCBbY291bnRlciAodmFuL3N0YXRlIDApXQogICAgKHNwYW4gIlx1Mjc2NCIgY291bnRlciAiICIKICAgICAgKGJ1dHRvbiB7Om9uY2xpY2sgIyhzZXQhICguLXZhbCBjb3VudGVyKSAoZGVjICguLXZhbCBjb3VudGVyKSkpfQogICAgICAgICJcdWQ4M2RcdWRjNGUiKQogICAgICAoYnV0dG9uIHs6b25jbGljayAjKHNldCEgKC4tdmFsIGNvdW50ZXIpIChpbmMgKC4tdmFsIGNvdW50ZXIpKSl9CiAgICAgICAgIlx1ZDgzZFx1ZGM0ZCIpKSkpCgooZG9jdW1lbnQuYm9keS5wcmVwZW5kIChDb3VudGVyKSk%3D

[zampino]

some sketch of default tag

(ns test
  (:require [clojure.string :as str]))

(defn ->html [x]
  (prn :x x )
  (cond
    (string? x) x
    (seq? x)
    (str/join (map ->html x))
    :else
    (str x)))

(defn tag [[h & tail] & rest]
  (js/console.log :h h :tail tail)
  (str/join (cons h (interleave (mapv ->html rest)
                                tail))))

(defn out [x]
  #html ^tag
  [:ul {:class "bg-red-200"}
   "foo"
   (map (fn [_] #html ^tag [:li "item"])
        (range 3))

   "bla"
   x

   "end"])

[zampino]

It would also be nice to parse classes and ids out of the keyword (like hiccupish libraries do)

[:div#id.class-1.class-2]