This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-05-28
Channels
- # announcements (11)
- # aws (30)
- # beginners (98)
- # calva (11)
- # cider (42)
- # clj-kondo (4)
- # cljdoc (1)
- # cljsrn (5)
- # clojure (132)
- # clojure-europe (4)
- # clojure-ireland (1)
- # clojure-italy (35)
- # clojure-japan (2)
- # clojure-nl (5)
- # clojure-spec (5)
- # clojure-uk (24)
- # clojurescript (71)
- # clojutre (1)
- # core-async (6)
- # cursive (9)
- # data-science (4)
- # datascript (3)
- # datomic (78)
- # duct (16)
- # emacs (14)
- # events (2)
- # fulcro (141)
- # graalvm (5)
- # hoplon (14)
- # hyperfiddle (2)
- # jobs-discuss (14)
- # joker (8)
- # luminus (2)
- # off-topic (7)
- # om (1)
- # pathom (4)
- # pedestal (7)
- # planck (2)
- # quil (1)
- # re-frame (14)
- # reagent (2)
- # reitit (14)
- # robots (1)
- # shadow-cljs (20)
- # spacemacs (25)
- # specter (1)
- # sql (122)
- # tools-deps (63)
- # unrepl (2)
- # yada (34)
How do I hook up ClojureScript script in browser without using inline evaluation?
@ahmed1hsn What do you mean by "inline evaluation" in this case?
Like adding [:script app.client.init();]
script in index.html
file which is served initially and init
function defined in app/client.cljs
as entry point to whole application on client side.
What are the ways to avoid this? Because this is far from best as per Content-Security-Policy.
Well, in the actual html source, you'll find folks use two different options: 1) including the script source and then calling some main or init function within another script tag, or 2) include the script source and have some function call main or init in that source, such that when it is loaded, it runs
I think second one is better. Init function can be run on initial DOMContentLoaded
event. Right?
What I'm trying to avoid is first, because you have to allow unsafe-inline
directive of Content-Security-Policy. Which makes site vulnerable to XSS attacks as hackers can inject inline scripts in other script tags.
https://developers.google.com/web/fundamentals/security/csp/#inline_code_is_considered_harmful
You'd normally handle that as a separate concern, in the header of the page you're serving.
If you already have that set and you're getting errors because you're using inline scripts, yeah, you can switch it up to fire main/init on script load.
If we use inline scripts we have to enable unsafe-inline
.
Which does not seem safe.
If we evaluate inline script without enabling unsafe-inline
option in header it gives error.
Hi all, I'm trying to use a NPM library which return JS/Promises, I've tried many things, Promesa, core.async but always I get: [object Object] is not ISeqable, some clue?
Hey I am having a lot of trouble getting the example code from the om.next quickstart working. I keep getting a No protocol method IMapEntry.-key defined for type number: 0
error once I get too the "Changing Queries Over Time" section of the guide. Does anyone have any ideas?
Umh I think no John, well, at least in an explicit way hahha
@1aaronfortune If I had to guess, there was a change to MapEntries a year or two ago. That quickstart may be affected by that and not updated yet. It looks like it is trying to call key
on a number, 0
. Are the keys in the map being passed in numbers?
@comparalf You usually just call (.then p (fn [result] ...
@john It looks like it is passing in numbers. I figure I could probably troubleshoot it if I had any idea of what I was doing. Do you know of another place other than the quickstart that I could go to learn om.next.
(defmethod read :animals/list
[{:keys [state] :as env} key {:keys [start end]}]
{:value (subvec (:animals/list @state) start end)})
(defui AnimalsList
static om/IQueryParams
(params [this]
{:start 0 :end 10})
static om/IQuery
(query [this]
'[:app/title (:animals/list {:start ?start :end ?end})
])
Object
(render [this]
(let [{:keys [app/title animals/list]} (om/props this)]
(dom/div nil
(dom/h2 nil title)
(apply dom/ul nil
(map
(fn [[i name]]
(dom/li nil (str i ". " name)))
list))))))
Thats the offending code. Feel free not to read it. Don't want to force you to take to much time for me. @john
For starters, I'd recommend passing om.next and going straight to Fulcro. It carries on a lot of the same spirit of om.next, but has a lot of current dev work behind it
@john Thanks for the tip I will check it out !
@john Yes,
(.then (.login api email pass) (fn [result] (println result)))
and the result is the same
>Error: [object Promise] is not ISeqable
Maybe the JS lib is doing something peculiar inside... in JS, I invoke it with await without problem
@1aaronfortune Yeah, I don't see anything off the top of my head, just looking at it. It might be the destructuring happening on the return of (om/props this)
is calling key but isn't getting a map... but again, I think you'll find more support and action around Fulcro these days.
@comparalf There is a certain difficulty I've had with trying to interoperate with js written in async/await. Folks say that any async/await code should be translatable into pure promise/then syntax, but I've had a hard time there.
hmm, not sure what's calling seq in the above code :thinking_face: Hang around a bit though... there's some promise rangers in here every once in a while
@comparalf What does (.login api email pass)
return?
Running (.then (js/Promise.resolve 2) (fn [result] (println result)))
does exactly what you'd expect. So it seems to me the problem lies in (.login api email pass)
. Maybe email or pass are promises accidentally?
@jimmy literally, Promise { <state>: "pending" }
, I think no because I can see the request in firefox/console and the response 200 with right user/pass and 400 when they are wrong
Okay, replace (.login api email pass)
with (js/Promise.resolve {:login-response-here true})
. Does the error still occur?
@john Yes, I found many example in internet without success hehehe, and I don't want rewrite that library, I have enough understanding of the clojure syntax / semantic
are you sure the promise is not being passed somewhere else? is that the whole code?
I got lost Jimmy, in JS is api.login(email, pass).. but how will I replace the func call in that? I'm sorry, I have only a week in this world..
@roman01la certainly, it's an impure call inside a re-frame event
`(reg-event-fx :login (fn [{db :db} [_ email pass]] (if (or (string/blank? email) (string/blank? pass)) {:dispatch [:set-error "Required"]} (.then (.login api email pass) (fn [result] (println result))))))`
and so the cause is in there
(The function you pass in I mean.) So re-frame is trying to access the promise value as a map after it does the request
sometimes good description of a problem can save lots of time to everyone ๐
@comparalf So what @lilactown is saying is that the return type of your if branch is a promise in the second condition and a map in the first. You could wrap it in a do
and pass a map back.
Aahhh oooh hahahaha well.. I tried without reframe and it worked!
the โproperโ way to do this in re-frame is to register an effect and from your event, return that effect key in the map
(reg-fx :api/login
(fn [[email pass]]
(-> (.login api email pass) (.then (fn [result] (println result))))))
(reg-event-fx
:login
(fn [{db :db} [_ email pass]]
(if (or (string/blank? email) (string/blank? pass))
{:dispatch [:set-error "Required"]}
{:api/login [email pass]})))
I think I understand the issue, thank you @john
@lilactown in this case, is the proper way because the event causes a "side effect"?
the reg-event-fx
handler has to by synchronous. in order to do the async effect, we use a reg-fx
handler
Though side effecting print lines inline is usually okay in development. Just don't return the results of the side effect.
inside of the reg-fx
handler, in the .then
we will usually dispatch
another event like :login/success
or :login/failure
Great, I understand, I'll modify the code
Thank both of you @lilactown @john
this is a stupid question but I'm wasting so much time on this: I've got a js object that looks like this in a console.log : [Object: null prototype] {thing: ...}
how do I get to what's in thing
?
I've tried multiple things with oops' oget, but I keep getting Cannot read property 'prototype' of undefined
(aget obj "thing")
works, is there a way of making this work with oget? I'd like to use the soft :?thing ?
(aget obj "thing")
works, is there a way of making this work with oget? I'd like to use the soft :?thing ?
On server side Lacinia is great library for GraphQL and similarly Pathom for general Graph query parsing. What is the way to parse Graph queries in client side?
@ahmed1hsn I don't know any "cljs graphql framework" But you can use pathom (on client) as a bridge between graphql and EQL https://wilkerlucio.github.io/pathom/#_fulcro_integration
It is both Clojure/ClojureScript library. So, I should also be able to use it on server too??
I have worked with REST APIs, now I'm trying to understand GraphQL and EDN. I tried to work with Fulcro too. I understand fundamentals in it. But I'm struggling with Graph Query Parsing.
Hi - I have a library that I've refactored from a clj file to a cljc (newbie to cljs). I have 3 cljsbuild profiles: dev, test, and min, the last of which uses advanced compilation. My tests all pass, and I'm ready to require this library downstream in a larger project. If I've executed 'lein clean/lein cljsbuild once min/lein install', will that be sufficient for the 'min' build to be the cljs version selected when it's included downstream?