Fork me on GitHub
#reagent
<
2016-01-27
>
selfsame04:01:30

toying around with using reagent for style sheets: https://gist.github.com/selfsame/cd61ba7f78f6f21515d7

yenda09:01:40

what would be your approach with reagent/re-frame for editing of nested datastructure ? For instance I have scenarios which are composed of requests which are compose of parameters, I have a component for each submodel. to give the subcomponents the ability to modify the data they represent I have scenarios, requests and parameters in my app-db referenced by uuids and I pass the uuid of the model to represent to the child. A request has a list of parameters UUIDs and each parameter component subscribe to the corresponding parameter in the app-db, allowing me to edit without knowing of the request. Does it seems like a correct approach or do you have a better solution in mind ?

slotkenov13:01:08

How would you go about using a react library in clojurescript/reagent, like material-ui?

jaen13:01:56

a) compile modules out with something like browserify/webpack, b) use that as foreign lib, c) just call adapt-react-class on the components from that library.

jaen13:01:58

More or less.

jaen13:01:20

For material-ui this example might be instructive - https://github.com/tuhlmann/reagent-material

slotkenov13:01:06

That would be instructive indeed. No need for cljsjs?

jaen13:01:40

Well, cljsjs is not necessary for anything, it's only a convenience to get prepackaged libraries easily. If you have to preprocess them on your own to remove the modules (since Clojurescript can't deal with them as-is), then you don't gain much by using cljsjs.

jaen13:01:02

I don't think material-ui is in cljsjs anyway.

jaen13:01:27

Also, if you use material-ui, I think you'll have to package React with it on your own, co you won't be able to use cljsjs for React anyway.

yenda13:01:57

I feel like I'm tediously building a relational db with my uuids 😞

slotkenov14:01:25

because you need the react-tap-event-plugin?

slotkenov14:01:37

material-ui is not in cljsjs indeed

slotkenov14:01:25

the advantage of cljsjs would be that you could all compile it with the closure compiler in advanced mode, I would say

slotkenov14:01:10

reagent has a dependency on the cljsjs version of react. Would I need to specify somehow that I don’t need it when I’m packaging react on my own? Otherwise I would have it in my closure compiled code and my js libraries package.

jaen14:01:41

But even with cljsjs

jaen14:01:57

You don't apply optimisations to cljsjs libraries.

jaen14:01:00

They are foreign libs

jaen14:01:15

Usually written in a way that Closure Compiler can't deal with.

jaen14:01:29

For example - using advanced optimisations on React just breaks it.

jaen14:01:43

So you don't lose anything apart from convenience by not using cljsjs.

jaen14:01:09

As for how to deal with reagent having the dependency - do the same the sample project did

jaen14:01:18

Add an exclusion on React libraries

jaen14:01:32

And make mock cljsjs namespaces.

jaen14:01:39

(just an empty namespace will do)

jaen14:01:27

So you should probably just create a minified version with whatever webpack/browserify provide you (probably just whitespace striping and locals renaming)

jaen14:01:55

And then use that as :file-min option for the lib.

jaen14:01:45

And not because you need react-tap-event-plugin only, because the library needs to be able to require React - with cljsjs you can't do that IIRC.

jaen14:01:54

It just exposes React as a global, at least that's how it worked for 13.3

jaen14:01:23

Though, that's just how I think it works, maybe I'm misunderstanding something and someone who knows how cljsjs works for sure to weigh in.

slotkenov14:01:45

ah yes, forgot about that; the external library can’t be compiled with the closure compiler unless it’s written with the closure compiler in mind

slotkenov14:01:08

thanks for the great reply, I’m gonna look into it simple_smile

yenda15:01:13

is it possible to have an on-click event on a parent and a different one on a child ?

jaen15:01:06

If you (.stopPropagation e) at the end of child handler (so you stop the propagation), then it should work.

yenda15:01:30

I get cannot read property "stopPropagation" of undefined

jaen15:01:11

That's... weird

jaen15:01:46

You should be getting a React event object mock that way o_0

jaen15:01:53

So e shouldn't be undefined

yenda15:01:25

yeah I think I have another problem

slotkenov15:01:43

does the :file option of :foreign-libs only expect urls?

joshkh18:01:10

when passing in attributes to svg elements, i noticed that some get scrapped off:

(defn make-svg-filter []
  [:filter {:id "blur-effect"}
   [:feGaussianBlur {:stdDeviation "0.9"}]])
produces
<filter id="blur-effect" data-reactid=".7.0"><fegaussianblur data-reactid=".7.0.0"></fegaussianblur></filter>

joshkh18:01:15

is there a way to preserve :stdDeviation?

gadfly36118:01:06

@rodeorockstar: just a guess, but try :std-deviation instead of :stdDeviation and see if that works

joshkh18:01:50

good thinking, but no dice.

joshkh18:01:02

ding ding ding, we have a winner! thanks, @gadfly361