Add defc macro to create fn components with Fast Refresh support

.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}
  :linters {:unused-binding {:level :off}
  :missing-else-branch {:level :off}

demo/reagentdemo/dev.cljs

@@ -1,11 +1,15 @@
 (ns reagentdemo.dev
  "Initializes the demo app, and runs the tests."
- (:require [reagentdemo.core :as core]
+ (:require [reagent.dev]
+ [reagentdemo.core :as core]
  [reagenttest.runtests :as tests]))
 
+(reagent.dev/init-fast-refresh!)
+
 (enable-console-print!)
 
 (defn ^:dev/after-load init! []
- (core/init! (tests/init!)))
+ (js/console.log (reagent.dev/refresh!))
+ (tests/init!))
 
-(init!)
+(defonce _init (core/init!))

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))}])
@@ -62,7 +62,7 @@
  [:div
  "Seconds Elapsed: " @seconds-elapsed])))
 
-(defn render-simple []
+(r/defc render-simple []
  (rdom/render
  [simple-component]
  (.-body js/document)))
@@ -75,7 +75,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]
@@ -87,7 +87,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"]
@@ -114,7 +114,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/"}
@@ -176,7 +176,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"]
 
@@ -224,7 +224,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"]
 
@@ -240,7 +240,7 @@
  ns-src-with-rdom
  (s/src-of [:simple-component :render-simple])]}]])
 
-(defn performance []
+(r/defc performance []
  [:div.demo-text
  [:h2 "Performance"]
 
@@ -285,7 +285,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"]
 
@@ -301,7 +301,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"]
 
@@ -313,7 +313,7 @@
  :complete true
  :src (s/src-of nil "simpleexample/core.cljs")}]])
 
-(defn todomvc-demo []
+(r/defc todomvc-demo []
  [:div.demo-text
  [:h2 "Todomvc"]
 

doc/ReactRefresh.md

@@ -0,0 +1,8 @@
+# React Refresh
+
+- `reagent.dev` ns must be required before anything that loads `react-dom`
+- Don't call `r.dom/render` after reload (e.g. shadow-cljs hook)
+- Call `reagent.dev/refresh!` instead
+- Only components defined using `r/defc` will refresh
+- Reagent doesn't try to create Hook signatures for components,
+ so hook state is reset for updated components.

package.json

@@ -1,7 +1,6 @@
 {
  "name": "@reagent-project/reagent",
  "private": true,
- "dependencies": {},
  "scripts": {
  "start": "lein figwheel client-npm"
  },
@@ -16,11 +15,15 @@
  "karma-sourcemap-loader": "0.3.8",
  "karma-webpack": "5.0.0",
  "md5-file": "5.0.0",
- "shadow-cljs": "2.20.7",
- "webpack": "5.65.0",
- "webpack-cli": "4.9.1",
  "prop-types": "15.8.1",
  "react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "react-refresh": "^0.14.0",
+ "shadow-cljs": "2.20.7",
+ "webpack": "5.65.0",
+ "webpack-cli": "4.9.1"
+ },
+ "volta": {
+ "node": "18.15.0"
  }
 }

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,55 @@
  [& body]
  `(reagent.ratom/make-reaction
  (fn [] ~@body)))
+
+;; From uix.lib
+(defn parse-sig [name fdecl]
+ (let [[fdecl m] (if (string? (first fdecl))
+ [(next fdecl) {:doc (first fdecl)}]
+ [fdecl {}])
+ [fdecl m] (if (map? (first fdecl))
+ [(next fdecl) (conj m (first fdecl))]
+ [fdecl m])
+ fdecl (if (vector? (first fdecl))
+ (list fdecl)
+ fdecl)
+ [fdecl m] (if (map? (last fdecl))
+ [(butlast fdecl) (conj m (last fdecl))]
+ [fdecl m])
+ m (conj {:arglists (list 'quote (#'cljs.core/sigs fdecl))} m)
+ m (conj (if (meta name) (meta name) {}) m)]
+ [(with-meta name m) fdecl]))
+
+(defmacro defc
+ "Creates function component"
+ [sym & fdecl]
+ ;; Just use original fdecl always for render fn.
+ ;; Parse for fname metadata.
+ (let [[fname fdecl] (parse-sig sym fdecl)
+ ;; FIXME: Should probably support multiple arities for components
+ [args & fdecl] (first fdecl)
+ var-sym (-> (str (-> &env :ns :name) "/" sym) symbol (with-meta {:tag 'js}))]
+ `(do
+ (def ~fname (reagent.impl.component/memo
+ (fn ~fname [jsprops#]
+ ;; FIXME: Replace functional-render with new function that takes renderFn as parameter.
+ ;; Need completely new component impl for that.
+ (let [render-fn# (fn ~'reagentRender ~args
+ (when ^boolean goog.DEBUG
+ (when-let [sig-f# (.-fast-refresh-signature ~var-sym)]
+ (sig-f#)))
+ ~@fdecl)
+ jsprops2# (js/Object.assign (core/js-obj "reagentRender" render-fn#) jsprops#)]
+ (reagent.impl.component/functional-render reagent.impl.template/*current-default-compiler* jsprops2#)))))
+ (reagent.dev/register ~var-sym ~(str fname))
+ (when ^boolean goog.DEBUG
+ (let [sig# (reagent.dev/signature)]
+ ;; Empty signature but set forceReset flag.
+ (sig# ~var-sym "" true nil)
+ (set! (.-fast-refresh-signature ~var-sym) sig#)))
+ (set! (.-reagent-component ~fname) true)
+ (set! (.-displayName ~fname) ~(str sym)))))
+
+(comment
+ (clojure.pprint/pprint (macroexpand-1 '(defc foobar [a b] (+ a b))))
+ (clojure.pprint/pprint (clojure.walk/macroexpand-all '(defc foobar [a b] (+ a b)))))

src/reagent/dev.clj

@@ -0,0 +1 @@
+(ns reagent.dev)

src/reagent/dev.cljs

@@ -0,0 +1,21 @@
+(ns reagent.dev
+ (:require ["react-refresh/runtime" :as refresh])
+ (:require-macros [reagent.dev]))
+
+(defn signature []
+ (refresh/createSignatureFunctionForTransform))
+
+(defn register [type id]
+ (refresh/register type id))
+
+;;;; Public API ;;;;
+
+(defn init-fast-refresh!
+ "Injects react-refresh runtime. Should be called before UI is rendered"
+ []
+ (refresh/injectIntoGlobalHook js/window))
+
+(defn refresh!
+ "Should be called after hot-reload, in shadow's ^:dev/after-load hook"
+ []
+ (refresh/performReactRefresh))

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

@@ -26,8 +26,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)))
 
@@ -162,6 +163,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)
@@ -276,14 +284,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)