Clojurians Log v2

Hello. I'm using Material UI widgets in my app and I notice that in the <https://material-ui.com/components/popover/#mouse-over-interaction%7CJS sample code (click '<>' to open code window)> , some widget properties are camelCase as expected, so I'm positive reagent will translate them to and from kebab-case for cljs use. However, some are kebab-case in the JS code. From the sample code:

<Typography
        aria-owns={open ? 'mouse-over-popover' : undefined}
        aria-haspopup="true"
        onMouseEnter={handlePopoverOpen}
        onMouseLeave={handlePopoverClose}
      >

It's not that clever because it cannot possibly look into the JS code. But you can do that by using string keys instead of keyword keys.

This is how Reagent does it:

(def dont-camel-case #{"aria" "data"})

(defn capitalize [s]
  (if (< (count s) 2)
    (string/upper-case s)
    (str (string/upper-case (subs s 0 1)) (subs s 1))))

(defn dash-to-prop-name [dashed]
  (if (string? dashed)
    dashed
    (let [name-str (name dashed)
          [start & parts] (string/split name-str #"-")]
      (if (dont-camel-case start)
        name-str
        (apply str start (map capitalize parts))))))

Oh, hold on - if your question touches only aria-* and data-* properties, then you're golden since Reagent treats them and only them specially.

My concerns are indeed limited to aria-*so that is great news. Thanks very much for responding.