]" html)
64 |
65 | ;; Check for multiple roots
66 | multiple-roots (has-multiple-roots? html)
67 |
68 | ;; For multiple root elements, wrap in a container
69 | parse-html (if multiple-roots
70 | (str "" html "
")
71 | html)
72 |
73 | dom-parser (js/DOMParser.)
74 | doc (.parseFromString dom-parser parse-html "text/html")]
75 |
76 | (letfn [(element->hiccup [el]
77 | (if (= (.-nodeType el) 3) ; Text node
78 | (let [text (normalize-whitespace (.-textContent el))]
79 | (when-not (str/blank? text)
80 | text))
81 |
82 | (when (= (.-nodeType el) 1) ; Element node
83 | (let [tag-name (str/lower-case (.-tagName el))
84 | is-wrapper (and multiple-roots
85 | (= tag-name "div")
86 | (= (.-id el) "multiple-roots-wrapper"))
87 | skip-tag (or
88 | (and (= tag-name "html") (not has-html-tag))
89 | (and (= tag-name "body") (not has-body-tag))
90 | (and (= tag-name "head") (not has-head-tag)))
91 | tag-kw (str ":" tag-name)
92 | attrs (when (.-attributes el)
93 | (let [attrs-map {}]
94 | (loop [i 0
95 | result attrs-map]
96 | (if (< i (.-length (.-attributes el)))
97 | (let [attr (aget (.-attributes el) i)
98 | name (str ":" (.-name attr))
99 | value (.-value attr)]
100 | (recur (inc i) (assoc result name value)))
101 | (when (> (count result) 0)
102 | result)))))
103 | children (js-array->clj-vec (.-childNodes el))
104 | child-hiccups (filter identity (map element->hiccup children))]
105 |
106 | (cond
107 | ;; If this is our multiple roots wrapper, return children with special marker
108 | is-wrapper
109 | (into ["__multiple_roots__"] child-hiccups)
110 |
111 | ;; If we're skipping this tag, just return its children directly
112 | skip-tag
113 | (if (empty? child-hiccups)
114 | nil
115 | (if (= (count child-hiccups) 1)
116 | (first child-hiccups)
117 | child-hiccups))
118 |
119 | ;; Otherwise return the normal hiccup form
120 | :else
121 | (if attrs
122 | (into [tag-kw attrs] child-hiccups)
123 | (into [tag-kw] child-hiccups)))))))]
124 |
125 | ;; Process the document and extract the actual content
126 | (let [raw-result (element->hiccup (.-documentElement doc))]
127 | (js/console.log "Multiple roots:" multiple-roots)
128 |
129 | ;; Check if we have multiple roots that need to be wrapped in a list
130 | (cond
131 | ;; If we have multiple roots, wrap children in a list
132 | (and multiple-roots
133 | (vector? raw-result)
134 | (= (first raw-result) "__multiple_roots__"))
135 | (into ["list"] (rest raw-result))
136 |
137 | ;; If we have a single root but got the special marker, just return the first child
138 | (and (not multiple-roots)
139 | (vector? raw-result)
140 | (= (first raw-result) "__multiple_roots__")
141 | (> (count raw-result) 1))
142 | (second raw-result)
143 |
144 | ;; If we got a single hiccup vector, return it
145 | (and (vector? raw-result)
146 | (string? (first raw-result))
147 | (str/starts-with? (first raw-result) ":"))
148 | raw-result
149 |
150 | ;; If we got a collection, find the first real element
151 | (vector? raw-result)
152 | (loop [items raw-result]
153 | (cond
154 | (empty? items) nil
155 | (and (vector? (first items))
156 | (not (empty? (first items)))
157 | (string? (first (first items)))
158 | (str/starts-with? (first (first items)) ":"))
159 | (first items)
160 | :else
161 | (recur (rest items))))
162 |
163 | ;; Otherwise just return what we got
164 | :else raw-result)))))
165 |
166 | (defn pretty-print-hiccup [hiccup]
167 | (let [indent-level (atom 0)
168 | result (atom "")]
169 |
170 | (letfn [(indent []
171 | (apply str (repeat (* 2 @indent-level) " ")))
172 |
173 | (append! [s]
174 | (swap! result str s))
175 |
176 | (pp-map [m]
177 | (append! "{")
178 | (let [entries (js/Object.entries m)
179 | len (.-length entries)]
180 | (loop [i 0]
181 | (when (< i len)
182 | (let [entry (aget entries i)
183 | k (aget entry 0)
184 | v (aget entry 1)]
185 | (append! k)
186 | (append! " ")
187 | (append! (pr-str v))
188 | ;; Add space instead of comma between entries
189 | (when (< (inc i) len)
190 | (append! " ")))
191 | (recur (inc i)))))
192 | (append! "}"))
193 |
194 | (pp [form]
195 | (cond
196 | (and (vector? form) (= (first form) "list"))
197 | (do
198 | (append! "(list")
199 | (swap! indent-level inc)
200 | (doseq [child (rest form)]
201 | (append! "\n")
202 | (append! (indent))
203 | (pp child))
204 | (swap! indent-level dec)
205 | (append! ")"))
206 |
207 | (vector? form)
208 | (do
209 | (append! "[")
210 | (when-let [tag (first form)]
211 | (append! tag)
212 | (when (and (> (count form) 1) (map? (second form)))
213 | (append! " ")
214 | (pp-map (second form))))
215 | (when (> (count form) (if (map? (second form)) 2 1))
216 | (swap! indent-level inc)
217 | (doseq [child (drop (if (map? (second form)) 2 1) form)]
218 | (append! "\n")
219 | (append! (indent))
220 | (pp child))
221 | (swap! indent-level dec))
222 | (append! "]"))
223 |
224 | (map? form)
225 | (pp-map form)
226 |
227 | :else (append! (pr-str form))))]
228 |
229 | (pp hiccup)
230 | @result)))
231 |
232 | (defn translate [event]
233 | (let [html-input (.. event -target -value)
234 | result-el (get-element-by-id "result-output")]
235 | (when (and html-input (not (str/blank? html-input)))
236 | (try
237 | (let [hiccup (simple-html->hiccup html-input)
238 | pretty-hiccup (pretty-print-hiccup hiccup)]
239 | ;; Clear the result element
240 | (set! (.-innerHTML result-el) "")
241 | (.setAttribute result-el "data-count" (count hiccup))
242 | ;; Create pre and code elements
243 | (let [pre-el (js/document.createElement "pre")
244 | code-el (js/document.createElement "code")]
245 |
246 | ;; Add classes to elements
247 | (.add (.-classList pre-el) "whitespace-pre-wrap")
248 |
249 | ;; Add Tailwind classes for compact text
250 | (.add (.-classList code-el) "text-xs")
251 | (.add (.-classList code-el) "leading-tight")
252 | (.add (.-classList code-el) "font-mono")
253 | (.add (.-classList code-el) "language-clojure") ;; Add language class for Prism
254 |
255 | ;; Set the hiccup content
256 | (set! (.-textContent code-el) pretty-hiccup)
257 |
258 | ;; Append elements
259 | (.appendChild pre-el code-el)
260 | (.appendChild result-el pre-el)
261 |
262 | ;; Apply syntax highlighting
263 | (when (and js/window.Prism js/window.Prism.highlightElement)
264 | (js/window.Prism.highlightElement code-el))))
265 | (catch js/Error e
266 | (set! (.-innerHTML result-el)
267 | (str "Error parsing HTML: "
268 | (.-message e)
269 | "
")))))
270 |
271 | (js/console.log "Translation complete")))
272 |
273 | (defn toggle-convert-button []
274 | (let [textarea (get-element-by-id "html-input")
275 | convert-button (get-element-by-id "convert-button")]
276 | (if (and textarea (not (str/blank? (.-value textarea))))
277 | (.remove (.-classList convert-button) "hidden")
278 | (.add (.-classList convert-button) "hidden"))))
279 |
280 | (defn copy-to-clipboard []
281 | (let [result-el (get-element-by-id "result-output")
282 | copy-button (get-element-by-id "copy-button")
283 | code-el (when result-el (.querySelector result-el "code"))]
284 | (when (and code-el copy-button)
285 | (let [text-content (.-textContent code-el)
286 | temp-textarea (js/document.createElement "textarea")]
287 | (set! (.-value temp-textarea) text-content)
288 | (set! (.-style temp-textarea) "position: absolute; left: -9999px;")
289 | (.appendChild js/document.body temp-textarea)
290 | (.select temp-textarea)
291 | (js/document.execCommand "copy")
292 | (.removeChild js/document.body temp-textarea)
293 |
294 | ;; Show success feedback
295 | (let [icon-elements (.querySelectorAll copy-button "svg")]
296 | (when (and (> (.-length icon-elements) 0) (> (.-length icon-elements) 1))
297 | (.add (.-classList (aget icon-elements 0)) "hidden")
298 | (.remove (.-classList (aget icon-elements 1)) "hidden")
299 | (js/setTimeout (fn []
300 | (.remove (.-classList (aget icon-elements 0)) "hidden")
301 | (.add (.-classList (aget icon-elements 1)) "hidden"))
302 | 1500)))))))
303 |
304 | (defn init []
305 | (let [textarea (get-element-by-id "html-input")
306 | convert-button (get-element-by-id "convert-button")
307 | copy-button (get-element-by-id "copy-button")]
308 | (when (and textarea convert-button copy-button)
309 | (.addEventListener textarea "input" (fn [_] (toggle-convert-button)))
310 | (.addEventListener textarea "blur" translate)
311 | (.addEventListener convert-button "click" translate)
312 | (.addEventListener copy-button "click" (fn [_] (copy-to-clipboard))))))
313 |
314 | (init)
315 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @plugin "daisyui" {
3 | themes: winter --default, sunset --prefersdark;
4 | }
5 |
6 | @theme {
7 | --font-sans: InterVariable, sans-serif;
8 | }
9 |
10 | [data-count="0"] + #copy-button {
11 | display: none;
12 | }
13 |
--------------------------------------------------------------------------------
/vite.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import tailwindcss from '@tailwindcss/vite';
3 |
4 | export default defineConfig({
5 | plugins: [
6 | tailwindcss()
7 | ],
8 | build: {
9 | outDir: 'dist',
10 | emptyOutDir: false,
11 | manifest: true,
12 | rollupOptions: {
13 | input: ['src/app.css', 'dist/app.js']
14 | },
15 | },
16 | });
17 |
--------------------------------------------------------------------------------