Dev support - shadow-powered dev repl

Add :dev profile to deps, and shadow-cljs config to build the code and serve a page with it. The entrypoint is `dev/development.cljs`. See Readme. This makes it easy to interactively develop and test SCI configs.
babashka · Sep 28, 2023 · 383c768 · 383c768
1 parent 0e0ca4a
commit 383c768
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,6 @@
 .cpcache
 cljs-test-runner-out
 node_modules
+www/js/
+.calva/
+.portal/
diff --git a/README.md b/README.md
@@ -150,6 +150,10 @@ New functions added to clojure.core in version 1.11
 
 `npm install` and `bb test`
 
+### Development
+
+You can play with your SCI code and configs in a cljs REPL. In Calva, run Jack-in to a shadow-cljs repl and choose the `:dev` build. Elsewhere, run `npx shadow-cljs watch dev` and then connect to its nrepl at port 9000. Access the web page that Shadow serves at http://localhost:8081/ and then eval your code using `development.cljs`.
+
 ## License
 
 The configurations are licensed under the same licenses as the libraries they

diff --git a/deps.edn b/deps.edn
@@ -1,4 +1,6 @@
-{:aliases {:test {:extra-paths ["test"]
+{:aliases {:dev {:extra-paths ["dev"]
+                 :extra-deps {thheller/shadow-cljs {:mvn/version "2.25.5"}}}
+           :test {:extra-paths ["test"]
                   :extra-deps {org.babashka/sci {:git/url "https://github.com/babashka/sci"
                                                  :git/sha "987910fb38fdd166865458c3fd4b468a22fb9992"}
                                org.clojure/clojurescript {:mvn/version "1.11.51"}

diff --git a/dev/development.cljs b/dev/development.cljs
@@ -0,0 +1,40 @@
+(ns development
+  "Entry point for code loaded by shadow-cljs"
+  (:require
+   [sci.core :as sci]
+   [sci.configs.fulcro.fulcro :as fulcro-config]))
+
+;; Necessary to avoid the error 'Attempting to call unbound fn: #'clojure.core/*print-fn*'
+;; when calling `println` inside the evaluated code
+(enable-console-print!)
+(sci/alter-var-root sci/print-fn (constantly *print-fn*))
+(sci/alter-var-root sci/print-err-fn (constantly *print-err-fn*))
+
+(def full-ctx (doto (sci/init {})
+                (sci/merge-opts fulcro-config/config)))
+
+(defn init []
+  (println "Init run"))
+
+(defn reload []
+  (println "Reload run"))
+
+(comment
+  (sci/eval-string* (sci/init {}) "(+ 1 2)")
+
+  (sci/eval-string* full-ctx "
+(ns test1
+  (:require
+    [com.fulcrologic.fulcro.algorithms.denormalize :as fdn]
+    [com.fulcrologic.fulcro.application :as app]
+    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
+    [com.fulcrologic.fulcro.dom :as dom]))
+                                  
+(defsc Root [this props] (dom/h3 \"Hello from Fulcro!\"))
+(defn build-ui-tree []
+  (let [client-db (comp/get-initial-state Root {})]
+    (fdn/db->tree (comp/get-query Root client-db) client-db client-db)))
+(comp/with-parent-context (app/fulcro-app)
+  (dom/render-to-str ((comp/factory Root) (build-ui-tree))))
+")
+  ,)
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "devDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "shadow-cljs": "2.25.5"
   }
 }
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -0,0 +1,8 @@
+{:deps     {:aliases [:test :dev]}
+ :nrepl    {:port 9000}
+ :dev-http {8081 "www"}
+ :builds   {:dev     {:target     :browser
+                       :output-dir "www/js/dev"
+                       :asset-path "/js/dev"
+                       :modules    {:dev {:init-fn development/init}}
+                       :devtools   {:after-load development/reload}}}}
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SCI dev</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <h1>SCI dev playground for shadow-cljs</h1>
+    <p>Run shadow and connect to its nrepl at port 9000. Then eval code in <code>development.cljs</code>.</p>
+    <div id="app"></div>
+    <script src="js/dev/dev.js" type="text/javascript"></script>
+  </body>
+</html>