Fork me on GitHub

Hi everybody. Just wanted to let you guys know that I created a wrapper for emotion.js (styled component) It should be useful for resolving a problem related to working with css in cljs

👏 19
Mikko Koski05:06:11

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


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

👍 3
Mikko Koski06:06:53

@U1GTUPAVB 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}}) could write this:
(defstyled Button :button
  ;; Garden ->
  {:color :red
   :font-size (px 14)
   :padding [[(px 20) (px 40)]]}
  :&:hover {:color :blue})
The CSS as data is nice idea, but I'm not sure how important it is in practice. And anyhow, I'm not sure if it makes sense to use it in styled component context, but this was just something I had in my mind 🙂


@U0K7B1LM9 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)]]}
is not better than this 🙂
:font-size 14
   :padding "20px 40px"

👍 4

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.


IIRC the issue is not with Reagent but with controlled components in general. 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.

👍 4
Joni12:06:17 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?


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


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?

Daniel Tan02:06:44

it can be the same as your react method


Whatever you do in React can carry over to Reagent, and CLJS in general.


Having said this, I often try to align to a CLJS approach. For example, in React its often 1 component per file. I’m not sure where this comes from, but it’s an odd convention IMO when you see how a clojure code base is structured.

Daniel Tan03:06:16

might have come from java and c# where each class is a file. They used to do this less when react was just functions iirc


As for structures that work, I often do 1 file per screen

 ui.cljs (dumb components)


When the screens/components become more complex, I might break them up, but I often keep things as simple as possible.

Daniel Tan03:06:45

for me i just follow the module method where each screen is a folder, and my components are in those folders, glued together with an index.cljs file

Daniel Tan03:06:04

shared components are placed in a shared folder


It’s funny to me because when you read the React code base they opt for a CLJ style - 1 feature per file and their files are very large. There was an article they wrote on this once about why they moved to this approach.


This thread helps a lot, thank you guys! I'll play around and get a feel for what makes sense 🙏