Setup dynamic Clojurescript and Quil environment with emacs and figwheel

cljs-quil-emacs-figwheel-setup.md

My environment

• emacs 26.3
• cider 0.25.0
• leiningen 2.9.4 on Java 11.0.2
• ~/.lein/profiles.clj : {:user {:plugins []}}

Project setup

In a terminal, run these commands:

lein new quil-cljs minimal-quil
cd minimal-quil
lein figwheel

• When figwheel is ready to connect, open a browser on http://localhost:3449
• You should see a circle following a circular trajectory while changing its colour

simple emacs cider-connect (no cljs repl)

• Assumes lein figwheel running properly (see project setup)

• M-x find-file : .../minimal-quil/src/minimal_quil/core.cljs

• M-x cider-connect

  • host: localhost
  • port for host: 3449

• Minibuffer should display message: "[nREPL] Direct connection to localhost:3449 established"

• Now change something in the core.cljs file (e.g. change q/ellipse to q/rect)

• M-x save-buffer

• You should see the ellipse change into a rectangle in the browser

more advanced cider-jack-in-cljs

• Assumes no running lein figwheel (unlike cider-connect)
• M-x find-file : .../minimal-quil/project.clj
• add these dev dependencies:

...
  :profiles {:dev {:dependencies [[cider/piggieback "0.5.0"]
                                  [figwheel-sidecar "0.5.20"]]
                   :source-paths ["cljs_src"]
                   :repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]}}}
...

• Make sure the :plugins dependency of lein-figwheel is aligned with the :dev dependency of figwheel-sidecar so in this case, it should be [lein-figwheel "0.5.20"]

• M-x find-file : .../minimal-quil/src/minimal_quil/core.cljs

• M-x cider-jack-in-cljs

  • select ClojureScript REPL type: figwheel

• When lein figwheel is ready to connect, open a browser on http://localhost:3449

• The *cider-repl minimal-quil(cljs)* buffer should display a cljs.user> prompt

• Try (+ 2 3) ; it will compile the cljs to javascript, execute it in your browser and return the result in your repl

• Try (js/alert "Hello World!") in the repl

• M-x find-file : .../minimal-quil/src/minimal_quil/core.cljs

• (+ 2 3) M-x cider-eval-defun-at-point

• You now have the dynamic environment you're used to when developing clojure in emacs