narma/app.cljs

## app.cljs
(ns rumissue1.core
  (:require [rum :include-macros true]))

(def errors (atom []))
(def errors-count (atom 0))

(defn error [msg]
  (swap! errors-count inc)
  (when (> (count @errors)
           12)
    (swap! errors subvec 1))
  (swap! errors conj msg))

(def guard (atom {}))

(def check-mixin
  {
  ;; this fixes the problem
  ; :transfer-state
  ; (fn [old new]
  ;   (assoc new ::listen-path (::listen-path old)))
   :did-mount
    (fn [state]
      (let [key         (rand)
            id          (:rum/id state)]
        (swap! guard assoc id key)
        (assoc state ::listen-path [id key])))
    :will-unmount
    (fn [state]
      (let [id  (:rum/id state)
            lp (::listen-path state)]
        (when (nil? lp)
          (error (str id " was lost!")))
        (swap! guard dissoc id)))
       })

;; widgets

(rum/defc widget < check-mixin rum/static [i]
  [:span (str i ".")])

(rum/defc w-errors < rum/reactive []
  [:div.error-wrapper
   (when (pos? (rum/react errors-count))
     [:h3 (str @errors-count " x (╯°□°）╯︵ ┻━┻")])
   (for [err (rum/react errors)]
    [:p err])])

(def data (atom []))
(def m (atom 5))

(def ok (constantly 20))
(defn fail []
  (int (rand 20)))

(rum/defc page < rum/reactive []
  [:div
   [:div#main.cont
    [:ul (when (even? (rum/react m))
           {:class "even"})
     (for [i (rum/react data)]
        [:li
          (widget i)])]]
   [:div#errors.cont
      (w-errors)]])

(defn update-data [n]
  (reset! data
          (into [] (for [i (range n)]
            (int (rand (+ i n)))))))


(defn render []
  (rum/mount (page) (.-body js/document)))
(render)

(defn tick []
  (update-data (ok))
  (reset! m (int (rand 100))) ;; generate errors too
  (js/setTimeout tick 500))
(tick)

## app.html
<!DOCTYPE html>
<html>
<head>
<style>
  ul li { list-style: none;}
  .cont {
    height: 100%;
    width: 49%;
  }
  #main {
    float: left;
  }
  #errors {
    float: right;
  }
</style>
<!--script src="http://fb.me/react-0.12.2.min.js"></script-->
<script src="http://fb.me/react-0.12.2.js"></script>
</head>
<body>
<script src="target-cljs/goog/base.js"></script>
<script src="app.js"></script>
<script>goog.require("rumissue1.core");</script>
</body>
</html>
	(ns rumissue1.core
	(:require [rum :include-macros true]))

	(def errors (atom []))
	(def errors-count (atom 0))

	(defn error [msg]
	(swap! errors-count inc)
	(when (> (count @errors)
	12)
	(swap! errors subvec 1))
	(swap! errors conj msg))

	(def guard (atom {}))

	(def check-mixin
	{
	;; this fixes the problem
	; :transfer-state
	; (fn [old new]
	; (assoc new ::listen-path (::listen-path old)))
	:did-mount
	(fn [state]
	(let [key (rand)
	id (:rum/id state)]
	(swap! guard assoc id key)
	(assoc state ::listen-path [id key])))
	:will-unmount
	(fn [state]
	(let [id (:rum/id state)
	lp (::listen-path state)]
	(when (nil? lp)
	(error (str id " was lost!")))
	(swap! guard dissoc id)))
	})

	;; widgets

	(rum/defc widget < check-mixin rum/static [i]
	[:span (str i ".")])

	(rum/defc w-errors < rum/reactive []
	[:div.error-wrapper
	(when (pos? (rum/react errors-count))
	[:h3 (str @errors-count " x (╯°□°）╯︵ ┻━┻")])
	(for [err (rum/react errors)]
	[:p err])])

	(def data (atom []))
	(def m (atom 5))

	(def ok (constantly 20))
	(defn fail []
	(int (rand 20)))

	(rum/defc page < rum/reactive []
	[:div
	[:div#main.cont
	[:ul (when (even? (rum/react m))
	{:class "even"})
	(for [i (rum/react data)]
	[:li
	(widget i)])]]
	[:div#errors.cont
	(w-errors)]])

	(defn update-data [n]
	(reset! data
	(into [] (for [i (range n)]
	(int (rand (+ i n)))))))


	(defn render []
	(rum/mount (page) (.-body js/document)))
	(render)

	(defn tick []
	(update-data (ok))
	(reset! m (int (rand 100))) ;; generate errors too
	(js/setTimeout tick 500))
	(tick)
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	ul li { list-style: none;}
	.cont {
	height: 100%;
	width: 49%;
	}
	#main {
	float: left;
	}
	#errors {
	float: right;
	}
	</style>
	<!--script src="http://fb.me/react-0.12.2.min.js"></script-->
	<script src="http://fb.me/react-0.12.2.js"></script>
	</head>
	<body>
	<script src="target-cljs/goog/base.js"></script>
	<script src="app.js"></script>
	<script>goog.require("rumissue1.core");</script>
	</body>
	</html>