Add test notebook

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!)