On Wednesday, July 16, 2014 1:50:06 AM UTC+2, Ahmad Hammad wrote:
> This is pretty cool Zubair. Good job.
>
> I think the client-side debugger would be useful as a standalone library for
> those who don't want the full framework. How hard would it be to package that
> separately? I'd be happy to help do that.
>
> Keep it up.
>
> Ahmad Hammad
Hi Admad,
Glad you like it. Yes, the client-side library could be released as a
standalone library, although there are many dependencies, for instance Om is a
hard dependency so that the GUI state can be replayed. As far as all of the
Code that is shown to be called that is done via macros, so you could not just
add this to an existing ClojureScript application and then see the calls
history. This is because the way that the code is shown is via the Clojure
macros, so that if the code is compiled in debug mode then the code is saved to
a list, and then a shadow call is made to the real function. I probably am
explaining it in a really terrible, way, so I will have to write something more
details online about how this works, as I am still working on the
documentation. But something like this for the request form:
;------------------------------------------------------------
(defn-ui-component request-form [ui-data]
{:absolute-path [:ui :request]}
;------------------------------------------------------------
(div
nil
(div
nil
(om/build from-email-field (-> ui-data :from-email ))
(om/build to-email-field (-> ui-data :to-email ))
(dom/button #js {:onClick (fn [e]
(om/update! ui-data [:submit :value] true))
:style
#js {:margin-top "10px"}}
"Connect")
(if (not (blank?
(get-in ui-data [:submit :message])))
(div nil "Submitted")
))))
: call this macro:
(defmacro defn-ui-component [fn-name data-paramater-name opts & code ]
`(do
(webapp.framework.client.coreclient/record-defn-ui-component
(~'ns-coils-debug)
~(str `~fn-name) ~(str `~data-paramater-name)
(str ~(with-out-str (write (first `~code))
:dispatch clojure.pprint/code-dispatch))
)
(defn ~fn-name [~(first data-paramater-name) ~'owner]
(~'reify
~'om/IInitState
(~'init-state ~'[_]
{:debug-highlight false})
~'om/IRender
(~'render
[~'this]
~(if *show-code*
`(webapp.framework.client.coreclient/debug-react
~(str `~fn-name)
~'owner
~(first data-paramater-name)
(~'fn [~(first data-paramater-name)]
~@code))
(first code))
)))
(~'webapp.framework.client.coreclient/process-ui-component ~opts)
))
: which calls these functions:
(defn record-defn-ui-component [namespace-name fname args & code]
(let [
code-str
(str (apply str (map #(if (= "\n" %1) (str "\r\n") %1) code)))
]
;(.log js/console (str "NAMESPACE: " namespace-name))
;(.log js/console (str "NAMESPACE fname: " fname))
;(.log js/console (str "NAMESPACE orig code: " code))
;(.log js/console (str "NAMESPACE code: " code-str))
(reset!
webapp.framework.client.system-globals/debugger-ui
(assoc-in
(deref webapp.framework.client.system-globals/debugger-ui)
[:react-components-code (str fname)]
(xml-str (str
"(ns " namespace-name ")"
(char 13) (char 13)
"(defn-ui-component "
fname " "
args (char 13) (char 13)
code-str
""
)))
)
)
)
:and:
(defn debug-react [str-nm owner data react-fn]
(let
[
react-fn-name (str str-nm)
]
(do
;(log (str "render: " react-fn-name))
;(log (str " : " (pr-str data)))
(add-debug-event :event-type "render"
:component-name react-fn-name
:component-data data
)
(dom/div
#js {
:onMouseEnter #(if js/debug_live (om/set-state! owner
:debug-highlight true))
:onMouseLeave #(if js/debug_live (om/set-state! owner
:debug-highlight false))
:onClick component-clicked
:style (if js/debug_live
#js {:backgroundColor
(if
(om/get-state owner :debug-highlight)
(do
(if (not= (:mode @debugger-ui) "component")
(set-debug-component react-fn-name))
"lightGray")
(do
(if (not= (:mode @debugger-ui) "component")
(unset-debug-component react-fn-name))
"")
""
)
})
}
(react-fn data)
""))))
:and:
(defn process-ui-component [
{absolute-path :absolute-path}
]
(if absolute-path
(do
(touch absolute-path)))
)
: I hope I did not confuse you even more, but rest assured that there are alot
of macros involved, so if you want to consider contributing to this I hope you
have been through your "macro hell". I still get totally confused when I make
macros and I am still not sure if I understand them properly sometimes :)
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.
