helix

hifumi123 2023-02-25T09:28:03.047589Z

Is there a downside to omitting ^:native when symbols correspond directly to JS components in an ES module? For instance

(require '["@mui/material/Button" :default Button])

(defnc some-component []
  ;; note no ^:native provided
  ($ Button "Hello"))
This seems to work, but I’m wondering if that is a happy accident or it is okay to do this

lilactown 2023-02-25T18:56:08.453589Z

I would recommend not using ^:native metadata

lilactown 2023-02-25T18:58:19.399909Z

what $ does normally is translates your props map literally. so if you wrote

($ Button {:onClick #(js/alert "hi")} "Hello")
it would literally create a call like
(react/createElement Button #js {:onClick #(js/alert "hi")} "Hello")
this is good, because you can look at the documentation of material UI, see it takes an onClick prop, and write :onClick in your code

lilactown 2023-02-25T18:59:40.062029Z

marking it as ^:native will automatically change kebab-case to camelCase for you, as well as translate DOM props like :class to :className and :style will be transformed into a JS object from CLJS data

lilactown 2023-02-25T19:00:50.595219Z

IMO this was a mistake to build into $. it's wrong half the time, because sometimes you want the kebab-case transformation but you don't want :style, or you do want transformation from clj->js in some other prop but it doesn't do that for you so you have to remember which props it does automatically and which do not