this thread might interest you https://clojurians.slack.com/archives/C0E1SN0NM/p1631619249227400

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates You can turn it into a call to the gql function.

https://clojureverse.org/t/modern-js-with-cljs-class-and-template-literals/7450 might help

Just as before - set your browser to break on both caught and uncaught exceptions and see what the triggered breakpoints show you.

Something that you await on in JS simply returns a promise. You can interop with that promise by using its API. The above snippet should end up something like this in CLJS:

(defn query [^js obj]
  (let [data (.-data obj)]
    (-> supabase (.from "items") (.insert #js [data]))))

Now heres the problem, insert does not exactly returns a promise but a promiselike object... the behavior I want is triggered in JS by awaiting for the object. Otherwise it's just a normal object. Really strange thing but in JS this works, const query = async ({data}) => {await supabase.from('items').insert([data])} but this does not work, const query = ({data}) => {supabase.from('items').insert([data])} I've tried to check to source code, it's written in typescript. Maybe using await is going to transform that object in promise? All of this is really strange, I'm not so sure this library is correctly written

Thanks for your answer !

I have to say that as well I'm not a JS/TS expert, I started this year and I want to use CLJS now so I don't spend my time writing JS and focus on writing CLJS which is more efficient

When I say this doesn't work I mean that the data is not inserted in the database

Wait, actually it wasn't supposed to work in the first place. You have braces in the body - it means that without an explicit return statement, the return value will be undefined.

=> x = () => {1}
() => {1}
=> x()
undefined

Have you tried the CLJS code?

I'm trying it ASAP thanks. I thought it was ok because I don't care about the return value of the function only the side effect

Yes, the thing is that I know that there is a better async paradigm in CLJS (core.async) but when dealing with interop I've got no other choices. So I should mimic the same thing in CLJS, essentially creating a promise that awaits for insert ? I think I could do it with the CLJS library promesa Thanks for the very clear explanations !

> a better async paradigm It's more powerful, but it doesn't mean that you should always stick to it when presented with a choice. > I've got no other choices Actually, you can resolve promises in a go block - there's <p! macro in cljs.core.async.interop. But again - think really hard before you decide to use it. If you can use interop without entangling your code and submerging yourself into a callback hell, then definitely go with that option. > So I should mimic the same thing in CLJS, essentially creating a promise Why? .insert already gives you a promise (or promise-like object, doesn't matter). Just return and use it as is. My example above should work.

I would also recommend against using any extra libraries, be it core.async or promesa - at least, not before you grok the basics.

You are completely right, thanks a lot @U2FRKM4TW I will look into it ! 🙂 And yes I'm still starting out, my dev workflow is still not the best so I'm a bit slow. I think you are right about keeping things simple for now. Thanks a lot and have a good day !

Have fun!

I tried your snippet but I have the problem I was thinking about. Here is the CLJS code,

(defn query [data] (-> sb/supabase (.from "test") (.insert #js [data])))
(set! (.. js/window -query) (query #js {:int 5})) ;; execute query and make the result available to browser

> Does that mean that I indeed need to somehow create a promise that awaits for this object ? No. You await a promise, not some objects. Calling query returns a promise - you have to await that promise to insert the data and get the result back, whatever the result is. You can do it like this:

(-> (query #js {:int 5})
    (.then (fn [result] (set! js/window -result result))))

Yup sorry I used the wrong word I meant awaiting for this promise. Make completely sense, for sure the set would need to await for the query... But I still find the promise paradigm very confusing I've been a Software Engineer for a lot of time and still have problems to grasp the concept. Now it's getting better tough thanks to you ! Thanks as well for the advices you provided, I have just one question. Can I have a empty then ? If I don't want to do anything with the result but just want something to wait for it, how would you do that? Thanks a lot everything is getting clearer now 🙏

> Can I have a empty then ? With regular promises, you don't have to await them because they will start their work when the JS's event loop allows. With promise-like objects you can't know when the work starts, so you gotta call .then. An "empty then" would be just (.then promise (fn [_])). Better yet, read up on JS Promise API and understand why you need to use .catch as well. If that promise-like object starts the work when .catch is called without .then then do that.

Thanks a lot @U2FRKM4TW I think I don't have any more questions, back to code 🎉

Yes.

Or rather, it is self-hosted, but you are not using it in such a way probably.

Okay, thanks

I would expect being able to run something like

(def a 1)
(eval (read-string "(+ a 2)"))
=> 3

Yes, you can self-host it. But AFAIK the process is rather involved and will drastically increase the bundle size, if you care about that.

https://clojurescript.org/guides/self-hosting

Perfect, thanks, that was exactly what I was looking for 😄

For most of the cases you can use a perfect tool called SCI by the best magician I know. cc @U04V15CAJ

@U0H9BVB98 https://github.com/borkdude/sci

@U04V15CAJ Do you know if I could use sci with access to the full JS/cljs context in the browser, to ex. be able to run:

(let [input (js/window.prompt "insert-cljs-code-here> ")]
  (eval input))

; 
; insert-cljs-code-here> (js/alert "Hello")
; => ... triggers a browser alert
; 

Yes, you can. This is documented in the README, you can also check nbb’s or scittle’s source. It’s recommended to use the newest SCI from git master.

I can provide more details when I get back home later today.

https://github.com/borkdude/sci#classes

It’s in there

@U0H9BVB98 So the option is {:classes {'js goog/global :allow :all}} (I'm finally home so I can type this ;))

@U04V15CAJ Cool, thanks for the help!

I've created a smallish project and it seems like it's not able to pick up the cljs.core ns, do you know what I'm doing wrong here?

# index.html
<head>
  <script src="/js/main.js"></script>
</head>

# shadow-cljs.edn
{:source-paths ["src"]
 :dependencies[[borkdude/sci "0.2.6"]]
 :dev-http {3000 "public"}
 :builds {:dev {:target :browser
                :output-dir "public/js/"
                :modules {:main {:init-fn my-ns.main/-main}}}}}

# my-ns/main.cljs 
(ns my-ns.main
  (:require [sci.core :as sci]))

(defn -main [& _]
  ; This prints "Hello" in browser console
  (sci/eval-string "(println \"Hello\")"  {:namespaces {'clojure.core {'println println}}})

  ; ... and so does this
  (sci/eval-string "(js/console.log \"Hello\")" {:classes {'js goog/global :allow :all}})

  ; This outputs a crash in browser console 
  (sci/eval-string "(println \"Hello\")" {:classes {'js goog/global :allow :all}}))

@U0H9BVB98 What is the question?

I don't see cljs.core in your examples?

The println example: this is kind of expected, since println is a side effect which isn't allowed by default, I would just override it like you did in the first example for now. I'm currently working on making this easier

Gotcha, I'll probably need to dig through the examples to learn more 😄

Thanks for creating sci, this is amazing

When you change the contents of value, the component is re-rendered. Re-rendering calls select-input. It throws away the old value and creates a new one with the default value []. Replace let with reagent.core/with-let (change the namespace according to your imports).

Thanks it worked but it is showing multiple times. So I need to just use (reset! value event)