Fork me on GitHub
#hoplon
<
2018-12-26
>
bobcalco12:12:05

@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.

bobcalco12:12:35

I also made sure all the dependencies were latest-version.

bobcalco12:12:54

build.boot:

bobcalco12:12:04

(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"})))

bobcalco12:12:37

boot.properties:

bobcalco12:12:46

#
BOOT_CLOJURE_VERSION=1.10.0
BOOT_VERSION=2.8.2

bobcalco12:12:15

src/pages/index.cljs:

bobcalco12:12:51

(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")))

bobcalco13:12:02

Running boot dev everything compiles, I get a pleasant 'ding' sound, and when I go to localhost:8000, I see what I expect.

bobcalco13:12:17

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.

bobcalco13:12:43

Making any change to the source causes the page not to reload so much as duplicate itself entirely.

bobcalco13:12:15

I changed "first thing" to "first thing first" and this is what happened

bobcalco13:12:41

Running chrom on mac os x mojave

bobcalco13:12:26

reloading the page, it looks ok, so this is strictly a reloading issue I suppose

bobcalco13:12:56

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.

bobcalco13:12:04

All I see for page source in the browser is:

bobcalco13:12:11

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><script type="text/javascript" src="index.html.js"></script></body></html>

bobcalco13:12:16

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.

flyboarder21:12:04

@bob592 reloading is broken in hoplon, try the latest 7.3.0-SNAPSHOT the fix is in master already

flyboarder21:12:10

behind the scenes boot is building and running everything from temp directories that it manages

bobcalco21:12:31

OK that's better 🙂

bobcalco21:12:48

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?

bobcalco21:12:09

I want to start introducing state from the back end next - but first basic navigation

flyboarder21:12:14

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