From a2d64479f9228aeed3f5c251816ff15208253e70 Mon Sep 17 00:00:00 2001
From: Andrea Amantini <lo.zampino@gmail.com>
Date: Fri, 12 May 2023 16:30:43 +0200
Subject: [PATCH] Export reactified components for testing

components using hooks not working because of this bug https://github.com/reagent-project/reagent/issues/548
---
 shadow-cljs.edn                          |  5 ++++-
 src/nextjournal/clerk/render.cljs        | 25 ++++++++++++++++++++++++
 src/nextjournal/clerk/render/editor.cljs |  9 ++++++++-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/shadow-cljs.edn b/shadow-cljs.edn
index 01ac70f3d..a7d60c70b 100644
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@@ -7,7 +7,10 @@
                    :release {:output-dir "build/"}
                    :compiler-options {:source-map true}
                    :dev {:modules {:viewer {:entries [devtools]}}}
-                   :modules {:viewer {:entries [nextjournal.clerk.sci-env
+                   :modules {:viewer {:exports {EvalNotebook nextjournal.clerk.render.editor/EvalNotebook
+                                                TestComponent nextjournal.clerk.render/TestComponent
+                                                TestComponentHooks nextjournal.clerk.render/TestComponentHooks}
+                                      :entries [nextjournal.clerk.sci-env
                                                 nextjournal.clerk.trim-image]}}
                    :js-options {:output-feature-set :es8}
                    :build-hooks [(shadow.cljs.build-report/hook
diff --git a/src/nextjournal/clerk/render.cljs b/src/nextjournal/clerk/render.cljs
index 4894f8459..4dd291682 100644
--- a/src/nextjournal/clerk/render.cljs
+++ b/src/nextjournal/clerk/render.cljs
@@ -899,3 +899,28 @@
                              (str "?" (opts->query opts))))))
 
 (def consume-view-context view-context/consume)
+
+(defn test-component [{:as props :keys [title]}]
+  (js/console.log "test component" (str props))
+  (r/with-let [!state (r/atom 0)]
+    [:div
+     [:h1 title]
+     [:button.p-2.bg-blue-200
+      {:on-click #(swap! !state inc)}
+      (str "Click Me / Uses Reagent Atoms: " @!state)]]))
+
+(defn test-component-hooks [{:as props :keys [title]}]
+  (js/console.log "test component hooks" (str props))
+  ;; using plain unwrapped hooks for simplicity
+  (let [[counter set-counter] (react/useState 0)]
+    [:div
+     [:h1 title]
+     [:button.p-2.bg-blue-200
+      {:on-click #(set-counter inc)}
+      (str "Click Me / Uses React Hooks: " counter)]]))
+
+(def ^:export TestComponent
+  (r/reactify-component test-component (r/create-compiler {:function-components true})))
+
+(def ^:export TestComponentHooks
+  (r/reactify-component test-component-hooks (r/create-compiler {:function-components true})))
diff --git a/src/nextjournal/clerk/render/editor.cljs b/src/nextjournal/clerk/render/editor.cljs
index bfbcdc1d6..9f6fbe4be 100644
--- a/src/nextjournal/clerk/render/editor.cljs
+++ b/src/nextjournal/clerk/render/editor.cljs
@@ -14,6 +14,7 @@
             [nextjournal.clerk.viewer :as v]
             [nextjournal.clojure-mode.extensions.eval-region :as eval-region]
             [nextjournal.clojure-mode.keymap :as clojure-mode.keymap]
+            [reagent.core :as r]
             [rewrite-clj.node :as n]
             [rewrite-clj.parser :as p]
             [sci.core :as sci]
@@ -147,7 +148,7 @@
   (update doc :blocks (partial map (fn [{:as cell :keys [type text var form]}]
                                      (cond-> cell
                                        (= :code type)
-                                       (assoc :result                                                
+                                       (assoc :result
                                               {:nextjournal/value (cond->> (eval form)
                                                                     var (hash-map :nextjournal.clerk/var-from-def))}))))))
 
@@ -158,6 +159,12 @@
        (eval-blocks)
        (v/with-viewer v/notebook-viewer)))
 
+(defn eval-notebook-component [{:keys [code]}]
+  [eval-notebook code])
+
+(def ^:export EvalNotebook
+  (r/reactify-component eval-notebook-component (r/create-compiler {:function-components true})))
+
 (defonce bar-height 26)
 
 (defn view [code-string]