This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-07-20
Channels
- # aleph (4)
- # beginners (47)
- # boot (22)
- # cider (7)
- # clara (1)
- # cljs-dev (8)
- # cljsrn (21)
- # clojure (180)
- # clojure-argentina (13)
- # clojure-gamedev (1)
- # clojure-italy (5)
- # clojure-poland (4)
- # clojure-russia (17)
- # clojure-spec (19)
- # clojure-uk (33)
- # clojurescript (107)
- # cursive (61)
- # data-science (1)
- # datomic (7)
- # emacs (69)
- # euroclojure (1)
- # graphql (1)
- # hoplon (11)
- # immutant (43)
- # jobs (1)
- # leiningen (3)
- # off-topic (5)
- # om (10)
- # onyx (2)
- # parinfer (52)
- # pedestal (11)
- # re-frame (31)
- # reagent (23)
- # ring-swagger (3)
- # schema (2)
- # specter (7)
- # unrepl (9)
this is probably noob question, how do I simplify following construct:
[:div.my-list
(map (fn [i] [ui-item i]) ["foo" "bar" "zap"])]
Why simply doing:
[:div.my-list
(map ui-item ["foo" "bar" "zap"])]
Doesn't work?@ag as written, that should work. The only reason it wouldn't is because of the difference between ( ... )
and [ ... ]
calls in reagent. For example:
;; Option A (Fails)
(defn foo [i]
^{:key i}
[:div i])
(defn page []
(map foo (range 10)))
(reagent/render [page]
(.getElementById js/document "app"))
;; Option B (Works)
(defn foo [i]
^{:key i}
[:div i])
(defn page []
[:div ;; <-- wrapped in a div, which means page will return a reagent component instead of just a list
(map foo (range 10))])
(reagent/render [page]
(.getElementById js/document "app"))
so i would guess if your example isn't working, the problem is elsewhere, perhaps in ui-item
itself?
ui-item
looks like this:
(defn ui-text-input-field
[props]
(let [local-state (reagent/atom {})]
(fn [props]
[:label ,,,, ;etc])))
oh wait... it seems working.. hmmm. I guess I had problem somewhere else upd: turn out it didn't ;( so I couldn't solve it without wrapping it in a vector inside a fn
What are people using for enter/exit animations on elements? reanimated
? react-motion
?
We use react-flip-move
I can tell you: 1. react-flip-move is crazy easy to use 2. I haven't looked at the others (because of 1)
I’m just looking to have a side-menu slide in/out.. maybe react-transition-group
is enough
before I spend time on this; could anyone provide feedback on this template for reagent / electron projects? Thanks! https://github.com/karad/lein_template_descjop
I’m experimenting with cljs in a project generated by the martinklepsch/tenzing
template. I’ve added in reagent and reactstrap via gadfly361/baking-soda
.
My question is about workflow.
If I edit a component in emacs and save, then the boot pipeline recompiles and the browser reloads as expected.
But if I edit the component in a buffer and re-evaluate in the repl ( cider-eval-last-sexp
) there’s no reload, I imagine because boot-cljs has no idea anything changed.
It looks like I can force a re-render in the repl by evaluating (init)
in the namespace where the component is defined, which essentially does a (reagent/render-component [my-component] (.getElementById js/document "container"))
… Is that what people do?
Or is the typical practice just to save the buffer and let the build/reload machinery do the thing?
@gonewest818 I think it depends on how you prefer to work; I personally prefer to let the build/reload machinery do its thing
and you're right basically about boot not knowing that anything has changed; it watches files, and from its perspective, nothing has changed
even if you could hook it up to an editor's buffers somehow, I'm not sure that's a good idea
Gotcha. Is there a more subtle/sophisticated way to force a ‘redraw’ manually from the repl besides what I’m doing with reagent/render-component
?