Fork me on GitHub
#reagent
<
2018-02-27
>
justinlee01:02:57

Hey reagent experts: more docs have now been merged into the /docs folder. This section in particular needs help, so if you can fill in some of the blanks, please submit a PR. https://github.com/reagent-project/reagent/blob/master/docs/ManagingState.md

pesterhazy02:02:00

@lee.justin.m fantastic! I'll see if I can fill in some blanks

pesterhazy02:02:27

I saw. I got curious about the first sentence: >>> it is possible to update reagent componetns by remounting the entire component tree with react.core/render

pesterhazy02:02:06

1. it should be reagent.core I think; 2. not sure this is actually true

pesterhazy02:02:17

Or maybe I'm not reading it right, but if you React.render the same component, with the same props, I don't think it will actually re-render the component tree

justinlee02:02:30

It should be reagent.core, yes good catch. As for (2), I wrote that based on this https://github.com/reagent-project/reagent/issues/112#issuecomment-82908212

pesterhazy02:02:48

@lee.justin.m thanks for the link. It would be good to actually verify how things work precisely

pesterhazy02:02:13

In my experience, just calling render again doesn't cause all components to unmount, and mount again

pesterhazy02:02:10

To actually force a re-mount, you need to use a trick like this one: https://gist.github.com/pesterhazy/33d5ac78629b11c5120c58b81d5e8114

pesterhazy02:02:40

The reason is, I think, that React.render is just the normal way to pass new props to an (embedded) React component. It detects that the DOM node is already under React control, and reuses the existing DOM/component tree if possible

justinlee02:02:56

right--the sentence quoted above was intended to say that you can force a re-render by doing that. using the word “remounting” is confusing because it suggests a full lifecycle

justinlee02:02:02

it’s a good point

pesterhazy02:02:37

correct, I've confused those two words many times before

pesterhazy02:02:21

but does it even force a re-render, i.e. is the render lifecycle method necessarily called again?

justinlee02:02:29

I had a section on terminology but I don’t think it made it in the PR. We should find a place for it again.

justinlee02:02:52

I can tell you that this technique works with hot reloading code

justinlee02:02:03

I’ll test to see if it really calls the render function.

pesterhazy02:02:06

this stuff is important for CLJS because we like our reloading workflow

pesterhazy02:02:40

cool! Make sure it's not actually Figwheel that is causing the re-render

pesterhazy02:02:03

please share the results! I'm not 100% sure on how this stuff works under the hood

justinlee02:02:08

i don’t use figwheel actually, i use shadow-cljs, where you have to cause the re-render yourself, so i know that’s what its doing

gadfly36102:02:19

@lee.justin.m Yeah, I had removed a few hanging things that didn't seem quite done. I should have mentioned that I wasn't trying to say they shouldn't be included though! Also @pesterhazy has a good list / structure of topics that I think you also echoed that didn't make it in, but should. https://github.com/reagent-project/reagent/issues/302

pesterhazy02:02:16

one cool addition to the .md would be a discussion of the different ways of causing a rerender: - React component state (not usually used with Reagent) - props - calling React.render (if that's what it does, haha) Reagent adds ratoms, which is implemented by calling React.render for subcomponents

pesterhazy02:02:06

I now realize that this must mean that calling React.render does cause the render method to be called again

pesterhazy02:02:39

(though not necessarily the children of the component)

justinlee02:02:34

@gadfly361 I had a section on components that introduced some terminology (https://github.com/jmlsf/reagent/blob/34af94f3000f47321fff73b6603aa6622fda8c40/docs/ReactUserGuide.md#what-is-a-component). I actually wanted to build that out with a little more (render vs. mount would be good too). I think we decided to go with the existing tutorial so there wasn’t really a place for it.

pesterhazy02:02:36

Reagent also has r/state, but that's not used very much and is actually implemented using ratoms under the covers, not using component local state

pesterhazy02:02:14

Actually the base mechanism is a Reaction. All Reagent-y mechanisms are implemented on top of Reactions, i.e. track, cursors, wrap, re-frame subscriptions and of course ratoms

gadfly36102:02:53

@lee.justin.m Ahh, i deleted that because, at first glance, it was too close https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md , but if there are nuggets or differences from that, then they should be reintroduced - either in that document (if it makes sense to do so) or in its own ... so long they dont step on each other's toes

justinlee02:02:22

@gadfly361 yea no worries. we’ll find a place. one reason i’ve been a bit pushy on getting the documentation in a single linear order because it enables you to write definitive material, have a section on terminology, and cross reference more easily.

justinlee02:02:14

@pesterhazy if you actually understand how reactions work, please send a pr, because I can’t write that stuff. if reactions are what everything is built on, then a thorough exposition of them to start with followed by a “this is similar to a reaction, but….” would be a great addition

justinlee02:02:47

actually it would really be the final missing piece of documentation.

pesterhazy02:02:05

I can't claim 100% understanding, but I'll give it a try

pesterhazy02:02:57

We can always ask @juhoteperi when we get stuck 🙂

justinlee02:02:45

no one 100% understands reagent. it is a mystical text that was discovered on a papyrus scroll in Herculaneum

justinlee03:02:38

@pesterhazy I just did a little test. Unless I’ve messed something up, calling react/render appears to force a remount of the whole tree. https://gist.github.com/jmlsf/0a78c196cf3c45db15fd7df8cbee2b22

pesterhazy03:02:22

have you tried without #' and with a div with only a single child?

justinlee03:02:56

without #' is the same

pesterhazy03:02:40

btw if you have instructions how to run this with shadow-cljs, I'd be curious

pesterhazy03:02:53

I've been wanting to give it a try for a while now

justinlee03:02:16

(defn form1-component [num]
  (print "form1-component render")
  [:div num])

(defn test-component []
  (print "test-component being rendered")
  [:div [form1-component 42]])

pesterhazy03:02:48

ok cool, thanks for doing this test! You're right then

pesterhazy03:02:36

I'm pretty sure I had problems with render not actually re-remounting at some point, but maybe I was doing something wrong then

justinlee03:02:44

i’d just read the docs on how to install and then start here https://github.com/lauritzsh/reagent-shadow-cljs-starter Biggest pointers are: you just call shadow-cljs watch app directly from the terminal. no lein needed

justinlee03:02:58

I should write a walkthrough

pesterhazy03:02:19

cool the starter helps already

justinlee03:02:07

join #shadow-cljs if you do. thomas really wants people to try it out and report confusion in the docs. he fixes stuff instantly (though he’s on central europe time i think so you gotta catch him in the morning)

pesterhazy03:02:33

I guess there could also be a clj one-liner using the new cljs.main a la https://twitter.com/mfikes/status/967929140430229505

pesterhazy03:02:03

I'm already lurking there, will give it another try

justinlee03:02:45

if you use a lot of npm modules, it is just an amazingly better experience

pesterhazy03:02:09

I do use a ton of npm modules 🙂

justinlee03:02:06

most of the time it’s just yarn add or npm install and then import directly into your code

defa07:02:34

I’d like to migrate a fairly large AngularJS 1.5 based web app to ClojureScript with reagent/re-frame and was wondering if it is possible to rewrite some components in ClojureScript with reagent and embed them into the AngularJS? There is https://github.com/ngReact/ngReact to embed React.js components so I guess it is possible.

borkdude09:02:02

I’m playing around with cljs.main, but I get an error when trying to use r/render:

$ clj -Sdeps '{:deps {org.clojure/clojurescript {:mvn/version "1.10.64"}  reagent {:mvn/version "0.8.0-alpha2"}}}' -m cljs.main -r
(require '[reagent.core :as r])
(defn foo [] [:div "Hello"])
(r/render [foo] (.-body js/document))
Cannot read property 'render' of undefined

borkdude09:02:55

Maybe I have to explicitly load react as well?

borkdude10:02:15

clj -Sdeps ‘{:deps {org.clojure/clojurescript {:mvn/version “1.10.64”}
                    cljsjs/react {:mvn/version “15.6.2-2"}}}’ -m cljs.main -r

cljs.user=> (require ’[cljsjs.react])
Error: goog.require could not find: cljsjs.react

roman01la10:02:55

@borkdude I think @richiardiandrea was discussing this issue on #cljs-dev , maybe he knows something 🙂

pesterhazy14:02:59

Was it ever possible to require foreign libs from a repl?

roman01la16:02:06

it certainly works for Node REPL

roman01la16:02:58

sorry, it doesn’t have anything to do with foreign libs

richiardiandrea15:02:31

I had the same problem as above and I assumed you could. In lumo this is transparent so maybe I got spoiled :))