Fork me on GitHub
#om
<
2016-02-12
>
wilkerlucio02:02:21

update: I was using a custom merge function, removing it made the merge more reasonable, but now it merges the [:category _] as part of the :menu, and the parser is unable to read because when the read reaches that point it tries to go to the root, which doesn't have the :categories key

danielstockton08:02:33

Maybe I have to update some tokens somewhere, so it recognises componentDidUpdate etc...?

danielstockton08:02:48

Perhaps, by good fortune, someone already has such a file for om

danielstockton09:02:45

yeah anmonteiro

anmonteiro09:02:50

I have a solution for you

anmonteiro09:02:10

(setq clojure-indent-style :always-indent)

anmonteiro09:02:24

add this to your init files

danielstockton09:02:31

thanks, i'll try

danielstockton09:02:57

im not very good with emacs, i use spacemacs and pretend it's vim

danielstockton09:02:40

seemed like i had the clojure-mode default indentation mode off, turning it on seems to work

danielstockton09:02:49

the reverse of what is suggested in those docs

danielstockton09:02:41

anyway, thanks a lot, led me there in the end

danielstockton10:02:44

hmm, the indentation i was going for was actually more like :align-arguments as seen here:

danielstockton10:02:13

unfortunately, if i set it to :align-arguments, it will go back to indenting (query and (componentWillUpdate

danielstockton10:02:03

not sure if i can achieve that, always-ident is a good compromise

pyr10:02:23

@danielstockton: wow, i never knew about C-c SPC, I was doing alignment by hand, thanks!

anmonteiro10:02:23

@pyr: I just select the region I want to indent and use C-M-\

danielstockton10:02:48

how do i turn that on, (setq lojure-align-forms-automatically true) ?

anmonteiro10:02:31

@danielstockton: (setq clojure-align-forms-automatically t)

danielstockton10:02:36

thanks, worked 👍

dev-hartmann11:02:58

hi, does anyone have a nice resource on stylying om components?

anmonteiro17:02:39

@geraldodev:

cljs.user=> (:query (om/process-roots `[{:not-be-included [^:query-root ({:this-one-goes [:yumy]} {:param :one})]}]))
[({:this-one-goes [:yumy]} {:param :one})]

anmonteiro17:02:49

metadata needs to be out of the parentheses

geraldodev17:02:49

thnx @anmonteiro figuring out a way to prove. In my case I have a composition of query and query-root is being ruled out somehow.

futuro17:02:32

@thiagofm: I'd use d/transact! instead of update-in, personally, and I'd probably have one function to find the eid and value for :lambdas/total, and then use the output from that function to build the transact! call

futuro17:02:29

@thiagofelix: So something like the snippet above

grzm18:02:16

I've been going through @tony.kay 's om-tutorial (thanks, Tony!). I'm having a bit of trouble understanding queries.

grzm18:02:26

Here's a gist of what I'm trying to figure out: https://gist.github.com/grzm/3d17f353224ce329855f

hueyp18:02:27

can you not deeply nest queries?

grzm18:02:12

hueyp: can you clarify what you mean?

grzm18:02:19

I'm pretty new

hueyp18:02:41

I’m having the behavior that the indexer won’t index a component if its query is not … not sure the right word, but like, one level away

hueyp18:02:35

(query [_]
    [{:panes [{:quote (om/get-query QuoteRoot)}
              {:calculator (om/get-query CalculatorRoot)}]}])

hueyp18:02:45

QuoteRoot / CalculatorRoot are not indexed

hueyp18:02:16

the build-index* hits a nil classs at :panes and then just stops recursing

grzm18:02:39

@hueyp: is that in reference to my question or is it a new one?

hueyp18:02:48

no relation

grzm18:02:59

gotcha. That's why it didn't make sense to me simple_smile

grzm18:02:26

@hueyp: Do you need to quote the queries properly?

grzm18:02:58

(query [_] `[{:panes [{:quote ~(om/get-query QuoteRoot)} {:calculator ~(om/get-query CalculatorRoot)}]}])

hueyp18:02:18

I think the quoting is fine … the queries run okay, props get set, things render, but the components aren’t indexed … I’m thinking that is the current design

hueyp18:02:26

looking through index-root!

hueyp18:02:10

anyone have tips on forcing lein / figwheel to pick up a new om I locally install? … it does it sometimes, but I’m not sure a gang busters way to make it always work simple_smile

hueyp18:02:59

yah, okay, so the indexer just isn’t meant to work with queries like that, I need to put an intermediate component in there it seems

hueyp19:02:59

interesting … the behavior I’m seeing was recently changed on master

hueyp19:02:48

that what I get for using master 😜

hueyp19:02:24

@anmonteiro: if you are up for it, I do have a question if changing indentation here, moving it under (when class) is desired https://github.com/omcljs/om/commit/d9223a145eddfc4f66f0391d456543a3e73b654d#diff-7e4043f05bbd8e76d2da4614c2566cfaR949

anmonteiro19:02:53

@hueyp: indentation seems fine to me, what's wrong?

hueyp19:02:32

it moves the when-not recursive? check under when class vs the check always happening

hueyp19:02:53

so if you have a query like [{:sections [{:section1 (om/get-query Section1)}]}]

hueyp19:02:16

:sections does not have a class so the indexer stops … previously it would still do the indexing even if no class

anmonteiro19:02:08

@hueyp: index-root is called with a component as argument

anmonteiro19:02:14

the class should always be there?

anmonteiro19:02:43

moving the check under when class is exactly what prevents the stack from being blown

hueyp19:02:48

it recursively calls build-root with the class being the meta from the current query

hueyp19:02:15

so it starts off with a class, the root, and then it calls it a second time with the class being the meta :component from :sections … which is nil

hueyp19:02:17

so it stops

anmonteiro19:02:38

do you have a failing case?

hueyp19:02:40

previously it would just not do when class stuff, but keep crawling the query

anmonteiro19:02:48

I'm happy to figure it out

hueyp19:02:05

okay, I can show a failing cast, but not sure how to make a test … lemme see

hueyp19:02:11

or is a 20 line om app okay/

anmonteiro19:02:16

20 line should be ok

grzm19:02:52

seems like I have a fundamental misunderstanding of queries:

grzm19:02:01

(let [db {:obs [{:id 1 :name "bar"}
                {:id 2 :name "baz"}]}]
  (om/db->tree [{:obs [:id]}] db db))
;; result:  {:obs [{} {}]}
;; desired: {:obs [{:id 1} {:id 2}]}

grzm19:02:22

Why are the inner maps empty?

hueyp19:02:56

db->tree doesn’t handle that atm

grzm19:02:54

@hueyp: huh. well, that explains it. Is there an open issue or some other reference where I can read more about it?

hueyp19:02:14

think there might be an issue, but if those :obs were idents it would work

anmonteiro19:02:14

@grzm: db->tree works on normalized data

anmonteiro19:02:20

your data is not normalized

anmonteiro19:02:07

@geraldodev: that's expected. move-roots's (a process-roots helper) docstring says: Does NOT support sub-roots.

hueyp19:02:27

I’m checking the indexer directly, but you get failing cases for anything that calls full-query on section one

hueyp19:02:44

since the missing class-path->query fails full-query

anmonteiro19:02:13

all good, let me have a look

hueyp19:02:50

no priority from me, I’m just testing things out to see how it works, and thought this behavior might be unexpected since it is a change from alpha-30 to master

hueyp19:02:57

and thanks simple_smile

anmonteiro20:02:59

@hueyp: you were right, that's a bug

anmonteiro20:02:07

I'll submit a fix

thiagofm20:02:46

I'm using om next. I want to run a om/transact! every 1 second(using js/setInterval), where would this logic fit?

thiagofm20:02:11

I wrap it inside a component? On core.cljs? Where?

thiagofm20:02:49

Also, I remember seeing somewhere a long time ago, that it's possible to limit the rate that the whole frontent data gets updated(lets say, every 1s), like FPS mechanics, anybody knows hows this applies to om next? I can't seem to find any resource about it too.

thiagofm20:02:34

By frontend data I mean not backend <-> frontend, but actually refreshing the UI(imagine I have a counter and I just want to display it's current value every 1s)

anmonteiro20:02:53

@thiagofm: override om.next/*raf* (with caution)

adamkowalski20:02:29

Is there a tutorial that uses om next that is similar to this one for meteor https://www.meteor.com/tutorials/blaze/creating-an-app? That is, I would like one unified resource that goes through getting a full basic application to work including setting up a server and database, communicating between the server and client, rendering a view, and then syncing state between the client and the server.

futuro20:02:14

I'm storing my state in a datascript db, and I'm having trouble getting my components to re-query/render after a transact! call

futuro20:02:46

I'm not really sure what else to say about this, but if anyone has tips I'd be much obliged

adamkowalski20:02:13

@iwankaramazow: thanks, do you think that if I go through https://github.com/omcljs/om/wiki/Intermediate-Tutorial which is supposed a full stack om tutorial, most of those concepts will transfer over to om next?

iwankaramazow20:02:42

@adamkowalski: Probably not. I can't really comment on this I never used Om Now.

adamkowalski20:02:11

Thanks for the tip, but I have tried chestnut before and while it is a great project I would really like to understand what is happening with all the wiring

adamkowalski20:02:49

otherwise I feel like I will only have a crude high level overview of how to make such a project, and when I need to do something slightly different I will be unpreparred

adamkowalski20:02:26

Ideally I would find something that walks through what are the bare essentials to get an application working and how to make such a project completely from scratch so you understand how every component relates to each other

iwankaramazow20:02:00

If you want the bare essentials https://github.com/omcljs/om/wiki/Quick-Start-%28om.next%29 sets you up quite nicely

iwankaramazow20:02:10

My two cents on: you're probably better off studying all aspects of every tutorial in isolation, before going full stack

adamkowalski20:02:33

yeah good idea.

adamkowalski20:02:43

I am currently running through the https://github.com/awkay/om-tutorial and it seems like a really good follow up to the basic guide on the om next wiki

adampash20:02:28

Hi everybody! I’m trying to use the react-motion package from cljsjs in an Om project, but I’ve never used cljsjs before and I’m having some trouble. Does anyone know how this works/if there’s a good resource I could read up on?

adampash20:02:43

I’ve been googling, but I haven’t seen a lot in the way of cljsjs tutorials

iwankaramazow20:02:38

@adamkowalski: after the tutorial, just find yourself a side-project you can overengineer with all aspects of om next 😉

adamkowalski20:02:53

Yeah I actually made a replica of the ios calculator but I probably butchered the code haha

adamkowalski20:02:26

do you mind critiquing my code and telling me if I followed decent practices for making a basic om next app? https://github.com/adam-r-kowalski/calculator

thiagofm20:02:30

@futuro: I think you need to pass the query related to it after the transaction... such as (om/transact! this `[('quit-tutorial {:db/id id}) :game/tutorial])

thiagofm20:02:54

@futuro: does it fix it for you?

futuro20:02:33

@thiagofm: one sec, I'll give it a try

anmonteiro20:02:21

@hueyp: just submitted a PR that should fix your issue (https://github.com/omcljs/om/pull/614/)

anmonteiro20:02:42

you're welcome to tests against my branch to see if your problems go away: (https://github.com/anmonteiro/om/tree/om-612)

futuro20:02:13

@thiagofm: so far, that doesn't fix it

thiagofm20:02:54

@futuro: can you run your transaction against the reconciler? Does it still work?

thiagofm20:02:56

(in-ns 'om-tutorial.core) (om.next/transact! reconciler '[(increment)])

thiagofm20:02:20

So, my question again. Let's say I have a setInterval every 1 second that runs a transaction, where does this logic goes to? A component? core.cljs?

thiagofm20:02:06

@anmonteiro perhaps. Sadly I see no examples of this, even when searching on Google 😞 If I find out how, I promise I'll write a blogpost about it

iwankaramazow20:02:39

@thiagofm: The official React docs suggest putting it in the lifecycle method componentDidMount

iwankaramazow20:02:03

Don't forget to clean up the timer in componentWillUnmount

thiagofm20:02:20

iwankaramazow: ok great, do I also have componentDidMount in om next?

thiagofm20:02:50

Okay nice simple_smile Will give it a try

adampash20:02:58

Hi, I was wondering if anyone is aware of more extensive documentation I may be missing on how to use cljsjs packages. I’m trying to use the react-motion package in an om next project, and I’m… at a loss.

anmonteiro21:02:35

@adampash: Om uses CLJSJS packages

anmonteiro21:02:50

that's all you need

adamkowalski21:02:22

@thiagofm: earlier you asked about running a om/transact every 1 second using setInterval

adamkowalski21:02:34

i made a quick mock up of how you could do it http://pastebin.com/rPbK1YVj

adampash21:02:50

thanks @anmonteiro! I’ll give it a look

thiagofm21:02:46

@adamkowalski: oh true, I can just talk with the reconciler!

adamkowalski21:02:21

indeed, you might want to turn logger off though if you are going to do something every seconds

adamkowalski21:02:28

otherwise your console will get flooded pretty quick

thiagofm21:02:17

In development it's fine simple_smile

thiagofm21:02:41

Is there a way to access the reconciler down the stack/not in core.cljs(or in a separate component?). I also can't seem to be able to pass it down in (om/add-root! reconciler window/Window (gdom/getElement "app"))

hueyp21:02:18

not sure I follow … you can just assign it a variable?

hueyp21:02:44

you mean not from inside a component? but where from then? 😜

thiagofm21:02:43

Let's say I have 2 components List and Item. I call om/add-root! with reconciler and component List. The List component has a couple of Items, how can I access the reconciler from an Item?

adamkowalski21:02:44

you could extract your reconciler into a separate file (or namespace) then every other ns that needs to reference it can just require it at the top of the file

adamkowalski21:02:59

oh well it that case you are inside of the reconciler

adamkowalski21:02:17

you can do (om/transact! this ‘[(action-to-dispatch)]

adamkowalski21:02:37

you are inside off a component*

adamkowalski21:02:25

or if you have some really fancy needs you could probably use core.async and pass around a channel

adamkowalski21:02:32

then you can put actions on the channel

adamkowalski21:02:59

and on the receiving end (somewhere you have access to the reconciler) you can perform the transact

thiagofm21:02:29

adamkowalski: when I try to do it inside a component, I keep getting No queries exist for component path (...)

thiagofm21:02:07

adamkowalski: this idea with core.async is awesome simple_smile

adamkowalski21:02:15

can you make a minimal reproducible repo and post it here? then maybe somebody can take a look and figure out what the issue is

adamkowalski21:02:21

because if I remember correctly David Nolen said in one of his videos that visible asynchrony is not good, so i’m guessing core async shouldn’t be needed unless you are doing something non trivial

thiagofm21:02:02

So, what I want to do is: when my component GameWindow is loaded, I want to start adding every second a number to a counter(in case, it's the player's amount of gold)

hueyp21:02:11

you can also (om/get-reconciler this) from inside a component … its private I think but works

thiagofm21:02:34

hueyp: sounds a good idea

hueyp21:02:37

but the no path thing means something you have going on is wrong

hueyp21:02:44

and should probably figure out what

hueyp21:02:05

what version are you using?

adamkowalski21:02:27

@thiagofm: in your sub component (you said you are going from a list to item) do you actually have access to this?

adamkowalski21:02:37

you could make each item take this as on of the parameters

hueyp21:02:37

I know of at least one use that breaks the full-query path … if you can post your queries it would be easy to see

adamkowalski21:02:59

then you could do (om/transact! this ‘[(my-action)])

adamkowalski21:02:15

(defn my-item [this param-2 param-3] … (om/transact! this ‘[(my-action {:key my-optional-payload})]) … )

adamkowalski21:02:32

alright I gotta head out, but good luck with your project

thiagofm21:02:38

Example: https://github.com/thiagofm/haxlife/blob/master/src/cljs/haxlife/components/window.cljs in the GameWindow component, whenever it's loaded, I want to start that count. The query is already implemented here: https://github.com/thiagofm/haxlife/blob/master/src/cljs/haxlife/data/query.cljs#L31

thiagofm21:02:55

Thanks adamkowalski , you helped me alot simple_smile

thiagofm21:02:13

@hueyp: example is above

hueyp21:02:32

no idea … you are calling transact! inside of the parser

hueyp21:02:08

oh its datascript transact woops!

thiagofm21:02:44

Yeah, datascript

hueyp22:02:57

sorry, too much going on, thought it might be a quick glance at two components 😜

thiagofm22:02:11

No problem 😄

thiagofm22:02:41

I also believe that my clojure code is not of the highest standards... haha

geraldodev22:02:29

@anmonteiro I have a [{:current-view [{:nested-query [:stuff]}]}] query shape, and I'm using normalize true with the data normalized. Is that a sub-root ? I'm asking because to my understanding :current-view is a root and :nested-query is a sub-root. And in this case process-roots is working fine. In fact it's the composition of :nested-query via om/get-query that is wiping ^:query-root when using [{:current-view [^:query-root ({:nested-query [:stuff]} {:a-param :one})]}]

thiagofm22:02:15

Uh, I think this is a bug (or perhaps I'm using om next in the wrong way). https://github.com/thiagofm/haxlife/blob/master/src/cljs/haxlife/components/window.cljs#L25 in this line, I'm transacting, but om keeps complaining that "No queries exist for component path", the thing is, I don't really need to query anything there, just run that transaction(which isn't dependable on anything).

thiagofm22:02:13

This works as expected if I do any change in this file and save it, the counter goes up as I expected. But it keeps giving me the "No queries exist for component path" message

thiagofm22:02:59

I can also change it in order to have a query so it stops complaining, I guess... The first time it complains, it stops execution. Maybe it should just warn that message.

wilkerlucio23:02:30

@thiagofm: try to transact using (om/transact (om/get-reconciler this) ...), I think that way you will avoid the warning by calling it directly on the reconciler

thiagofm23:02:55

I'm up to a point where everything works, but I still keep getting the error 😞 I'll go ith get-reconciler

thiagofm23:02:57

@wilkerlucio: okay, no more messages, works perfectly, thanks!

taylor.sando23:02:59

Your tutorial ui component doesn't have a query.

taylor.sando23:02:01

You could pass transact through to GameWindow or Tutorial components using om/computed, something like (om/computed props {:transact #(om/transact! this %)}., then in the the children, call (:transact (om/get-computed this))

thiagofm23:02:50

@taylor.sando: funny thing is, in the Tutorial component, it doesn't complain about anything 😛

thiagofm23:02:10

Well, I'm over with this problem 😛

grzm23:02:24

I'm using om/tree->db to view how app state is being normalized. That all looks good. When I'm referencing the state from the components using om/props, I'm seeing the normalized data rather than the expanded data (e.g., [:people/by-id 1] instead of {:id 1 :name "Bob"}

grzm23:02:49

I assume I'm missing something simple. Thoughts?

hueyp23:02:40

are you using db->tree in your parser?

hueyp23:02:24

you need to return a tree from the parser, not the normalized stuff

hueyp23:02:41

e.g. the data you return should match the shape of the query

hueyp23:02:53

not sure why I put e.g. in front of that