Clojurians Log v2
reagent
Hi everybody. Just wanted to let you guys know that I created a wrapper for emotion.js (styled component) https://github.com/khmelevskii/emotion-cljs It should be useful for resolving a problem related to working with css in cljs
5👏@rap1ds I didn’t use Garden before and currently I’m not sure that it’s a good idea to use Garden together with styled component approach or maybe I need to understand this case better. Can you please let me know what exactly you try to have using Garden together with enotion?
1👍
@y.khmelevskii What I like about Garden that it let's you write CSS as pure data. I can see that in emotion-cljs you can also pass Clojure maps with keywords and all, but Garden takes this a step further by providing selectors, units, etc. as data. So in practice, I was thinking that instead of this (example from README):
(defstyled Button :button
{:color :red
:font-size "14px"
:padding "20px 40px"
:&:hover {:color :blue}})(defstyled Button :button
;; Garden ->
{:color :red
:font-size (px 14)
:padding [[(px 20) (px 40)]]}
:&:hover {:color :blue})@rap1ds ahh, I understand you, Thanks for explanation. But I’m not sure that It’s a good idea to create a lot of functions to write css as data because we need to handle a lot of cases, like transform , transition , etc. And then we need to support all of them. I prefer to use string in case where it’s needed and I can’t see any problems here.
Especially for me this cade
:font-size (px 14)
:padding [[(px 20) (px 40)]]}:font-size 14
:padding "20px 40px"@y.khmelevskii Looks really nice! I spent last weekend familiarizing myself with Styled components and I was thinking if there's something that could be brought to the CLJS world. Emotion-cljs seems to do exactly that 🙂 Did you btw. consider using Garden to convert the style map -> string?
I'm not sure if it's possible to have reagent components inter-operate with om components. I also think the way a reagent/re-frame app is written presents an entirely different paradigm/way of building web apps.
IMO, I think it's wise to just rewrite the whole app in reagent/re-frame instead of trying to refactor some pieces of the already existing one.
What's the latest in getting reagent to work with react library inputs, and not mess up the cursor position? Trying to use react mentions library with reagent, but can't seem to get the cursor bouncing fixed.
The easy way would be to use reagent input component instead of the normal input component. Then reagent’s caret-position-fix thing would be applied. Sadly in your use-case (react-mentions) the library doesn’t allow overriding the input component. So you’d have to fork / hack it.
It's not the best way IMO. And with what I have described above, you don't have to fork/hack anything. Not the best because generally you can't rely on the way some library creates its internal component now since it may change later for some reason. That's why I don't really like the Reagent example of working with Material UI text input.
Fair. 🙂 I edited my statement “best” => “easy”.
1👍IIRC the issue is not with Reagent but with controlled components in general. https://stackoverflow.com/questions/46000544/react-controlled-input-cursor-jumps
The fix is the same as it has always been - re-render the component not when the input value changes but when the input value is different from the state. You can check out some examples in e.g. re-com library.
But this issue doesn't exist with controlled components rendered by reagent? The fix suggestion that is in reagent for material ui suggests that you should pass the input component yourself so that it's created by reagent. At least that's my understanding of the solution, but thanks for the link I'll try it that way
> But this issue doesn't exist with controlled components rendered by reagent? That's because Reagent has workarounds for that specifically for input types that are susceptible to the issue.
If you're interested, take a look at reagent.impl.template/input-node-set-value.
https://github.com/Day8/re-com/blob/master/src/re_com/misc.cljs#L87-L89 if you meant this as an example fix I couldn't get it to work. It seems strange that it works if it still calls the on-change every time the value changes?
@franklineapiyo Thank you! Yea my goal was to have OM components be as dumb as possible and only render the view. While the state management is handled by re-frame. I was thinking of "tricking" the om component by wrapping the subscribe to a OM cursor. That way if that updates then the Om's cursor update, triggering an update. I haven't tested that out yet. But it may be the case that we are too far down the rabbit hole that its not possible to do a whole rewrite. At least not with our man power
Hi folks, what's a good way to organize components across different folders / files / namespaces? I'm new to the game, but have a background in vanilla React where we can organize components in different files and folders. Is there a good guide / example I can look at?
@rap1ds I didn’t use Garden before and currently I’m not sure that it’s a good idea to use Garden together with styled component approach or maybe I need to understand this case better. Can you please let me know what exactly you try to have using Garden together with enotion?
1👍