This shows how to fast-refresh components

- Changing the code in `greet` will render the difference - Changing the color from green to red, will change the component, thanks to react-refresh - Although: The `(hooks/use-effect :once ,,,)` will run on every react-refresh The last one is a bit of a bummer.
lilactown · Mar 6, 2020 · 59823dd · 59823dd
1 parent 5d2f4e7
commit 59823dd
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 2 deletions.
diff --git a/dev/fast_refresh_example.cljs b/dev/fast_refresh_example.cljs
@@ -0,0 +1,66 @@
+(ns fast-refresh-example
+  (:require [helix.core :as hx :refer [<> defnc $]]
+            [helix.dom :as d]
+            [helix.experimental.refresh :as refresh]
+            [helix.hooks :as hooks]
+            ["react-dom" :as rdom]))
+
+(defn greet
+  [name date]
+  (str "Hi! " name "! It is now: " date))
+
+
+(defn bartify [set-name-fn]
+  (js/setTimeout
+    (fn []
+      (js/console.log "Changing to Bart")
+      (set-name-fn "Bart"))
+    3000))
+
+
+(defn change-date [set-date-fn]
+  (js/console.log "Setting interval to change date")
+  (js/setInterval
+    (fn []
+      (let [n (Math/trunc (/ (js/Date.now) 1000))]
+        (js/console.log "Setting date to: " n "... hoping to see only one message per n")
+        (set-date-fn n)))
+    1000))
+
+
+(defn ^:dev/after-load after-load []
+  (refresh/refresh!))
+
+
+(defnc app
+  []
+  {:helix/features {:fast-refresh true}}
+  (let [[name set-name] (hooks/use-state "Lisa")
+        [date set-date] (hooks/use-state (js/Date.now))]
+
+    (js/console.log (str "Name is:" name))
+
+    (hooks/use-effect
+      :once
+      (bartify set-name))
+
+    (hooks/use-effect
+      :once
+      (change-date set-date))
+
+    (d/div
+     {:style {:text-align "center"
+              :padding "10px"
+              :color "green"
+              :font-family "sans-serif"}}
+     (d/div (greet name date))
+
+     (d/div
+      (d/input {:value name :on-change #(set-name (.. % -target -value))})))))
+
+(defn ^:export start []
+  (rdom/render
+    ($ app)
+    (js/document.getElementById "app"))
+  (js/console.log "Injecting Refresh Hook")
+  (refresh/inject-hook!))
diff --git a/public/dev/fast_refresh.html b/public/dev/fast_refresh.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta charset="UTF-8">
+    </head>
+    <body>
+        <div id="app" />
+        <script src="js/shared.js" ></script>
+        <script src="js/fast-refresh.js"></script>
+
+        <script>fast_refresh_example.start()</script>
+    </body>
+</html>
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -18,11 +18,13 @@
                   :main {:entries [workshop]
                          :depends-on #{:shared}}
                   :refresh {:entries [refresh-example]
-                            :depends-on #{:shared}}}
+                            :depends-on #{:shared}}
+                  :fast-refresh {:entries [fast-refresh-example]
+                                 :depends-on #{:shared}}}
         :compiler-options {:devcards true}
         :devtools {:http-root    "public/dev"
                    :http-port    8700
-                   :preloads     [devtools.preload]}}
+                   :preloads     [devtools.preload helix.experimental.refresh]}}
 
   ;; :test     {:target    :browser-test
   ;;            :test-dir  "public/test/js"