Fork me on GitHub
#reagent
<
2018-03-23
>
rnandan27308:03:41

Is there a template using nodejs ( machchiato ) and re-frame that i can use? Or any suggestion to do this?

rnandan27308:03:55

or reagent and machchiato

borkdude10:03:25

Dear Reagent friends. I tried r/with-let thinking it would write the equivalent form-2 component for me as in this gist: https://gist.github.com/borkdude/8940696b87f22e40a4ccc402066fce68

borkdude10:03:57

But the form-2 component doesn’t print “MOUNT” every time I change the selection in the dropdown. The r/with-let one does, so that doesn’t work for me as re-inits the state every time. What’s the explanation?

borkdude10:03:44

for now I’ll revert to the form-2 component

caleb.macdonaldblack12:03:56

Any easy way to get reagent to use react 16? I really want custom attributes for a css library

caleb.macdonaldblack12:03:14

I’m not sure how to include that as a dependency in my project.clj though

juhoteperi12:03:52

Latest alpha is compatible, that branch just changes the default.

juhoteperi12:03:26

@caleb.macdonaldblack Just add those updated cljsjs deps to your own project.

gadfly36115:03:49

(defonce app-state
  (reagent/atom {:example1 {:counter 0}
                 :example2 {:counter 0}}))


;; will print every time you rerender
(defn example1 []
  (reagent/with-let [example1-cursor (reagent/cursor app-state [:example1])]
    (js/console.log "example1 is rendering")
    [:div
     [:button {:on-click #(swap! example1-cursor update :counter inc)}
      "Increment"]
     [:h1 (str "The current count is: " (:counter @example1-cursor))]
     ]))

;; will print once
(defn example2 []
  (reagent/with-let [example2-cursor (reagent/cursor app-state [:example2])
                     _ (js/console.log "example2 is rendering")]
    [:div
     [:button {:on-click #(swap! example2-cursor update :counter inc)}
      "Increment"]
     [:h1 (str "The current count is: " (:counter @example2-cursor))]
     ]))

(defn page [ratom]
  [:div
   [example1]
   [example2]
   ])

borkdude15:03:15

oh duh, of course!

jmckitrick18:03:11

@borkdude I’m looking for the a-ha moment… what was missing?

justinlee18:03:10

it’s where the log statement is

justinlee18:03:26

the let bindings form only runs once, but the let body runs each time

justinlee18:03:51

that’s with-let’s trick

justinlee18:03:16

actually it’s probably worth putting into the docs because it’s a very succinct explanation

👍 8
justinlee18:03:37

i learned most of reagent’s oddities by sticking print statements in various portions of components

pesterhazy18:03:00

I learned most of what I know about programming by sticking print statements in various pieces of code

jmckitrick20:03:15

oh ok, I see

mikethompson21:03:03

@pesterhazy We have now entered the post-println world (warning, some hyperbole). re-frame-10x now has form level trace of your lisp. (about to be released). End of advertisement.

justinlee21:03:49

@mikethompson you mean like a debugger?

mikethompson21:03:52

Remember LightTable? Better than that. (WIP)

mikethompson21:03:03

So not so much a debugger, although useful for debugging

justinlee21:03:15

i actually don’t know what lighttable is

gadfly36121:03:41

Form level trace .. so excited!! parrot

justinlee21:03:30

you’re really going to make me learn the difference between an inteceptor and an coeffect arn’t you 🙂

😜 8
mikethompson21:03:04

The medicine is good :-)

🤒 4
pesterhazy22:03:55

I’m at the edge of my seat @mikethompson

mikethompson22:03:29

My hyperbole is working !!!

justinlee22:03:21

you keep using words I don’t understand!

mikethompson22:03:59

google for define: hyperbole. Click the speaker button to hear it said, because the pronunciation will not be what you think :-)

justinlee22:03:17

“hyi por bow LAY” who knew

beetleman23:03:00

@pesterhazy with source map you can use Chrome's DebugTools: (js* "debugger;")

jmckitrick23:03:36

@mikethompson ever heard of Plato? Aristotle? Socrates? Morons....