Fork me on GitHub
#reagent
<
2017-12-04
>
Ivan Fedorov01:12:54

@qqq for a reason I don't know yet similar configuration lein new reagent produces single module, whilst mine inferred from lein new chestnut produces a set of modules. With :optimizations :advanced it becomes a single module, but the error seems to persist, just with mangled names.

qqq01:12:46

I think there's two separate issues. I'm not sure either is reagent related.

qqq01:12:04

opt-none produces many *.js files, as reloading works withI believe one js file per cljs file

qqq01:12:30

mangling errors are probably due to https://github.com/cljsjs/packages/wiki/Creating-Externs ... you have to properly setup externs if you don't want the closure compiler to rename everyhing to aa ab ac ad ...

Ivan Fedorov01:12:07

I tried opt-advanced only to see if it will fly with a single module.

Ivan Fedorov01:12:47

react_dom is written here reagent.dom.global$module$react_dom = goog.global.ReactDOM; but expected here reagent.dom.node$module$react_dom.render.call

Ivan Fedorov01:12:36

So I tend to blame my cljs build conf, which I don't even fully understand, i.e. why it produces a set of modules instead of one. And seemingly the same conf in reagent template produces single module.

qqq01:12:13

can you try optimizations :simple or :whitespace ?

qqq01:12:27

one of those might give you single module w/o name mangling

Ivan Fedorov12:12:42

Tried simple, yes, it gives a single module, with the same issue and strange looking export reagent.dom.global$module$react_dom = goog.global.ReactDOM; reagent.dom.node$module$react_dom.render.call Also gives error on cljs compilation now @qqq

joshkh12:12:49

is there a well accepted method for binding and unbinding the same partialed function used by event handlers in different parts of a component's lifecycle? partialing the function in both component-did-mount and component-will-unmount returns two different functions, of course, so unbinding the second doesn't unbind the first. my solution is to store the function in a local atom but it feels dirty...

(defn hook-resize [this]
  (js/console.log "Test" (-> this
                             (r/dom-node)
                             js/$
                             (ocall :find ".grid-container")
                             width-and-height)))

(defn grid-container []
  (let [resize-fn (r/atom nil)]
    (r/create-class
      {:component-did-mount (fn [this]
                              (-> js/window
                                  (ocall :addEventListener "resize" (reset! resize-fn (partial hook-resize this)))))
       :component-will-unmount (fn [this]
                                 (-> js/window
                                     (ocall :removeEventListener "resize" @resize-fn)))
       :reagent-render (fn []
                         [:div.grid-container
                          [:h1 "Zoop zoop"]])})))

pcj20:12:23

Is there a simple way to manage react ^{:key} changes in a dynamic list e.g. my data changes from [:a :b :c] to [:a :c :b]? The top style is determined based on the vector index and the key is based on the value. From my observation, it looks like once a key is used it searches for a duplicate and removes it if it's there. This makes the css transition I have for the :c element work but not for the :b element.