squint 2023-12-14 | Slack Archive

escherize04:12:43

I am trying to use alpine.js, with squint. I can get it working by embedding strings of js (:face_vomiting:) in my hiccup. Some things require json (which is easy to produce) and others require some plain js expressions. e.g. just: “count--“. Can I produce an analog with squint? Fuller example in 🧵

escherize04:12:32

This is a counter component in hiccup (https://github.com/escherize/huff actually), no processing going on:

(defn counter []
  [:div {:x-data "{\"count\":0}"}
   [:button {:x-on:click "count--"} "Decrement"]
   [:button {:x-on:click "count++"} "Increment"]
   [:h1 {:x-text "count"}]
   [:div {:x-data "{\"words\":[\"Once\",\"upon\",\"a\",\"time,\"]}"
          :x-text "words[count]"}]])

escherize04:12:59

Same thing, with the json removed

(defn counter-json []
  [:div {:x-data {:count 0}}
   [:button {:x-on:click "count--"} "Decrement"]
   [:button {:x-on:click "count++"} "Increment"]
   [:h1 {:x-text "count"}]
   [:div {:x-data (j {:words ["Once" "upon" "a" "time"]})
          :x-text "words[count]"}]])

escherize04:12:00

What I’d like to use:

(defn counter-want-one []
  [:div {:x-data {:count 0}}
   [:button {:x-on:click (compile
                           (fn [{:keys [count]}]
                             (set! count (dec count))))} "Decrement"]
   [:button {:x-on:click (compile
                           (fn [{:keys [count]}]
                             (set! count (inc count))))} "Increment"]
   [:h1 {:x-text "count"}]
   [:div {:x-data (j {:words ["Once" "upon" "a" "time"]})
          :x-text "words[count]"}]])

escherize04:12:48

or maybe

...
[:button {:x-on:click (alpine/update! :count inc)} "Increment"]
...

zane05:12:51

I had the same idea. Should be straightforward!

borkdude07:12:40

let's have a look

borkdude08:12:00

I made a bb hiccup example here with inline JS here: https://github.com/squint-cljs/squint/blob/main/examples/babashka/index.clj I'm not sure what the added value of squint + alpine.js is

borkdude11:12:35

I've got this working now:

[:body
                   [:div {:x-data (->js '{:counter 0})}
                    [:button {:x-on:click (->js '(set! counter (inc counter)))}
                     "Increment"]
                    [:span {:x-text "counter"}]]]

borkdude12:12:36

ok, this is what I've got right now: https://github.com/squint-cljs/squint/blob/main/examples/babashka/alpinejs.clj one problem is that when you remove the non-atom counter from x-text, you don't get a re-render

borkdude12:12:46

I get it, it does a reference check on the data

borkdude12:12:51

and the atom ref doesn't change

borkdude13:12:27

#Also sent to the channel

https://github.com/squint-cljs/squint/blob/main/examples/babashka/alpinejs.clj

👍 1

borkdude13:12:27

replied to a thread:I am trying to use alpine.js, with squint. I can get it working by embedding _strings of js_ (:face_vomiting:) in my hiccup. Some things require json (which is easy to produce) and others require some plain js expressions. e.g. just: “count--“. Can I produce an analog with squint? Fuller example in :thread:

https://github.com/squint-cljs/squint/blob/main/examples/babashka/alpinejs.clj

👍 1

borkdude16:12:51

https://github.com/squint-cljs/squint/blob/af3153b43365022191d93f7f136ed2d48184a6a3/examples/babashka/alpinejs_tictactoe.clj#L30

🤌 1

Lari Saukkonen16:12:02

Using squint with Next.js seems to work nicely. Only one issue, for pure client components one option is to write “use client” on the first line but since squint imports itself on the first line it cannot be done. There are ways around that tho.

borkdude17:12:49

Good to hear! We can try to accommodate this better. I had similar problems with getting js-doc to work and putting a // ts-check on the first line

borkdude17:12:52

issue welcome

Lari Saukkonen17:12:21

Issue: https://github.com/squint-cljs/squint/issues/439

borkdude20:12:28

I think it should work now with 0.4.82

Lari Saukkonen06:12:43

That was fast! I will try out today. :sports_medal:

Lari Saukkonen13:12:40

Works fine. Thank you!