Fork me on GitHub
#re-frame
<
2017-01-12
>
qqq05:01:26

http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/box <-- any time I have a hiccup component that is not a re-com component, am I supposed to put it in a box to ensure it does not screw up the flex-bolx layouting ?

mikethompson05:01:07

@qqq if you go creating your own :div and :span then you'll probably have to put the right flexbox attributes on it.

mikethompson05:01:32

Not so much if this :div or :span is a "leaf" in the DOM

mikethompson05:01:03

But you'll certainly need to add the flexbox attributes if this :div or :span is an intermediate level whcih will have re-com component children.

qqq05:01:51

okay; so if I build anything that contains re-com nodes as children, then I have to understand flexbox ?

mikethompson05:01:17

It depends, but probably.

mikethompson05:01:44

Either that or use hbox and vbox in the thing you build

qqq05:01:24

in hiccup, is there a nil/null/no-op elem? I want to do something like (if @blah [some eleem] null-here)

joshjones05:01:09

it would seem logically (to me, and thus may not be the correct approach) that the parent would need to check that condition and either include the child or not

mikethompson05:01:32

(when @blah [some element]) will work. nil is ignored in hiccup children

joshjones05:01:08

so @mikethompson , it is as if the child was not called at all then?

qqq05:01:28

@mikethompson : cooll; thanks!

mikethompson05:01:29

@joshjones Hmm. I can tell from the nature of your question that you should read the tutorials under "Reagent Tutorials" in here: https://github.com/Day8/re-frame/wiki

joshjones05:01:19

I already did 😞 lol

mikethompson05:01:19

But at a fast pace ... remember that a renderer just returns a datastructure.

mikethompson05:01:00

So this

(defn r 
    [bool]
    [:div  "Hello"  (when bool  "there")])

mikethompson05:01:37

Will return either: [:div "Hello" nil] or [:div "Hello" "there"]

mikethompson05:01:53

So ... if we make the render like this:

(defn r
   [bool]  
   [:div  (when bool  [some element]])
The returned hiccup will be either:

mikethompson05:01:14

[div [some element]]

mikethompson05:01:31

Does that answer your question ?

joshjones05:01:28

mostly -- but is [:div "abc" nil] equivalent to just [:div "abc"]?

mikethompson05:01:29

The key thing is that there is no "calling" of some as a result of the parent rendering. Just the placement (or not) of some into a datastrcuture

mikethompson05:01:43

Yes, hiccup will ignore nil children

joshjones05:01:20

ok, that addresses my confusion -- I read so many re-frame specific documentation today that i forgot all the basic reagent stuff lol -- thanks @mikethompson

qqq07:01:10

would the re-frame api be cleeaner if h-box and v-box took first arg as :children

mikethompson07:01:56

No, it would be worse :-)

mikethompson07:01:28

All the fiddly details like :width would be hidden away after potentially lots of children

qqq07:01:37

why? I never use h-box v-box w/p :children

qqq07:01:47

hmm, you actually want children to be last?

mikethompson07:01:15

Well, it is more that I want the style stuff to be close to the beginning

mikethompson07:01:30

Before we get lost in all the detail associated with children

qqq07:01:54

I find ` [v-box :children [ [ .... and

qqq07:01:04

and the children on a new line both to be rathe rugly

mikethompson07:01:38

The good news about named args is that you can arrange whatever way you want.

qqq07:01:38

I wonder if I can get away with (v-box css-class children)

qqq07:01:52

and stuff all the details into css

qqq07:01:03

I actually don't want to see anything besides the children

mikethompson08:01:22

All possible ... if that's the way you want it. We always try to bias our code towards the later-reader. And we like the style details clearly visible.

qqq11:01:00

I just dealt with the worst bug for the past hour

qqq11:01:06

what was my bug?

qqq11:01:11

I was using an atom instead of a reagent.core/atom

denisj13:01:28

Some nice re-frame mentions A deep dive into ClojureScript reagent - https://news.ycombinator.com/item?id=13373426

dobladez14:01:25

I have a small prototype I built months ago with cljs-react-material-ui and re-frame. I picked it up again and wanted to upgrade both to the latest versions... now I'm getting this on the JS console: Error: js/ReactDOM is missing ... that's from Reagent's render . Any ideas?

dobladez14:01:40

my dependencies on lein: [org.clojure/clojurescript "1.8.40"] [cljs-react-material-ui "0.2.35"] [reagent "0.6.0" :exclusions [cljsjs/react cljsjs/react-dom ]] [re-frame "0.9.1" :exclusions [cljsjs/react cljsjs/react-dom ]]

dobladez14:01:15

Went back to [cljs-react-material-ui "0.2.31"] for now. Thanks

hlolli15:01:15

I think it's enough to remove react from reagent, don't need to exclude react-dom.

dobladez17:01:55

@hlolli Thanks. I get a Circular dependency compilation error if I don't exclude react-dom

dobladez17:01:07

I think it has to do with cljs-react-material-ui

dobladez17:01:40

its documentation clearly states to exclude react-dom also... but then I get Error: js/ReactDOM is missing

qqq20:01:07

(if-atom [atm then else]
            (fn [_ _ _]
              (if <@U169ZE1J4> then else)))
what should this function be named?

qqq20:01:29

since it's in the gui namespaced I want to just name if "if", so I can do "gui/if" ... but I don't want to override if

qqq20:01:14

I have named it if-box and am happy with that name.

qqq20:01:51

In re-frame, labels become spans with class "rc-label". Now, if I overwrite that class with my own class (css styles I want it to use) -- will bad things happen via flexbox, or is this a safe op?

superstructor21:01:45

@dobladez we have this, which is working:

[org.clojure/clojurescript "1.9.293"]
                  [reagent "0.6.0" :exclusions [org.clojure/tools.reader
                                                cljsjs/react
                                                cljsjs/react-dom]]
                  [re-frame "0.9.1" :exclusions [reagent]]
                  [cljs-react-material-ui "0.2.35"]