clojurescript 2022-05-20

What is the fastest and easiest way to build front end UI components using Clojurescript?

Shadow-cluster and reagent

Shadow-cljs

👍 2

maybe I'm beating a dead horse here and this is a silly question.. but would it make sense with an option to the cljs compiler that disabled minification for all JS interop? Most of my cljs are calls to my own code, it's only a handful of places where I call (.someMethod js-thing) etc. with this "externs safe mode" you'd get (slightly?) larger output files, but the benefit of never having to deal with externs

thheller12:05:52

lots of internal CLJS code does a lot of JS interop, basically everything is just JS interop in the end. so the trouble comes from not reliably figuring out what can and can't be renamed. definining "your calls" is the hard part here. if you use a macro that ends up generating interop calls, is that your code or not? 😛

thheller12:05:05

but externs inference takes care of all of this pretty much?

augustl13:05:45

ah, good point

dnolen14:05:15

@emaun you'll have to look at the git logs - probably some kind of fix for some consumers

🙌 1

tomc15:05:46

I have a Clojurescript app that uses Reagent with Preact instead of React. Everything works fine except Fragments, which for some reason I cannot access with react/Fragment. Interestingly, I can (:import (react Fragment)) in the ns declaration and then use Fragment in a (react/createElement Fragment etc) call, or I can access Fragment with object property syntax (.-Fragment react). I just can't access Fragment using the normal syntax for referencing a var in a namespace, react/Fragment. Anyone have a guess as to why this is happening?

p-himik16:05:55

I just tried this:

(ns ...
  (:require ["react" :as react]
            ["preact" :as preact]))

(js/console.log "React's Fragment" react/Fragment)
(js/console.log "Preact's Fragment" preact/Fragment)

And it seems to be working fine, at least with shadow-cljs and the latest version of Preact. What do you mean by "cannot access" exactly?

tomc16:05:06

Hi @p-himik, thanks for the reply. By "cannot access", I mean react/Fragment is undefined. I'm using a modified build of Preact, so clearly I've done something to create this situation. I'm curious what could cause a javascript "namespace" like preact to not work with the ns/function syntax but work with (.-function ns) .

p-himik16:05:29

Dunno. But exactly was Preact modified?

p-himik16:05:02

And do you require it in the same way as I do it above?

tomc16:05:35

I'm including preact and preact-compat as foreign libs in the clojurescript compiler config, and preact-compat :provides ["react", "react-dom", "create-react-class"] . The change to preact and preact-compat was to remove all the different module styles at the top (the original built script has support for ES modules, commonjs, and defining a global variable), and only leave in the global variable definition. I require preact in my code as react because of the :provide config I'm using; (:require [react]) Also note I'm not using shadow-cljs, I'm calling the clojurescript compiler directly via clojure code.

p-himik16:05:35

> and only leave in the global variable definition But why? There being multiple modules shouldn't affect anything - in the end, only one of them is compiled in.

p-himik16:05:15

If you do what you've done without changing Preact itself, does react/Fragment work?

tomc16:05:10

The multiple module definitions were present in the script after advanced compilation. I changed that code in an effort to shrink the script a bit more. I'll have to check whether react/Fragment works without those changes.

p-himik16:05:34

> The multiple module definitions were present in the script after advanced compilation That's... bizarre. I've never even heard about that, so maybe there's something else wrong in your setup. I'd try fixing that instead of bandaging it by changing your dependencies.

p-himik16:05:23

Just tried (with shadow-cljs, since I don't have a raw CLJS compilation set up) compiling an optimized build - there's only one reference to preact in there, to one file.

tomc17:05:01

Ok, thanks for the help. I'll see if I can simplify the way I'm using the dependencies to avoid this issue.

👍 1

Michelle Lim16:05:14

Reagent folks, did you know you it's possible to use React hooks in your components by making them functional (instead of class components)? I thought I was late to the party, but am finding out that others also had no idea, so I wrote up a quick summary. Hope this helps someone! https://mmmanyfold.notion.site/Yes-you-can-use-hooks-in-Reagent-c1747078e27644e0ab2eb35e07fe6922

🙌 1

p-himik16:05:00

You could use hooks even before :f>. :) Also, I'd recommend making that (fn [] ...) in your article a proper defn. It'll get a proper name, it will not be re-instantiated on each render of the parent component, it will work nicely with Reagent cache that way.

dvingo17:05:44

Thanks @U01B301AJV8 ! it is still not anywhere mentioned in the docs unless you go digging for it, so thanks for calling it out @p-himik if you could use hooks before :f> then what value does it provide?

dvingo17:05:18

also wondering why reagent doesn't provide a use-ratom hook so then :f> isn't needed

p-himik17:05:55

It is mentioned in the docs: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks > if you could use hooks before :f> then what value does it provide? Easier usage of existing functional components. > why reagent doesn't provide a use-ratom hook so then :f> isn't needed Why wouldn't it be needed? Functional components can be used even when no hooks are used at all. Apart from that, there are many existing hooks - nothing new that Reagent can introduce would alleviate the need for functional components here.

dvingo17:05:27

> "mentioned in the docs unless you go digging for it" but yes it is there. (but not here https://reagent-project.github.io/) You don't need :f> as :> works - so you'd use use-ratom inside a function and render it with :> that was my point

p-himik17:05:41

> (but not here https://reagent-project.github.io/) Because it's not a documentation website, it's a blog. :) But yeah, the docs could be improved and made more discoverable: https://github.com/reagent-project/reagent/issues/302 > so you'd use use-ratom inside a function What about every single hook that already exists out there? How would you use those?

dvingo17:05:39

I don't follow. Why wouldn't this work from Michelle's example:

(defn example []
  [:> ;; <-- make pass through untouched
   (fn []
     (let [[count set-count] (react/useState 0)] ; <---
       (react/useEffect ; <---
         #(set! (.-title js/document) (str "You clicked " count " times"))
         #js [checked])
       [:div
        [:p "You clicked " count " times"]
        [:button {:on-click #(set-count (inc count))}
         "Click me"]]))])

dvingo17:05:26

it's the same they mention in the docs https://cljdoc.org/d/reagent/reagent/1.1.1/doc/tutorials/react-features#pre-10-workaround

dvingo17:05:52

it says you can't use RAtoms there - so that's my point -just make a hook

dvingo18:05:16

to make it concrete - what i'm thinking is making this part of the API as use-ratom or similar https://github.com/reagent-project/reagent/blob/9ddf191a6a7338d226161e8af0d7ecc0bc2a6bae/src/reagent/impl/component.cljs#L400

❓ 1

p-himik18:05:44

> Why wouldn't this work from Michelle's example: Because it doesn't have a call to reagent.core/as-element. The docs do mention it. > it says you can't use RAtoms there - so that's my point -just make a hook Not every reactive thing is a ratom. Cursors won't work there, as well as reactions, and tracks. Instead of adding many things for every use case, wouldn't it be both simpler and easier to just add one :f>, exactly as it is done now? There might easily be other differences that I'm not aware of - specifically because :f> is not just a wrapper around :>. It has its own implementation, with its own logic.

dvingo19:05:10

yes, use-reagent - my point is a hook that performs that integrates with reagent. Agreed you'd probably end up with :f> at the end. Thanks for the discussion

👍 1

wevrem04:05:18

I don’t have a firm grasp on hooks, still learning react and reagent. But what is the #js [checked] portion as the final argument in the call to react/useEffect? I can’t see where checked is coming from, to my untrained eye it looks like a symbol that came out of nowhere.

Michelle Lim18:05:55

@UTFAPNRPT that's a typo from a previous version of the example! it's supposed to be count. thank you so much for catching it, fixed now

lambduhhh18:05:13

Great article Michelle! I actually didn’t know that and I’ve been doing reagent/reframe for yearssss. I think you’re right that when things “arrive quietly” its easy to miss. Thanks for pointing out 🎉

💯 1

genRaiy18:05:14

I need some help in providing an async function to a security framework (Okta) ... how would one provide a CLJS equivalent of this?

genRaiy18:05:20

const restoreOriginalUri = async (oktaAuth, originalUri) => {
  history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
};

lilactown18:05:01

the literal equivalent of this would be

(defn restore-original-uri [okta-auth original-uri]
  (js/Promise.
   (fn [res _rej]
     (res (.replace js/history (toRelativeUrl (or original-uri "/") (.. js/window -location -origin)))))))

genRaiy19:05:49

oh - nice!

dnolen18:05:28

that example doesn't make sense to me, since there is no await?

dnolen18:05:53

(but also I don't write modern JS with any regularity, so maybe I don't know this pattern)

genRaiy18:05:18

https://stackoverflow.com/questions/69644106/reactjs-okta-auth-restoreoriginaluri-function-not-redirecting sums up the problem and the correct JS answer

genRaiy18:05:04

It's completely valid JS https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function ... await is not mandatory

genRaiy18:05:25

maybe I just need something like p/create

dnolen18:05:32

that is not what the MDN article saying

dnolen18:05:57

await is mandatory to await a promise

dnolen18:05:05

whether you need to even do that is up to you

genRaiy18:05:34

I'm reading it differently - it says zero or more await expressions

genRaiy18:05:51

> Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

dnolen18:05:51

you are not reading it differently, but maybe you don't understand what it means

dnolen18:05:58

async does not magically await promises

dnolen18:05:58

anyways, there is an oddity which I can't find an answer to which that maybe async will resolve promise arguments that news to me

dnolen18:05:08

that's what the StackOverflow question seems to imply

dnolen18:05:55

ah no that is not what is happening

dnolen18:05:37

I see, the SO question is just about not checking for null that is all, async does not magically resolve promise arguments

dnolen18:05:45

this is failing when the return promise fails

dnolen18:05:27

anyways the SO question seems obfuscated - I don't think you need async anyway

dnolen18:05:31

it's just a callback

p-himik18:05:38

@raymcdermott To summarize the above, just write it as if there was no async. Unless you need to use some async functionality inside the function - then just return a promise.

dnolen18:05:50

what @p-himik said

dnolen18:05:09

it might be that the API needs you to return a promise, and they are using async here as syntactical shortcut

dnolen18:05:45

but couldn't find that out, and I don't have the patience to look at all this Okta docs

genRaiy18:05:14

haha I feel you 🙂

genRaiy18:05:33

thanks for the advice @dnolen and @p-himik

p-himik18:05:08

They're just using plain await which works on any value, not just promises. And in the TS type definitions they explicitly say that they expect a function that returns a promise (which isn't actually needed). @raymcdermott It's probably not applicable in your case, but beware of returning JS objects that have a field then in them that points to a function. Due to the mess that JS is, such objects will be treated as implicit promises.

pez22:05:57

I recon there must be a good reason why the g flag is not supported for ClojureScript regexes. But this gets a bit confusing:

(js/RegExp. "foo" "g")
=> #"foo"

(.replace "foo foo" (js/RegExp. "foo" "g") "bar")
=> "bar bar"

I am very happy this works (because re-seq is not an easily available option for me right now), but anyway.

pez22:05:22

Can I break out of a doseq?

pez22:05:41

Ah, :while. Cool!

2022-05-20

Channels