September 25, 2020
By: Kevin

When & where do Reagent try to convert camelCase to kebab-case

  1. The question
  2. Go to the source
  3. Conclusion
  4. One more thing

The question

Clojure is kebab cased, and React is camel cased.

Reagent got caught in between, while enjoying the convenance, we fellow cljs programmers can't help wondering: When and where Reagent quietly do our bidding?

Go to the source

As the oracle said to Neo

You should go back to the source, where everything begins.

neo

Below are the two functions, one to convert component's props, one for create react class component from Clojure maps.

(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))))))

(defn dash-to-method-name [dashed]
  (if (string? dashed)
    dashed
    (let [name-str (name dashed)
          name-str (string/replace name-str #"(unsafe|UNSAFE)[-_]" "UNSAFE_")
          [start & parts] (string/split name-str #"-")]
      (apply str start (map capitalize parts)))))

Links to github:

dash-to-prop-name, handles pros

dash-to-method-name

Conclusion

Reagent do the case conversion for Reagent components' props.

[:div {:style {:background-color "black"}}]

Reagent also do case conversion for its form3 component’s parameter.

(r/create-class
                   {:component-did-mount #(swap! ran inc)
                    :render
                    (fn [this]
                      (let [props (r/props this)]
                        (is (map? props))
                        (is (= props ((r/argv this) 1)))
                        (is (= 1 (first (r/children this))))
                        (is (= 1 (count (r/children this))))
                        (swap! ran inc)
                        [:div (str "hi " (:foo props) ".")]))})

One more thing

As we have being using Reagent intensively, I strongly recommand reading its source. It's only a small lib after all, 1894 lines of cljs, well written and documented.

c:/Users/kevin/Downloads/reagent-master/reagent-master $ cloc src
      17 text files.
      17 unique files.
       4 files ignored.

github.com/AlDanial/cloc v 1.88  T=0.12 s (142.0 files/s, 21928.3 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
ClojureScript                   13            395            153           1894
Clojure                          4             20              4            159
-------------------------------------------------------------------------------
SUM:                            17            415            157           2053
-------------------------------------------------------------------------------
Tags: Reagent react clojurescript