hyperfiddle 2023-08-13 | Slack Archive

teodorlu07:08:33

Quick note: The link to the changelog from https://hyperfiddle.github.io/#/page/64bfd710-51cd-4376-8604-c579a0c231c3 seems to hit a 404. Should it point to https://github.com/hyperfiddle/electric/blob/master/CHANGELOG.md instead?

Dustin Getz13:08:51

thanks fixed

👍 2

teodorlu08:08:08

Hi! I’m Looking for a bit of advice. I’m writing a tiny markdown editor with https://pandoc.org/ running on the server. I want to preview the HTML pandoc generated from the markdown in the browser, next to a textarea with markdown in it. What’s the recommended way to do this from Electric? At first, thought maybe (dom/div (dom/innerHTML "<p>raw html here</p>")), as with dom/text. But I couldn’t find anything, so perhaps i have to (set! (.-innerHTML el) "<p>raw html</p>"). Attaching a screenshot of where I’m at right now. https://github.com/teodorlu/electric-starter-app/blob/a2087a7cfa9392ccb082f30bf0eb07c904e332c4/src/app/todo_list.cljc#L17-L35.

teodorlu08:08:11

I got a preview working with this:

(let [text-html (e/server (-> text pandoc/from-markdown pandoc/to-html))]
  (e/client
   (-> js/document
       (.getElementById "vwnm4o")
       (.-innerHTML)
       (set! text-html)))
  (dom/div
   (dom/div (dom/props {:id "vwnm4o"}))
   (dom/pre (dom/text (e/server text-html)))
   (dom/div
    (dom/p (dom/text
            "Q: how do I create a dom node with innerHTML equal to html-text?"
            " Please advise!"))
    (dom/p (dom/text "I'd like to have a preview of HTML I just generated here.")))))

Still very much curious about whether this is a good idea!

teodorlu09:08:01

Here’s a (somewhat modified) live version: https://commonmark-edit.app.iterate.no/ (hoping to show some clojure-curious colleagues the nicities of clojure and electric)

Dustin Getz14:08:42

set! on innerHTML is idiomatic

Dustin Getz14:08:37

that is essentially how dom/text works if you look at the source

👍 2

teodorlu15:08:19

OK, thanks!

Hendrik11:08:28

How can I keep track of that an electric value has changed within the past x seconds? In pseudo code:

(let [value (from-somewhere)
      recently-changed? (What-to-put-here? seconds value)]

For sure I could keep track of the state manually with an atom. However is there a reactive solution? I think debounce is part of the solution, but I am somewhat stuck: What I need is a flow that: • initial returns false • a debounced subflow that returns true if value changes and after x seconds delay returns false.

Dustin Getz12:08:38

the atom solution isn’t “bad”, Electric is currently missing direct support for cycles which (1) can be directly emulated with an atom and (2) the atom implementation is a perfectly good low level implementation for a cycle operator. we do publish e/with-cycle which is an experimental macro over this pattern

Dustin Getz12:08:42

perhaps we want to sample the current time every time the value changes (you can use something like (defn sample-system-time-ms [_] System/getTime)), whatever the api is

Hendrik20:08:05

There is no cycle. I finally came up with a working reactive solultion:

(defn changed-recently [flow t]
  (let [but-first (m/eduction (comp (drop 1) (map (constantly true))) flow)]
    (m/reductions {}
                  false
                  (gather
                   but-first
                   (m/ap (let [x (m/?< but-first)]
                           (try (m/? (m/sleep t false))
                                (catch Cancelled _ (m/amb)))))))))
;Usage
(new (changed-recently (e/fn [] some-value) 1000))

I am a bit concerned about using gather, which has been deprecated.

Dustin Getz18:08:25

you mean gather was removed from missionary? i think leo just didn’t want dozens of utility primitives in missionary, you can PR it to electric missionary contrib ns, which will be standalone someday and Leo reviewed

Dustin Getz18:08:29

As to the original q I envision a pure function that takes (current value, current time, previous value, previous time) where the previous state is fed back into the function via recursion, which is a cycle. Using actual electric recursion will stackoverflow iiuc (we have work to do here) so accomplishing the feedback with an atom instead is appropriate

Dustin Getz18:08:34

e/with-cycle is an experimental macro over this pattern

Dustin Getz18:08:16

your discrete time solution seems fine based on a quick review on mobile

Amos19:08:29

Hi, does anyone try to use frontend db like (datascript) with electric. I try to do that and I find difficulty to iterate the frontend data reactively since I can’t use the (e/for).

xificurC06:08:11

you can e/for on the client. Typically we loop over server data which is why most demos will show that

Amos08:08:50

Thank you.

2023-08-13

Channels