This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-05-15
Channels
- # announcements (17)
- # babashka (16)
- # beginners (17)
- # biff (13)
- # cider (63)
- # cljsrn (8)
- # clojure (34)
- # clojure-europe (12)
- # clojure-germany (4)
- # clojure-nl (2)
- # clojure-spec (17)
- # clojure-uk (2)
- # clojurescript (51)
- # code-reviews (1)
- # conjure (15)
- # cursive (16)
- # datomic (10)
- # emacs (4)
- # fulcro (13)
- # graalvm (4)
- # helix (3)
- # introduce-yourself (7)
- # kaocha (2)
- # lsp (4)
- # music (2)
- # off-topic (11)
- # re-frame (2)
- # reagent (3)
- # releases (1)
- # remote-jobs (1)
- # shadow-cljs (21)
- # spacemacs (4)
- # sql (1)
- # vim (2)
there are largely three ways to go about this. figwheel (deprecated but still widely used), figwheel main and shadow-cljs. Clojurescript is a clojure library that compiles cljs files into js files. Evaluating code requires a js context, as clojurescript can only emit code, not evaluate it. This is where figwheel-main and shadow come in. They have all of the filewatchers to keep recompiling, and open websockets to update the javascript environment with the latest code.
for the purposes of CIDER, a cljs repl is a regular clj repl that gets "upgraded". you start a clj repl, and call functions in either figwheel main or shadow that move evaluation from the jvm and into the js context
Hmmm, I'm using shadow-cljs but not sure if im supposed to be able to be able to evaluate code inside cider. I am able to get hot-reloading by saving
you absolutely should be able to. m-x cider-jack-in-cljs
should prompt you for a few things. pick shadow and then choose your build and it should just work
Am i supposed to have a project.clj
? Am wondering if it is because I only have shadow-cljs.edn
with ..
;; shadow-cljs configuration
{:source-paths
["src"]
:dev-http {8081 "public"}
:dependencies
[[reagent "1.0.0"]
[re-com "2.13.2"]
[binaryage/devtools "1.0.3"]]
:builds {:app {:target :browser
:output-dir "public/scripts/"
:asset-path "/scripts/"
:modules {:main {:init-fn ura.frontend.core/run}}}}}
that will start a shadow process npx shadow-cljs ...
and then at the repl it calls (do (require '[shadow.cljs.devtools.api :as shadow]) (shadow/nrepl-select %s))
for you where the %s
is replaced with your build
the equivalent for figwheel main is (do (require 'figwheel.main) (figwheel.main/start %s))
, basically the same api
this call: (do (require '[shadow.cljs.devtools.api :as shadow]) (shadow/nrepl-select %s))
should be done by cider right ?
I think I have this issue https://shadow-cljs.github.io/docs/UsersGuide.html#missing-js-runtime
Yeapp. But it doesn't watch the app. Doesn't hot reload. Need to manually start the watch
honest question: can shadow-cljs do something different that makes this easier to understand? seems like A LOT of people struggle with this in cider?
this question never comes up for cursive but somehow the cider jack-in process seems to make this complicated? why?
maybe it is because most start with the clj experience and the cljs experience is very foreign to most ?
But the symptoms here are strange. If it’s not watching the app. If you change some string In your files does it reload the app and show a bit of ui from shadow?
Oh it opens the browser and the app is there but ill get shadow-cljs - Stale Output! Your loaded JS was not produced by the running shadow-cljs instance. Is the watch for this build running?
I think I remember seeing that when the browser opens before compilation has finished. The repl should show compiling and then when it finishes
Now i seem getting sync nrepl timeout. If I do (do (require '[shadow.cljs.devtools.api :as shadow]) (shadow/watch :app) (shadow/nrepl-select :app))
myself, it seems to work . Like on save it will say [:app] configuring build. [:app] Compiling ...
that sounds like a configuration problem. did you read through how to set up the init and after-refresh functions?
@zackteo here's how I set things up with deps.edn in case it provides some pointers https://github.com/codeasone/starter-cider-tools-deps-shadow
you can try this repo here:
. just clone, npm install
and then cider-jack-in-cljs, choose shadow, and the app build, then open localhost 3000
https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html
having some issues with npm install @dpsutton can't seem to find this tho semver.simplifyRange is not a function
189 verbose stack TypeError: semver.simplifyRange is not a function
189 verbose stack at Advisory.[calculateRange] (/usr/lib/node_modules/npm/node_modules/@npmcli/metavuln-calculator/lib/advisory.js:191:16)
189 verbose stack at Advisory.load (/usr/lib/node_modules/npm/node_modules/@npmcli/metavuln-calculator/lib/advisory.js:148:28)
189 verbose stack at Calculator.[calculate] (/usr/lib/node_modules/npm/node_modules/@npmcli/metavuln-calculator/lib/index.js:59:14)
189 verbose stack at async Promise.all (index 0)
189 verbose stack at async Map.[init] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/audit-report.js:177:7)
189 verbose stack at async Map.run (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/audit-report.js:105:7)
looks like that's in the audit report. there are some advisories in these deps but it doesn't matter for demo purposes
not sure why my nrepl sync keeps timing out now but probably might be resolved with a restart hmm
one thing you can try is npx shadow-cljs compile app
and then try everything. if its timing out due to compilation taking a while, you can kinda help it out
@zackteo if working with any npm code, it is good to be aware of the different ways you can translate JS requires to CLJS. There is a useful Table 1: ES6 Import to CLJS Require
in this section: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages
As an aside, @U05224H0W - I've had to reference and point to that table many times; any chance you can add a page id so one can link to the table directly? It's not immediately "obvious" when you link to the section, because it's below the page fold.
that is a require for the react-modal
npm package, what exactly that does I don't know 😉