Expose cljs.core/Cons in SCI config (#142 )

This allows (instance? cljs.core/Cons x) to work in Scittle code. The Cons type exists in the compiled ClojureScript runtime but was not exposed by name in SCI's symbol table. Libraries like Trove need this for type checking in their const-form? function.
Enable customizing the nrepl websocket port (#141 )
2025-12-09 22:11:25 +01:00 · 2025-12-05 23:07:09 +01:00 · 2025-11-18 17:35:19 +01:00 · 2025-11-15 08:59:18 -05:00 · 2025-10-08 15:18:10 +02:00 · 2025-09-13 20:17:08 +02:00
20 changed files with 152 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@ -18,3 +18,4 @@ gh-pages/
 /.clj-kondo/rewrite-clj
 /plugins/demo/resources/public/js/
 .portal
+resources/public/test/scratch.html
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,7 +9,21 @@
 <!-- - Create Github release with updated links from `doc/links.md` -->
 <!-- - `bb gh-pages` -->

-## v0.7.25 (2025-08-20)
+- [#114](https://github.com/babashka/scittle/issues/114): Enable source maps ([@jeroenvandijk](https://github.com/jeroenvandijk))
+- [#140](https://github.com/babashka/scittle/issues/140): Enable customizing the nrepl websocket port ([@PEZ](https://github.com/PEZ))
+
+## v0.7.28 (2025-09-13)
+
+- [#137](https://github.com/babashka/scittle/issues/137): fix JS interop with reserved JS keyword (incorrectly munged) by bumping SCI
+
+## v0.7.27 (2025-08-21)
+
+- [#95](https://github.com/babashka/scittle/issues/121): support string requires
+  of `globalThis` js deps ([@chr15m](https://github.com/chr15m)). See
+  [docs](https://github.com/babashka/scittle/blob/main/doc/js-libraries.md).
+- Potentially breaking: `(.-foo-bar {})` now behaves as `{}.foo_bar`, i.e. the property or method name is munged.
+
+## v0.7.26 (2025-08-20)

 - [#121](https://github.com/babashka/scittle/issues/121): add `cjohansen/dataspex` plugin ([@jeroenvandijk](https://github.com/jeroenvandijk))
 - [#118](https://github.com/babashka/scittle/issues/118): add `goog.string/format` ([@jeroenvandijk](https://github.com/jeroenvandijk))
--- a/README.md
+++ b/README.md
@ -50,6 +50,7 @@ release Updates Github pages with new release build.
 ## Credits

 Idea by Arne Brasseur a.k.a [plexus](https://github.com/plexus).
+Name by Alessandra Sierra (the name occurs first in [this](https://stuartsierra.com/2019/12/21/clojure-start-time-in-2019/) blog post).

 ## License

--- a/deps.edn
+++ b/deps.edn
@ -1,9 +1,9 @@
 {:paths ["src" "resources"]
 :deps
- {org.clojure/clojure {:mvn/version "1.11.1"}
+ {org.clojure/clojure {:mvn/version "1.12.2"}
  thheller/shadow-cljs {:mvn/version "3.1.8"}
  org.babashka/sci {:git/url "https://github.com/babashka/sci"
-                    :git/sha "f8015f925f77ec5fd65c776d06345328eccf7e25"}
+                    :git/sha "6758ba028da559c536a06becbbedade7b0ba6448"}
  #_{:local/root "../babashka/sci"}
  reagent/reagent {:mvn/version "1.1.1"}
  no.cjohansen/replicant {:mvn/version "2025.03.27"}
--- a/doc/dev.md
+++ b/doc/dev.md
@ -90,20 +90,20 @@ To create a new NPM release:

 - Prepare version `package.json`, except patch (if anything should change here)
 - Run `bb npm-publish`: this will compile, bump patch version, create tag and and push to npm and Github
- `bb replace-version 0.6.16 0.7.24`
+- `bb replace-version 0.6.16 0.7.28`
 - Create Github release with updated links from `doc/links.md`
 - `bb gh-pages`

 <!-- To upgrade examples: -->

 <!-- ``` -->
-<!-- rg '0.0.1' --files-with-matches | xargs sed -i '' 's/0.0.7.24.1.0/g' -->
+<!-- rg '0.0.1' --files-with-matches | xargs sed -i '' 's/0.0.7.28.1.0/g' -->
 <!-- bb release -->
 <!-- cd gh-pages -->
-<!-- git checkout -b v0.7.24 -->
-<!-- git push --set-upstream origin v0.7.24 -->
+<!-- git checkout -b v0.7.28 -->
+<!-- git push --set-upstream origin v0.7.28 -->
 <!-- git checkout gh-pages -->
 <!-- cd .. -->
 <!-- ``` -->

-<!-- Then make a new release on Github with the `v0.7.24` tag. -->
+<!-- Then make a new release on Github with the `v0.7.28` tag. -->
--- a/doc/js-libraries.md
+++ b/doc/js-libraries.md
@ -0,0 +1,49 @@
+# Loading JS libraries
+
+Since `v0.7.28` scittle allows to load libraries from the global enviroment.
+This means you can load a library in a `<script>` tag and use it via `:require` in scittle.
+
+An example:
+
+``` html
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
+    <script type="application/x-scittle">
+      (require '["JSConfetti" :as confetti])
+      (.addConfetti (confetti.))
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+## ES modules
+
+The async nature of ES modules makes them a litte bit more difficult to work
+with in scittle. You need to disable automatic evaluation of script tags first
+using `scittle.core.disable_auto_eval()`.  In a `module` type `<script>` tag you
+can then load ES modules, attach them to the global object and manually invoke
+`scittle.core.eval_script_tags();` when setup is completed.
+
+``` html
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js" type="application/javascript"></script>
+    <script>scittle.core.disable_auto_eval()</script>
+    <script type="module">
+      import confetti from "https://esm.sh/canvas-confetti@1.6.0"
+      globalThis.JSConfetti = confetti;
+      scittle.core.eval_script_tags();
+    </script>
+    <script type="application/x-scittle">
+      (require '["JSConfetti" :as confetti])
+      (confetti)
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+```
--- a/doc/links.md
+++ b/doc/links.md
@ -1,20 +1,20 @@
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js-interop.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.cljs-ajax.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.reagent.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.re-frame.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.replicant.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.promesa.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.pprint.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.nrepl.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js-interop.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.cljs-ajax.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.reagent.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.re-frame.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.replicant.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.promesa.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.pprint.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.nrepl.js

-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.js-interop.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.cljs-ajax.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.reagent.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.re-frame.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.replicant.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.promesa.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.pprint.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.nrepl.js
-https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/dev/scittle.cljs-devtools.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.js-interop.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.cljs-ajax.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.reagent.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.re-frame.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.replicant.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.promesa.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.pprint.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.nrepl.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/dev/scittle.cljs-devtools.js
--- a/doc/nrepl/README.md
+++ b/doc/nrepl/README.md
@ -21,7 +21,7 @@ the normal routine:

 ``` html
 <script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</script>
-<script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.nrepl.js" type="application/javascript"></script>
+<script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.nrepl.js" type="application/javascript"></script>
 ```

 Also include the CLJS file that you want to evaluate with nREPL:
@ -42,6 +42,16 @@ you should be able evaluate expressions in `playground.cljs`. See a demo
 Note that the nREPL server connection stays alive even after the browser window
 refreshes.

+### Custom host address
+
+By default, the browser will connect to a websocket on the same host as it is loaded
+from, using `window.location.hostname`. If you need something else you can specify
+that setting the window variable `SCITTLE_NREPL_WEBSOCKET_HOST` like so:
+
+``` html
+<script>var SCITTLE_NREPL_WEBSOCKET_HOST = 'localhost';</script>
+```
+
 ### CIDER

 Choose `cider-connect-cljs`, select port `1339`, followed by the `nbb` REPL
--- a/doc/nrepl/index.html
+++ b/doc/nrepl/index.html
@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js" type="application/javascript"></script>
    <script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.nrepl.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.nrepl.js" type="application/javascript"></script>
    <script type="application/x-scittle" src="playground.cljs"></script>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@ -8,7 +8,7 @@
        "react": "17.0.1",
        "react-dom": "17.0.1"
      },
-      "version": "0.7.26"
+      "version": "0.7.28"
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
@ -129,5 +129,5 @@
      }
    }
  },
-  "version": "0.7.26"
+  "version": "0.7.28"
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "scittle",
-  "version": "0.7.26",
+  "version": "0.7.28",
  "files": [
    "dist"
  ],
--- a/resources/public/cljs/replicant_tictactoe/game.cljs
+++ b/resources/public/cljs/replicant_tictactoe/game.cljs
@ -13,10 +13,13 @@
    path))

 (defn get-winning-path [{:keys [size tics]} y x]
-  (or (winner? tics (mapv #(vector y %) (range 0 size)))
-      (winner? tics (mapv #(vector % x) (range 0 size)))
-      (when (= y x)
-        (winner? tics (mapv #(vector % %) (range 0 size))))))
+  (let [flip-y (fn [y] (- size 1 y))]
+    (or (winner? tics (mapv #(vector y %) (range 0 size)))
+        (winner? tics (mapv #(vector % x) (range 0 size)))
+        (when (= y x)
+          (winner? tics (mapv #(vector % %) (range 0 size))))
+        (when (= (flip-y y) x)
+          (winner? tics (mapv #(vector (flip-y %) %) (range 0 size)))))))

 (defn maybe-conclude [game y x]
  (if-let [path (get-winning-path game y x)]
--- a/resources/public/codemirror.html
+++ b/resources/public/codemirror.html
@ -1,13 +1,13 @@
 <html>
  <head>
    <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.1/dist/es-module-shims.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js"></script>
    <script>scittle.core.disable_auto_eval();</script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.reagent.js">    </script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.re-frame.js">    </script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.promesa.js">    </script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.reagent.js">    </script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.re-frame.js">    </script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.promesa.js">    </script>

    <script type="importmap">
      {
--- a/resources/public/html/cljs-ajax.html
+++ b/resources/public/html/cljs-ajax.html
@ -1,7 +1,7 @@
 <html>
  <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js" type="application/javascript"></script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.cljs-ajax.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.cljs-ajax.js" type="application/javascript"></script>
    <script type="application/x-scittle">
      (require '[ajax.core :refer [GET]])

--- a/resources/public/html/export.html
+++ b/resources/public/html/export.html
@ -1,6 +1,6 @@
 <html>
  <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js" type="application/javascript"></script>
    <script type="application/x-scittle">
      (defn my-alert []
       (js/alert "You clicked!"))
--- a/resources/public/html/reagent.html
+++ b/resources/public/html/reagent.html
@ -1,9 +1,9 @@
 <html>
  <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.js" type="application/javascript"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.reagent.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.28/dist/scittle.reagent.js" type="application/javascript"></script>
    <script type="application/x-scittle">
      (require '[reagent.core :as r]
           '[reagent.dom :as rdom])
--- a/resources/public/index.html
+++ b/resources/public/index.html
@ -87,7 +87,7 @@

    To embed scittle in your website, it is recommended to use the links
    published to
-    the <a href="https://github.com/babashka/scittle/releases/tag/v0.7.24">releases
+    the <a href="https://github.com/babashka/scittle/releases/tag/v0.7.28">releases
      page</a>.

    Include <tt>scittle.js</tt> and write a <tt>script</tt> tag
@ -160,6 +160,12 @@
       (js/console.log "In cljs"))
    </code></pre>

+    <a name="JS libraries"></a>
+    <h2><a href="#js-libraries">JS libraries</a></h2>
+
+    To use JavaScript libraries with Scittle,
+    see <a href="https://github.com/babashka/scittle/blob/main/doc/js-libraries.md">README.md</a>
+
    <a name="repl"></a>
    <h2><a href="#nrepl">REPL</a></h2>

--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@ -6,10 +6,13 @@

 :builds
 {:main
-  {;; for dev build
-   #_#_:compiler-options {:optimizations :simple
-                          :pretty-print true
-                          :pseudo-names true}
+  {;:compiler-options {:source-map true}
+   ;; for dev build   
+   #_#_
+   :compiler-options {:optimizations :simple
+                      :pretty-print true
+                      :pseudo-names true
+                      :source-map true}
   :target     :browser
   :js-options
   {:resolve {"react" {:target :global
@ -37,4 +40,5 @@
                        :depends-on #{:scittle}}}
   :build-hooks [(shadow.cljs.build-report/hook)]
   :output-dir "resources/public/js" ;; + "/dev" for dev build
-   :devtools   {:repl-pprint true}}}}
+   :devtools   {:repl-pprint true}
+   }}}
--- a/src/scittle/core.cljs
+++ b/src/scittle/core.cljs
@ -44,7 +44,8 @@
    'NaN? (sci/copy-var NaN? cljns)
    'infinite? (sci/copy-var infinite? cljns)
    'iteration (sci/copy-var iteration cljns)
-    'abs (sci/copy-var abs cljns)}
+    'abs (sci/copy-var abs cljns)
+    'Cons cljs.core/Cons}
   'goog.object {'set gobject/set
                 'get gobject/get}
   'goog.string {'format gstring/format
@ -53,13 +54,19 @@
   'sci.core {'stacktrace sci/stacktrace
              'format-stacktrace sci/format-stacktrace}})

+(defn load-fn [{:keys [ctx] :as opts}]
+  (when-let [lib (and (string? (:namespace opts))
+                      (gobject/get js/globalThis (:namespace opts)))]
+    (sci/add-js-lib! ctx (:namespace opts) lib)))
+
 (store/reset-ctx!
  (sci/init {:namespaces namespaces
             :classes {'js js/globalThis
                       :allow :all
                       'Math js/Math}
             :ns-aliases {'clojure.pprint 'cljs.pprint}
-             :features #{:scittle :cljs}}))
+             :features #{:scittle :cljs}
+             :load-fn load-fn}))

 (unchecked-set js/globalThis "import" (js/eval "(x) => import(x)"))

--- a/src/scittle/nrepl.cljs
+++ b/src/scittle/nrepl.cljs
@ -8,7 +8,9 @@

 (when-let [ws-port (.-SCITTLE_NREPL_WEBSOCKET_PORT js/window)]
  (set! (.-ws_nrepl js/window)
-        (new js/WebSocket (ws-url (.-hostname (.-location js/window)) ws-port "_nrepl"))))
+        (new js/WebSocket (ws-url (or (.-SCITTLE_NREPL_WEBSOCKET_HOST js/window)
+                                      (.-hostname (.-location js/window)))
+                                  ws-port "_nrepl"))))

 (when-let [ws (nrepl-server/nrepl-websocket)]
  (set! (.-onmessage ws)
Author	SHA1	Message	Date
FrankS	f72c1c163a	Expose cljs.core/Cons in SCI config (#142 ) This allows (instance? cljs.core/Cons x) to work in Scittle code. The Cons type exists in the compiled ClojureScript runtime but was not exposed by name in SCI's symbol table. Libraries like Trove need this for type checking in their const-form? function.	2025-12-09 22:11:25 +01:00
Peter Strömberg	93cb7874bf	Enable customizing the nrepl websocket port (#141 ) * Enable customizing the nrepl websocket port * Fixes #140 * Update changelog	2025-12-05 23:07:09 +01:00
Kyle Passarelli	c449f55a9b	Fix attribution in README (#139 )	2025-11-18 17:35:19 +01:00
Michiel Borkent	a9b58a3c82	scittle name by Alessandra	2025-11-15 08:59:18 -05:00
Jeroen van Dijk	5b3a3acb54	Enable source maps (#138 ) * Enable source maps * Update changelog	2025-10-08 15:18:10 +02:00
Michiel Borkent	4ec8026b51	links	2025-09-13 20:17:08 +02:00
Michiel Borkent	b29b8b6752	0.7.28	2025-09-13 20:14:53 +02:00
Michiel Borkent	57f886e3ab	Fix #137	2025-09-13 20:14:10 +02:00
Marduk Bolaños	cc09c6eb59	Added the inverse diagonal winning path (#136 )	2025-09-09 19:00:04 +02:00
Michiel Borkent	f2517187bf	Bump SCI	2025-08-22 12:45:38 +02:00
Michiel Borkent	76a32f63e5	README	2025-08-21 15:12:20 +02:00
Michiel Borkent	9e1feb81af	version	2025-08-21 15:03:34 +02:00
Michiel Borkent	6b56464bd6	0.7.27	2025-08-21 15:03:00 +02:00
Michiel Borkent	c48f9868c6	changelog	2025-08-21 15:02:29 +02:00
Michiel Borkent	3129a212b3	Add js lib docs	2025-08-21 15:01:10 +02:00
Chris McCormick	7aebb5bbb0	Support string requires of `globalThis` js deps #95 (#129 ) * Add a :load-fn for js libs on globalThis. Fixes #95. * Update changelog.	2025-08-21 11:08:56 +02:00
Michiel Borkent	ab527ad5a1	0.7.26	2025-08-20 15:17:08 +02:00
Michiel Borkent	a0e46da91e	0.7.26	2025-08-20 15:16:53 +02:00