refactor: use hiccup instead of string concatenation in todomvc
Replace hand-built HTML strings with hiccup vectors rendered by a minimal hiccup→HTML converter (example/todomvc/pocketbook/hiccup.cljs). Supports CSS-style selectors (:div.class#id), attribute maps, void elements, and nested children.
This commit is contained in:
Florian Schroedl
68
example/todomvc/pocketbook/hiccup.cljs
Normal file
68
example/todomvc/pocketbook/hiccup.cljs
Normal file
@@ -0,0 +1,68 @@
|
||||
(ns pocketbook.hiccup
|
||||
"Minimal hiccup → HTML string renderer."
|
||||
(:require [clojure.string :as str]))
|
||||
|
||||
(def ^:private void-tags
|
||||
#{"area" "base" "br" "col" "embed" "hr" "img" "input"
|
||||
"link" "meta" "param" "source" "track" "wbr"})
|
||||
|
||||
(defn- esc [s]
|
||||
(-> (str s)
|
||||
(str/replace "&" "&")
|
||||
(str/replace "<" "<")
|
||||
(str/replace ">" ">")
|
||||
(str/replace "\"" """)))
|
||||
|
||||
(defn- render-attrs [m]
|
||||
(let [sb (js/Array.)]
|
||||
(doseq [[k v] m]
|
||||
(when (and (some? v) (not (false? v)))
|
||||
(.push sb " ")
|
||||
(.push sb (name k))
|
||||
(when-not (true? v)
|
||||
(.push sb "=\"")
|
||||
(.push sb (esc (str v)))
|
||||
(.push sb "\""))))
|
||||
(.join sb "")))
|
||||
|
||||
(defn- parse-tag
|
||||
"Parse :div.foo.bar#baz → [\"div\" \"foo bar\" \"baz\"]."
|
||||
[tag]
|
||||
(let [full (name tag)
|
||||
id (second (re-find #"#([^.#]+)" full))
|
||||
no-id (str/replace full #"#[^.#]+" "")
|
||||
parts (str/split no-id #"\.")
|
||||
tag-name (if (seq (first parts)) (first parts) "div")
|
||||
classes (str/join " " (rest parts))]
|
||||
[tag-name (when (seq classes) classes) id]))
|
||||
|
||||
(deftype RawHTML [s])
|
||||
|
||||
(defn raw
|
||||
"Wrap a string to be emitted without HTML escaping."
|
||||
[s]
|
||||
(RawHTML. s))
|
||||
|
||||
(defn html
|
||||
"Convert a hiccup form to an HTML string."
|
||||
[form]
|
||||
(cond
|
||||
(nil? form) ""
|
||||
(instance? RawHTML form) (.-s form)
|
||||
(string? form) (esc form)
|
||||
(number? form) (str form)
|
||||
(seq? form) (apply str (map html form))
|
||||
(vector? form)
|
||||
(let [[tag & rest] form
|
||||
[tag-name tag-classes tag-id] (parse-tag tag)
|
||||
[attrs children] (if (map? (first rest))
|
||||
[(first rest) (next rest)]
|
||||
[nil rest])
|
||||
attrs (cond-> (or attrs {})
|
||||
tag-id (assoc :id tag-id)
|
||||
tag-classes (update :class #(str tag-classes (when % (str " " %)))))
|
||||
inner (apply str (map html children))]
|
||||
(if (contains? void-tags tag-name)
|
||||
(str "<" tag-name (render-attrs attrs) " />")
|
||||
(str "<" tag-name (render-attrs attrs) ">" inner "</" tag-name ">")))
|
||||
:else (esc (str form))))
|
||||
@@ -2,6 +2,7 @@
|
||||
"TodoMVC built on Pocketbook — offline-first, synced, Clojure-native."
|
||||
(:require [pocketbook.core :as pb]
|
||||
[pocketbook.store.idb :as idb]
|
||||
[pocketbook.hiccup :refer [html]]
|
||||
[cljs.core.async :refer [go <!]]
|
||||
[clojure.string :as str]))
|
||||
|
||||
@@ -83,60 +84,51 @@
|
||||
;; Rendering
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defn- esc [s]
|
||||
(-> (str s)
|
||||
(str/replace "&" "&")
|
||||
(str/replace "<" "<")
|
||||
(str/replace ">" ">")
|
||||
(str/replace "\"" """)))
|
||||
|
||||
(defn- render-todo-item [[id doc]]
|
||||
(let [editing? (= id @!editing)
|
||||
classes (str (when (:completed doc) " completed")
|
||||
(when editing? " editing"))]
|
||||
(str "<li class=\"todo-item" classes "\" data-id=\"" (esc id) "\">"
|
||||
"<div class=\"view\">"
|
||||
"<button class=\"toggle\" data-action=\"toggle\" data-id=\"" (esc id) "\">"
|
||||
(if (:completed doc) "◉" "○")
|
||||
"</button>"
|
||||
"<label class=\"todo-label\" data-action=\"edit-start\" data-id=\"" (esc id) "\">"
|
||||
(esc (:text doc))
|
||||
"</label>"
|
||||
"<button class=\"destroy\" data-action=\"destroy\" data-id=\"" (esc id) "\">×</button>"
|
||||
"</div>"
|
||||
(let [editing? (= id @!editing)]
|
||||
[:li {:class (str "todo-item"
|
||||
(when (:completed doc) " completed")
|
||||
(when editing? " editing"))
|
||||
:data-id id}
|
||||
[:div.view
|
||||
[:button {:class "toggle" :data-action "toggle" :data-id id}
|
||||
(if (:completed doc) "◉" "○")]
|
||||
[:label {:class "todo-label" :data-action "edit-start" :data-id id}
|
||||
(:text doc)]
|
||||
[:button {:class "destroy" :data-action "destroy" :data-id id} "×"]]
|
||||
(when editing?
|
||||
(str "<input class=\"edit-input\" data-action=\"edit-input\" data-id=\"" (esc id) "\""
|
||||
" value=\"" (esc (:text doc)) "\" />"))
|
||||
"</li>")))
|
||||
[:input {:class "edit-input" :data-action "edit-input"
|
||||
:data-id id :value (:text doc)}])]))
|
||||
|
||||
(defn- filter-btn [label filter-kw current]
|
||||
[:button {:class (str "filter-btn" (when (= filter-kw current) " selected"))
|
||||
:data-action "filter" :data-filter (name filter-kw)}
|
||||
label])
|
||||
|
||||
(defn- render-footer [active-count total-count]
|
||||
(let [current @!filter]
|
||||
(str "<footer class=\"app-footer\">"
|
||||
"<span class=\"todo-count\">"
|
||||
"<strong>" active-count "</strong> "
|
||||
(if (= 1 active-count) "item" "items") " left"
|
||||
"</span>"
|
||||
"<nav class=\"filters\">"
|
||||
"<button class=\"filter-btn" (when (= :all current) " selected") "\" data-action=\"filter\" data-filter=\"all\">All</button>"
|
||||
"<button class=\"filter-btn" (when (= :active current) " selected") "\" data-action=\"filter\" data-filter=\"active\">Active</button>"
|
||||
"<button class=\"filter-btn" (when (= :completed current) " selected") "\" data-action=\"filter\" data-filter=\"completed\">Completed</button>"
|
||||
"</nav>"
|
||||
[:footer.app-footer
|
||||
[:span.todo-count [:strong active-count] " "
|
||||
(if (= 1 active-count) "item" "items") " left"]
|
||||
[:nav.filters
|
||||
(filter-btn "All" :all current)
|
||||
(filter-btn "Active" :active current)
|
||||
(filter-btn "Completed" :completed current)]
|
||||
(when (pos? (- total-count active-count))
|
||||
"<button class=\"clear-completed\" data-action=\"clear-completed\">Clear completed</button>")
|
||||
"</footer>")))
|
||||
[:button {:class "clear-completed" :data-action "clear-completed"}
|
||||
"Clear completed"])]))
|
||||
|
||||
(defn- render-sync-status []
|
||||
(let [pending (when @!todos (pb/pending-count @!todos))
|
||||
online? (.-onLine js/navigator)]
|
||||
(str "<div class=\"sync-bar\">"
|
||||
"<span class=\"sync-dot " (if online? "online" "offline") "\"></span>"
|
||||
"<span class=\"sync-text\">"
|
||||
[:div.sync-bar
|
||||
[:span {:class (str "sync-dot " (if online? "online" "offline"))}]
|
||||
[:span.sync-text
|
||||
(cond
|
||||
(not online?) "Offline — changes saved locally"
|
||||
(and pending (pos? pending)) (str "Syncing " pending " change" (when (> pending 1) "s") "…")
|
||||
:else "Synced")
|
||||
"</span>"
|
||||
"</div>")))
|
||||
(and pending (pos? pending)) (str "Syncing " pending " change"
|
||||
(when (> pending 1) "s") "…")
|
||||
:else "Synced")]]))
|
||||
|
||||
(defn- render! []
|
||||
(let [container (js/document.getElementById "app")
|
||||
@@ -145,23 +137,22 @@
|
||||
active (count (active-todos))]
|
||||
(when container
|
||||
(set! (.-innerHTML container)
|
||||
(str
|
||||
"<header class=\"app-header\">"
|
||||
"<h1>todos</h1>"
|
||||
"<div class=\"input-row\">"
|
||||
(html
|
||||
[:div
|
||||
[:header.app-header
|
||||
[:h1 "todos"]
|
||||
[:div.input-row
|
||||
(when (pos? total)
|
||||
(str "<button class=\"toggle-all" (when (all-completed?) " checked") "\" data-action=\"toggle-all\">❯</button>"))
|
||||
"<input id=\"new-todo\" class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus />"
|
||||
"</div>"
|
||||
"</header>"
|
||||
[:button {:class (str "toggle-all" (when (all-completed?) " checked"))
|
||||
:data-action "toggle-all"} "❯"])
|
||||
[:input {:id "new-todo" :class "new-todo"
|
||||
:placeholder "What needs to be done?" :autofocus true}]]]
|
||||
(when (pos? total)
|
||||
(str "<section class=\"main\">"
|
||||
"<ul class=\"todo-list\">"
|
||||
(apply str (map render-todo-item todos))
|
||||
"</ul>"
|
||||
"</section>"
|
||||
(render-footer active total)))
|
||||
(render-sync-status))))))
|
||||
[:section.main
|
||||
[:ul.todo-list
|
||||
(map render-todo-item todos)]
|
||||
(render-footer active total)])
|
||||
(render-sync-status)])))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Event delegation
|
||||
|
||||
Reference in New Issue
Block a user