Fork me on GitHub
#clojurescript
<
2021-09-20
>
Christian Johansen07:09:34

Does anyone know how to make Firefox display the body of application/edn responses in the network tab? My edn responses come up as garble for some reason

p-himik07:09:28

What do you mean by garble exactly? Can you give a screenshot?

Christian Johansen07:09:44

Looks like it’s Base64 encoded for some reason

p-himik08:09:39

Indeed. Is it actually encoded, or does FF do that to plain EDN text?

Christian Johansen08:09:11

I don’t think it’s encoded. If I “copy as curl” I get a plain edn response

p-himik08:09:25

Huh, interesting! Do other browsers behave the same way?

Christian Johansen08:09:21

not sure, can check

Christian Johansen08:09:44

Hmm, maybe there’s something amiss with my content-length? :thinking_face:

Christian Johansen08:09:39

It works in Chrome

Christian Johansen08:09:30

I can confirm that Firefox Base64 encodes the response, but why? Does it think it is binary data?

Christian Johansen11:09:27

Doesn’t insire much hope, but at least I now know it’s a known issue

witek15:09:01

Why can't I "save" and use js/history.pushState? This works fine: (js/history.pushState nil "test" "/ui/test") While this

(let [push-state (.-pushState js/history)]
  (push-state nil "test" "/ui/test")) 
crashes with TypeError: Illegal invocation I want to "save" the original function, so I can replace it with my own wrapper function.

p-himik15:09:18

The let variant loses this. Try binding it to js/history.

witek15:09:10

I already tried

(let [push-state (.-pushState js/history)]
  (push-state js/history nil "test" "/ui/test"))
But I get the same TypeError

witek15:09:12

Or how do I "bind"?

witek15:09:20

This would be:

(let [push-state (.-pushState js/history)]
  (.bind push-state js/history)
  (push-state nil "test" "/ui/test"))
But still the same TypeError 😞

p-himik15:09:48

Look carefully at this line in the example there:

const boundGetX = unboundGetX.bind(module);

p-himik15:09:04

You're ignoring the return value in your own code.

2
witek15:09:13

Got it!

(let [push-state (.-pushState js/history)
      push-state (.bind push-state js/history)]
  (push-state nil "test" "/ui/test?hey"))
Thank you!

👍 2
Ryan16:09:48

Why will this code in in repl but not a LET block? (Math/floor (float (/ (.now js/Date) 1000)))

lilactown17:09:45

that should work within a let, would you show how you are trying to use it?

Ryan17:09:50

I think there was a problem with the / fn name? this code worked: (js/Math.floor (divide (.now js/Date) 1000))

lilactown17:09:24

no idea unless you show the code that doesn't work

Ryan18:09:48

(reg-event-fx
  ::process-token-handler
  (fn-traced [cofx [_ result]]
    (let [db (:db cofx)
          now-secs (js/Math.floor (divide (.now js/Date) 1000))
          expires-time (get-in db [:auth :session :expires])]
      {:db (-> db (update-in [:auth :session] { :expires expires-time})
                  (assoc-in [:auth :session] {:issued-at now-secs}))
       :dispatch [::events/navigate :homepage]
       ::events/timeout {:id :token-refresh :event [:refresh-token] :time (- 3540 (- now-secs expires-time))}})))
This code worked

Ryan18:09:08

(reg-event-fx
  ::process-token-handler
  (fn-traced [cofx [_ result]]
    (let [db (:db cofx)
          now-secs (js/Math.floor (/ (.now js/Date) 1000))
          expires-time (get-in db [:auth :session :expires])]
      {:db (-> db (update-in [:auth :session] { :expires expires-time})
                  (assoc-in [:auth :session] {:issued-at now-secs}))
       :dispatch [::events/navigate :homepage]
       ::events/timeout {:id :token-refresh :event [:refresh-token] :time (- 3540 (- now-secs expires-time))}})))
This code yielded a null pointer exception in Cursive

lilactown19:09:33

looks right to me

lilactown19:09:33

what do you mean “in Cursive”? in the build watch for this code? or Cursive is showing some exception when trying to analyze the code?

Ryan15:09:54

I was just stating the IDE I was using in case that was relevant

Ryan15:09:00

my wording was poor

p-himik17:09:34

Huh, I didn't realize we could use Math/floor instead of js/Math.floor.

🙀 1
Ryan18:09:48

Yeah, its a special namespace, I stuck with js/Math just so its a little more consistent with other top-level interop things like js/Date

p-himik18:09:46

It's more consistent with JS but also not consistent with Java, where it would also be Math/floor. But doesn't matter if your code is only for CLJS.

Benjamin20:09:23

Anyone here use Orgpad's volcano? https://github.com/OrgPad-com/volcano I've made a simple static site, and I want one of the pages to be a SPA, but it is not clear to me how to go about that. The only tidbit I could find was this part of the readme: > :routes - A https://github.com/juxt/bidi describing the routes on your web. Not all routes have to be used by static pages, so you can easily link your static websites to your SPA. To be clear, I want one of the the pages to still be using ClojureScript in the production build, whereas the rest of the pages are compiled down to plain HTML.

Luciano Laratelli21:09:42

Has anyone seen these errors when using material UI with shadow? I installed it with yarn add @mui/material @emotion/react @emotion/styled in the root of my project, did

(ns foo.bar
  (:require
   ["@mui/material" :as mat]))
, then compiled and went to the browser, where the console reports these errors (among others):
An error occurred when loading module$node_modules$$mui$material$node$CircularProgress$CircularProgress.js main.js:1560:15
[email protected]://localhost:3000/js/main.js:495:12
SHADOW_ENV</[email protected]://localhost:3000/js/main.js:1558:12
@http://localhost:3000/js/main.js:2210:12
main.js:1561:15
An error occurred when loading module$node_modules$$mui$material$node$LinearProgress$LinearProgress.js main.js:1560:15
[email protected]://localhost:3000/js/main.js:495:12
SHADOW_ENV</[email protected]://localhost:3000/js/main.js:1558:12
@http://localhost:3000/js/main.js:2313:12
main.js:1561:15
An error occurred when loading module$node_modules$$mui$material$node$Skeleton$Skeleton.js main.js:1560:15
goog.g[email protected]://localhost:3000/js/main.js:495:12
SHADOW_ENV</[email protected]://localhost:3000/js/main.js:1558:12
@http://localhost:3000/js/main.js:2399:12

p-himik21:09:30

What is the very first error? Or at least an error that says something - the errors in your snippet just tell that there's some error without actually telling what the error is.

Luciano Laratelli21:09:26

That’s the very first one in the console. There’s this one that came last:

shadow$provid[email protected]js/cljs-runtime/module$node_modules$$mui$material$node$ButtonBase$TouchRipple.js:23:21
[email protected]/cljs-runtime/shadow.js.js:34:18
shadow$provi[email protected]js/cljs-runtime/module$node_modules$$mui$material$node$ButtonBase$ButtonBase.js:5:467
[email protected]/cljs-runtime/shadow.js.js:34:18
shadow$[email protected]js/cljs-runtime/module$node_modules$$mui$material$node$ButtonBase$index.js:4:143
[email protected]/cljs-runtime/shadow.js.js:34:18
shadow$provide.module$no[email protected]js/cljs-runtime/module$node_modules$$mui$material$node$AccordionSummary$AccordionSummary.js:4:379
[email protected]/cljs-runtime/shadow.js.js:34:18
shadow$provid[email protected]js/cljs-runtime/module$node_modules$$mui$material$node$AccordionSummary$index.js:2:336
[email protected]/cljs-runtime/shadow.js.js:34:18
[email protected]/cljs-runtime/module$node_modules$$mui$material$node$index.js:38:349
[email protected]/cljs-runtime/shadow.js.js:34:18
[email protected]/cljs-runtime/shadow.js.js:59:20
@js/cljs-runtime/mccrossin.pages.js:2:60
[email protected]://localhost:3000/js/main.js:495:12
SHADOW_ENV</[email protected]://localhost:3000/js/main.js:1558:12
@http://localhost:3000/js/main.js:2736:12

p-himik21:09:10

Can you just copy the whole JS output after a refresh and attach it as a file?

Luciano Laratelli21:09:30

Sure, here it is:

p-himik21:09:27

Ah, huh, alright - so apparently shadow-cljs simply does not report such errors in full. I created https://github.com/thheller/shadow-cljs/issues/936 As to your actual issue - two things: • Try to set your browser to break on all exceptions, including the caught ones, and see what it gives you. Note that some of them might be false positives because exception throwing is sometimes used in contexts where it's not considered an error • If that doesn't give you any info, create a minimal reproducible example - I will take a look at it.

Luciano Laratelli21:09:17

I went into chrome to break on exceptions like you suggested, and got some different errors. Not sure if these are more helpful:

p-himik21:09:59

> _system.keyframes is not a function Add :compiler-options {:output-feature-set :es5} to the shadow-cljs build config.

Luciano Laratelli21:09:58

that works! thanks a lot 🙂

👍 2
p-himik09:09:39

@U01RN86SL90 Just to get more details about what you saw initially - it was in Firefox, right?

👀 1
Ben Halton08:09:15

hi @U2FRKM4TW I was excited to see this - unfortunately it hasn't solved my issue. I'm not really a UI guy so accept I might be doing something really stupid

Ben Halton08:09:43

I get the following error after upgrading to mui5

Ben Halton08:09:45

app.js?BUILD_VERSION:1552 TypeError: _system.keyframes is not a function
    at Object.shadow$provide.module$node_modules$$mui$material$node$ButtonBase$TouchRipple (TouchRipple.js:64)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.module$node_modules$$mui$material$node$ButtonBase$ButtonBase (ButtonBase.js:35)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.module$node_modules$$mui$material$node$ButtonBase$index (index.js:32)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.module$node_modules$$mui$material$node$Button$Button (Button.js:29)
    at shadow.js.jsRequire (js.js:66)
    at Object.shadow$provide.module$node_modules$$mui$material$node$Button$index (index.js:25)
    at Object.shadow.js.jsRequire (js.js:66)

Ben Halton08:09:19

I've added the compiler option to the build config - but no joy

Ben Halton08:09:03

is there a good way to check if that compiler option has taken effect ? i.e. that I have configured it properly

p-himik08:09:36

What's your shadow-cljs.edn now?

p-himik09:09:02

That issue fixes abridged error messages - it doesn't deal with the compilation.

Ben Halton09:09:20

aha 😄 gotcha

Ben Halton09:09:25

that will explain it then

Ben Halton09:09:01

I see quite a few people with this issue with mui5 and no solutions so far

Ben Halton09:09:14

I realise it's probably not a shadow issue as such

Ben Halton09:09:29

OK - as expected, I was being a bit thick - we have a build setup with lein-shadow so I needed to regen my shadow-cljs.edn

p-himik09:09:36

What do you mean no solutions? The compiler option works for me, and at least for one other person.

Ben Halton09:09:48

yes me being dim sorry

Ben Halton09:09:59

thanks for you help

👍 1