Fork me on GitHub
#om
<
2016-04-19
>
tmorten01:04:39

Quick question-- is it possible to have {:remote true} after a recursive parser call? i.e. I've recursively called the parser to another :key which I would like to fetch remotely?

tomjack01:04:45

You only get to return one thing. :remote true means "this whole query expr". If you only want part of it, you need to return a modified ast, not true

tomjack01:04:55

Not sure if I understood :)

tmorten01:04:45

@tomjack: Yes, I didn't phrase my question correctly...

tmorten01:04:23

sorry, I'll show some code...

tmorten01:04:39

when the recursive parser gets called, I want that parser to fetch from remote

tmorten01:04:42

I set :remote true for the top level keys in that "query" but nothing is being fetched

tomjack02:04:00

I haven't tried something like this yet, so not sure -- maybe someone else can be more helpful. But the :remote true in your recursive read only matters when :remote is passed to the parser as a third argument

tomjack02:04:25

You could maybe pull :target out of the env in your top read. If it's nil, do your current code. If it's :remote, then do something different, possibly passing :remote into your recursive parser call, if that's what you want

tmorten02:04:44

Yeah, I tried passing in "true" as last arg to parser with same effect

tomjack02:04:07

Certainly returning {:value blah} at the top won't work

tomjack02:04:26

Pass the name of the remote, not true

tomjack02:04:09

IIRC (away from repl) you get a query back? I guess maybe you'd want to put that query into the top ast's :query and return that under :remote

tmorten02:04:36

I'm just using :remote true -> so name of my remote would be :remote

tmorten02:04:17

in reconciler that is

tmorten02:04:30

@tomjack: you may be on to something.

tmorten03:04:00

@tomjack: appreciate the help. I'm gonna keep messing with it see if I can get something to work. I just keep thinking it shouldn't be this hard...

tomjack03:04:00

have you seen untangled-web? it hides this stuff from you

tomjack03:04:34

(not that I necessarily recommend it -- my project will be hosted on s3 so I haven't tried it -- but the designers agree "it shouldn't be this hard" and tried to do something about it)

seanirby06:04:24

im having trouble getting components to rerender by ident following a mutate. Doing the following is not working [(mutate/func ...) [:something/by-id 1]] .

seanirby06:04:34

I should note that that particular component's data is not normalized in any way. I'm using the ident on it solely so I can target it for a rerender.

tomjack06:04:46

does (:ref->components @(om/get-indexer reconciler)) have your ident?

tomjack06:04:36

also, I think your parser will need to return a map with the ident in it when queried something like (parser {:state (om/app-state reconciler)} [[:something/by-id 1]])

tomjack06:04:47

if it returns the empty map, no good

seanirby07:04:19

@tomjack i will check that, thanks

seanirby07:04:59

great! it was my fault after all simple_smile

tomjack07:04:29

which symptom?

seanirby07:04:31

just me being dumb. i was testing against the wrong component.

tomjack07:04:48

ah simple_smile. I'm trying to make sense out of "using the ident solely ... for a rerender"

seanirby07:04:58

well you need idents to auto normalize data based on colocated queries.

seanirby07:04:20

and you also need them for targeted rerenders

seanirby07:04:27

In this case I thought I only needed it for the latter

tomjack07:04:53

so you don't have data in {:something/by-id {1 ...}} ?

seanirby07:04:25

not currently, but I realize now that I do

seanirby07:04:39

*that I need to

seanirby07:04:23

I assumed I could put an ident on a component and target it for rerenders, but I see now it doesn't work that simply.

tomjack07:04:36

yeah, it would seem odd to me if you had to, say, stick dummy data in there or hack the parser, in order to make follow on ident reads do something

tomjack07:04:39

it makes me wonder if om should pull out idents from the tx and add them to the queue

seanirby07:04:58

i don't know enough about the internals to understand that. whats the queue?

tomjack07:04:21

a queue of components to be rerendered

seanirby07:04:50

isn't that what it does? you put idents in the transaction to signal what components need to be rerendered?

tomjack07:04:04

I should say 'rereconciled' I guess

tomjack07:04:25

(as I understand it) your follow-on reads are expanded into queries from the root (for idents right in the tx, this expansion does nothing). then the parser result contains the result of read'ing these queries, and the keys in the result are used to decide what to reconcile

seanirby08:04:19

makes sense

tomjack08:04:24

so if your parser returns nil for reading an ident, the follow on read will have no effect. I should test this, though..

hlolli08:04:15

Is there any info about adding react plugins in Om that is not featured on cljsjs, I want to implement this lightweight popup window addon https://github.com/marcio/react-skylight would it be easy to use it in om.next?

andrewboltachev08:04:14

@hlolli: Well I think you might add it as foreign library... or, I've just done this (for my purposes): (1) Installed a list of libraries via NPM (2) Created Webpack config file and compiled a bundle out of them. Content of the entry file would be like this: window.Module1 = require('Module1'); (3) Just added this bundle to the index.html file (4) Used that libs inside of CLJS files via js/Module1. Done

andrewboltachev08:04:11

@hlolli: What about compatibility with Om Next I think these might be just used via js/React.createElement etc

martinklepsch08:04:40

@andrewboltachev: you still need externs no?

andrewboltachev08:04:27

@martinklepsch: externs? is it sth of cljsbuild?

hlolli08:04:15

Ok, so as a react.js newb, the plan is to compile the jsx files to js and load them in html page and have om refer to the js files loaded into the html document. I need to look up Webpack.

martinklepsch08:04:07

If you call js/Module1.foo() in your cljs code the compiler will "optimize" it to single letter variable names unless you provide externs (externs essentially prevent this munging)

hlolli08:04:00

ok, since Im using tenzing, the extern declarations happen inside the .edn files in resources?

martinklepsch08:04:11

@hlolli: no usually not. I suggest looking into packaging react-skylight as a cljsjs package

tomjack08:04:40

I suggest rewriting react-skylight 😛

andrewboltachev08:04:31

btw, the things I'm including this way are React and Relay (I know they have cljsjs versions, sure). I've got to the point that I can't understand Om Next anymore... 😞 Does anyone know, how to use ES6 classes like Relay.Route?

martinklepsch08:04:36

@andrewboltachev: (the optimization will only happen with "advanced" - forgot to mention that earlier)

andrewboltachev08:04:49

Yep I understand

andrewboltachev08:04:01

On :none it's ok simple_smile

hlolli08:04:20

@martinklepsch: I will make an attempt to package this to cljsjs, at least read the manual, I've got enough material for now. So thanks Andrew and Martin.

andrewboltachev08:04:31

(Also, the reason I'm trying to add them via Webpack, not via :dependencies is that I have few :cljsbuild profiles for client code (with figwheel enabled) and Node.js server, and :dependencies thing is just project-wide, and I want to keep client and server isolated))

jimmy09:04:07

@hlolli: iirc there is a lib to create an extern for you. it's mentioned on cljsjs.

andrewboltachev09:04:20

btw... @hlolli Now I think this might be an issue if this lib (using my way) would be included before React. Then, after the React and your compiled CLJS code it would be useless. So you'd better look at cljsjs solution. Though, I don't know how dependences are managed there too, but you'll probably face them when creating the cljsjs thing for react-skylight

tomjack09:04:19

react-skylight is just over 100 LOC with a smatter of CSS

hlolli09:04:25

reading cljsjs docs, it seems to me that it will be skylight to add skylight to cljsjs

tomjack09:04:12

I would guess that if you write your own modal stuff (cribbing some from react-skylight, maybe), it will very likely be better than react-skylight

tomjack09:04:56

I mean, if you start writing a modal dialog in om.next, are you going to put the modal's visibility into component-local state?

tomjack09:04:05

maybe it is quicker to deal with the dependency, though simple_smile

hlolli09:04:32

Hmm, I would be displaying queries from database clickable on om.next svg elements.

hlolli09:04:46

yes, it seems trivial to write this just in om.next. Maybe I make a cljsjs version for the challenge (and future knowledge of react addons available).

martinklepsch09:04:48

@hlolli: try looking at existing packages like chartist. it's actually not a lot of work

andrewboltachev09:04:52

Anyway, has anyone tried Relay in CLJS? simple_smile

hlolli09:04:57

no, but I'd like to, doesn't om.next solve the same things as Relay would solve (just refering to dnolen's presentations).

andrewboltachev09:04:00

@hlolli: May be not literally, but yes, almost the same. That's just me who's that stupid and can't use Om Next 😄

andrewboltachev09:04:37

Also, David Nolen recommended to learn about Relay for one who wants to understand ideas behind Om Next better

mitchelkuijpers11:04:54

Are there any patterns with om.next how to handle urls? do you put the url in your state or do you actually keep it out?

mitchelkuijpers11:04:23

especially when you are using query params like ?size=20&start=40

mitchelkuijpers11:04:11

I had just put a function that updates the url in a mutate function but quickly realised this was not the way

jimmy15:04:31

@mitchelkuijpers: how about parsing those to a map then pass that map as props through components ?

mitchelkuijpers15:04:06

@nxqd: I currently use them for my queries like this:

({:companies/list ~(om/get-query EntityRow)} {:start ~'?start
                                                        :size ~'?size
                                                        :filters ~'?filters})
And then I use set-query! to set the params but I guess ill just use a computed key with :update-query-params function or something like that

mitchelkuijpers15:04:19

And give that to the child components

jimmy15:04:51

it's the same approach I use

jimmy15:04:14

I pass route information through components then set-query! to change params.

mitchelkuijpers15:04:42

I think it sucks a bit because the query params should also live in my state so that you can do [:ui/query-params] in your components

mitchelkuijpers15:04:57

But this seems the best solution for now

jimmy15:04:49

hmm, I do have params in my state. How do you pass query params around ?

andrewboltachev15:04:32

@mitchelkuijpers: You might have a look at https://github.com/anmonteiro/aemette This starter kit involves very interesting approach to routing (may be for URL only, not params yet)

jimmy15:04:02

I do calculate the params when url change, then swap! it to state.

andrewboltachev15:04:44

@mitchelkuijpers: Also, inside of a render method you might have access to query params via get-query, may be with help of class->any etc

mitchelkuijpers15:04:18

Aha those are some good tips thnx

anmonteiro21:04:02

@dnolen: React 15.0.1 is out on CLJSJS. I wonder what obstacles are there for upgrading it in Om?

anmonteiro21:04:14

or is it something we should start thinking about or even doing

dnolen21:04:15

@anmonteiro: we should just try it

dnolen21:04:42

hopefully it just works - I thought I ripped out most things that would cause problems

dnolen21:04:58

PR for the bump welcome

anmonteiro21:04:04

I remember having tried RC-1

anmonteiro21:04:13

it worked fine, I believe

anmonteiro21:04:25

let me try the final one locally

anmonteiro21:04:31

and I’ll PR if everything looks great

anmonteiro21:04:36

@dnolen: I tried it mostly to test Cellophane out. There are nuances for React to pick up markups due to react-ids, I believe

anmonteiro21:04:48

but with React 15, markup gets picked up much more often

dnolen21:04:53

sounds good

hlolli21:04:36

And add the "new" react svg tags to om.dom simple_smile

anmonteiro21:04:25

although React lets you use all svg elements, they haven’t created factories for them

anmonteiro21:04:57

so you’ll need to use (js/React.createElement “use” #js {props…} ...)

hlolli21:04:17

ok, so for so good using filter and gaussianblur in sablono (on om.next and react 15). But good to know if I hit a problem.

hlolli21:04:39

You mean factory for creating react key/id for the elements in the svg?

anmonteiro22:04:34

@hlolli: I mean React factories such as React.DOM.div

anmonteiro22:04:44

which is what om.dom relies on

anmonteiro22:04:52

@dnolen: everything looks great, devcards behavior, tests pass. I wonder if I can also align the dependencies in project.clj with the ones in pom.xml

anmonteiro22:04:04

I remember we talking about it some time ago

anmonteiro22:04:16

one more thing: should we bump to CLJS 1.8.40 too?

dnolen22:04:42

yes that doesn’t matter so much since it’s declared provided anyway

anmonteiro22:04:15

@dnolen: just submitted the PR. plus side is that om.core users will also be able to use React 15