Bug fix for nil attribute value, reintroduced reactive ID - I realize it is needed, started work on units namespace. Still not using diff'ing - the performance (even with a few tweaks is not great).
This commit is contained in:
parent
0e7134a5d7
commit
f716685577
3 changed files with 101 additions and 26 deletions
|
@ -8,7 +8,7 @@
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script src="js/compiled/out/goog/base.js" type="text/javascript"></script>
|
<script src="js/compiled/out/goog/base.js" type="text/javascript"></script>
|
||||||
<script src="js/compiled/app.js" type="text/javascript"></script>
|
<script src="js/compiled/app.js" type="text/javascript"></script>
|
||||||
<!--<script type="text/javascript">goog.require("freactive.dom_perf");</script>-->
|
<script type="text/javascript">goog.require("freactive.dom_perf");</script>
|
||||||
<script type="text/javascript">goog.require("freactive.items_view_test");</script>
|
<!--<script type="text/javascript">goog.require("freactive.items_view_test");</script>-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -261,7 +261,7 @@
|
||||||
|
|
||||||
(defn- bind-style-prop! [element attr-name attr-value node-state]
|
(defn- bind-style-prop! [element attr-name attr-value node-state]
|
||||||
(let [setter (fn [v]
|
(let [setter (fn [v]
|
||||||
(println "setting style" element attr-name v)
|
;(println "setting style" element attr-name v)
|
||||||
(set-style-prop! element attr-name v))]
|
(set-style-prop! element attr-name v))]
|
||||||
(if (satisfies? cljs.core/IDeref attr-value)
|
(if (satisfies? cljs.core/IDeref attr-value)
|
||||||
(bind-attr* setter element "style" attr-name attr-value node-state)
|
(bind-attr* setter element "style" attr-name attr-value node-state)
|
||||||
|
@ -331,9 +331,11 @@
|
||||||
(fn [attr-value]
|
(fn [attr-value]
|
||||||
(.setAttribute
|
(.setAttribute
|
||||||
element attr-name
|
element attr-name
|
||||||
(if (.-substring attr-value)
|
(if attr-value
|
||||||
attr-value
|
(if (.-substring attr-value)
|
||||||
(.toString attr-value))))))
|
attr-value
|
||||||
|
(.toString attr-value))
|
||||||
|
"")))))
|
||||||
|
|
||||||
(defn- bind-attr! [element attr-name attr-value node-state]
|
(defn- bind-attr! [element attr-name attr-value node-state]
|
||||||
(let [attr-name (name attr-name)]
|
(let [attr-name (name attr-name)]
|
||||||
|
@ -541,7 +543,8 @@
|
||||||
|
|
||||||
(defn- try-diff [parent vdom cur-dom-node top-level]
|
(defn- try-diff [parent vdom cur-dom-node top-level]
|
||||||
(let [cur-vdom (get-virtual-dom cur-dom-node)
|
(let [cur-vdom (get-virtual-dom cur-dom-node)
|
||||||
vdom (normalize-virtual-element vdom)]
|
;;vdom (normalize-virtual-element vdom)
|
||||||
|
]
|
||||||
(if (keyword-identical? (first vdom) (first cur-vdom))
|
(if (keyword-identical? (first vdom) (first cur-vdom))
|
||||||
(let [old-attrs? (second cur-vdom)
|
(let [old-attrs? (second cur-vdom)
|
||||||
new-attrs? (second vdom)
|
new-attrs? (second vdom)
|
||||||
|
@ -643,12 +646,12 @@
|
||||||
|
|
||||||
;; Reactive Element Handling
|
;; Reactive Element Handling
|
||||||
|
|
||||||
;(def ^:private auto-reactive-id 0)
|
(def ^:private auto-reactive-id 0)
|
||||||
;
|
|
||||||
;(defn- new-reactive-id []
|
(defn- new-reactive-id []
|
||||||
; (let [id auto-reactive-id]
|
(let [id auto-reactive-id]
|
||||||
; (set! auto-reactive-id (inc auto-reactive-id))
|
(set! auto-reactive-id (inc auto-reactive-id))
|
||||||
; (str "-r." id)))
|
(str "-r." id)))
|
||||||
|
|
||||||
(deftype ReactiveElement [id parent cur-element dirty updating disposed animate invalidate]
|
(deftype ReactiveElement [id parent cur-element dirty updating disposed animate invalidate]
|
||||||
IRemove
|
IRemove
|
||||||
|
@ -659,9 +662,10 @@
|
||||||
(when-let [parent-state (get-element-state parent)]
|
(when-let [parent-state (get-element-state parent)]
|
||||||
(unregister-from-parent-state parent-state id))))
|
(unregister-from-parent-state parent-state id))))
|
||||||
|
|
||||||
(defn- bind-child [parent child-ref before]
|
(defn- bind-child* [parent child-ref before insert-child* replace-child* remove*]
|
||||||
(if-let [[add-watch* remove-watch*] (r/get-add-remove-watch* child-ref)]
|
(if-let [[add-watch* remove-watch*] (r/get-add-remove-watch* child-ref)]
|
||||||
(let [state (ReactiveElement. nil parent nil false false false nil nil)
|
(let [id (new-reactive-id)
|
||||||
|
state (ReactiveElement. id parent nil false false false nil nil)
|
||||||
|
|
||||||
get-new-elem (fn []
|
get-new-elem (fn []
|
||||||
(set! (.-dirty state) false)
|
(set! (.-dirty state) false)
|
||||||
|
@ -671,8 +675,8 @@
|
||||||
show-new-elem (fn [new-elem cur]
|
show-new-elem (fn [new-elem cur]
|
||||||
(let [new-node
|
(let [new-node
|
||||||
(if cur
|
(if cur
|
||||||
(replace-child parent new-elem cur true)
|
(replace-child* parent new-elem cur true)
|
||||||
(append-or-insert-child parent new-elem before))]
|
(insert-child* parent new-elem before))]
|
||||||
(set! (.-cur-element state) new-node)
|
(set! (.-cur-element state) new-node)
|
||||||
(set! (.-updating state) false)
|
(set! (.-updating state) false)
|
||||||
(when (.-dirty state)
|
(when (.-dirty state)
|
||||||
|
@ -694,7 +698,7 @@
|
||||||
(fn []
|
(fn []
|
||||||
(if (.-disposed state)
|
(if (.-disposed state)
|
||||||
(do
|
(do
|
||||||
(remove-dom-node cur)
|
(remove* cur)
|
||||||
(set! (.-updating cur) false))
|
(set! (.-updating cur) false))
|
||||||
(let [new-elem (if (.-dirty state)
|
(let [new-elem (if (.-dirty state)
|
||||||
(get-new-elem)
|
(get-new-elem)
|
||||||
|
@ -718,21 +722,18 @@
|
||||||
(when-let [binding-disposed (get (meta child-ref) :binding-disposed)]
|
(when-let [binding-disposed (get (meta child-ref) :binding-disposed)]
|
||||||
(set! (.-disposed-callback state) binding-disposed))
|
(set! (.-disposed-callback state) binding-disposed))
|
||||||
(when-let [parent-state (get-element-state parent)]
|
(when-let [parent-state (get-element-state parent)]
|
||||||
(register-with-parent-state parent-state "-reactive" state))
|
(register-with-parent-state parent-state (str "-reactive" id) state))
|
||||||
(when-let [binding-initialized (get (meta child-ref)
|
(when-let [binding-initialized (get (meta child-ref)
|
||||||
:binding-initialized)]
|
:binding-initialized)]
|
||||||
(binding-initialized))
|
(binding-initialized))
|
||||||
(set! (.-updating state) false)
|
(set! (.-updating state) false)
|
||||||
;(let [new-node (append-or-insert-child parent (get-new-elem) before)]
|
|
||||||
; (set! (.-cur-element state) new-node)
|
|
||||||
; (when-let [node-mounted (get-transition new-node :node-attached)]
|
|
||||||
; (node-mounted new-node))
|
|
||||||
; (when (.-dirty state)
|
|
||||||
; (queue-animation (.-animate state))))
|
|
||||||
(show-new-elem (get-new-elem) nil)
|
(show-new-elem (get-new-elem) nil)
|
||||||
state)
|
state)
|
||||||
(mount-element parent @child-ref before)))
|
(mount-element parent @child-ref before)))
|
||||||
|
|
||||||
|
(defn bind-child [parent child before]
|
||||||
|
(bind-child* parent child before append-or-insert-child replace-child remove-dom-node))
|
||||||
|
|
||||||
;; Building Elements
|
;; Building Elements
|
||||||
|
|
||||||
(defn insert-child! [parent child before]
|
(defn insert-child! [parent child before]
|
||||||
|
@ -756,7 +757,7 @@
|
||||||
|
|
||||||
(defn build-element [elem-spec]
|
(defn build-element [elem-spec]
|
||||||
(let [virtual-dom (get-virtual-dom elem-spec)]
|
(let [virtual-dom (get-virtual-dom elem-spec)]
|
||||||
(println virtual-dom)
|
;(println virtual-dom)
|
||||||
(cond
|
(cond
|
||||||
(string? virtual-dom)
|
(string? virtual-dom)
|
||||||
(.createTextNode js/document virtual-dom)
|
(.createTextNode js/document virtual-dom)
|
||||||
|
|
74
src/clojure/freactive/units.cljs
Normal file
74
src/clojure/freactive/units.cljs
Normal file
|
@ -0,0 +1,74 @@
|
||||||
|
(ns freactive.units)
|
||||||
|
|
||||||
|
(defprotocol IUnit
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-get-writer [this])
|
||||||
|
(-cur-value [this]))
|
||||||
|
|
||||||
|
(deftype Pixel [x]
|
||||||
|
Object
|
||||||
|
(toString [_] (str x "px"))
|
||||||
|
|
||||||
|
IUnit
|
||||||
|
(-get-writer [_] (fn [y] (str y "px")))
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-cur-value [_] x))
|
||||||
|
|
||||||
|
(defn px [x] (Pixel. x))
|
||||||
|
|
||||||
|
(deftype Translate [x y]
|
||||||
|
Object
|
||||||
|
(toString [_] (str "translate(" x "px," y "px"))
|
||||||
|
|
||||||
|
IUnit
|
||||||
|
(-get-writer [_] (fn [v] (str "translate(" (aget v 0) "px," (aget v 1) "px")))
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-cur-value [_] #js [x y]))
|
||||||
|
|
||||||
|
(defn translate [x y] (Translate. x y))
|
||||||
|
|
||||||
|
|
||||||
|
(deftype Scale [x]
|
||||||
|
Object
|
||||||
|
(toString [_] (str "scale(" x ")"))
|
||||||
|
|
||||||
|
IUnit
|
||||||
|
(-get-writer [_] (fn [y] (str "scale(" y ")")))
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-cur-value [_] x))
|
||||||
|
|
||||||
|
(defn scale [x] (Scale. x))
|
||||||
|
|
||||||
|
(deftype Rotate [x]
|
||||||
|
Object
|
||||||
|
(toString [_] (str "rotate(" x "deg)"))
|
||||||
|
|
||||||
|
IUnit
|
||||||
|
(-get-writer [_] (fn [y] (str "rotate(" y "deg)")))
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-cur-value [_] x))
|
||||||
|
|
||||||
|
(defn rotate [x] (Rotate. x))
|
||||||
|
|
||||||
|
;(defn transform [])
|
||||||
|
|
||||||
|
(deftype SVGTranslateX [x]
|
||||||
|
Object
|
||||||
|
(toString [_] (str "translate(" x ")"))
|
||||||
|
|
||||||
|
IUnit
|
||||||
|
(-get-writer [_] (fn [x] (str "translate(" x ")")))
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-cur-value [_] x))
|
||||||
|
|
||||||
|
(deftype SVGTranslate [x y]
|
||||||
|
Object
|
||||||
|
(toString [_] (str "translate(" x "," y ")"))
|
||||||
|
|
||||||
|
IUnit
|
||||||
|
(-get-writer [_] (fn [v] (str "translate(" (aget v 0) "," (aget v 1) "")))
|
||||||
|
(-read-value [this cur-value-str])
|
||||||
|
(-cur-value [_] #js [x y]))
|
||||||
|
|
||||||
|
(defn svg-translate
|
||||||
|
|
Loading…
Reference in a new issue