Fork me on GitHub
#shadow-cljs
<
2020-06-18
>
fabrao04:06:07

Hello all, I´m thinking about how to deal with shadow-cljs and server with pedestal serving the index.html ? Is shadow detect server and let it serve index or do I have to use index just for shadow and other index for app? Do you have any reference to using both in the same project?

thheller07:06:41

@fabrao shadow-cljs doesn't care how you serve your index.html. Just use your server like you would in production. Just load the .js files via your pedestal server directly. They are just static files.

fabrao12:06:26

@thheller but how does it works with refresh and repl?

Trevor13:06:28

Hi is it possible to turn off hot reloading? Thought I read it could be turned off at the namespace level

Trevor13:06:21

Ah found it

p-himik13:06:16

Just ran a build report and noticed something peculiar:

| jar | re_frame/loggers.cljc                                                                 |   -717.0 B  |  -0.17 % |      2.9 KB |      2.2 KB |
Negative size, heh.

David Pham14:06:36

Why are ESM useful?

thheller14:06:36

@fabrao hot-reload and REPL are done over the websocket. it is handled separately and your server doesn't need to do anything

thheller14:06:36

@p-himik yeah I saw that before. I'm just using source-maps and sometimes they aren't entirely accurate or I'm maybe counting backwards or something

thheller15:06:35

@neo2551 if you cannot answer that its not useful to you basically. It is useful if you want to integrate with other tools, eg. interfacing with a codebase written in typescript or whatever.

thheller15:06:58

it doesn't offer anything new and isn't useful if you don't care about interfacing with other code basically

David Pham15:06:31

It would allow me to expose my libraries to Ts/JS users?

David Pham15:06:45

Good, now I know my CLJS code will not be thrown away if anyone refactor my apps with JS xD

David Pham15:06:22

I have to admit that I am missing your blogpost. I always learned something knew when I read them :).

thheller15:06:50

yeah I didn't make it very clear that this is mostly about intergrating into the greater JS ecosystem

thheller15:06:04

like using JS tools, using your code from JS, etc

knubie17:06:44

After upgrading to the latest version of shadow-cljs and building a release build, I’m getting this error in the js console:

breadcrumbs.ts:117 shadow-cljs - failed to load 367
(anonymous) @ bundle.min.js:2
13:03:33.676 js.js:75 Uncaught TypeError: $jscomp.initSymbol is not a function
    at Object.shadow$provide.<computed> (index.js:178)
    at Object.shadow.js.jsRequire (js.js:66)
    at Object.shadow.js.require (js.js:113)
    at index.js:2
    at append.js:2
I remember reading about something related to $jscomp in one of the releases, so I figured this might be a known (familiar?) issue. Last version of shadow-cljs I built against was 2.8.90

thheller19:06:40

@steedman87 which version is this?

knubie20:06:25

@thheller that was 2.10.12. I can open an issue with more details if you want.

thheller20:06:00

a reproducible example would help 😛

knubie20:06:55

I’ll see what I can do. I also had trouble getting source maps working right in Sentry, although they seemed fine in the browser. In Sentry the stack trace seemed to consist of unrelated files / line numbers. Earlier versions of shadow mostly worked, but the line numbers were somewhat off.

thheller20:06:39

can't do much without reproducible examples 😛

naomarik20:06:37

Hey! I tried compiling my project a week ago and ran into the foreign-libs issue. Here https://code.thheller.com/blog/shadow-cljs/2017/09/15/js-dependencies-going-forward.html this is mentioned I'm happy to provide an interim solution to make the transition easier if someone has a good idea how to do so. Wondering if there any other examples or more docs explaining this transition? I have a few JS libs I'm including in my compiled JS and I'm not using NPM for anything. Would love to give shadow-cljs a try!

thheller20:06:25

@naomarik define "JS libs"? You are using CLJSJS?

naomarik20:06:37

No just straight up JS files in resources/js

naomarik20:06:32

well, resources/foreign-libs/*.js 🙂

thheller20:06:34

what kind of files? I mean how did you include them previously and how did you access them?

naomarik20:06:58

@thheller Just normal foreign libs stuff, for example:

{:file "resources/foreign-libs/hammer.min.js"
                 :provides ["hammerjs"]}
then requiring it [hammerjs] in a file and (js/Hammer. (.getElementById js/document "selected-photo") nil)

thheller20:06:03

can you paste the file somewhere? does it have the isual commonjs/amd wrapper?

thheller20:06:17

ie. does if have logic for module.exports or so?

naomarik20:06:58

not sure. you want the source cljs file or the hammer js file? hammerjs for example just here: https://github.com/hammerjs/hammer.js

thheller20:06:08

well the easiest way is npm install --save hammerjs and (:require ["hammerjs" :as hammer]) and using (hammer. (.getElementById ....))

naomarik20:06:46

ya know about that way 🙂

thheller20:06:20

but you can also do (:require ["/foreign-libs/hammer.min.js" :as hammer]) and use hammer not js/Hammer

naomarik20:06:52

would this be compiled in the JS file?

naomarik20:06:08

or would it need to always be explicitly available to fetch

thheller20:06:40

I don't understand the question. it will load the file from your classpath (so the resources folder) and include it in your build

naomarik20:06:54

that's exactly what i wanted to hear, will try this now

naomarik21:06:21

@thheller how would I include something like this? https://github.com/blueimp/JavaScript-Canvas-to-Blob I've saved it

npm install --save blueimp-canvas-to-blob
and importing ["toBlob" :as to-blob] but getting The required JS dependency "toBlob" is not available, it was required by "common/file_upload.cljs". calling it with either (.toBlob canvas ... or (to-blob/toBlob canvas ...)

thheller21:06:36

blueimp-canvas-to-blob is the package name

thheller21:06:54

(:require ["blueimp-canvas-to-blob" :as to-blob])

naomarik21:06:28

ahh thanks so much -- my JS packaging/NPM knowledge still from the days of Yore

naomarik22:06:00

@thheller Got everything working, thanks so much! Just last thing -- has anyone complained about cider completion errors in the repl?

thheller22:06:26

yes, its broken.

naomarik22:06:03

I feel this is way faster than what I was using before -- lein figwheel 0.5.19

dpsutton22:06:32

@thheller is the change that broke CIDER's completion an accidental change you are going to restore or one that CIDER needs to adjust to the new way in shadow?

dpsutton22:06:12

oh. i keep suitable off all the time.

dpsutton22:06:22

i wonder if autocompletion works with that completion engine off

thheller22:06:41

then you might be fine? not actually sure

dpsutton22:06:10

me either. @naomarik can you check if completions work with (setq cider-enhanced-cljs-completion-p nil)

thheller22:06:16

only reports I had were because of suitable.

dpsutton22:06:40

thanks. i'll see if i can look into this.

naomarik22:06:00

@dpsutton That worked, thanks for that.

dpsutton22:06:37

i think the suitable stuff is cool in a few situations and breaks more often than not unfortunately. and cljs tooling is crazy hard

naomarik23:06:32

the only thing I cannot get working now is CSS reloading

:devtools {:watch-dir "resources/public/css"
               :watch-path "/static"}
this is in my build but doesn't seem to do anything when css is changed, no headsup display notification either

thheller23:06:16

how do you access the css in your html?

thheller23:06:41

no. under which path?

naomarik23:06:10

i've tried all kinds of variations on the watch-path too

naomarik23:06:12

and watch-dir

thheller23:06:21

ok then :watch-dir "resources/public" :watch-path "/static"

thheller23:06:56

assuming resources/public/css/site/app.css exists and is the file served when you load

naomarik23:06:13

yup it's bbeing served

naomarik23:06:30

okay that worked hehe

naomarik23:06:42

you've been super helpful, thanks so much @thheller

naomarik23:06:07

been changing my build tools all day going from a hobbled combo of lein and boot to deps.edn and now shadow-cljs

Spaceman23:06:33

how to find the line number of the re-frame code that throws the error:

[Error] Error: ["unrecognized request format: " nil]
	(anonymous function) (re_frame.router.js:6)
	(anonymous function) (re_frame.router.js:359)
	(anonymous function) (re_frame.router.js:425:110)
	(anonymous function) (re_frame.router.js:552)
	(anonymous function) (re_frame.router.js:291)
	(anonymous function) (re_frame.router.js:383)
	(anonymous function) (re_frame.router.js:425:110)
	G__67540 (re_frame.router.js:336)
	(anonymous function) (goog.async.nexttick.js:98)