Clojurians Log v2
hoplon
@flyboarder So with some modifications after generation, mainly to convert index.cljs.hl to pages/index.cljs using the ns form, I got the boot hoplon template working.
I also made sure all the dependencies were latest-version.
build.boot:
(set-env!
:dependencies '[[adzerk/boot-cljs "2.1.5"]
[adzerk/boot-reload "0.6.0"]
[hoplon/hoplon "7.2.0"]
[org.clojure/clojure "1.10.0"]
[org.clojure/clojurescript "1.10.439"]
[tailrecursion/boot-jetty "0.1.3"]]
:source-paths #{"src"}
:asset-paths #{"assets"})
(require
'[adzerk.boot-cljs :refer [cljs]]
'[adzerk.boot-reload :refer [reload]]
'[hoplon.boot-hoplon :refer [hoplon prerender]]
'[tailrecursion.boot-jetty :refer [serve]])
(deftask dev
"Build testhoplon for local development."
[]
(comp
(watch)
(speak)
(hoplon)
(reload)
(cljs)
(serve :port 8000)))
(deftask prod
"Build testhoplon for production deployment."
[]
(comp
(hoplon)
(cljs :optimizations :advanced)
(target :dir #{"target"})))
boot.properties:
#<https://github.com/boot-clj/boot>
BOOT_CLOJURE_VERSION=1.10.0
BOOT_VERSION=2.8.2
src/pages/index.cljs:
(ns ^{:hoplon/page "index.html"} pages.index
(:require [hoplon.core :as h :refer [div ul li link html head title body h1 span p button text]]
[javelin.core :as j :refer [cell cell=]]
[hoplon.jquery]))
(defn my-list [& items]
(div
:class "my-list"
(apply ul (map #(li (div :class "my-list-item" %)) items))))
(def clicks (cell 0))
(html
(head
(title "Example page")
(link :href "app.css" :rel "stylesheet" :type "text/css"))
(body
(h1 "Hello, Hoplon!")
(my-list
(span "first thing")
(span "second thing"))
(p (text "You've clicked ~{clicks} times, so far."))
(button :click #(swap! clicks inc) "click me")))
Running boot dev everything compiles, I get a pleasant 'ding' sound, and when I go to localhost:8000, I see what I expect.
I can't seem to upload the screenshot without upgrading to a paid plan, but let's just say, it works. I can click the button and see how many times I clicked it.
However
Making any change to the source causes the page not to reload so much as duplicate itself entirely.
I changed "first thing" to "first thing first" and this is what happened
Running chrom on mac os x mojave
reloading the page, it looks ok, so this is strictly a reloading issue I suppose
What I would like to understand is what exactly is happening behind the scenes. I gather it's generating the artifacts to some temp folder somewhere, because they don't appear in the working directory anywhere. I want to understand what happens when you define multiple pages, so I'll be experimenting with that next; but in the meantime, it would be good if we got reloading working correctly.
All I see for page source in the browser is:
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><script type="text/javascript" src="index.html.js"></script></body></html>
So presumably if I defined pages.admin.index in pages/admin/index.cljs it would do a post-back to load that page at that relative route? Or does it collaborate with jetty to manage routes and avoid that? Anyway... at least I got something working I can experiment with.
@bob592 reloading is broken in hoplon, try the latest 7.3.0-SNAPSHOT the fix is in master already
OK
behind the scenes boot is building and running everything from temp directories that it manages
OK that's better 🙂
OK so given my new happy state with the files as above, what is the process to begin to introduce logical pages using bidi or whatever for routing?
I want to start introducing state from the back end next - but first basic navigation
right so since hoplon is for single page apps, the best way to manage “pages” is to make them load on-demand, so we use template macros for that
https://github.com/hoplon/hoplon/wiki/Dynamic-DOM-manipulation-aka-Template-Macros