forked from cjohansen/dumdom
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dev.cljs
116 lines (92 loc) · 3.66 KB
/
dev.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
(ns dumdom.dev
(:require [dumdom.core :as dumdom :refer [defcomponent]]
[dumdom.dom :as d]
[snabbdom :as snabbdom]))
(enable-console-print!)
(def app (js/document.getElementById "app"))
(defonce store (atom {:things [{:text "Thing 1"
:id :t1}
{:text "Thing 2"
:id :t2}
{:text "Thing 3"
:id :t3}]}))
(defn mark-active [things id]
(mapv #(assoc % :active? (= (:id %) id)) things))
(defcomponent Thing
:keyfn :id
[{:keys [id idx active? text]}]
[:div {:style {:cursor "pointer"}
:key (name id)
:onClick (fn [e]
(swap! store update :things mark-active id))}
(if active?
[:strong text]
text)])
(defcomponent App [data]
[:div
[:h1 "HELLO"]
(map Thing (:things data))])
(defn render [state]
(dumdom/render (App state) app))
(add-watch store :render (fn [_ _ _ state]
(println "Render" state)
(render state)))
(render @store)
(def patch (snabbdom/init #js [snabbdom/styleModule]))
(comment
(swap! store assoc :things [])
(swap! store assoc :things [{:text "Thing 1"
:id :t1}
{:text "Thing 2"
:id :t2}
{:text "Thing 3"
:id :t3}])
(swap! store assoc :things [{:text "Thing 1"
:id :t1}
{:text "Thing 2"
:id :t2}
{:text "Thing 3"
:id :t3}
{:text "Thing 4"
:id :t4}
{:text "Thing 5"
:id :t5}])
(require '[quiescent.core :as q]
'[quiescent.dom :as qd])
(dumdom/render [:div {}
nil
[:div "Dumdom"]] app)
(dumdom/render [:div {}
[:div {:style {:opacity 0.3 :transition "opacity 500ms"}} "Hello"]
[:div "Dumdom"]] app)
(dumdom/render [:div {}
[:div {:style {:opacity 0.7 :transition "opacity 500ms"}} "Hello"]
[:div "Dumdom"]] app)
(def qel (js/document.createElement "div"))
(js/document.body.appendChild qel)
(q/render (qd/div {}
nil
(qd/div {} "Quiescent")) qel)
(q/render (qd/div {}
(qd/div {:style {:opacity 0.3 :transition "opacity 500ms"}}
"Hello!")
(qd/div {} "Quiescent")) qel)
(def el (js/document.createElement "div"))
(js/document.body.appendChild el)
(js/console.log #js {:style #js {:opacity 0.3 :transition "opacity 500ms"}})
(def vdom (patch el (snabbdom/h "!" #js {} "nil")))
(def vdom (patch vdom (snabbdom/h "div" #js {} #js ["OK"])))
(def vdom (patch el (snabbdom/vnode "" #js {} #js [])))
(def vdom (patch vdom (snabbdom/h "div" #js {} #js ["OK"])))
(def vdom (patch el (snabbdom/h "div" #js {} #js [(snabbdom/h "div" #js {} #js ["Hello from snabbdom"])])))
(def vdom (patch vdom (snabbdom/h
"div"
#js {}
#js [(snabbdom/h
"div"
#js {:style #js {:opacity 0.3 :transition "opacity 500ms"}}
#js ["Hello from snabbdom"])])))
(set! (.-innerHTML el) "Yo yoyo")
(set! (.. el -style -transition) "opacity 0.5s")
(set! (.. el -style -opacity) "0.3")
)