Last active
November 24, 2021 14:53
-
-
Save narma/46a990def0e1c6f279a2 to your computer and use it in GitHub Desktop.
Rum example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4ad34ab5c845b5a338976530a6e6f1b64781332b****