Fork me on GitHub
#cider
<
2021-05-15
>
zackteo05:05:46

What Clojurescript repl type do people usually use? :o

zackteo05:05:57

Really don't quite understand the cider clojurescript workflow - if any

zackteo06:05:36

Evaluation within Emacs won't work unless I use weasel is that correct ?

dpsutton06:05:26

Don’t think weasel is really a thing

dpsutton06:05:29

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.

dpsutton06:05:31

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

zackteo06:05:33

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

dpsutton06:05:08

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

zackteo06:05:24

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}}}}}

dpsutton06:05:44

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

dpsutton06:05:56

you only need a project.clj file if you need a lein process

dpsutton06:05:15

totally fine to just have just a frontend

dpsutton06:05:59

the equivalent for figwheel main is (do (require 'figwheel.main) (figwheel.main/start %s)), basically the same api

zackteo06:05:36

let me try again

zackteo06:05:01

this call: (do (require '[shadow.cljs.devtools.api :as shadow]) (shadow/nrepl-select %s)) should be done by cider right ?

dpsutton06:05:03

just jack-in-cljs

dpsutton06:05:12

and hopefully just follow the prompts

zackteo06:05:43

Is it supposed to change from shadow.user> to cljs.user>

dpsutton06:05:47

Yeah once you open the browser to your app

dpsutton06:05:07

Local host 8081 for you according to your file above

dpsutton06:05:18

Have you opened the browser to your site and seeing your app?

zackteo06:05:06

Yeapp. But it doesn't watch the app. Doesn't hot reload. Need to manually start the watch

thheller06:05:24

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?

thheller06:05:15

this question never comes up for cursive but somehow the cider jack-in process seems to make this complicated? why?

dpsutton06:05:13

I think it opens the browser automatically. I don’t understand

zackteo06:05:19

maybe it is because most start with the clj experience and the cljs experience is very foreign to most ?

dpsutton06:05:09

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?

zackteo06:05:24

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?

zackteo06:05:21

Let me try again... hmm

dpsutton06:05:29

I think I remember seeing that when the browser opens before compilation has finished. The repl should show compiling and then when it finishes

dpsutton06:05:38

And then just hit refresh in your browser

zackteo07:05:32

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 ...

zackteo07:05:38

but doesn't actually update the app

dpsutton07:05:00

that sounds like a configuration problem. did you read through how to set up the init and after-refresh functions?

codeasone07:05:10

@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

zackteo07:05:07

wait. Emacs setup or shadow-cljs.edn?

dpsutton07:05:08

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

codeasone07:05:11

I found the cider session handling confusing.

zackteo07:05:38

having some issues with npm install @dpsutton can't seem to find this tho semver.simplifyRange is not a function

dpsutton07:05:36

when doing npm install?

dpsutton07:05:56

weird. for me ran just fine, added 114 packages

zackteo07:05:49

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)

dpsutton07:05:02

looks like that's in the audit report. there are some advisories in these deps but it doesn't matter for demo purposes

dpsutton07:05:10

might be fine to just ignore and continue

zackteo07:05:18

not sure why my nrepl sync keeps timing out now but probably might be resolved with a restart hmm

dpsutton07:05:12

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

dpsutton07:05:22

don't know if compilation can cause a timeout or not but something to try

zackteo07:05:19

Okay it works so it is my app config

zackteo07:05:25

could i ask what is ["react-modal" :as Modal]

pithyless12:05:44

@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

zackteo12:05:24

Oooo! Thank you! So using a string like so is the standard for npm packages?

pithyless12:05:22

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.

👍 3
pithyless13:05:18

@zackteo yes; the strings are used only for external JS imports

👍 2
zackteo07:05:07

yeah evaluation works with your project too

thheller07:05:35

that is a require for the react-modal npm package, what exactly that does I don't know 😉

zackteo08:05:35

the hot reload seems to work already. But evaluation still does not work for my project ... hjmmm

zackteo08:05:48

Okay cool it works now