Hi everyone! Not sure if this is the right place to post this, but hopefully someone else has bumped into a similar problem. I’m starting a new project now, it’s a Maps app. I started with reagent, but I’ve already lost 2 hours trying to import the latest version (2.0.1) of react-leaflet with no success 😢 I went the :npm-deps route and also tried by including it directly using a <script> tag. It seems to be something that needs to be solved with externs but also tried that with no success. I was digging into react-leaflet and they have a strange (at least for me) of loading Any tip on what to do or where to look?

What version of react-leaflet and what version of reagent are you using. Also, could you provide a snippet of what the error in the console looks like

hi guys

i'm trying to use react-slick https://github.com/akiran/react-slick

that's what i have tried to do but i got errors

what do you think guys about what i miss?

or even how can i debug this more?

Hi, I was wondering if anyone knows why the following doesn't work (apologies I have had to type this on my phone)

(def foo
  (with-meta
    (fn [bar]
      [:div bar])
    {:component-did-mount
     (fn [this]
       (let [props (reagent/props this)]
         (js/console.log "props are nil" props)))}))

However I can get the props as

(fn [this]
  (let [props (rest (.. this -props -argv))]
    ...))

If I use reagent/create-class then reagent/props works as expected inside the lifecycle fns

Just a bit surprised!

Using metadata to express lifecycle methods is an antipattern and deprecated-ish, so I'd just go with create-class

@oliy ^^

@pesterhazy can you please check my error/

https://github.com/akiran/react-slick/blob/master/examples/SimpleSlider.js

Thanks @pesterhazy wasn't really aware of that

what are common react input validations you guys use within your apps?

How can I use r/with-let and r/track to call setInterval when the desired interval time changes? E.g.

(defn game-container [!state !tick-interval]
  (r/with-let [_ (js/window.addEventListener "keydown" handle-keys!)
               tick! #(if (and (not @!dead?) (not @!paused?))
                        (swap! !state next-state))
               interval (js/setInterval tick! @!tick-interval)]
              [world-view @!state]
              (finally
                (prn "clearing interval" (:tick-interval @!state))
                (js/clearInterval interval)
                (js/window.removeEventListener "keydown" handle-keys!))))

@abdullahibra recently using https://github.com/funcool/struct

@petrus, the code is a bit confusing, you're doing multiple things at once

probably best not to (ab)use reactions for side-effects

@petrus > Mounting this container does not re-mount the component when !tick-interval changes. ^ this is right and that’s as expected. if you want to force a re-mount when things change, you can pass give the component a key equal to !tick-interval which will force a remount

mount/unmount and update are distinct events in reagent/react

i’m not sure i understand the question

Instead of ^{:key @!interval} [world-view some-state] (which works beautifully!), can I set :key from inside world-view?

nope

by the way, there is another paradigm for this kind of code where you need to use a component to cause a side effect but don’t want to render anything: you can just cause the side effect in the render function itself (but you’ll have to do a check to see if the new value is different)

this is used in things like sound controls where you are interacting with the sound ui of the dom

[world-view {:key 123} some-state] is my preferred way of setting the react key

the key thing works but it is kind of clunky

yeah it's hacky as hell to rely on key to force rerenders

components lifecycle methods are not there for controlling state; they're escape hatches for perf optimization

I'd write an (defn init []) function that gets the timers (and other resources) started

init gets called once on startup

game state gets updated in the timer callbacks, not in the components. For all this "controller" part of the app cares, the game board might as well not even be rendered at all

anyway that's how I would structure it </rant>

context: exploring serializing some data types is there a way to rebind the private pr-atom function that RAtom IPrintWithWriter uses? cheers!

or should i just overwrite the IPrintWithWriter implementation?

@petrus the basic thing you have to come to grips with is that react components do not remount when their props change (by design). so the with-let isn’t going to work because with-let is a clojurey way of attaching code to the component’s constructor and to its componentWillUnmount lifecycle method. what you need to do instead is deal with changing props either in the render method or by using a form-3 component and dealing with it in componentDidMount and in componentWillUpdate

the key thing I mentioned is an exception: if you change the key your force a remount

i don’t really think that’s the right approach, but it is closest to what you were doing and I can’t stand it when I ask a question and people say “don’t do that” 🙂

I stand by my "don't do that" answer but here's an example of a component that reacts on changing props while mounted: https://github.com/pesterhazy/cljs-spa-example/blob/master/src/cljs_spa/router.cljs#L47

fwiw I also don't particularly like with-let, it diverges too much from React by using trickery to avoid lifecycle methods

@jplaza what does (js/console.log leaflet) print out?

{…}
AttributionControl: (...)
Circle: (...)
CircleMarker: (...)
ControlledLayer: (...)
DivOverlay: (...)
FeatureGroup: (...)
GeoJSON: (...)
GridLayer: (...)
ImageOverlay: (...)
LayerGroup: (...)
LayersControl: (...)
LeafletConsumer: (...)
LeafletProvider: (...)
Map: (...)
MapComponent: (...)
MapControl: (...)
MapLayer: (...)
Marker: (...)
Pane: (...)
Path: (...)
Polygon: (...)
Polyline: (...)
Popup: (...)
Rectangle: (...)
ScaleControl: (...)
TileLayer: (...)
Tooltip: (...)
VideoOverlay: (...)
WMSTileLayer: (...)
ZoomControl: (...)
withLeaflet: (...)
get AttributionControl: ƒ AttributionControl()
get Circle: ƒ Circle()
get CircleMarker: ƒ CircleMarker()
get ControlledLayer: ƒ ControlledLayer()
get DivOverlay: ƒ DivOverlay()
get FeatureGroup: ƒ FeatureGroup()
get GeoJSON: ƒ GeoJSON()
get GridLayer: ƒ GridLayer()
get ImageOverlay: ƒ ImageOverlay()
get LayerGroup: ƒ LayerGroup()
get LayersControl: ƒ LayersControl()
get LeafletConsumer: ƒ LeafletConsumer()
get LeafletProvider: ƒ LeafletProvider()
get Map: ƒ Map()
get MapComponent: ƒ MapComponent()
get MapControl: ƒ MapControl()
get MapLayer: ƒ MapLayer()
get Marker: ƒ Marker()
get Pane: ƒ Pane()
get Path: ƒ Path()
get Polygon: ƒ Polygon()
get Polyline: ƒ Polyline()
get Popup: ƒ Popup()
get Rectangle: ƒ Rectangle()
get ScaleControl: ƒ ScaleControl()
get TileLayer: ƒ TileLayer()
get Tooltip: ƒ Tooltip()
get VideoOverlay: ƒ VideoOverlay()
get WMSTileLayer: ƒ WMSTileLayer()
get ZoomControl: ƒ ZoomControl()
get withLeaflet: ƒ withLeaflet()
__proto__ :Object

@pesterhazy that’s what I get

Looks alright to me

Idk the npm-deps option is fraught with issues

I’d recommend using the official webpack guide or copy this demo repo: https://github.com/pesterhazy/cljs-spa-example

The doublebundle approach is guaranteed to work with all npm libs

The problem is that if I look into any of the keys they are undefined

Thanks for the link. Will give it a try again tomorrow night @pesterhazy

hello guys … trying to find the code for the :> macro here

it’s not in reagent’s source code

curious here how it is implemented to allow native react stuff

@michael.heuberger I was confounded by that too for the longest time. It turns out that it is built into the vec-to-elem function

how did you find this out?

https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L373

i forget who pointed me in the right direction. i think it might have been juho

thanks man