re-frame tweaks

CHANGELOG.md

@@ -4,7 +4,6 @@
 
 - Add `scittle.re-frame` plugin. This gives access to the
   [re-frame](https://github.com/day8/re-frame) library.
-
 - Fix for [44](https://github.com/babashka/scittle/issues/44): Honoring `SCITTLE_NREPL_WEBSOCKET_PORT` in `scittle.nrepl`
 - Add all public vars of `cljs-ajax` `ajax.core`
 - Upgrade several built-in libraries

resources/public/index.html

@@ -6,6 +6,7 @@
     <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
     <script src="js/scittle.reagent.js" type="application/javascript"></script>
+    <!-- <script src="js/scittle.re-frame.js" type="application/javascript"></script> -->
     <script src="js/scittle.cljs-ajax.js" type="application/javascript"></script>
     <script src="js/scittle.pprint.js" type="application/javascript"></script>
 
@@ -20,14 +21,26 @@
 
       (def state (r/atom {:clicks 0}))
 
+      #_(require '[re-frame.core :as rf]
+               '[reagent.dom :as rdom])
+      #_(rf/reg-event-fx ::click (fn [{:keys [db]} [_]] {:db (update db :clicks (fnil inc 0))}))
+      #_(rf/reg-sub ::clicks (fn [db _] (:clicks db)))
+
       (defn my-component []
        [:div
         [:p "Clicks: " (:clicks @state)]
-        [:p [:button {:on-click #(swap! state update :clicks inc)}
+        [:p [:button {:on-click #(do (swap! state update :clicks inc)
+                                     #_(rf/dispatch [::click]))}
              "Click me!"]]])
 
+      #_(defn re-frame-component []
+        (let [clicks (rf/subscribe [::clicks])]
+          [:div "Clicks:" @clicks]))
+
       (rdom/render [my-component] (.getElementById js/document "app"))
 
+      #_(rdom/render [re-frame-component] (.getElementById js/document "re-frame"))
+
       (require '[ajax.core :refer [GET]])
 
       (defn handler [response]
@@ -108,6 +121,13 @@
 
     <div id="app"></div>
 
+
+    <a name="re-frame"></a>
+    <h2><a href="#re-frame">Re-frame plugin</a></h2>
+
+    To enable <a href="https://github.com/day8/re-frame">reagent</a>,
+    in addition to the files needed for reagent, you need to include <tt>scittle.re-frame.js</tt>.
+
     <a name="cljs-ajax"></a>
     <h2><a href="#cljs-ajax">Cljs-ajax plugin</a></h2>
 

shadow-cljs.edn

@@ -18,12 +18,13 @@
                     :depends-on #{:scittle}}
     :scittle.promesa {:entries [scittle.promesa]
                       :depends-on #{:scittle}}
-    :scittle.re-frame {:entries [scittle.re-frame]
-                       :depends-on #{:scittle}}
     :scittle.pprint {:entries [scittle.pprint]
                      :depends-on #{:scittle}}
     :scittle.reagent {:entries [scittle.reagent]
                       :depends-on #{:scittle}}
+    :scittle.re-frame {:entries [scittle.re-frame]
+                       :depends-on #{:scittle.reagent
+                                     :scittle}}
     :scittle.cljs-ajax {:entries [scittle.cljs-ajax]
                         :depends-on #{:scittle}}}
    :build-hooks [(shadow.cljs.build-report/hook)]