From 2632c2a68afa6b89a5c54b4fa4fd5895e491f1a9 Mon Sep 17 00:00:00 2001
From: Martin Kavalar <martin@nextjournal.com>
Date: Mon, 21 Oct 2024 06:12:26 -0700
Subject: [PATCH] Add test notebook

---
 notebooks/large_sync.clj | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 notebooks/large_sync.clj

diff --git a/notebooks/large_sync.clj b/notebooks/large_sync.clj
new file mode 100644
index 000000000..b00ed1962
--- /dev/null
+++ b/notebooks/large_sync.clj
@@ -0,0 +1,37 @@
+(ns large-atom-sync
+  (:require [nextjournal.clerk :as clerk]))
+
+;; # Clerk synced atoms and large data
+
+;; **1.** Define a Clerk synced atom called `!state`.
+
+(def el
+  {:hi :this
+   :is :a
+   :large :sync})
+
+^::clerk/sync
+(defonce !state
+  (atom (vec (repeat 20000 el))))
+
+;; **2.** Verify that `!state` is present on both sides.
+(clerk/eval-cljs '!state)
+
+;; **3.** Make a button to cram a lot of data into `!state` on the SCI side.
+
+^{::clerk/visibility {:code :hide :result :hide}}
+(def large-sync-button-viewer
+  {:render-fn '(fn [_]
+                 [:button.bg-sky-500.text-white.rounded-xl.px-2.py-1
+                  
+                  {:on-click (fn [_]
+                               (swap! large-atom-sync/!state conj {:rand-int (rand-int 42000)}))}
+                  "Click for large sync!"])})
+
+^{::clerk/viewer large-sync-button-viewer}
+{}
+
+(peek @!state)
+
+;; **4.** Click the button to see what happens 🙂
+#_(clerk/recompute!)