ClojureScript tooling with BinaryAge's wonders + flexsurfer's re-frisk + IntelliJ

ClojureScript tooling.md

What is this about?

What it changes

• Re-frisk Visualize re-frame pattern data or reagent ratom data as a tree structure, watch re-frame events and export state in the debugger
• Dirac A Chrome DevTools fork for ClojureScript developers
• BinaryAge custom formatters for ClojureScript

Awesome stuff

• See the event serie as well as the (latest) app-db state.
• Watch handler contexts when debugging
• If the app-db contains serialisable values only you can also import or export it (easily replay an unexpected behaviour).
• Get a repl in your browser so you can test expression or functions easily.
• Live code your ui: go in the namespace of the view to edit, redefine a function, call it again to see the result.
• Debugger: pause the world, get all bindings of the current scope, craft your function by manipulate data in situ.
• Seamlessly switch between js console and ClojureScript repl.

Instructions

Local setup

• Copy ~/.lein/profiles.clj
• Copy ~/.lein/custom-ns/piotr-yuxuan/this-project.clj
• Copy ~/.lein/custom-ns/piotr-yuxuan/this-project.cljs

Chrome Canary

• mkdir /Users/piotr-yuxuan/.chrome-user-data-dir
• Install Chrome Canary
• Launch it just once with custom profile and install Dirac extension: cd /Users/piotr-yuxuan/.chrome-user-data-dir && /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --no-first-run --user-data-dir=.

IntelliJ Run/Debug configurations

Leiningen configuration

lein with-profile piotr-yuxuan-this-project run -m piotr-yuxuan.this-project

Remote Clojure REPL

• server localhost
• port 8230 (default for Dirac)
• Launch external tool dev browser (defined next)

External tool / custom dev browser

Settings:

• Description Google Chrome Canary with Dirac embedded
• Google Chrome Canary
• mkdir /Users/piotr-yuxuan/.chrome-user-data-dir (wherever you want)
• Program sh
• Parameter bkg-canary.sh http://localhost:3000/some-url
• Working directory /Users/piotr-yuxuan/.chrome-user-data-dir
• echo "/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 --no-first-run --user-data-dir=. $@ &" > /Users/piotr-yuxuan/.chrome-user-data-dir/bkg-canary.sh

Thanks

BinaryAge :-) flexsurfer :-)

profiles.clj

{:user {:plugins [;;[refactor-nrepl "2.2.0"]
                  [lein-kibit "0.1.2"]
                  [lein-ancient "0.6.10"]
                  [lein-pdo "0.1.1"]]}
 :piotr-yuxuan-this-project {:source-paths ["/Users/piotr-yuxuan/.lein/custom-ns"]
                             :dependencies [;; In-browser REPL
                                            [binaryage/dirac "LATEST"]
                                            ;; app-db visualisation
                                            [re-frisk "LATEST"]
                                            ;; Reloaded workflow
                                            [reloaded.repl "LATEST"]
                                            [org.clojure/tools.nrepl "LATEST"]
                                            ;; Run figwheel from command-line
                                            [figwheel-sidecar "LATEST"]]
                             :jvm-opts [];;"-Ddatabase.url=postgres://…" ifneedsbe
                             :repl-options {:nrepl-middleware [dirac.nrepl/middleware]
                                            :port 8230
                                            :init-ns this-project.main}}}

this-project.clj

(ns piotr-yuxuan.this-project
  "Leiningen run/debug configuration
  Should be rewritten in boot :-)

  Arguments: run -m piotr-yuxuan.this-project
  Profiles: piotr-yuxuan-this-project

Environment variables to add (taken from ../bin/lein)
  export BUNDLE_PATH=…/vendor/bundle/jruby/…
  export PATH=$BUNDLE_PATH/bin:$PATH
  export GEM_HOME=$BUNDLE_PATH
  export GEM_PATH=$BUNDLE_PATH"
  (:use [this-project.config :only [environ]]
        [this-project.system :only [new-system]]
        [clojure.tools.nrepl.server :only [start-server default-handler]]
        [com.stuartsierra.component :only [start-system]]
        [dirac.agent :only [boot!]]
        [dirac.nrepl]
        [duct.middleware.errors :only [wrap-hide-errors]]
        [figwheel-sidecar.repl-api :only [start-figwheel!]]
        [meta-merge.core :only [meta-merge]]
        [reloaded.repl :only [go set-init!]]
        [ring.middleware.reload :only [wrap-reload]]
        [ring.middleware.stacktrace :only [wrap-stacktrace]]))

(def runtime-system (atom nil))

(defn -main []
  (println "Starting nRepl server")
  (start-server :port 8230
                :handler (default-handler #'dirac.nrepl/middleware))
  (println "Starting Dirac agent")
  (boot!)
  (println "Starting system")
  (reset! runtime-system
          (-> environ
              (assoc-in [:app :middleware] [;; Reload namespaces of modified files
                                            [wrap-reload]
                                            ;; Exceptions caught and logged to *err*
                                            [wrap-stacktrace :colors true]])
              (assoc-in [:app :internal-error] "Internal Server Error")
              new-system
              start-system))
  (println "Starting Figwheel")
  (start-figwheel! {:build-ids [:piotr-yuxuan-this-project]
                    :all-builds [{:id :piotr-yuxuan-this-project
                                  :source-paths ["src-cljs"]
                                  :figwheel {:on-jsload "backoffice.core/mount-root"}
                                  :compiler {:main "backoffice.core"
                                             :output-to "public/assets/cljs/backoffice/backoffice.js"
                                             :output-dir "public/assets/cljs/backoffice-dev"
                                             :asset-path "/assets/cljs/backoffice-dev"
                                             :closure-defines {"backoffice.handlers/api-host" "localhost:3000"}
                                             :source-map-timestamp true
                                             :preloads '[dirac.runtime.preload piotr-yuxuan.re-frisk]
                                             :external-config {:devtools/config {:features-to-install :all}
                                                               :re-frisk {:enabled true}}}}]})
  (println "Now you can open Dirac browser…"))

this-project.cljs

(ns piotr-yuxuan.this-project
  (:require [re-frisk.core :refer [enable-re-frisk!]]))

(enable-re-frisk!)