Fork me on GitHub

FYI: Adding re-frame-trace to my project adds this warning to the initial build:

WARNING: Protocol IFn implements method -invoke with variadic signature (&) at line 61 /home/kenny/.boot/cache/tmp/home/kenny/ui-frontend/8zs/-yzsmxk/ui.out/mranderson047/reagent/v0v6v0/reagent/impl/util.cljs


I've noticed that, what version of reagent do you use?


I think we need to update it to 0.7.0 or later


We use 0.7.0. Excluding reagent from the re-frame-trace dep doesn't help either.


Yeah it's a source bundled version, I'll get a fix out soon, either today or tomorrow


Hi, If I dispatch a reg-event-db/reg-event-fx event that will result exactly the same db value as before, what will re-frame do exactly? Will reg-sub functions run? If so, (it must returns the same value as before)will react lifecycle functions (update, render) run? Thanks!


@cmal depends on what you mean by exactly the same db value as before


Do you mean the prior db and he new db test identical? to each other? Or do you means they only test = to each other?


If identical? then re-frame won't even put a new value into app-db, which, in turn, means that no subs will run (because app-db was not perturbed in any way` If = then the new value will be put into app-db and all layer 2 subscriptions will run (which should be designed to be trivial). And that will be an end to the propogations because the values extracted will all test = to previous values.


I just wrote this explanation for re-frame-trace which is kinda related, sorta. It may help:


Thank you very much, @mikethompson, that is exactly what I want to know.


Hi, I also have a question about the todomvc example: The second function in reg-sub :todos takes THREE parameter but the second function in reg-sub :visible-todos takes TWO parameter. Where does the query-v go in the second function of :visible-todos?


@cmal if you’re talking about

;; Computation Function
  (fn [[todos showing] _]   ;; that 1st parameter is a 2-vector of values
    (let [filter-fn (case showing
the _ is query-v


@danielcompton Is it matter that the function is defined as (fn [[todos showing] _] ... instead of (fn [[todos showing] _ _]...? I found in Line 82 (fn [sorted-todos query-v _] (vals sorted-todos)) it has three parameters. I am not sure, does cljs support variable parameter numbers, or is this a feature provided by re-frame? Sorry have I describe the question clearly?


I'll do that now, thanks


re-frame-trace, is it in the same space as re-frisk ?


mhh looks nice i wonder how they compare... will have to try that i guess =)


@mikethompson Hi, mike. If I have some raw js object in db, can I make layer 3 subscriptions not update when db values are equal? It seems = cannot compare raw js objects. cljs.user=> (= #js {:a 1} #js {:a 1}) ;;=>false


If there are (mutable) js objects in app-db, then ... I dunno what will happen


sorry for that, it seems there are also functions in db (= (fn []) (fn [])) ;;=> false


We store echarts options in db, those options have functions in their object.


It seems we should change our db design.


Thanks, mike!


What is the general advice to deal with JS libraries that offer their own data management? E.g. I'm integrating Bokeh and re-frame. Bokeh has its own models that can talk to a server, and these models can store a significant amount of data efficiently. This data can be changed often (and the models notify anyone interested about it), so I don't want to use js->clj for all the data - just for the data that I need. Would something like storing an update counter in app-db for each Bokeh model help?


@kenny re-frame-trace 0.1.16-20180125.112049-1 is out with your fixes


@carkh I'd say they're broadly in the same space of debugging/inspecting/profiling tools for re-frame


@danielcompton i'll be sure to check it out. competition is good =D


just chiming in to thank the re-frame crew for re-frame-trace. Just added it to my project and it's really awesome.


Hi, I [recom/v-box :children [(map-indexed (fn[]) data)]] and i'm getting the warning Warning: Every element in a seq should have a unique


with divs I use (into [:div] (map-indexed...)


How can I solve this? Adding ^{:key i} does not work


@tomaas Where do you add it? Also, don't use an element's index as a key - there's plenty written about its shortcomings.


I add on map-index argument - (fn [] ^{:key i} [comp])


Is comp some function, or is it a keyword like :div>a?


it's whatever component or plain html structure


I use ids instead of indexes, I pasted just an example


Can you show the complete code that uses map-indexed?


oh, i think I see what im doing wrong. Should pass :children: (vec (map-indexed....))


as it receives [[comp1][comp2]] in this from


vec causes lazy seq materialization, which removes the need for :key. Are you sure that (:id item) returns unique :id each time?


Ah, I see that you wrapped map-indexed in another vector. You can just pass (map-indexed ...) to :children. With unique :keys it should work without warnings.


Hi , how to make this to work - works on Firefox only. I suppose it should need to have a callback on onChange, but I cannot reffere "this" on the outer Hiccup tag :thinking_face: `(defn phone-chooser [] [:select (map (fn [phone] [:option {:on-click (fn [e] (re-frame/dispatch [:switch-phone phone]))} (:phone-name phone)]) devices)])`


@faxa I think it's better to use :select's :on-change


Also, if you really, really need to have access to the element inside some callback, you can use refs:


@p-himik how would you use :selects's :on-change ? this is what I try to achieve... In particular how to pass the the selected data into callback?



  {:on-change #(js/console.log "Changed" (.. % -target -value))}
  (for [[id label] {1 "one", 2 "two", 3 "three"}]
    ^{:key id} [:option {:value id}


@p-himik thank you! You are tremendous! 🙂


Anyone come up with a standardized way to prevent double clicking a button? Thinking now to make button a component with local state that changes on click, and resets itself with a setTimout. Still doesn't seem right though.


Hey all, I'm having an issue wrapping my head around how i would show a loading bar or something while a computation layer subscription is running.


I have a large data-set and a filter with a subscription listening to both. I want to show a loading bar while the filtering is happening.


@stvnmllr2 I am not familiar with re-frame (yet!) but the canonical solution is to disable the button until the action is sent/confirmed/done


disable may mean to actually disable it, or make it disappear and show a spinner, etc


ie, give feedback that something is happening behind the scenes


Thanks @ivan.kanak_clojurians, Yeah, just wondering specifics of what others have done. My state var would change and disable the button while it's running.


I also have a loading div like @kkruit needs. Basically, i send an event that sets a var in appdb, and then my loading div component is subscribed to that, so when "showLoading" entry is true, the div is visible. Then when request is don, I set entry in db back to false.


I guess maybe i should do the "computation" as a coeffect instead of a computation...


I have problems to make the repl (and cider) work properly using the reframe template from

(defproject [...]
:plugins [[lein-environ "1.0.2"]
[lein-cljsbuild "1.1.5"]
[lein-shell "0.4.0"]
[cider/cider-nrepl "0.16.0"]
[lein-asset-minifier "0.2.7" :exclusions [org.clojure/clojure]]]
:figwheel {:http-server-root "public"
:server-port 3449
:nrepl-port 7002
:nrepl-middleware ["cemerick.piggieback/wrap-cljs-repl"]
:css-dirs ["resources/public/css"]
:ring-handler ui-app.handler/app}
when trying to run a repl:
$ lein repl
#error {
:cause Unable to resolve symbol: wrap-file-info in this context
[{:type clojure.lang.Compiler$CompilerException
:message java.lang.RuntimeException: Unable to resolve symbol: wrap-file-info in this context, compiling:(ui_app/repl.clj:19:7)
:at [clojure.lang.Compiler analyze 6792]}
{:type java.lang.RuntimeException
:message Unable to resolve symbol: wrap-file-info in this context
:at [clojure.lang.Util runtimeException 221]}]
[[clojure.lang.Util runtimeException 221]
[clojure.lang.Compiler resolveIn 7299]
What am I doing wrong? (Or rather, how can I make cider work?)


@kurt-o-sys are you sure you're using re-frame-template .. i see a bunch of deps that the template doesn't include. I'd recommend starting fresh with lein new re-frame foo +cider


ok... let me try.


still having issues, will check again tomorrow...


(defn todo
  [{:keys [id]}]
  (let [{:keys [todo/label]} @(rf/subscribe [:todo-by-id id])]
    [:div label]))
(defn app
  (let [{:keys [user/name
                user/todo-ids]} @(rf/subscribe [:current-user])]
     [:p name]
     (for [id todo-ids]
       [todo {:id id}])]))
(defn todo
  [{:keys [todo/label]}]
  [:div label])
(defn app
  (let [{:keys [user/name
                user/todos]} @(rf/subscribe [:current-user])]
     [:p name]
     (for [td todos]
       [todo td])]))
I know, both works. But one of these can be considered better then the other? By your experience, on larger apps, one of these fit's better then the other?


@U2J4FRT2T I think there are tradeoffs in those two approaches. In the first approach, I think that the todo component is potentially less reusable. In some cases that is fine. However, since it directly embeds its subs, that may specialize it somewhat to a certain subs when others could want to use it for different data sources (probably doesn’t make a lot of sense in the “todo example”, but thinking more generally).


One potential advantage I see to this approach though is that it frees up app from needing to have any understanding of what data details todo needs to know about the todos


The id just conveys which one to build in context to, whatever todo needs to do.


Also, it is possible that if the object for td was harder slow to compare with =, then the rendering may be slower if you pass the entire object td to todo rather than just an id. id is faster to compare and may be a benefit for the Reagent change-detection used for re-rendering components.


In the second approach, I think the tradeoffs are just the reverse of what I’ve already said.


So, probably I will have both in a larger app, and it's not a problem, right? There is some other "solution" to this "problem"?


when you would like to filter todos, how would you do in the first approach?


@U0NK6SBJ5 You could return nil from todo right?


@U2J4FRT2T it is a pretty small example. I don’t know that I see the particular problem you are wanting to address.


I think both sorts of cases come up for me at least though.