Fork me on GitHub
#shadow-cljs
<
2019-08-30
>
eccentric J01:08:11

When my computer sleeps, my browser disconnects from the shadow-cljs websocket for reloads. Is there a way to reconnect or do I need to refresh?

eccentric J01:08:59

Oh good news turns out you can run shadow.cljs.devtools.client.browser.ws_connect() from js console and it will reconnect.

👍 12
Michaël Salihi12:08:15

@thheller Is there a similar way to reconnect websocket for :react-native target ? Via the REPL ? shadow.cljs.devtools.client.react-native.ws-connect ?

thheller12:08:37

well ... if the REPL is disconnected you can't trigger anything from the REPL?

thheller12:08:25

the JS would be similar though. shadow.cljs.devtools.client.react_native.ws_connect()

Michaël Salihi12:08:00

Yes you're right...for RN we must to kill and relaunch shadow-cljs watch to restore a websocket <-> REPL connection 🙂

thheller13:08:46

well not really

Michaël Salihi13:08:38

I don't understand ? I missing something ?

Michaël Salihi13:08:59

A better solution?

thheller13:08:16

I still need to add something on the shadow-cljs side so there is an easy way to get rid of the "bad" websocket connection

Michaël Salihi13:08:14

Good to see you try to make things happen in RN side, sad to see there no answer 😕 I remember, we had a discussion about this on an issue that I had open : https://github.com/thheller/shadow-cljs/issues/544#issuecomment-521799837

Michaël Salihi13:08:49

As the link of the RN issue you had provided are closed and someone says : > wave hey all, as mentioned by @PeterKruzlics above, this was fixed in v0.57.6 so I'll go ahead and close this now. I thought it was solved. Maybe it is a regression because this problem continue to occur with the last version of RN

thheller14:08:40

no clue. I don't do regular RN development but I tested the shadow-cljs side of things and it is definitely RN keeping the websocket open

cjmurphy04:08:02

Running npx shadow-cljs server I constantly get these messages. This is on the latest (2.8.52).

thheller07:08:15

@jiangts there is some support for chrome extensions, just missing documentation currently. see https://github.com/thheller/shadow-cljs/issues/279

thheller07:08:41

@cjmurphy that can't be on 2.8.52 since that completely removed the warning

cjmurphy07:08:02

Thanks, yes needed to change the version in deps.edn as well as package.json.

scknkkrer08:08:35

Hi guys, I wanted to create a simple app. Everything is fine, except; browser.cljs:360 Refused to connect to '' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback..

scknkkrer08:08:07

Then, I wanted to create a Certificate from KeyChain on my Mac.

thheller08:08:42

which http server do you use? it seems to setup CSP? thats overkill during development?

scknkkrer08:08:56

I found this documentation. But, my result is different from Step 2. https://certsimple.com/blog/localhost-ssl-fix

thheller08:08:53

please answer my first question before we dive deeper into SSL 😛

scknkkrer08:08:30

Ok. Sorry. 😂

scknkkrer08:08:09

But I’m so newbie. :face_with_rolling_eyes:

thheller08:08:27

that is why we go step by step 😉

thheller08:08:07

that error you get is caused by a webserver serving a CSP header (Content-Security-Policy) which is restricting what you are allowed to do in the page

thheller08:08:15

that is overkill for development since you want to do everything

scknkkrer08:08:54

I’ve just end up with this information. But you are a good teacher. Go on. 😇

thheller08:08:25

tell me about your setup? what are you building? what is your build config?

scknkkrer08:08:48

A newly, fresh setup from CLI. Nothing special. I’ve change nothing yet. I found a documentation but, As I said, I can’t go through it.

thheller08:08:06

please share more information. I cannot possibly guess what you mean by "fresh setup from CLI".

scknkkrer08:08:08

Sorry, here is my shadow-cljs.edn file content:

{:lein   true

 :nrepl {:port 8777}

 :builds {:app {:target          :browser
                :output-dir      "resources/public/cordova/www/js/compiled"
                :asset-path      "/js/compiled"
                :optimizations   :whitespace
                :modules         {:app {:init-fn com.kctech.qulak.mobile.core/init
                                        :preloads [devtools.preload]}}
                :devtools        {:http-root    "resources/public/cordova/www"
                                  :http-port    8280}}
          :browser-test
          {:target :browser-test
           :ns-regexp "-test$"
           :runner-ns shadow.test.browser
           :test-dir "target/browser-test"
           :devtools {:http-root "target/browser-test"
                      :http-port 8290}}

          :karma-test
          {:target :karma
           :ns-regexp "-test$"
           :output-to "target/karma-test.js"}}}

thheller08:08:34

oh. so this is running in cordova and not a regular browser?

scknkkrer08:08:02

I can’t see the content in Safari too.

scknkkrer08:08:18

And, this Error log was Safari’s.

thheller08:08:43

how did you open it in safari?

scknkkrer08:08:45

Ok, shadow-cljs server to start server and REPL.

shadow-cljs - config: /Users/sckn/projects/business/qulak/mobile/com.kctech.qulak.mobile/shadow-cljs.edn  cli version: 2.8.52  node: v12.4.0
shadow-cljs - running: lein run -m shadow.cljs.devtools.cli --npm server
shadow-cljs - HTTP server available at 
shadow-cljs - HTTP server available at 
shadow-cljs - server version: 2.8.52 running at 
shadow-cljs - nREPL server started on port 8777
Yeap, as you said.

thheller08:08:34

and when you open http://localhost:8280 in safari you get the above error?

thheller08:08:00

what is in your "resources/public/cordova/www/index.html"? does it have a <meta http-equiv="Content-Security-Policy" ...?

thheller08:08:10

ok. that HTML tag is causing your issues. you can either remove it completely or adjust it to allow the connection to the shadow-cljs server

scknkkrer08:08:55

I was deleted the tag, ‘on the wrong .html’. Now it’s good. Thank you.

scknkkrer08:08:56

And, I’m nice Googler, how can I help you @thheller?

thheller08:08:42

help with what?

scknkkrer09:08:24

With your problem.

scknkkrer09:08:45

And, have you guys any expriences with Cordova + Shadow-Cljs ?

mccraigmccraig11:08:12

we moved our cordova+cljs+re-frame app over to shadow a few months ago

mccraigmccraig11:08:05

we were using boot-cljs before, but our js bundle was getting large and we need to modularise, so shadow's build-reports and easy modularisation convinced me

mccraigmccraig11:08:09

the shadow bit was easy... once i got compile working there were no problems at all

scknkkrer11:08:43

I have a working app. Re-frame + ReAgent. I want to implement a prototype over Cordova. I’ve created a new re-frame template from leiningen which contains shadow-cljs configuration. And then, create a Cordova app with cordova create bla com.kctech.bla.bla Bla. But, I couldn’t handle the process. I compile my application. Run with cordova. It pops-up some errors.

scknkkrer11:08:30

What is the developing Cordova app process ? I want to implement all the UI specific work with browser. But I need the see on Mobile too.

scknkkrer11:08:22

How can I implement a minimal template with these templates ? @U0524B4UW, or Am I wrong at something ?

mccraigmccraig11:08:44

we have two different build targets (one web, one cordova) and a few things in the codebase which isolate most of the code from the differences - we target web, ios and android

scknkkrer11:08:49

Is there a guide on this topic ? What are gotchas ? What are pitfalls ?

scknkkrer11:08:12

How should I seperate web and Cordova buildings ?

mccraigmccraig11:08:58

i would start with one of the basic cordova templates, and add in re-frame ... i can't really show you any minimal examples, 'cos our app is rather large now

scknkkrer11:08:19

So, what do you think about how I start ? Creating a leintemplate and adding cordova in it ? And, at least, can you show me or tell me anything about how should I keep my Project Structure ?

mccraigmccraig11:08:36

we have separate shadow targets for web and cordova... although the only real difference (apart from closure defines) is that the cordova target puts the build output into the cordova project www directory

mccraigmccraig11:08:48

so we have a monorepo with directories like

mccraigmccraig11:08:51

cordova
  -config.xml
  -www/
web
  -shadow-cljs.edn
  -src/
  -test/
  -target/

mccraigmccraig11:08:35

you can get live-reloading working in simulator and on-device in cordova by redirecting (with window.location=) to your shadow http server

mccraigmccraig11:08:39

(whether a build does such a redirect is something we specify with closure defines)

scknkkrer11:08:42

Anything else, should I know ? It seems simple.

thheller11:08:55

@U0524B4UW what is the point of the redirect?

scknkkrer11:08:10

and also, yes. Why ?

mccraigmccraig11:08:58

cordova loads from a file: url - but to live-reload you need to be loading from the shadow http: url

scknkkrer11:08:23

And, how can I bundle my application into one single JS file. Same as we did without shadow-cljs ? with :simple or :advanced compilation flags ?

thheller11:08:54

@U3JJH3URY shadow-cljs release app

mccraigmccraig11:08:03

i think re-natal does something clever with a webdav mount, but the simple redirect works ok for cordova

scknkkrer11:08:12

Oh, what about during development ?

thheller11:08:26

shadow-cljs watch app?

thheller11:08:50

@U0524B4UW you may just need to set :devtools-url properly? eg set :devtools {:devtools-url ""}

👏 4
thheller11:08:15

the config logic defaults to connecting to the same URL you used to access the page. which obviously fails if that is a file://...

mccraigmccraig11:08:16

oh, cool - that could work - we already had the redirect thing working previously with boot-cljs, so i just ported that, but that sounds neater

scknkkrer11:08:12

One last question, how should I implement my development and production build configurations. I was reading the documentation but, I have to implement a prototype, I’m in a rush.

mccraigmccraig11:08:57

although... redirecting to the shadow http: url has the advantage that triggering a page-reload on-device does the right thing - restarts the app at the latest build - that wouldn't be the case with :devtools-url would it @thheller?

thheller11:08:34

not sure what you mean. a reload does the exact same thing?

thheller11:08:29

@U3JJH3URY look at any shadow-cljs example. the workflow is always to use shadow-cljs watch app during development and then use shadow-cljs release app to create a production build. they both use the same config.

😇 4
mccraigmccraig11:08:07

if my page url remains file:... then a page reload will reload the files deployed to the device... whereas the shadow build may have moved on since then (since each shadow build does not redeploy the cordova app, and if it did would lose all the app state)

mccraigmccraig11:08:17

but if my cordova app has been redirected to the shadow http:... url, then i will get the latest build when reloading

thheller11:08:03

does cordova not load the code from disk?

mccraigmccraig11:08:32

it loads from the device disk - which is not the shadow output directory

thheller11:08:36

I know next to nothing about cordova or its tools

thheller12:08:01

I'm confused. how do you load the shadow output then?

mccraigmccraig12:08:41

you do a cordova build, when creates an ios/android archive, which then gets loaded onto the simulator/device with ios/android tools

thheller12:08:23

ah and that isn't rebuilt automatically?

thheller12:08:59

in react-native things just happen automatically so I assumed that was true there also

mccraigmccraig12:08:04

no - and if the archive was rebuilt automatically, then the deploy process (think installing a new version of an app) would lose all the app state

mccraigmccraig12:08:37

afaiui re-natal remote-mounts the cljs build directory to the device using webdav, which is a very nice trick

mccraigmccraig12:08:03

so file:... reload just works on RN

scknkkrer12:08:19

@U0524B4UW, Local Storage datas too ?

mccraigmccraig12:08:53

but not on cordova

mccraigmccraig12:08:11

@U3JJH3URY what about local-storage ?

scknkkrer12:08:36

When I re-build my app, are they gone too ?

scknkkrer12:08:56

*they goes too ?

mccraigmccraig12:08:15

no, local-storage and caching both work as you would like - they are preserved across app-upgrades by the o/s

mccraigmccraig12:08:55

if you remove and re-install the app they will be cleared, but just upgrading preserves them

mccraigmccraig12:08:02

@U3JJH3URY a question - why are you going with cordova rather than RN ? (if i was starting an app today, i would probably go with RN - when i started yapster, RN only had an official iOS target and a beta android target, cordova was the only game in town for ios+android+web on a single codebase)

scknkkrer12:08:27

@U0524B4UW, Because, I have a background on this project. Already got a SPA with Clojurescript with well designed theme.

scknkkrer12:08:45

I can’t let it throw away, and start with new design.

scknkkrer12:08:08

*can’t throw it away

mccraigmccraig12:08:11

ah, yeah, you already said that, doh! 😬

scknkkrer12:08:21

**Sorry for my bad English.

scknkkrer12:08:02

One little question @U0524B4UW.

mccraigmccraig12:08:16

better than my rendering of your native language i'm sure @U3JJH3URY

scknkkrer12:08:46

Can I ship all my builds into one, single project with shadow-cljs ?

scknkkrer12:08:19

@U0524B4UW, I’m working on my English. I hope it gets better soon.

mccraigmccraig12:08:05

do you mean ship all your cljs builds into a single cordova project ?

mccraigmccraig12:08:30

if you mean that, then yes, you can do that

scknkkrer12:08:55

My builds; - Web --Browser-- - Desktop --Electron-- - Mobile --Coming with Cordova - AWS --Some back-end. 😇 - And importantly, my business-logic code.

scknkkrer12:08:43

Nö. I mean, shipping all my builds into one project. And manage them with that one.

scknkkrer12:08:11

merging my builds. I think it would be the right phrase.

mccraigmccraig12:08:23

so, just have a single shadow-cljs module, which gets bundled and deployed to a bunch of different platforms - web/desktop/mobile etc ?

scknkkrer12:08:12

Yeah, maybe.

scknkkrer12:08:05

I didn’t read the shadow-cljs documentation yet. It seems that It can solve my problem.

scknkkrer12:08:18

Or, I was wrong ?

thheller12:08:32

it is totally fine to have 6 seperate builds in one shadow-cljs.edn

thheller12:08:46

can have as many as you want

mccraigmccraig12:08:41

that's what we do with web+cordova ... if you have a cljs backend too, i would guess your backend bundle would be quite different from your front-end bundle, so you may want to use some modules

thheller12:08:33

just use different builds

thheller12:08:22

:builds {:ios {...} :android {...} :backend {...} ...}

scknkkrer12:08:33

And, are you guys feel any performance differences between figwheel and shadow-cljs builds ?

thheller12:08:51

I have never used figwheel in any real projects but I'm told shadow-cljs is quite a bit faster

mccraigmccraig12:08:18

dunno about figwheel - our shadow-cljs build is considerably faster than our old boot-cljs build. i have no idea why though - dyu know why @thheller ?

thheller12:08:46

well I did a bunch of performance optimizations to make things faster

thheller12:08:59

but I have never used boot-cljs either so can't make a comparison

scknkkrer12:08:09

quite a bit you said ? My whole life was a lie. How this thing compile my project within 4 secs ? How ? I’d bad feelings about my poor Mac. But it looks ok now. 😂

thheller12:08:10

I really don't know what the other tools do so I can't comment. I just know what I did in shadow-cljs 😉

mccraigmccraig12:08:21

it's the same cljs+closure compiler underneath isn't it @thheller? what dark-magic did you do ?

thheller12:08:42

pay attention to performance I guess 😉

thheller12:08:55

also implemented proper caching so that makes a big difference

thheller12:08:28

boot-cljs didn't cache IIRC

scknkkrer13:08:27

Wait. @thheller, did you shadow-cljs ?

scknkkrer13:08:35

*did you create

scknkkrer13:08:06

OMG. I’m writing a book. Can we arrange a meet, whenever you want. Also, until then, I will gather my questions about tool and your black-magic. 😂

scknkkrer13:08:25

*an online meeting.

thheller13:08:39

well thats what the docs are for. they should answer most questions.

thheller13:08:59

I also blogged about a few implementation details https://code.thheller.com/

mccraigmccraig13:08:28

quick perf test of boot-cljs against shadow-cljs doing advanced compilation on our app - i ran builds twice, timing the second build

mccraigmccraig13:08:33

boot devapp-advanced 473.78s user 18.71s system 250% cpu 3:16.78 total

mccraigmccraig13:08:48

gulp release-yapdev-web 228.66s user 6.41s system 324% cpu 1:12.36 total

scknkkrer13:08:51

I’d some specific questions. But no problem.

mccraigmccraig13:08:55

(the gulp build drives shadow) - so the gulp/shadow build was roughly twice as quick as the boot build

thheller13:08:50

the second build will have the cache ready so it should be faster vs no cache

thheller13:08:34

@U3JJH3URY happy to answer questions but prefer to do it in text form so others can find the answers too.

👍 4
mccraigmccraig13:08:01

i didn't blat my .shadow-cljs directory, so cache was probably already there... having deleted .shadow-cljs and building again:

mccraigmccraig13:08:04

gulp release-yapdev-web 321.94s user 30.53s system 387% cpu 1:30.96 total

mccraigmccraig13:08:45

so even without cache shadow has a 25% performance boost over boot... more like 50% with cache

thheller13:08:23

maybe you are using an older clojurescript version in boot? CLJS itself got a bunch of perf updates?

thheller13:08:45

maybe you don't have :parallel-build true enabled in boot? (it is always on for shadow-cljs)

thheller13:08:06

but yeah dunno. I did a lot of tweaks all over the place 😛

mccraigmccraig13:08:51

both done with cljs 1.10.339... :parallel-build might be a thing though - cpu usage does look higher for shadow

mccraigmccraig13:08:26

another small thing might be apples/orange build steps - those are full app builds, and iirc boot build steps are sequential, whereas we use parallel tasks in gulp to do the lessc build

mccraigmccraig13:08:54

but anyway, shadow feels significantly faster which make us 😃

kasuko17:08:20

Does shadow-cljs utilize the checkouts directory like leiningen or some similar functionality? I can symlink node dependencies, now I just have to figure out how to symlink cljs dependencies

thheller17:08:35

I'm not sure I understand the question. checkouts is not supported no but you can just add :source-paths ["src/main" "checkouts/foo/src/main"]

thheller17:08:56

not sure why you are symlinking node dependencies or cljs dependencies?

kasuko17:08:20

For development using multiple packages. Our main application is re-frame but we have an in-house Javascript component library. If we want to change a component and use it in the main application we use symlinks to allow them to use the latest version of each in development

thheller17:08:42

so you link node_modules/some-lib to somewhere/else/some-lib?

kasuko17:08:56

Yes, using lerna

thheller17:08:32

you could use deps.edn with :local/root for that

thheller17:08:39

or lein checkouts

kasuko17:08:59

So I would have to switch away from using shadow-cljs.edn to manage my dependencies?

kasuko17:08:44

If I use deps.edn I can still use the shadow-cljs server right?

thheller17:08:06

yes. you only move your dependencies and source paths to deps.edn. everything else stays the same.

thheller17:08:33

well you probably need to manage some dependency conflicts but otherwise it stays the same

kasuko17:08:02

Whew, not willing to give that awesomeness up 😛