Fork me on GitHub
#hoplon
<
2018-08-22
>
jjttjj14:08:02

For example the above library can add a la carte reactivity to a lightweight dom system like @onetom described above (or improved templating for hoplon proper?)

jjttjj14:08:18

(defn reconciliate! [old-el new-el]
  (r/apply (r/diff new-el old-el) old-el))

(defn tpl [f]
  (fn [& args]
    (let [e (apply f (map deref args))]
      (doseq [arg args]
        (add-watch arg (gensym)
                   (fn [k ref o new]
                     (->> (map #(if (= % ref) new (deref %)) args)
                          (apply f)
                          (reconciliate! e)))))
      e)))

jjttjj14:08:41

(`r/...` is an alias of reconcile.js)

jjttjj14:08:58

(def x (atom 0))
(def y (atom 100))
(def z (atom []))

(defn page3 []
  (div
    ((tpl
      (fn [x* y*] (div
                  (str "x is" x*)
                  (str "y is" y*)
                  )))
     x y)

    ((tpl (fn [z*] (div ;;required non-empty div due to bug in reconcile.js
                     (div (for [n z*] (div (str n "!"))))))) 

     z)
    (button {:onclick #(swap! x inc)} "click")
    (button {:onclick #(swap! y + 100)} "click2")
    (button {:onclick #(swap! z conj (rand))} "click3")))

jjttjj14:08:04

definitely can be polished i think, but this works and in my initial tests seems considerably more efficient than hoplon templating

onetom15:08:45

@jjttjj thanks for the example, i will think about it! my only concern with code which is using (add-watch) is how is it going to be reloadable, to make sure that there are no obsolete change handler functions are fired.

jjttjj15:08:29

good point, haven't considered that