From 59823dd4b63dc31c53b2593a620a213b2cc58473 Mon Sep 17 00:00:00 2001 From: Danie Roux Date: Fri, 6 Mar 2020 14:24:32 +0200 Subject: [PATCH] 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. --- dev/fast_refresh_example.cljs | 66 +++++++++++++++++++++++++++++++++++ public/dev/fast_refresh.html | 14 ++++++++ shadow-cljs.edn | 6 ++-- 3 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 dev/fast_refresh_example.cljs create mode 100644 public/dev/fast_refresh.html diff --git a/dev/fast_refresh_example.cljs b/dev/fast_refresh_example.cljs new file mode 100644 index 0000000..f44ec83 --- /dev/null +++ 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!)) \ No newline at end of file diff --git a/public/dev/fast_refresh.html b/public/dev/fast_refresh.html new file mode 100644 index 0000000..df824a7 --- /dev/null +++ b/public/dev/fast_refresh.html @@ -0,0 +1,14 @@ + + + + + + + +
+ + + + + + diff --git a/shadow-cljs.edn b/shadow-cljs.edn index c568bc0..9ce74a6 100644 --- 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"