html literals?

[borkdude]

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

(require
  '["https://cdn.jsdelivr.net/npm/lit-html@3.1.0/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).