Export reactified components for testing

components using hooks not working because of this bug reagent-project/reagent#548
nextjournal · Jun 29, 2023 · a867882 · a867882
1 parent d801870
commit a867882
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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]

diff --git a/src/nextjournal/clerk/sci_env.cljs b/src/nextjournal/clerk/sci_env.cljs
@@ -15,7 +15,6 @@
             [edamame.core :as edamame]
             [goog.object]
             [nextjournal.clerk.cherry-env :as cherry-env]
-            [nextjournal.clerk.parser]
             [nextjournal.clerk.render :as render]
             [nextjournal.clerk.render.code]
             [nextjournal.clerk.render.context :as view-context]
@@ -27,6 +26,7 @@
             [nextjournal.clojure-mode.commands]
             [nextjournal.clojure-mode.extensions.eval-region]
             [nextjournal.clojure-mode.keymap]
+            [reagent.core :as r]
             [reagent.dom.server :as dom-server]
             [reagent.ratom :as ratom]
             [sci.configs.applied-science.js-interop :as sci.configs.js-interop]