I have a div that's only rendered on a certain page. How and where do I initialize a JS library that wants that div?

If I do it on document.ready, that div might not be in the DOM.

@ulsa: here's a component which shows how to get the dom-node ... you can init a lib in :component-did-mount - https://www.refheap.com/46cade5b0ac1fe8774c21986a

yes, of course!

thx

in case you haven't already seent it, https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components is very helpful on the different ways to create components

I'm in re-frame actually, so I should have remembered that. Thanks again. Need more coffee.

worked like a charm, life is so good now

when I switch language, I need to run destroy on a third-party component, and then run the code in :component-did-mount; what's a good way of achieving this?

ulsa: Have you tried extracting the code into a function and calling it on both :component-did-mount and :component-will-unmount?

nm, misread that, you don't need the code in comonent-will-unmount, it appears.

The 3rd party component probably has it's own lifecycle functions, too?

I would like to trigger an unmount and then a mount, basically, from outside (eg a re-frame handler)

yeah, I haven't even looked at its lifecycle stuff, figured all I needed was to call destroy on unmount and then create it again

@ulsa: https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components (Check out the section on Form-3 components). You could probably put the code in :component-did-mount and :component-will-unmount, and possibly call render-component again somewhere. In re-frame, you can'd do that in a handler so you would have to figure out a hacky way to re-render that component.

I love and hate reframe

@ulsa: dyu not just want to set something in your state which causes the enclosing component to re-render without the component you want to unmount ?

To be concrete, I want to switch language in a calendar. The language is given in the constructor, so I need to destroy it and re-create it.

I've tried a metadata key with @lang in render, but it doesn't work

so I should call destroy in will-unmount, and initialize in did-mount, right?

but how do I trigger the actual unmount and mount?

btw, the metadata thing is a tip from React community, put a key on the root element of the component and it will re-render (re-mount?) on change; didn't work for me

the calendar goes away, but doesn't come back

@ulsa: unmount-component-at-node would be my first guess. https://github.com/reagent-project/reagent/blob/master/src/reagent/dom.cljs#L54

I have to figure out how to stop slack from doing that

I call unmount and then render on the whole app in the switch language handler, and that seems to work

I would like to do it on just the calendar, but I can experiment with that now that it works on some level

I bet you could add something to your state, like some hidden content, even and hook into :component-will-update instead of mounting and unmounting. That seems like it should work. Seems like it could be less hacky as well.

using that you would subscribe to something like language in the app-db, put the language right in your component (but hidden somewhere), do initialization in component-did-mount and refresh in component-did-update.

hmm, re-frame docs say ratom change doesn't trigger component update lifecycle methods, that's what led me to the unmount/mount path

"But ... when the rerender is re-run because an input ratom changed, Lifecycle functions are not run. So, for example, component-did-update will not be called on the Component. Careful of this one. It trips people up."

Ah. Well there goes THAT idea

The thing is, the calendar has to be called with "destroy" and then created again with the new language, and the DOM node has to exist before create is called. As far as I can tell, unmount/mount is the only way to achieve this.

Maybe some other ways can be discovered by looking at a plain JS example, as can be seen in the source for this page http://fullcalendar.io/js/fullcalendar-2.4.0/demos/languages.html

ulsa: how about hiding the old calendar, creating a second, new, calendar component, then removing the old-calendar component

pretty fugly though

how would that look like in pseudo?

ulsa: hold on though - i have at least one component where :component-did-update is called after re-render and an ratom changes

here - https://www.refheap.com/94ada0832199646d602b606b6

If he wants to use did-update he can use props for the component instead of an ratom. I think he wants to completely destroy it and create a new one because his 3rd party javascript calendar won't work with old HTML content, if I understand correctly.

yes, I think that's how it is

anyway, I'll look into did-update and see what I can do

I feel your pain though, I wish it was easier to use 3rd party javascript widgets with react.

cool, I put (destroy) (create) in did-update, removed my unmount/mount calls from handler, added @lang before element in render, and it seems to work nicely

great

so that doc thing was a red herring?

where is the doc thing from @ulsa ?

https://github.com/Day8/re-frame/wiki/When-do-components-update%3F#lifecycle-functions

I think the doc was referring to passing a ratom to a component without dereferencing it first? The ratom is still the same ratom so nothing actually changes.

so an "input ratom" is what?

(defn my-component [input-ratom] (fn [] [:div @input-ratom])) vs (defn my-component [input-prop] (fn [input-prop] [:div input-prop])) I think.

IOW: don't pass ratoms into components because your components won't see the change (the ratom istelf doesn't change, only the value).

yes, but the component won't even re-render if an input ratom's value has changed, but in that doc it says even if the component re-renders, lifecycle methods won't be called; I'm confused

That's confusing to me as well, since according to react docs when the state changes or the props change, those lifecycle methods are called.

how best to post code snippets?

50 lines

refheap has nice emacs integration if you are an emacs user

I mean here

right, you post from emacs to refheap, which copies a link the the clipboard, and then paste the link in here

but there are probably some funky slack integrations to help too

ok, so here is what I think is all the code I needed, enjoy: https://www.refheap.com/111872

I identified three cases: page reload (render + did-mount), figwheel reload (will-unmount + render + did-mount), and manual lang switch (render + did-update)

@ulsa: as I see it, these three cases in Reagent do not differ from how React works?

Ie, Reagent follows React consistently.