nosco / hx

A simple, easy to use library for React development in ClojureScript.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question marks in props are dropped

orestis opened this issue · comments

Usage:

[MyComponent {:is-fancy? true}]

Result prop is:

{:is-fancy true}

This seems to have been an issue before, I wonder if there could be a better way to pass in Clojure keywords without munging them at all, as probably edge cases will always be there.

Since JS hashes accept string keys, "is-fancy?" should be a perfectly fine prop key. The cost of removing this munging is that most native React elements will have to be manually typed as camelCase but I think that's fine (and makes it easier to see in the code where you're doing interop vs your own components).

Thoughts?

This is a good question.

While it would be simpler and "cleaner" to map the keywords to strings without munging, it would break people's expectations that they have with hiccup coming from e.g. Reagent, Rum, Sablono, etc.

I'm thinking mainly about using :div, :input, etc.

There is a balance tension to provide something familiar and easy to help new users, while also avoiding footguns and too many corner cases.

Since it would be a breaking change, I don't think I'm going to remove munging for now. It is on my mind.

For this particular issue, I believe it's another case missed in camel->kebab so should be an easy fix.

Compatibility with reagent is definitely not drop-in because of #29 :)

But I get the point.

Oh, actually, would it make sense to apply the camelCasing transform only in the DOM specific properties? I believe React maintains a whitelist for them, not sure if it’s exposed somewhere.

I suppose what we could do is limit the kebab->camel transformation to DOM elements e.g. [:div {:class "foo" :on-click handle}].

This way we would pass in props as-is to any React component, so you'd use camel for React components from NPM and kebab for your CLJS components.

That actually doesn't seem too bad, and might not be too much of a breaking change.

I will think about it.

I like this. It also increases grepability and saves you the mental transformation when reading docs for an npm react component.

I've created a PR that simplifies the props munging per our discussion here: #40

Thoughts?

Upon initial inspection, it looks good. I'll need to run it locally tomorrow to check further.

Thanks for putting all this time into this library!