Hi. Am trying to use https://github.com/ariutta/svg-pan-zoom in a reagent application. It works correctly, until I turn on optimizations. I have created an externs file including the library's sole function: function svgPanZoom() {};

The thing is, that function returns an object with methods to set callbacks

I tried setting those callbacks in the :component-did-mount lifecycle part, e.g. :

:component-did-mount
(fn []
(.setOnZoom @pan-zoom (fn [level]
                                                      (reset! zoom-level (cond (< level 4) "wide"
                                                                               (< level 10) "mid"
                                                                               :default "narrow"))))
;...

That is failiing with TypeError: (intermediate value).pk is not a function

Which makes me think, I have to export that inner anonymous function

(fn ^:export [level] ... does not work, though

any ideas?

@polymeris do you mind showing the rest of the component so i can try and replicate?

maybe I can't ^:export anonymous functions?

My first inclination would be to think there is something missing in the externs file. I haven't needed to export an inner anonymous function before, but first times for everything.

Uhm... I have very litte experience with externs (or with Javascript in general)

My externs file is just function svgPanZoom() {};

do I have to extern .setOnZoom and the other methods, too?

yeah

here is an example: https://github.com/reagent-project/reagent-cookbook/blob/426442dea91f33a6f2a91c39586767e33d68a7ad/recipes/bootstrap-datepicker/externs.js

Ok, thanks

Will give that a try

do you have an example of an externs file that specifies the methods of an object returned by another function?

hmm, these might be helpful: https://github.com/reagent-project/reagent-cookbook/blob/426442dea91f33a6f2a91c39586767e33d68a7ad/recipes/leaflet/externs.js https://github.com/reagent-project/reagent-cookbook/blob/426442dea91f33a6f2a91c39586767e33d68a7ad/recipes/google-maps/externs.js

in the leaflet example, for instance, there is an L.map object, with a setView function... but in my case I don't have a name for the object svgPanZoom(...) returns

so how can I tell the closure compiler what methods it will have?

Admittedly I'd be resorting to "try something and see if it works" which is definitely not helpful lol 😞 Hopefully someone else can chime in that is better at externs than I am

Yeah, that's exactly what I am doing 😁

am at my third thing

I tend to resort to looking thru cljsjs (for example https://github.com/cljsjs/packages/blob/master/chance/resources/cljsjs/common/chance.ext.js) and their respective libraries and blindly try to pattern match ...

I don't even grok the whole prototype thing -- am doing CLJS because I wanted to avoid JS 😛

im with you there lol

I can only offer this: https://github.com/clojure/clojurescript/wiki/Compiler-Options#pseudo-names

(I'm not sure if it has already been used?)

no, haven't used that yet

was thinking something like that would be useful

@mikethompson nice tip, haven't seen that before!

Combine it with https://github.com/clojure/clojurescript/wiki/Compiler-Options#pretty-print true

:pseudo-names true
:pretty-print true

That will help a lot

Yeah. there are a lot of options. Also will try setting :closure-warnings {:externs-validation :warning}, whatever that means

The two above will make it pretty clear, pretty fast, where your problem is

yeah, had an ohhh moment, as soon as I saw the pseudo-name in the warning

The :pretty-print will also help to contexualize the source of the exception (I assume you are getting an exception), which may add further information.

🎉 got it to work! thanks, @gadfly361 and @mikethompson

externs:

var svgPanZoom = function() {
    return {'getSizes': function() {
                            return {'x': 0,
                                    'y': 0,
                                    'viewBox': {'x': 0, 'y': 0, 'width': 0, 'height': 0},
                                    'realZoom': 0}
    }};
};

those compiler option tricks really helped a lot~

Excellent

onward

Hello, I have a question. I use goog.events to handle browser events. When I register a handler for the mouse_up event and change the state of an atom inside this handler, the components will not be rerendered immediately. In the repl I see that the value of the atom is already changed. Only when I do an interaction the view will be updated and the atom takes affect. Is it possible to force reagent to do a check of pending changes? In advance: reagent/flush do it not. Only reagent/force-update-all works, but the performance is horrible and not for production use. Any ideas?

@david_clojurian it's hard to tell. maybe you could provide a minimum example code?

@metametadata OK, I will create some example code. Give me some time please 🙂

a wild suggestion: try using (doall (for instead of (for

@david_clojurian or start with a simplest [:p (get @state :during)] component to check that your view tracks state changes on mouse moves. If it works then gradually enhance the code until the bug starts reproducing (this way you'll pinpoint the cause of the bug). If it doesn't work then the problem is not in the component code 🙂

also look in the browser console - maybe there are some warnings from React

@metametadata Thanks for the advices. I will try it, but today there is no time for it 🙂

@metametadata Thank you so much! The advice to put (doall before (for solves my problem.

Take a look how simple it is to embed editable reagent components in a blog post with #klipse https://twitter.com/viebel/status/815332417808531457

@viebel I am so excited for this!!

@gadfly361 I’m waiting for your (interactive) blog post 🙂

@viebel Sounds good to me! I'll try and get something out next month or so :)

Cool!

@viebel very cool stuff

It would be great to retrofit any good change you needed in Klipse to replumb, there is a PR open on custom eval that was abandoned but it was a good idea 👍