Fork me on GitHub
#clojurescript
<
2020-01-27
>
Hi08:01:46

Hello, how to convert JS exception into ClojuresScript exception?

p-himik08:01:35

What do you mean by "ClojureScript exception"?

Hi08:01:13

I assumed that it is something different than JS exception... is it not? 😮

Hi08:01:58

heve you tried to log JS exceptions with Timbre?

p-himik08:01:03

It is not. :) CLJS has ex-info that creates an instance of ExceptionInfo. But you don't have to use it - you can catch anything that you can throw. Including JS exceptions.

p-himik08:01:18

No, I don't think I've ever used Timbre.

😕 4
p-himik08:01:44

Is there a problem with Timbre and JS exceptions?

Hi08:01:41

thows some protocol missing exception...

p-himik08:01:26

Can you paste the exception here?

Hi08:01:07

oops can not reproduce and have to go to meeting now 😢 thanks for your help!!! 😉

👍 4
belan09:01:19

Has anyone had an issue importing vega libraries in clojurescript? I’m getting the following error in my browser when attempting to convert a vega spec into an actual graph:

failed to load module$node_modules$vega_lite$build$vega_lite.js SyntaxError: "missing ) after for-loop control"
    globalEval 
    evalLoad 
    <anonymous> 
Looks like something that the Google closure compiler is doing weirdly… Other warnings include:
failed to load cljsjs.vega_lite.js Module not provided: module$node_modules$vega_lite$build$vega_lite app.js:2218:15
shadow-cljs - failed to load module$node_modules$vega_embed$build$vega_embed /js/compiled/cljs-runtime/shadow.js.js:39:17
failed to load cljsjs.vega_embed.js Module not provided: module$node_modules$vega_lite$build$vega_lite
The exception is:
ReferenceError: vegaEmbed is not defined
We’re importing the vega components via ShadowCljs, relevant config in package.json:
{"dependencies": 
      [...]
      "vega": "^5.9.1",
      "vega-embed": "^6.2.2",
      "vega-lite": "^4.0.2"
      [...]
}

p-himik09:01:05

"missing ) after for-loop control" sounds like your Vega spec is incorrect. I've used Vega with CLJS, although it was not the Vega-Lite version.

belan09:01:22

Weird thing is, the page renders fine (with the vega viz) in Safari, but not in Firefox or Chrome…

p-himik09:01:48

Oh. That is strange.

belan09:01:03

The spec itself is a very basic one using hanami

belan09:01:28

I didn’t apply too many transformations beyond a default one i took from his examples

belan09:01:47

@U2FRKM4TW what did you use for dependency management when you used vega?

p-himik09:01:46

Yeah, it's not your spec. Does that SyntaxError give any details about the line number? I used NPM + shadow-cljs + deps.edn.

p-himik09:01:28

Also, can you create a minimal reproducible example that I could check out?

belan09:01:36

here it is with line numbers included:

failed to load module$node_modules$vega_lite$build$vega_lite.js SyntaxError: "missing ) after for-loop control"       app.js:2218:15
    globalEval 
    evalLoad 
    <anonymous> 

belan09:01:52

I’ll work on an example

p-himik10:01:17

Ah, by default shadow-cljs uses :devtools {:loader-mode :eval} which messes up the line numbers since now the code is not in a separate file but in the same app.js.

belan10:01:00

ah… is there a way I can modify that to make it more friendly to you?

p-himik10:01:45

Yep, just set the :loader-mode to any value other than :eval.

p-himik10:01:59

But a reproducible example would be much better. :)

belan10:01:06

yup, I think we’re almost there

belan10:01:37

so after putting together a bare-bones example, it’s all working. I suspect that using lein with shadow got very messy, and compilation is stuffing up somewhere. I can send the lein config if you’re a glutton for punishment, but otherwise let’s leave it here 😄

p-himik10:01:07

How exactly do you use lein with shadow-cljs?

belan10:01:09

do you want the project.clj?

p-himik10:01:43

Nah, I mean the build process. Do you just set :lein true in your shadow-cljs.edn?

belan10:01:45

we use the lein-shadow plugin, and run with lein shadow watch app

p-himik10:01:36

OK. Well, the above exception doesn't sound like anything that would result from using lein. Try setting :loader-mode to some value other than :eval and see what line number it gives you, then see what's at that line. Should be a messed up for loop.

belan10:01:01

okay, will do

belan10:01:11

We got a different error output this time!

SyntaxError: missing ) after for-loop control module$node_modules$vega_lite$build$vega_lite.js:370:209
uncaught exception: Module not provided: module$node_modules$vega_lite$build$vega_lite js.js:88:4
    jsRequire js.js:88
    require js.js:100
    <anonymous> cljsjs.vega_lite.js:3
uncaught exception: Module not provided: module$node_modules$vega_lite$build$vega_lite js.js:88:4
    jsRequire js.js:88
    require js.js:100
    <anonymous> cljsjs.vega_embed.js:3

belan10:01:45

for what it’s worth, all the modules that are said not to be provided have been installed via npm and included as dependencies in lein

p-himik10:01:49

It says "not provided" probably because of that SyntaxError - the module was provided, it just couldn't be loaded. So, if you now open module$node_modules$vega_lite$build$vega_lite.js:370:209, what's in there?

belan11:01:53

It’s a bit hard to understand - I’m presented with a massive block of js text

belan11:01:11

I’ll paste it somewhere where I can get line numbers

p-himik11:01:27

Oh, what editor/IDE do you use that doesn't show line numbers?

belan11:01:41

I just opened it in my browser

belan11:01:17

I’m very sorry but need to head off - really appreciate your help! do you mind if I pick up this thread again tomorrow?

p-himik11:01:52

Don't mind at all - add more details whenever you can. Regardless of what we find at that particular line/column, my next steps would probably be: 1. Try to build the CLJS code using only shadow-cljs, with no lein and lein-shadow at all 2. Try to remove all of the app code except the one that creates the Vega chart 3. Remove CLJS dependencies that now aren't used, one by one Between all points, check whether the app works.

p-himik11:01:47

Since your app doesn't work but the minimal example does, this process would allow us to find that point of breakage. Of course, you can go the other way - try to build up on that minimal example till it breaks. Up to you.

belan11:01:52

Really appreciate it - great advice!!

belan11:01:25

@U2FRKM4TW quick update on this: I took all existing code and did the following differently: • ran it using shadow-cljs.edn instead of a project.clj • upgraded to reagent 0.9.1 from 0.8.0 due to a TypeError when using :> (see here: https://github.com/reagent-project/reagent/commit/60f7b4bc0c27672459a7a9babf22be2465258e4f) It all works now…

👍 4
belan11:01:12

The issue was not the reagent version, it was something in lein, or the config

erik09:01:13

are there any open source cljs+figwheel-main projects that build a Chrome extension?

erik09:01:35

or anyone that can provide a basic working example figwheel-main conf/setup that passes Chrome's security checks?

Hi17:01:25

Hi, I have JS object that prints like that: #object[Error] How can I convert it to Clojure Exception? so I can use it with Timbre logging

borkdude17:01:38

@feikas If I remember correctly, if you pass the exception as the first argument to error it will log the stacktrace of that exception

Marko Horvatic17:01:07

Hi there. I'm new here. Anybody knows what is the best way to interop with (iterate over) Map object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

borkdude17:01:19

@marko.horvatic You could first translate it to a CLJS map with js->clj and then iterate over that, if performance is not that important

borkdude17:01:42

so like this:

cljs.user=> (seq (js->clj (js-obj "a" 1)))
(["a" 1])

Marko Horvatic17:01:24

@borkdude Well Map is I guess a bit tricky

(seq (js->clj (js/Map. (clj->js [["a" 1]]))))
#object[Error Error: [object Map] is not ISeqable]

borkdude17:01:06

hmm, I see. I read something about this: https://twitter.com/swannodette/status/533354821999677440?lang=en but I have no clue sorry 🙂

Marko Horvatic17:01:49

np, thanks anyway.

p-himik18:01:30

Given what borkdude has posted, you can do it like this:

cljs.user=> (vec (es6-iterator-seq (.entries (js/Map. #js [#js ["a" 1] #js ["b" 2]]))))
[#js ["a" 1] #js ["b" 2]]

p-himik18:01:34

If you work with js/Maps all the time and don't really care about both the performance and the advice to not extend built-in types, you can probably (extend-type js/Map IEncodeClojure (-js->clj [x opts] ...)).

Marko Horvatic18:01:27

@U2FRKM4TW Thanks for the answer. It is not that often. I have isolated case of external dependency that feeds me with js/Map data. About your response, I can see es6-iterator-seq is marked as experimental https://cljs.github.io/api/cljs.core/es6-iterator-seq Does this pose any risk?

p-himik18:01:48

I doubt that it will be removed completely, maybe only changed somehow. It has been there for 6 years. Also, its implementation is so trivial, you can just copy-paste it into your own project (maybe just name it differently to avoid shadowing CLJS of the core symbol).

Hi18:01:55

Hi, I have JS object that prints like that: #object[Error] How can I serialize it with pr-str so it can be read after with read-string ? js->clj does not help

p-himik18:01:14

To print it in some way that allows reconstructing the object later, you have to extend-type the js/Error to support the IPrintWithWriter protocol. To read it back (assuming, you're talking about cljs.reader/read-string), you need to add a custom reader to cljs.reader/*tag-table*.

4
jmckitrick19:01:54

I’ve been working with SPAs and re-frame for a bit, but I’m looking at reitit and front end routing for the first time. Other than making the app browser-friendly re: history, what else will a front end router do for me?

valtteri19:01:52

I use reitit-frontend to decide which view to render and to run initialization code on page change (controllers). There are also nice utils to coerce data from path and query parameters.

valtteri19:01:12

Aaand you can also navigate programmatically

ikitommi19:01:26

It’s nice to be able to annotate your routes with arbitrary data: required roles for routes, layout info, attached view components etc. Also, as the route data accumulates from root to the leaves, you can have a "/admin" route fragments with user role requirements that effect all the child routes.

✔️ 4
ikitommi19:01:38

(def router
  (rf/router
    [["/" {:name ::home
           :icon "inbox"
           :view [:h1 "home!"]
           :title "Kotisivu"}]
     ["/gallery" {:name ::gallery
                  :icon "desktop"
                  :title "Gallery"
                  :view demo.gallery/form-view}]
     ["/admin" {:roles #{:admin}}
       ["/users" {:name ::users
                  :view demo.admin/user-view}]
       ["/orders" {:name ::orders
                   :view demo.admin/order-view}]]
     ["/schema" {:name ::poc
                 :icon "line-chart"
                 :title "Schema"
                 :view [demo.schema/form-view]}]
     ["/user" {:name ::user
               :icon "user"
               :title "Käyttäjä"
               :view user-view}]]))

ikitommi19:01:32

disclaimer: involved in developing the lib