Add defc macro to create fn components with Fast Refresh support

Author: Deraen

.clj-kondo/config.edn

@@ -1,4 +1,5 @@
 {:lint-as {reagent.core/with-let clojure.core/let
+           reagent.core/defc clojure.core/defn
            reagenttest.utils/deftest clojure.test/deftest
            reagenttest.utils/with-render clojure.core/let}
  :linters {:unused-binding {:level :off}

demo/reagentdemo/intro.cljs

@@ -6,44 +6,44 @@
             [simpleexample.core :as simple]
             [todomvc.core :as todo]))
 
-(defn simple-component []
+(r/defc simple-component []
   [:div
    [:p "I am a component!"]
    [:p.someclass
     "I have " [:strong "bold"]
     [:span {:style {:color "red"}} " and red "] "text."]])
 
-(defn simple-parent []
+(r/defc simple-parent []
   [:div
    [:p "I include simple-component."]
    [simple-component]])
 
-(defn hello-component [name]
+(r/defc hello-component [name]
   [:p "Hello, " name "!"])
 
-(defn say-hello []
+(r/defc say-hello []
   [hello-component "world"])
 
-(defn lister [items]
+(r/defc lister [items]
   [:ul
    (for [item items]
      ^{:key item} [:li "Item " item])])
 
-(defn lister-user []
+(r/defc lister-user []
   [:div
    "Here is a list:"
    [lister (range 3)]])
 
 (def click-count (r/atom 0))
 
-(defn counting-component []
+(r/defc counting-component []
   [:div
    "The atom " [:code "click-count"] " has value: "
    @click-count ". "
    [:input {:type "button" :value "Click me!"
             :on-click #(swap! click-count inc)}]])
 
-(defn atom-input [value]
+(r/defc atom-input [value]
   [:input {:type "text"
            :value @value
            :on-change #(reset! value (-> % .-target .-value))}])
@@ -70,7 +70,7 @@
 
 (def bmi-data (r/atom (calc-bmi {:height 180 :weight 80})))
 
-(defn slider [param value min max invalidates]
+(r/defc slider [param value min max invalidates]
   [:input {:type "range" :value value :min min :max max
            :style {:width "100%"}
            :on-change (fn [e]
@@ -82,7 +82,7 @@
                                      (dissoc invalidates)
                                      calc-bmi)))))}])
 
-(defn bmi-component []
+(r/defc bmi-component []
   (let [{:keys [weight height bmi]} @bmi-data
         [color diagnose] (cond
                           (< bmi 18.5) ["orange" "underweight"]
@@ -109,7 +109,7 @@
 (def ns-src-with-rdom (s/syntaxed "(ns example
   (:require [reagent.dom :as rdom]))"))
 
-(defn intro []
+(r/defc intro []
   (let [github {:href "https://github.com/reagent-project/reagent"}
         clojurescript {:href "https://github.com/clojure/clojurescript"}
         react {:href "https://reactjs.org/"}
@@ -171,7 +171,7 @@
      is a map). See React’s " [:a react-keys "documentation"] "
      for more info."]]))
 
-(defn managing-state []
+(r/defc managing-state []
   [:div.demo-text
    [:h2 "Managing state in Reagent"]
 
@@ -219,7 +219,7 @@
    component is updated when your data changes. Reagent assumes by
    default that two objects are equal if they are the same object."]])
 
-(defn essential-api []
+(r/defc essential-api []
   [:div.demo-text
    [:h2 "Essential API"]
 
@@ -235,7 +235,7 @@
                           ns-src-with-rdom
                           (s/src-of [:simple-component :render-simple])]}]])
 
-(defn performance []
+(r/defc performance []
   [:div.demo-text
    [:h2 "Performance"]
 
@@ -280,7 +280,7 @@
    into the browser, React automatically attaches event-handlers to
    the already present DOM tree."]])
 
-(defn bmi-demo []
+(r/defc bmi-demo []
   [:div.demo-text
    [:h2 "Putting it all together"]
 
@@ -296,7 +296,7 @@
                           (s/src-of [:calc-bmi :bmi-data :slider
                                      :bmi-component])]}]])
 
-(defn complete-simple-demo []
+(r/defc complete-simple-demo []
   [:div.demo-text
    [:h2 "Complete demo"]
 
@@ -308,7 +308,7 @@
                     :complete true
                     :src (s/src-of nil "simpleexample/core.cljs")}]])
 
-(defn todomvc-demo []
+(r/defc todomvc-demo []
   [:div.demo-text
    [:h2 "Todomvc"]
 

src/clj-kondo/clj-kondo.exports/reagent/reagent/config.edn

@@ -1 +1,2 @@
-{:lint-as {reagent.core/with-let clojure.core/let}}
+{:lint-as {reagent.core/with-let clojure.core/let
+           reagent.core/defc clojure.core/defn}}

src/reagent/core.clj

@@ -1,5 +1,6 @@
 (ns reagent.core
-  (:require [reagent.ratom :as ra]))
+  (:require [cljs.core :as core]
+            [reagent.ratom :as ra]))
 
 (defmacro with-let
   "Bind variables as with let, except that when used in a component
@@ -24,3 +25,58 @@
   [& body]
   `(reagent.ratom/make-reaction
     (fn [] ~@body)))
+
+(defn- parse-sig
+  "Parse doc-string, attr-map, and other metadata from the defn like arguments list."
+  [name fdecl]
+  (let [;; doc-string
+        [fdecl m] (if (string? (first fdecl))
+                    [(next fdecl) {:doc (first fdecl)}]
+                    [fdecl {}])
+        ;; attr-map
+        [fdecl m] (if (map? (first fdecl))
+                    [(next fdecl) (conj m (first fdecl))]
+                    [fdecl m])
+        ;; If single arity, wrap in one item list for next step
+        fdecl (if (vector? (first fdecl))
+                (list fdecl)
+                fdecl)
+        ;; If multi-arity, the last item could be an additional attr-map
+        [fdecl m] (if (map? (last fdecl))
+                    [(butlast fdecl) (conj m (last fdecl))]
+                    [fdecl m])
+        m (conj {:arglists (list 'quote (#'cljs.core/sigs fdecl))} m)
+        ;; Merge with the meta from the original sym
+        m (conj (if (meta name) (meta name) {}) m)]
+    [(with-meta name m) fdecl]))
+
+(defmacro defc
+  "Create a Reagent function component
+
+  The functions works like other components (defined using regular defn) when
+  used inside hiccup elements (`[component]`), but it can't be used like a regular
+  function. The created function is a React JS function component, i.e., it
+  takes single js-props argument, and the function body is already wrapped to
+  use Reagent implementation to work with Ratoms etc."
+  {:arglists '([name doc-string? attr-map? [params*] prepost-map? body]
+               [name doc-string? attr-map? ([params*] prepost-map? body) + attr-map?])}
+  [sym & fdecl]
+  (let [[fname fdecl] (parse-sig sym fdecl)]
+    ;; Consider if :arglists should be replaced with [jsprops] or if that should be
+    ;; included as one item?
+    `(do
+       (def ~fname (reagent.impl.component/memo
+                     (fn ~sym [jsprops#]
+                       (let [;; It is important that this fn is using the original name, so
+                             ;; multi-arity definitions can call the other arities.
+                             render-fn# (fn ~sym ~@fdecl)
+                             jsprops2# (js/Object.assign (core/js-obj "reagentRender" render-fn#) jsprops#)]
+                         (reagent.impl.component/functional-render reagent.impl.template/*current-default-compiler* jsprops2#)))))
+       (set! (.-reagent-component ~fname) true)
+       (set! (.-displayName ~fname) ~(str sym))
+       (js/Object.defineProperty ~fname "name" (core/js-obj "value" ~(str sym) "writable" false)))))
+
+(comment
+  (clojure.pprint/pprint (macroexpand-1 '(defc foobar [a b] (+ a b))))
+  (clojure.pprint/pprint (macroexpand-1 '(defc foobar "docstring" ([a] (foobar a nil)) ([a b] (+ a b)))))
+  (clojure.pprint/pprint (clojure.walk/macroexpand-all '(defc foobar [a b] (+ a b)))))

src/reagent/impl/component.cljs

@@ -477,3 +477,8 @@
             f (react/memo f functional-render-memo-fn)]
         (cache-react-class compiler tag f)
         f)))
+
+;; defc impl
+
+(defn memo [f]
+  (react/memo f functional-render-memo-fn))

src/reagent/impl/template.cljs

@@ -28,8 +28,9 @@
   (or (named? x)
       (string? x)))
 
-(defn ^boolean valid-tag? [x]
+(defn ^boolean valid-tag? [^clj x]
   (or (hiccup-tag? x)
+      (.-reagent-component x)
       (ifn? x)
       (instance? NativeWrapper x)))
 
@@ -170,6 +171,13 @@
       (set! (.-key jsprops) key))
     (react/createElement c jsprops)))
 
+(defn reag-element-2 [tag v]
+  (let [jsprops #js {}]
+    (set! (.-argv jsprops) (subvec v 1))
+    (when-some [key (util/react-key-from-vec v)]
+      (set! (.-key jsprops) key))
+    (react/createElement tag jsprops)))
+
 (defn function-element [tag v first-arg compiler]
   (let [jsprops #js {}]
     (set! (.-reagentRender jsprops) tag)
@@ -284,14 +292,17 @@
   (when (nil? compiler)
     (js/console.error "vec-to-elem" (pr-str v)))
   (assert (pos? (count v)) (util/hiccup-err v (comp/comp-name) "Hiccup form should not be empty"))
-  (let [tag (nth v 0 nil)]
+  (let [^clj tag (nth v 0 nil)]
     (assert (valid-tag? tag) (util/hiccup-err v (comp/comp-name) "Invalid Hiccup form"))
     (case tag
       :> (native-element (->HiccupTag (nth v 1 nil) nil nil nil) v 2 compiler)
       :r> (raw-element (nth v 1 nil) v compiler)
       :f> (function-element (nth v 1 nil) v 2 compiler)
       :<> (fragment-element v compiler)
       (cond
+       (.-reagent-component tag)
+       (reag-element-2 tag v)
+
        (hiccup-tag? tag)
        (hiccup-element v compiler)
 

test/reagenttest/testreagent.cljs

@@ -1375,6 +1375,9 @@
         (u/act (reset! val 0))
         (is (= 3 @render))))))
 
+(r/defc test-1 [x]
+  [:span "Hello " x])
+
 (deftest ^:dom functional-component-poc-simple
   (let [c (fn [x]
             [:span "Hello " x])]
@@ -1384,6 +1387,11 @@
           {:compiler u/class-compiler}
           (is (= "Hello foo" (.-innerText div)))))
 
+      (testing "defc"
+        (u/with-render [div [test-1 "foo"]]
+          {:compiler u/class-compiler}
+          (is (= "Hello foo" (.-innerText div)))))
+
       (testing "compiler options"
         (u/with-render [div [c "foo"]]
           {:compiler u/fn-compiler}
@@ -1443,6 +1451,21 @@
         (u/act (@set-count! 17))
         (is (= "Counts 6 17" (.-innerText div)))))))
 
+(r/defc test-2
+  "doc-1"
+  ([a] (test-2 a "x"))
+  ([a b]
+   (let [[v set-v] (react/useState 1)]
+     [:div "Hello " a " " b " " v])))
+
+(deftest ^:dom defc-component
+  (is (= "doc-1" (:doc (meta #'test-2))))
+
+  (u/async
+    (u/with-render [div [test-2 "foo"]]
+      {:compiler u/class-compiler}
+      (is (= "Hello foo x 1" (.-innerText div))))))
+
 (u/deftest ^:dom test-input-el-ref
   (let [ref-1 (atom nil)
         ref-1-fn #(reset! ref-1 %)