clerk

Jeremy 2025-02-22T13:49:04.302539Z

Is there a simple way to include css/js scripts? I attempted to cljs a while back, but it took a huge chunk of my time and yielded nothing; I'm hoping css/js is easier, besides injecting at runtime with eval-cljs

mkvlr 2025-02-22T17:15:52.455829Z

the current recommended way is using alter-var-root , see https://github.com/nextjournal/clerk/issues/323#issuecomment-1457823019

👍 1
Jeremy 2025-02-22T17:40:10.274589Z

Thanks

Jeremy 2025-02-22T16:23:19.179979Z

Also, can an atom be synced without triggering clerk's recompute every time? I'm trying to stream data from the server and recompute takes 400ms total for 2 synced atoms

mkvlr 2025-02-22T17:17:34.975779Z

if you want to send data to the server without a recompute, you can use nextjournal.clerk.render/clerk-eval (takes a form that it will eval on the server)

Jeremy 2025-02-22T17:48:10.832309Z

I'm trying to stream data the other. from the server to the client

mkvlr 2025-02-22T17:50:58.861689Z

if you only change the sync atom on the server, there should be no extra recompute

mkvlr 2025-02-22T17:51:30.533559Z

are you on the latest clerk?

mkvlr 2025-02-22T17:51:49.058479Z

or is one sync atom changing the other?

Jeremy 2025-02-22T17:54:42.769259Z

Initially, I was changing 2 sync'ed atoms. but now, I disable recompute and trigger it at the end of the function. However, I'm wondering how I can do without recompute for this stream and just send data from server to client. recomputing takes between 200ms to sometimes 500ms.

mkvlr 2025-02-22T18:06:15.105869Z

if you change it to a normal atom (no sync), and call

(nextjournal.clerk.webserver/update-doc @nextjournal.clerk.webserver/!doc)

mkvlr 2025-02-22T18:06:26.198549Z

does that work and is that any faster?

mkvlr 2025-02-22T18:08:43.947439Z

speeding up recompute! is on my list for sure

mkvlr 2025-02-22T18:09:32.522109Z

https://github.com/nextjournal/clerk/issues/731

Jeremy 2025-02-22T18:12:03.393769Z

if it is a normal atom, how would I be able to access it in render-fn?

mkvlr 2025-02-22T18:16:44.233639Z

with a viewer or eval-cljs

mkvlr 2025-02-22T18:17:17.055299Z

probably requires all a bit too much ceremony to be nice to use

mkvlr 2025-02-22T18:21:30.880259Z

but pretty swamped with client work atm so don’t have a lot of time to spend on clerk

1
Jeremy 2025-02-22T18:48:53.256819Z

One more thing if you don't mind.. > with a viewer or eval-cljs I don't quite get how. I'm guessing I haven't fully figured out viewers yet. I tried:

(def foo (atom 0))
(clerk/with-viewer
  {:transform-fn clerk/mark-presented
   :render-fn
   (template
    (fn [v]
      (reagent.core/with-let
        []
        [:div "foo: " v])))}
  @foo)
(comment
  (swap! foo inc)
  (nextjournal.clerk.webserver/update-doc! @nextjournal.clerk.webserver/!doc)
  ,)
after calling update-doc! , the viewer doesn't reflect the new value (understandable since the nb isn't recomputed). but the preview of (def foo ...) in the browser changes. So I'm still unsure how that is happening. I've tried to access foo from within the viewer as well as with (clerk/eval-cljs '(prn foo)) and (clerk/eval-cljs (prn foo))` , but cljs doesn't find any such var

mkvlr 2025-02-22T19:15:45.425799Z

(ns stream
  (:require [nextjournal.clerk :as clerk]
            [nextjournal.clerk.webserver :as webserver]))

(clerk/with-viewer {:render-fn '(fn []
                                  (when-not (resolve 'user/my-atom)
                                    (intern *ns*
                                            'my-atom
                                            (reagent.core/atom [])))
                                  [nextjournal.clerk.render/inspect @@(resolve 'user/my-atom)])}
  {})

(comment
  (webserver/render-eval '(swap! user/my-atom conj (rand-int 10))))

🎉 1
mkvlr 2025-02-22T19:15:55.081949Z

this works but it’s not pretty

mkvlr 2025-02-22T19:16:19.161629Z

btw with render-nrepl you can also get a nrepl into clerk’s render env

mkvlr 2025-02-22T19:16:46.582599Z

gave a demo in https://www.youtube.com/watch?v=07k0IFviazg

Jeremy 2025-02-22T20:01:41.131949Z

Yh it worked.. by any chanc, do you recall what viewer is used for top-level defs? I thought it was var-viewer, but that simply renders the var's name (`(def foo (atom 0)` is different from (do (def foo (atom 0)))). I'd like to inspect the viewer and see how it accesses the atom. I'm still interested in this approach cause it handles diffs. Otherwise, I'd need my own set of macros to play nice with the render-eval method