Fork me on GitHub
#helix
<
2020-05-12
>
dominicm15:05:00

I think I let this get lost in history, what's the thoughts on $ supporting class names in the type string? e.g. ($ "div.foo.bar.baz-bosh")

dominicm15:05:30

Will open issue if reception is positive :)

Aron15:05:42

there is class="" now

lilactown15:05:20

i use the helix.dom macros everywhere so I don’t really see much use

dominicm15:05:16

@lilactown (d/div {:class "foo bar baz-bosh"}) vs ($ "div.foo.bar.baz-bosh") - really just for reducing typing I guess.

dominicm15:05:47

at least for the simple case of no properties. I'm very greenfield, so I do a lot of translating html into react.

lilactown15:05:14

yeah, that makes sense if you’re doing a lot of html->helix and back

lilactown15:05:23

I certainly used that feature a lot more in server-side hiccup

lilactown15:05:51

IME building an app, you typically end up needing something to compose class names together

lilactown15:05:06

e.g. at both gigs I’ve used CLJS at, I wrote a small wrapper around emotion.js

dominicm15:05:22

Reagent does a pretty fine job of this tbh.

lilactown15:05:43

in order to get sane precedence rules, you need to use emotion/cx to combine classes which means you can’t use the shorthand

lilactown15:05:59

[:div {:class (style/cx class1 class2 class3)}
 ,,,]

dominicm15:05:33

I distinctly don't want to use css-in-js 😁. Not sure what cx does, but would [class1 class2 class3] have worked there too?

dominicm15:05:44

Yeah, looks like it would have.

lilactown15:05:51

it would not work the same; the CSS-in-JS solution would do a merge of those styles, using the order I wrote them as precedence

dominicm15:05:09

and that would create a new class. Got it.

lilactown15:05:29

writing them as [class1 class2 class3] would use CSS precedence which means whatever order they were defined in

dominicm15:05:40

Anyway - I'm not using css-in-js, and don't intend to.

dominicm15:05:33

I think manual is fine for that case. This is really to optimize for "doing normal css stuff".

lilactown15:05:54

my suggestion would be to create a macro that wraps $:

(defmacro $
  [type maybe-props & args]
  (let [[type' class-string] (process-class type)
        maybe-props' (add-class maybe-props class-string)]
   `(helix/$ ~type' ~maybe-props' ~@args)))
and if you find this works really well, I would think about taking a PR for it

lilactown15:05:51

this isn’t the first time someone has asked about this so, I’m willing to accept it might just be a use case I don’t have - doesn’t make it invalid 😛

dominicm15:05:53

Sounds like a plan. Is add-class gonna be a pain to write with all the js object possibilities?

lilactown15:05:13

at the macro phase, maybe-props should be either a map or Something Else:tm:

lilactown15:05:10

so add-class could probably be something like:

(defn add-class
  [props class]
  (if-not (and (map? props) (some? class))
    props
    (update props :class #(str class " " %)))) 

dominicm16:05:14

helix does not support {:class ["a" nil]} then?

dominicm16:05:43

(I'm about to advocate for it to 😛)

lilactown16:05:28

I merged support that into master last week

lilactown16:05:33

haven’t done a release yet

dominicm16:05:44

aha, okay :). So I'll need to handle both, np.