This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-02-27
Channels
- # aleph (7)
- # beginners (80)
- # boot (1)
- # cider (3)
- # cljs-dev (277)
- # cljsjs (52)
- # cljsrn (1)
- # clojure (69)
- # clojure-gamedev (4)
- # clojure-italy (1)
- # clojure-losangeles (2)
- # clojure-russia (89)
- # clojure-spec (92)
- # clojure-uk (196)
- # clojured (1)
- # clojurescript (70)
- # cursive (5)
- # data-science (1)
- # datascript (84)
- # datomic (9)
- # defnpodcast (12)
- # docker (1)
- # emacs (4)
- # events (1)
- # fulcro (112)
- # graphql (1)
- # jobs (1)
- # lumo (1)
- # nrepl (21)
- # off-topic (2)
- # onyx (3)
- # protorepl (10)
- # re-frame (23)
- # reagent (66)
- # reitit (2)
- # rum (13)
- # shadow-cljs (144)
- # spacemacs (14)
- # sql (4)
- # unrepl (29)
- # vim (16)
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
@lee.justin.m fantastic! I'll see if I can fill in some blanks
Heads up, this in particular has several hanging TODOs https://github.com/reagent-project/reagent/blob/master/docs/ManagingState.md
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
1. it should be reagent.core I think; 2. not sure this is actually true
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
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
@lee.justin.m thanks for the link. It would be good to actually verify how things work precisely
In my experience, just calling render
again doesn't cause all components to unmount, and mount again
To actually force a re-mount, you need to use a trick like this one: https://gist.github.com/pesterhazy/33d5ac78629b11c5120c58b81d5e8114
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
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
correct, I've confused those two words many times before
but does it even force a re-render, i.e. is the render
lifecycle method necessarily called again?
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.
this stuff is important for CLJS because we like our reloading workflow
cool! Make sure it's not actually Figwheel that is causing the re-render
please share the results! I'm not 100% sure on how this stuff works under the hood
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
ah, good
@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
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
I now realize that this must mean that calling React.render does cause the render
method to be called again
(though not necessarily the children of the component)
@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.
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
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
@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
@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.
Comment added: https://github.com/reagent-project/reagent/issues/209#issuecomment-368727644
@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
I can't claim 100% understanding, but I'll give it a try
We can always ask @juhoteperi when we get stuck 🙂
no one 100% understands reagent. it is a mystical text that was discovered on a papyrus scroll in Herculaneum
@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
@lee.justin.m test looks good
have you tried without #'
and with a div with only a single child?
btw if you have instructions how to run this with shadow-cljs, I'd be curious
I've been wanting to give it a try for a while now
(defn form1-component [num]
(print "form1-component render")
[:div num])
(defn test-component []
(print "test-component being rendered")
[:div [form1-component 42]])
ok cool, thanks for doing this test! You're right then
I'm pretty sure I had problems with render not actually re-remounting at some point, but maybe I was doing something wrong then
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
cool the starter helps already
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)
I guess there could also be a clj
one-liner using the new cljs.main a la https://twitter.com/mfikes/status/967929140430229505
I'm already lurking there, will give it another try
I do use a ton of npm modules 🙂
most of the time it’s just yarn add
or npm install
and then import directly into your code
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.
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
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
@borkdude I think @richiardiandrea was discussing this issue on #cljs-dev , maybe he knows something 🙂
Was it ever possible to require foreign libs from a repl?
it certainly works for Node REPL
sorry, it doesn’t have anything to do with foreign libs
I had the same problem as above and I assumed you could. In lumo this is transparent so maybe I got spoiled :))