Re-use tap viewers and state for taps window, add window ns

Author: philippamarkovics

notebooks/tap_window.clj

@@ -5,7 +5,8 @@
   (:require [nextjournal.clerk :as clerk]
             [nextjournal.clerk.viewer :as v]))
 
-(clerk/window! ::clerk/taps)
+#_(clerk/window! ::clerk/taps)
+(clerk/window! :my-window (clerk/html [:div.w-8.h-8.bg-green-500]))
 
 (comment
   (tap> (clerk/html [:div.w-8.h-8.bg-green-500]))

src/nextjournal/clerk.clj

@@ -80,37 +80,6 @@
 
 #_(recompute!)
 
-(defonce !taps (atom ()))
-
-(declare col)
-;; TODO: drop `col` in favour of a suitable viewer
-(defn window!
-  ([id] (case id ::taps (window! id {:title "🚰 Taps"} (col @!taps))))
-  ([id content] (window! id {} content))
-  ([id opts content]
-   (webserver/update-window! id (merge opts {:nextjournal/presented (update (v/present content) :nextjournal/css-class #(or % ["px-0"]))
-                                             :nextjournal/hash (gensym)
-                                             :nextjournal/fetch-opts {:blob-id (str id)}
-                                             :nextjournal/blob-id (str id)}))))
-
-(defn destroy-window! [id] (webserver/destroy-window! id))
-
-(defn tapped [x] (swap! !taps conj x) (window! ::taps))
-(defonce taps-setup (add-tap tapped))
-
-#_(doseq [f @@(resolve 'clojure.core/tapset)] (remove-tap f))
-#_(reset! !taps ())
-#_(tap> (range 30))
-#_(window! ::taps)
-#_(destroy-window! ::taps)
-#_(tap> (html [:h1 "Ahoi"]))
-#_(tap> (table [[1 2] [3 4]]))
-#_(window! ::my-window {:title "🔭 Rear Window"} (table [[1 2] [3 4]]))
-#_(window! ::my-window {:title "🔭 Rear Window"} (range 30))
-#_(window! ::my-window {:title "🔭 Rear Window"} (plotly {:data [{:y [1 2 3]}]}))
-#_(window! ::my-window-2 {:title "🪟"} (range 100))
-#_(destroy-window! ::my-window)
-
 (defn ^:private supported-file?
   "Returns whether `path` points to a file that should be shown."
   [path]

src/nextjournal/clerk/render/window.cljs

@@ -124,7 +124,7 @@
 
 (defn show
   ([content] (show content {}))
-  ([content opts]
+  ([content {:as opts :keys [css-class]}]
    (let [!panel-ref (hooks/use-ref nil)
          !dragging? (hooks/use-state nil)
          !dockable-at (hooks/use-state nil)
@@ -188,4 +188,4 @@
                                       (reset! !dockable-at nil)
                                       (reset! !docking-ref nil))}
                       opts)]
-       [:div.p-3.flex-auto.overflow-auto content]]])))
+       [:div {:class (str "flex-auto " (or css-class "p-3 overflow-auto"))} content]]])))

src/nextjournal/clerk/tap.clj

@@ -28,7 +28,6 @@
 ^{::clerk/sync true ::clerk/viewer switch-view ::clerk/visibility {:result :show}}
 (defonce !view (atom :stream))
 
-
 (defonce !taps (atom ()))
 
 (defn reset-taps! []
@@ -45,9 +44,9 @@
 (def tap-viewer
   {:pred (v/get-safe ::val)
    :render-fn '(fn [{::keys [val tapped-at]} opts]
-                 [:div.border-t.relative.py-3.mt-2
-                  [:span.absolute.rounded-full.px-2.bg-gray-300.font-mono.top-0
-                   {:class "left-1/2 -translate-x-1/2 -translate-y-1/2 py-[1px] text-[9px]"} (:nextjournal/value tapped-at)]
+                 [:div.w-full
+                  [:div.font-sans.bg-slate-50.px-2
+                   {:class "py-[2px] text-[9px]"} (:nextjournal/value tapped-at)]
                   [:div.overflow-x-auto [nextjournal.clerk.render/inspect-presented val]]])
    :transform-fn (fn [{:as wrapped-value :nextjournal/keys [value]}]
                    (-> wrapped-value

src/nextjournal/clerk/window.clj

@@ -0,0 +1,46 @@
+(ns nextjournal.clerk.window
+  (:require [nextjournal.clerk.tap :as tap]
+            [nextjournal.clerk.viewer :as v]
+            [nextjournal.clerk.webserver :as webserver]))
+
+(def taps-viewer
+  {:render-fn '(fn [taps opts]
+                 (into [:div]
+                       (nextjournal.clerk.viewer/inspect-children opts)
+                       taps))})
+
+(defn window!
+  ([id]
+   (case id
+     ::taps (window! id {:title "🚰 Taps" :css-class "p-0"}
+                     (v/with-viewers (v/add-viewers [tap/tap-viewer])
+                       (v/with-viewer taps-viewer @tap/!taps)))))
+  ([id content] (window! id {} content))
+  ([id opts content]
+   (webserver/update-window! id (merge opts {:nextjournal/presented (update (v/present content) :nextjournal/css-class #(or % ["px-0"]))
+                                             :nextjournal/hash (gensym)
+                                             :nextjournal/fetch-opts {:blob-id (str id)}
+                                             :nextjournal/blob-id (str id)}))))
+
+(defn destroy-window! [id] (webserver/destroy-window! id))
+
+(doseq [w (keys @webserver/!windows)]
+  (destroy-window! w))
+
+#_(window! ::taps)
+
+#_(defn tapped [x] (swap! !taps conj x) (window! ::taps))
+#_(defonce taps-setup (add-tap tapped))
+
+#_(doseq [f @@(resolve 'clojure.core/tapset)] (remove-tap f))
+#_(reset! !taps ())
+#_(tap> (range 30))
+#_(window! ::taps)
+#_(destroy-window! ::taps)
+#_(tap> (v/html [:h1 "Ahoi"]))
+#_(tap> (v/table [[1 2] [3 4]]))
+#_(window! ::my-window {:title "🔭 Rear Window"} (table [[1 2] [3 4]]))
+#_(window! ::my-window {:title "🔭 Rear Window"} (range 30))
+#_(window! ::my-window {:title "🔭 Rear Window"} (plotly {:data [{:y [1 2 3]}]}))
+#_(window! ::my-window-2 {:title "🪟"} (range 100))
+#_(destroy-window! ::my-window)