tatut/ripley

Making the counter work

eighttrigrams opened this issue · 2 comments

I tried for some time getting the counter to work. I have the following main.clj

(ns infinite-orange.main
  (:require [ripley.html :as h]
            [compojure.core :refer [routes GET]]
            [org.httpkit.server :as server]
            [ripley.live.context :as context]
            [ripley.live.atom :as atom]))

(def counter (atom 0))

(defn counter-app [counter]
  (h/html
   [:div
    "Counter value: " [::h/live {:source (atom/atom-source counter)
                                 :component #(h/out! (str %))}]
    [:button {:on-click #(swap! counter inc)} "increment"]
    [:button {:on-click #(swap! counter dec)} "decrement"]]))

(defn index []
  (h/html
   [:html
    [:head]
    [:body
     (h/live-client-script "/__ripley-live")
     (counter-app counter)]]))

(def app-routes
  (routes
   (GET "/" _req
        (h/render-response #(index)))
   (context/connection-handler "/__ripley-live")))

(defonce server (atom nil))

(defn- restart []
  (swap! server
         (fn [old-server]
           (when old-server (old-server))
           (println "(Re)starting server")
           (server/run-server app-routes {:port 3000}))))

(defn -main [& _args]
  (restart))

But I end up with the following

counter1

Replacing #(h/out! (str %)) with #(prn %) prints the correct count to the terminal however.
Is something missing in my example?

tatut commented

Good catch! The README example has always been broken it seems 😁

Added a new simple counter to the examples folder that has this minimal example.
The main point here is that every live component needs ad least 1 HTML element (that is what hosts the live id that Ripley uses internally, a simple text node is not enough).

Cool, thx