This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-11-03
Channels
- # beginners (20)
- # boot (407)
- # cider (17)
- # cljs-dev (29)
- # cljsrn (33)
- # clojure (169)
- # clojure-greece (17)
- # clojure-russia (47)
- # clojure-spec (40)
- # clojure-uk (81)
- # clojurescript (64)
- # clr (3)
- # copenhagen-clojurians (3)
- # core-async (1)
- # cursive (28)
- # datomic (26)
- # editors-rus (4)
- # emacs (10)
- # events (1)
- # figwheel (1)
- # funcool (1)
- # hoplon (82)
- # jobs (1)
- # klipse (10)
- # lein-figwheel (26)
- # leiningen (1)
- # off-topic (2)
- # om (153)
- # overtone (2)
- # pedestal (15)
- # proton (1)
- # re-frame (6)
- # ring-swagger (1)
- # rum (1)
- # slack-help (4)
- # untangled (56)
- # vim (24)
- # yada (2)
I was expecting the query to be the query from the component, namely [:me-mail]
. Confused why it is null
.
@anmonteiro using compassus 1.0.0-alpha1, it seems like a wrapper component is not attached to the om reconciler? is that by design? specifically, (compassus/current-route this)
does not seem to work anymore
@tobiash I hope that's not the case 🙂 can you produce a minimal example?
@tobiash In Compassus's devcards, I tried changing this line to (c/current-route this)
and it works fine
https://github.com/compassus/compassus/blob/master/src/devcards/compassus/devcards/core.cljs#L405
i am rather new to clojurescript, what is a good starting point to produce a minimal example? the devcards?
since i am using re-natal, i have set :root-render
on the reconciler to re-natal's custom root-render fn, I suspect it might be related to that
@tobiash if you're using React Native I suspect it might even be something else: https://gist.github.com/hugoduncan/2bd2d57b7eb42dc7b740
OK here's another example of using it: https://github.com/hugoduncan/navigator-repro
Om Next requires some dynamic variables to be set in the render function. Sometimes in React Native it can be messy to keep those bound
its all the same code, just upgrading compassus. sorry, i was missing that context in my original question 🙂
right, but that doesn't really tell me anything until I see a minimal repro, preferrably outside of React Native
I'm not saying it's not a bug in Compassus, it could definitely be
just that you may now be hitting the React Native thing I mentioned above
@tobiash could even be related to how you upgraded Compassus, there have been a few breaking changes. can you paste the part of your code where you create the Compassus application?
`(defui AppRoot static om/IQuery (query [this] [{:app-root [:current-user :server-status]}]) Object (render [this] (let [{:keys [current-user]} (om/props this) {:keys [owner factory props]} (om/get-computed this) route (compassus/current-route state/reconciler)] (login/login-scene {:current-user current-user})))) (defonce RootNode (sup/root-node! 1)) (defonce root-node (om/factory RootNode)) (def app (compassus/application {:routes route->component :index-route :app/home :reconciler state/reconciler :mixins [(compassus/wrap-render AppRoot)]})) (defn init [] (compassus/mount! app 1) (.registerComponent rh/app-registry "app" (fn [] root-node)))`
use 3 '`' for it to highlight properly
(defui AppRoot
static om/IQuery
(query [this]
[{:app-root [:current-user :server-status]}])
Object
(render [this]
(let [{:keys [current-user]} (om/props this)
{:keys [owner factory props]} (om/get-computed this)
route (compassus/current-route state/reconciler)]
(login/login-scene {:current-user current-user}))))
(defonce RootNode (sup/root-node! 1))
(defonce root-node (om/factory RootNode))
(def app
(compassus/application
{:routes route->component
:index-route :app/home
:reconciler state/reconciler
:mixins [(compassus/wrap-render AppRoot)]}))
(defn init []
(compassus/mount! app 1)
(.registerComponent rh/app-registry "app" (fn [] root-node)))
ah, and sorry, this is what works. if I change it to (compassus/current-route this), it doesnt
sup
is https://github.com/drapanjanas/re-natal/blob/master/resources/cljs-om-next/support.cljs
@tobiash so you're using the navigator right?
does it work without the navigator?
@tobiash what are you using root-node!
for though?
tbh I don't really understand what that code does, it came with re-natal when i bootstrapped the project and it worked so far, I think I will try to get it working without it and see if that causes the problem
@tobiash try this inside your AppRoot
: (println om/*reconciler*)
does it print nil
?
so my suspicion is confirmed 🙂
doesn't seem like a Compassus bug
but instead the bound vars problem I mentioned
@tobiash my suggestion would be to wrap your AppRoot
's render
in the with-om-vars
macro
hrm yeah, but now I'm unsure it will work
right so it won't work
OK let's see... does (om/get-reconciler owner)
work?
uhoh... it doesn't, but because owner
is also nil
- because (om/props this)
is also nil...
@tobiash this is really weird, and I suspect you'll have the same problem even without the wrapper mixin
I would now start looking at what your root-render
function might be doing
ok. thank you so far. I am trying to get it work without it, but there seems to be some dependency on ReactDOM somewhere which is not present in react-native.
@tobiash no it doesn't. what is described in this post should be enough though: http://dvcrn.github.io/clojurescript/react/2015/10/27/going-native-with-om-next.html
specifically:
:root-render #(.render js/React %1 %2)
:root-unmount #(.unmountComponentAtNode js/React %)})
though I haven't messed with React Native for about a year now, and things might have changed 🙂
@anmonteiro Great progress on Compassus! I've updated to the latest and the changes really clean up the initialization nicely. Thanks for your work. The :index-route
config key was definitely the way to go.
@anmonteiro It seems the problem was indeed caused by the re-natal root wrapper. However I am not sure what causes it and am still struggling with getting figwheel to work without the wrapper
@cmcfarlen thanks, really appreciate the feedback!
got it to work! thanks a lot for your help @anmonteiro! I still have to sort out the production build, but it's working with figwheel now. I'll create a minimal starter for compassus with rn then.
@tobiash awesome. link me the starter when you get one, happy to link to it from Compassus's readme
@tobiash so did you actually succeed in hooking Compassus with the RN navigator?
@tobiash that's great, I think some people over in #cljsrn would like to see that
i just found this channel today and asked about stack traces - because thats my main problem with cljs and rn - its very hard to debug stuff
@tobiash Mike Fikes has a few videos about debugging CLJSRN apps. this one, for instance, https://www.youtube.com/watch?v=2DfYsgOYpW4
although there might be some ramifications to dropping the re-natal.support package. but so far reloading seems to work
thanks, I'll try that out later. I think react-native already uses react-redbox to do something like this automatically, but there are some cases where re-natal's figwheel bridge code just swallows exceptions. And to me it looks difficult to get these errors back to react-native so they can be displayed properly.
@alpheus by that do you mean calling it “naked”, resulting in it being invoked every re-render? Or do you mean calling it in a callback inside the render method?
@dnolen minor thing, but you might have forgotten to push the alpha47 tag and it's confusing some people
because it's on Clojars but not GitHub
@anmonteiro are you aware of any issues with dom/render-to-str
and queries with query params?
I’m working on server side stuff. I’ve logged the appropriate read
function, and the params are as expected. I’ve logged the query of the app root, and it’s as expected. But somehow it isn’t going through to the render function if I use dom/render-to-str
.
@levitanong not aware, but happy to look at a minimal failing example
@anmonteiro alrighty, will work on one
@anmonteiro Another question, as I work on the minimal example: Is there a known issue when trying to om/set-query!
a component (returned by om/add-root!
) and then dom/render-to-str
? I have a semi-case below.
(let [r (om/reconciler …)
c (om/add-root! r App nil)
q (om/set-query! c {:params {:a 1}}) ;; :a was previously nil
html-string (dom/render-to-str c)] ;; I had assumed that it would be okay to do this, because the line above should have mutated c. But apparently not, as the rendered string is acting as if :a were still nil.
…)
oh hrm
@levitanong yeah I don't think that's gonna work
we never actually reconcile changes on the server-side
my rule of thumb here is that we should follow whatever React does
i.e. if in plain React you can setState
when doing server-rendering we should implement that too
@anmonteiro tag pushed
@anmonteiro so in this case, the only way around it is to keep things (like current-thing) in state, and not in query params, no?
@levitanong before jumping to workarounds we should see what React does and try to match that behavior
once we do that, we can think of alternatives if we still have a problem
@levitanong feel free to open an issue if you don't want to investigate what React does
I'm busy right now, but I'll get to it eventually
@anmonteiro Haha, I’ll open an issue 😛 React’s code base is way out of my league I think.
@levitanong I didn't mean going through React's codebase
you can infer what they do by creating an Om Next example that calls set-state!
, and rendering that in Node.js
@anmonteiro Hmm. Would it have to be node.js?
any javascript engine will do
@levitanong anything that can call ReactDOMServer.renderToString
doesn't have to be Node.js, sorry
Hmm. If it’s that, then perhaps I can work on it. It’s late here though, so I’ll do it tomorrow or something. I’ll open an issue for reference. 🙂 Thanks for the replies, @anmonteiro!
I did it all the time when I implemented the server-side rendering stuff 🙂
esp. to get the react-id
stuff right
ooooh
So I’d have to compile the om.next example into javascript, or would simply using React with some set-state!
suffice?
@levitanong just run this in a REPL:
(require '[om.next :as om] '[om.dom :as dom] 'cljsjs.react 'cljsjs.react.dom.server)
(defui Foo
Object
(initLocalState [this]
{:foo 0})
(componentWillMount [this]
(om/update-state! this update-in [:foo] inc))
(render [this]
(dom/div nil (om/get-state this :foo))))
(dom/render-to-str ((om/factory Foo)))
and see if :foo
is 0 or 1 🙂
lol alright then, hang on
@anmonteiro Had some trouble with cider and its dependency weirdness, so I decided to just run it off my boot task.
I did indeed get 1.
<div data-reactroot="" data-reactid="1" data-react-checksum=”-2048323701">1</div>
@levitanong hrm right, but you'll also get 1 in Om Next right now...
my example doesn't illustrate what you want to accomplish
I'll have to think about it some more, but I think we should support it
thanks for raising the issue
Hurrah! \o/ My pleasure.
@anmonteiro My very simple example https://github.com/tobiash/rn-compassus-example - now it works even if the re-natal support - not entirely sure why 🙂
@tobiash cool stuff
FWIW, re: my previous post (https://clojurians.slack.com/archives/om/p1478052545005389). I figured it out. componentDidMount
is the right approach for getting the DOM node for CodeMirror's use, but when passing this
to the component that was using CodeMirror I made the mistake of calling (<factory-function> this)
rather than (<factory-function> (om/props this))
. Subtle, but apparently essential.
After doing some testing directly in React.js to eliminate factors and figure this out, I also got a better intuitive sense of the divide between React and Om Next which was helpful. Sounds obvious saying it now, but it's true. I recommend it for anyone else learning Om Next.
Thanks again to everyone who's worked on Om Next. It's a high hill but a great tool.
@anmonteiro I think I figured it out, it’s not perfect but I think this is as good as it’s going to get. https://gist.github.com/currentoor/576c25b80e580ef18553087176d94cfd
based on this code
https://github.com/juxt/bidi/blob/59f11aff716dc0165ea44611d3dce9b677aff94f/src/bidi/bidi.cljc#L152
@currentoor looks good
I wonder if you need to override function
though
my idea would be: [(om/tempid "")]
in the routes
i think i have to because the code i linked in bidi, though i’d love to be wrong about that
then extend the PatternSegment
protocol to om.tempid.TempId
in transform-param
, call om.next/tempid
I think that would work
and you wouldn't need to monkey-patch bidi
oh yeah it totally works with (om/tempid “”)
in the routes, i did that first
but i sort of hate the way that looks
yeah, your call
I think both work
maybe bidi will be open to making the function types more extensible?
this way you need to watch out for breakages upstream
i’ll ask in the issue
that would be the right thing to do IMO
so while you’re here i have a question
tempids, why are they a defrecord
in clj but a deftype
in cljs?
no idea, is there an implication for you?
nope just curious
makes for a lot less code too 🙂
whats a good pattern for hooking push-based remotes to om.next? say I have a screen in my component that displays a stream of chat messages - should i subscribe in componentDidMount
and transact!
each event in the listener? or is there a more declarative approach using remotes?
@tobiash you can call om.next/merge!
to side-load novelty
affected components will be re-rendered
(based on their query)
@tobiash I wrote an article about how I did it. https://medium.com/adstage-engineering/realtime-apps-with-om-next-and-datomic-470be2c8204b #shameless-plug
I believe my approach was more declarative than using react life cycle methods.
np, hope it helps!
Would it be "O.K" to do something like (om/get-query (om/ref->any :home/foo)) ? I see ref->any macro marked as dev helper... I'm thinking about using ident to locate an instance of a component and access it's props or else I have to build my own ident/instance map?
@currentoor very cool article! Thank you very much for writing it 🙂
@sineer thanks!