clojurescript 2022-08-09

thheller06:08:50

krell only does react native so can't use it for anything else

thheller06:08:58

shadow-cljs does everything, so your choice 😉

🙌 1

muje hoxe18:08:15

can i switch easily if i want to?

thheller18:08:30

sure, its all just cljs. just the way you use the tools and the configs are different. the code is just cljs

zakkor10:08:11

Hey guys, just a quick check:

;; If `product` doesn't exist, fetch it, then update parent state with the newly fetched `product`
(defn fetcher [& {:keys [product on-fetch]}]
  [:Fetcher
   (when (nil? product)
     {:update :parent :on-resolve (fetch-json ""
                                              #(on-fetch (-> % :title (or "Failed to fetch"))))})
   (if product
     [:div "Fetched successfully!"]
     [:div "Loading..."])])

(defn app [& {:keys [product]}]
  [:App
   [:div "Product is: " product]
   (fetcher
    :product product
    :on-fetch #(app :product %))])

Do you find this code intelligible at all? Are you able to figure out what's going on?

p-himik11:08:53

LGTM, although I'd use just {:keys [...]} instead of & {:keys [...]} - easier to compose and format such functions.

👍 1

p-himik11:08:23

Also, depending on what you're doing and assuming you're using Reagent, that (fetcher ...) should probably be [fetcher ...].

zakkor11:08:01

Thanks! It's not Reagent, it's a similar framework (but with no dependencies on anything else) I'm working on, where the selling point is purely functional components, no atoms

zakkor11:08:05

Another example:

(defn up-down
  [x]
  [:Up-down
   [:div {:class "flex items-center self-start space-x-3"}
    [:button {:class "px-3 py-1", :on-click #(up-down (inc x))}
     "+"]
    [:span "Current value: " x]
    [:button {:class "px-3 py-1", :on-click #(up-down (dec x))}
     "-"]]])

zakkor11:08:37

(See how "updating state" is just instead a recursive call to the component, which returns the next version of itself)

popeye07:08:40

@U2FRKM4TW / @U03EC9KU17H What is :Fetcher here, till now I am using :div as first element while defining hiccup syntax

zakkor08:08:07

The uppercase keyword denotes a component, rather than a plain element

popeye08:08:13

is there any document to refer such syntax ? I am seeing this for first time

p-himik09:08:14

As zakkor mentioned, it's not from Reagent but rather from an unrelated framework. In Reagent, that would probably result in a warning and <Fetcher> directly in the DOM, but I'd have to check.

popeye09:08:47

ohh... Thanks for the message @U2FRKM4TW

Matt23:08:49

I’m trying to add figwheel-main to an existing leiningen project, and am trying to now build for the first time (`lein trampoline run -m figwheel.main -- -b dev -r`) Any thoughts as to how I can solve this error message? It does manage to open a new tab at 9500, but it’s just the default dev page, and the repl prompt never appears because it doesn’t successfully connect

[Figwheel] Compiling build admin to "target/public/cljs-out/admin-main.js"
[Figwheel] Failed to compile build admin in 4.881 seconds.
[Figwheel:WARNING] Compile Exception: 'com.cognitect.transit.Writer com.cognitect.transit.TransitFactory.writer(com.cognitect.transit.TransitFactory$Format, java.io.OutputStream, java.util.Map, com.cognitect.transit.WriteHandler, java.util.function.Function)'  
[Figwheel:SEVERE] 'com.cognitect.transit.Writer com.cognitect.transit.TransitFactory.writer(com.cognitect.transit.TransitFactory$Format, java.io.OutputStream, java.util.Map, com.cognitect.transit.WriteHandler, java.util.function.Function)'
[Figwheel] Starting Server at 
[Figwheel] Starting REPL
Prompt will show when REPL connects to evaluation environment (i.e. a REPL hosting webpage)

2022-08-09

Channels