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

ok.. i am using it with re-natal and react-native, it might be related to that then

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

well I got it to work with the previous compassus version

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

I don't really get the point of the gist 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

i see 🙂

(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)))

👍

i removed the actual route handling / react-native navigator stuff for now

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?

normally yes, but I removed it for debugging

does it work without the navigator?

no

i dont think it is related to 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?

yes

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

https://gist.github.com/hugoduncan/2bd2d57b7eb42dc7b740#file-macros-clj

like that?:

(render [this]
  (with-om-vars this
    ....

hrm yeah, but now I'm unsure it will work

btw, (om/get-reconciler this) is also nil

that seems what the macro is doing

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...

let me try wrapping with the macro again

nope. thats really strange.

@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.

i dont think that has anything to do with compassus though

@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 🙂

thank you!

@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?

not yet with 1.0.0-alpha1, but it worked fine with the previous version

@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

but yeah, I'll be happy to extract a sample from my application

@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.

so then very often you just get a dead-end stack trace to some eval() call

Is it a mistake to call om.next/transact! in a component's render method?

@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

ah k

@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

Ahh

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

yeah

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 🙂

yup

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.

thank you, very interesting

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!