This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2024-03-10
Channels
- # aleph (1)
- # beginners (4)
- # biff (7)
- # calva (7)
- # cider (8)
- # clara (17)
- # clerk (19)
- # clj-kondo (30)
- # clojure (12)
- # clojure-austin (1)
- # clojure-europe (12)
- # clojure-losangeles (1)
- # clojure-norway (21)
- # clojurescript (2)
- # datalevin (1)
- # datomic (24)
- # duct (3)
- # fulcro (8)
- # hyperfiddle (8)
- # lambdaisland (4)
- # membrane (6)
- # missionary (7)
- # off-topic (55)
- # overtone (2)
- # reagent (4)
- # reitit (4)
- # releases (6)
- # shadow-cljs (80)
Electric is pretty amazing.
I have a calculation that I'm doing on the server, a purely functional transformation of the function input to the function output. While I'm developing the function, I'm changing the code of the function, so the output depends on both the input and the current code defining the function.
Normally these would be separate implementations. Usually the program would be written expecting that the function definition isn't going to change, and to rerun the function if the input changes. If I changed the code, then either I'd run the program again, or reload the code, or have the code reloaded for me through a hot code reload feature.
I already had the input in an atom, referenced using the usual (e/def input (e/server (e/watch !input)))
. I set up a file system watch so I'd get a callback when the source code file changed. I use Clojure's (import 'my-namespace :reload)
to load the new code when the source file changes, and then store the updated function in its own atom !calc-fn
Next was the question of how to get this wired into Electric. I poured myself a fresh cup of coffee, and prepared to do a deep dive into the Electric examples and notes, and perhaps struggle my way through the Missionary documentation to see if I could find an answer.
(e/def calc-fn (e/server (e/watch !calc-fn)))
(e/defn UI []
(e/client
... (e/server (calc-fn input)) ...
And that was it.
The call has reactive dependencies on both the calculation function and the calculation input, so if either changes the output is updated. I can change the source code of the calculation, press save, and the output is updated instantly.
I implemented by own custom hot code reload feature in less time than it probably would have taken me to go find and figure out how to use a hot code reload library.
i have this code and would like to block the img from showing up until the url is downloaded. how would i do that?
The
element has a load
event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event)
This should work (haven’t tried it)
(dom/img
(dom/props {:src ""
:style {:width "256px"
:height "256px"
:display :block
:margin-top "20px"
:visibility :hidden} ; hidden by default
:class "cloud-image"})
(when (dom/on! "load" (constantly true))
(dom/props {:style {:visibility :visible}})))
Note some browsers might not load the image if it is not visible.
(visibility: hidden, display: none, etc.).
On the other hand, a better approach could be to give your img a background placeholder, which the browser will happily render while your image is loading.
You can do so with regular CSS.is there a difference between dom/on
and dom/on!
?