This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-08-30
Channels
- # aleph (15)
- # announcements (4)
- # aws (2)
- # bangalore-clj (7)
- # beginners (236)
- # calva (24)
- # cider (11)
- # cljs-dev (63)
- # clojure (141)
- # clojure-europe (3)
- # clojure-india (2)
- # clojure-italy (8)
- # clojure-nl (3)
- # clojure-spec (8)
- # clojure-uk (52)
- # clojured (1)
- # clojuredesign-podcast (4)
- # clojurescript (35)
- # clojutre (3)
- # community-development (1)
- # cursive (77)
- # data-science (1)
- # datomic (3)
- # emacs (13)
- # fulcro (7)
- # graalvm (78)
- # graphql (2)
- # nrepl (7)
- # off-topic (18)
- # pathom (25)
- # reagent (12)
- # reitit (31)
- # shadow-cljs (178)
- # spacemacs (7)
- # tools-deps (32)
- # xtdb (10)
- # yada (3)
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?
Oh good news turns out you can run shadow.cljs.devtools.client.browser.ws_connect()
from js console and it will reconnect.
@thheller Is there a similar way to reconnect websocket for :react-native target ?
Via the REPL ?
shadow.cljs.devtools.client.react-native.ws-connect
?
the JS would be similar though. shadow.cljs.devtools.client.react_native.ws_connect()
Yes you're right...for RN we must to kill and relaunch shadow-cljs watch
to restore a websocket <-> REPL connection 🙂
I don't understand ? I missing something ?
A better solution?
I opened https://github.com/facebook/react-native/issues/26087 but nobody seems to care
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
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
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
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
@jiangts fwiw, there's one in this project: https://github.com/Lokeh/punk2/blob/master/shadow-cljs.edn - also, the following query might provide more examples: https://github.com/search?q=filename%3Ashadow-cljs.edn+chrome-extension
Running npx shadow-cljs server
I constantly get these messages. This is on the latest (2.8.52).
@jiangts there is some support for chrome extensions, just missing documentation currently. see https://github.com/thheller/shadow-cljs/issues/279
it is in use here: https://github.com/fulcrologic/fulcro-inspect/blob/master/shadow-cljs.edn#L18-L20 https://github.com/fulcrologic/fulcro-inspect/blob/master/shells/chrome/manifest.edn
Hi guys, I wanted to create a simple app. Everything is fine, except;
browser.cljs:360 Refused to connect to '
.
which http server do you use? it seems to setup CSP? thats overkill during development?
I found this documentation. But, my result is different from Step 2
.
https://certsimple.com/blog/localhost-ssl-fix
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
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.
please share more information. I cannot possibly guess what you mean by "fresh setup from CLI".
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"}}}
http://localhost:8280 I presume?
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.and when you open http://localhost:8280 in safari you get the above error?
what is in your "resources/public/cordova/www/index.html"
? does it have a <meta http-equiv="Content-Security-Policy" ...
?
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
we moved our cordova+cljs+re-frame app over to shadow a few months ago
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
the shadow bit was easy... once i got compile working there were no problems at all
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.
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.
How can I implement a minimal
template with these templates ?
@U0524B4UW, or Am I wrong at something ?
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
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
So, what do you think about how I start ?
Creating a lein
template and adding cordova
in it ?
And, at least, can you show me or tell me anything about how should I keep my Project Structure
?
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
so we have a monorepo with directories like
cordova
-config.xml
-www/
web
-shadow-cljs.edn
-src/
-test/
-target/
you can get live-reloading working in simulator and on-device in cordova by redirecting (with window.location=
) to your shadow http server
(whether a build does such a redirect is something we specify with closure defines)
@U0524B4UW what is the point of the redirect?
cordova loads from a file: url - but to live-reload you need to be loading from the shadow http: url
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 ?
@U3JJH3URY shadow-cljs release app
i think re-natal does something clever with a webdav mount, but the simple redirect works ok for cordova
@U0524B4UW you may just need to set :devtools-url
properly? eg set :devtools {:devtools-url "
the config logic defaults to connecting to the same URL you used to access the page. which obviously fails if that is a file://...
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
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.
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?
@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.
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)
but if my cordova app has been redirected to the shadow http:...
url, then i will get the latest build when reloading
it loads from the device disk - which is not the shadow output directory
you do a cordova build, when creates an ios/android archive, which then gets loaded onto the simulator/device with ios/android tools
in react-native things just happen automatically so I assumed that was true there also
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
afaiui re-natal remote-mounts the cljs build directory to the device using webdav, which is a very nice trick
so file:...
reload just works on RN
@U0524B4UW, Local Storage
datas too ?
but not on cordova
@U3JJH3URY what about local-storage ?
no, local-storage and caching both work as you would like - they are preserved across app-upgrades by the o/s
if you remove and re-install the app they will be cleared, but just upgrading preserves them
@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)
@U0524B4UW, Because, I have a background
on this project.
Already got a SPA with Clojurescript
with well designed theme.
ah, yeah, you already said that, doh! 😬
One little question @U0524B4UW.
better than my rendering of your native language i'm sure @U3JJH3URY
@U0524B4UW, I’m working on my English
. I hope it gets better soon.
do you mean ship all your cljs builds into a single cordova project ?
if you mean that, then yes, you can do that
My builds;
- Web --Browser--
- Desktop --Electron--
- Mobile --Coming with Cordova
- AWS --Some back-end
. 😇
- And importantly, my business-logic
code.
Nö. I mean, shipping all my builds into one project
. And manage them with that one.
so, just have a single shadow-cljs module, which gets bundled and deployed to a bunch of different platforms - web/desktop/mobile etc ?
I didn’t read the shadow-cljs
documentation yet.
It seems that It can solve my problem.
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
And, are you guys feel any performance differences between figwheel
and shadow-cljs
builds ?
I have never used figwheel in any real projects but I'm told shadow-cljs is quite a bit faster
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 ?
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. 😂
I really don't know what the other tools do so I can't comment. I just know what I did in shadow-cljs 😉
it's the same cljs+closure compiler underneath isn't it @thheller? what dark-magic did you do ?
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
. 😂
I also blogged about a few implementation details https://code.thheller.com/
quick perf test of boot-cljs
against shadow-cljs
doing advanced compilation on our app - i ran builds twice, timing the second build
boot devapp-advanced 473.78s user 18.71s system 250% cpu 3:16.78 total
gulp release-yapdev-web 228.66s user 6.41s system 324% cpu 1:12.36 total
(the gulp
build drives shadow) - so the gulp/shadow
build was roughly twice as quick as the boot
build
@U3JJH3URY happy to answer questions but prefer to do it in text form so others can find the answers too.
i didn't blat my .shadow-cljs
directory, so cache was probably already there... having deleted .shadow-cljs
and building again:
gulp release-yapdev-web 321.94s user 30.53s system 387% cpu 1:30.96 total
so even without cache shadow has a 25% performance boost over boot... more like 50% with cache
maybe you are using an older clojurescript version in boot? CLJS itself got a bunch of perf updates?
maybe you don't have :parallel-build true
enabled in boot? (it is always on for shadow-cljs)
both done with cljs 1.10.339... :parallel-build
might be a thing though - cpu usage does look higher for shadow
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
but anyway, shadow feels significantly faster which make us 😃
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
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"]
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
yes. you only move your dependencies and source paths to deps.edn
. everything else stays the same.