Bump SCI

* Add a :load-fn for js libs on globalThis.

Fixes #95.

* Update changelog.

.gitignore

@@ -17,3 +17,5 @@ gh-pages/
 /.clj-kondo/.cache
 /.clj-kondo/rewrite-clj
 /plugins/demo/resources/public/js/
+.portal
+resources/public/test/scratch.html

CHANGELOG.md

@@ -2,24 +2,67 @@
 
 [Scittle](https://github.com/babashka/scittle): execute Clojure(Script) directly from browser script tags via SCI!
 
-## v0.6.17 (2024-04-30)
+<!-- To create a new NPM release: -->
 
-- [#77](https://github.com/babashka/babashka/issues/77): make dependency on browser (`js/document`) optional so scittle can run in webworkers, Node.js, etc.
+<!-- - Run `bb npm-publish`: this will compile, bump patch version, create tag and and push to npm and Github -->
+<!-- - `bb replace-version 0.6.22 0.7.23` -->
+<!-- - Create Github release with updated links from `doc/links.md` -->
+<!-- - `bb gh-pages` -->
 
-## v0.6.16 (2024-04-22)
+## v0.7.27 (2025-08-21)
 
-- [#69](https://github.com/babashka/babashka/issues/69): executing script tag with src + whitespace doesn't work
+- [#95](https://github.com/babashka/scittle/issues/121): support string requires
-- [#72](https://github.com/babashka/babashka/issues/72): add clojure 1.11 functions like `update-vals`
+  of `globalThis` js deps ([@chr15m](https://github.com/chr15m)). See
-- [#75](https://github.com/babashka/babashka/issues/75): Support reader conditionals in source code
+  [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.6.15 (2023-05-04)
+## v0.7.26 (2025-08-20)
 
-- [#58](https://github.com/babashka/babashka/issues/58): build system for creating scittle distribution with custom libraries. See [plugins/demo](plugins/demo).
+- [#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))
+- Support alternative `(set! #js {} -a 1)` CLJS syntax (by bumping SCI)
+- Add source maps to distribution
+- Add dev versions of all modules in the `dev` folder of the distribution + a `dev/scitte.cljs-devtools.js` module
+
+## v0.7.23 (2025-06-18)
+
+- [#107](https://github.com/babashka/scittle/issues/107): add `replicant` plugin ([@jeroenvandijk](https://github.com/jeroenvandijk))
+- [#102](https://github.com/babashka/scittle/issues/102): add `applied-science/js-interop` plugin ([@chr15m](https://github.com/chr15m))
+- [#105](https://github.com/babashka/scittle/issues/105): add `goog.string/htmlEscape` ([@ikappaki](https://github.com/ikappaki) )
+- [#113](https://github.com/babashka/scittle/issues/113): add `unchecked-set` and `unchecked-get`
+
+## v0.6.22 (2024-12-19)
+
+- [#99](https://github.com/babashka/scittle/issues/99): make `js/import` work
+
+## v0.6.20 (2024-11-24)
+
+- [#55](https://github.com/babashka/scittle/issues/55): create gh-pages dir before using.
+- [#89](https://github.com/babashka/scittle/issues/89): allow `evaluate_script_tags` to specify individual scripts.
+- [#87](https://github.com/babashka/scittle/issues/87): prod build on fresh checkout fails
+
+## v0.6.19 (2024-10-08)
+
+- Add `cljs.pprint/code-dispatch` and `cljs.pprint/with-pprint-dispatch`
+
+## v0.6.18 (2024-04-30)
+
+- [#77](https://github.com/babashka/scittle/issues/77): make dependency on browser (`js/document`) optional so scittle can run in webworkers, Node.js, etc.
+
+## v0.6.17 (2024-04-22)
+
+- [#69](https://github.com/babashka/scittle/issues/69): executing script tag with src + whitespace doesn't work
+- [#72](https://github.com/babashka/scittle/issues/72): add clojure 1.11 functions like `update-vals`
+- [#75](https://github.com/babashka/scittle/issues/75): Support reader conditionals in source code
+
+## v0.6.16 (2023-05-04)
+
+- [#58](https://github.com/babashka/scittle/issues/58): build system for creating scittle distribution with custom libraries. See [plugins/demo](plugins/demo).
 - Use `window.location.hostname` for WebSocket connection instead of hardcoding `"localhost"` ([@pyrmont](https://github.com/pyrmont))
 - Upgrade `sci.configs` to `"33bd51e53700b224b4cb5bda59eb21b62f962745"`
 - Update nREPL implementation: implement `eldoc` (`info`, `lookup`) ([@benjamin-asdf](https://github.com/benjamin-asdf))
 
-## v0.6.16 (2023-01-05)
+## v0.6.15 (2023-01-05)
 
 - Fix destructuring in `defmethod` (by upgrading SCI)
 

README.md

@@ -29,6 +29,10 @@ babashka or Clojure JVM):
 
 See [doc/nrepl](doc/nrepl).
 
+### Service worker
+
+See [doc/serviceworker.md](doc/serviceworker.md).
+
 ## Tasks
 
 Run `bb tasks` to see all available tasks:

bb.edn

@@ -13,7 +13,7 @@
              [babashka.process :as p :refer [process]])
 
   clean {:doc "Start from clean slate."
-         :task (do (run! fs/delete (fs/list-dir (fs/file "resources" "public" "js") "**.*"))
+         :task (do (fs/delete-tree (fs/file "resources" "public" "js"))
                    (fs/delete-tree ".cpcache")
                    (fs/delete-tree ".shadow-cljs"))}
 
@@ -44,9 +44,11 @@
         :depends [prod]
         :task (do
                 (fs/delete-tree "dist")
-                (fs/create-dirs "dist")
+                (fs/create-dirs "dist/dev")
-                (run! (fn [f] (fs/copy f "dist"))
+                (run! (fn [f] (fs/copy f "dist" {:replace-existing true}))
-                      (fs/glob "resources/public/js" "*.js")))}
+                      (fs/glob "resources/public/js" "*.{js,js.map}"))
+                (run! (fn [f] (fs/copy f "dist/dev" {:replace-existing true}))
+                      (fs/glob "resources/public/js/dev" "*.{js,js.map}")))}
 
   bump-version {:doc "Bumps package.json and pushes new git tag"
                 :task (do (shell "npm version patch")
@@ -65,7 +67,7 @@
                    :task
                    (let [[prev next] *command-line-args*]
                      (-> (process ["bash" "-c"
-                                   (format "rg %s --files-with-matches | xargs sed -i '' 's/%s/%s/g'"
+                                   (format "rg %s --files-with-matches -g '!/CHANGELOG.md' | xargs sed -i '' 's/%s/%s/g'"
                                            prev prev next)]
                                   {:inherit true})
                          p/check))}

build/src/scittle/build.clj

@@ -69,4 +69,15 @@
   * :action - compile action, defaults to release, but may also be compile or watch"
   [{:keys [action
            args] :or {action "release"}}]
-  (build* (format "-M -m shadow.cljs.devtools.cli --force-spawn %s main %s" action (str/join " " args))))
+  (build* (format "-M -m shadow.cljs.devtools.cli --force-spawn %s main %s" action (str/join " " args)))
+  (when (= "release" action)
+    (println "Also building dev release build")
+    (build* (format "-M -m shadow.cljs.devtools.cli --force-spawn %s main %s %s"
+                    action
+                    "--config-merge '{:compiler-options {:optimizations :simple
+                                                         :pretty-print true
+                                                         :pseudo-names true}
+                                      :output-dir \"resources/public/js/dev\"
+                                      :modules {:scittle.cljs-devtools {:entries [scittle.cljs-devtools]
+                                                                        :depends-on #{:scittle}}}}'"
+                    (str/join " " args)))))

deps.edn

@@ -1,25 +1,29 @@
 {:paths ["src" "resources"]
  :deps
  {org.clojure/clojure {:mvn/version "1.11.1"}
-  thheller/shadow-cljs {:mvn/version "2.20.15"}
+  thheller/shadow-cljs {:mvn/version "3.1.8"}
   org.babashka/sci {:git/url "https://github.com/babashka/sci"
-                    :git/sha "bf6a0f1e00313a902c62c59e440266612725b926"}
+                    :git/sha "756376056b32198d96dd5b272cee8fc483db60df"}
   #_{:local/root "../babashka/sci"}
   reagent/reagent {:mvn/version "1.1.1"}
+  no.cjohansen/replicant {:mvn/version "2025.03.27"}
   re-frame/re-frame {:mvn/version "1.3.0"}
   cljsjs/react {:mvn/version "18.2.0-1"}
   cljsjs/react-dom {:mvn/version "18.2.0-1"}
   cljsjs/react-dom-server {:mvn/version "18.2.0-1"}
   cljs-ajax/cljs-ajax {:mvn/version "0.8.4"}
+  applied-science/js-interop {:mvn/version "0.4.2"}
   funcool/promesa {:mvn/version "11.0.678"}
   io.github.babashka/sci.nrepl
   #_{:local/root "../sci.nrepl"}
   {:git/url "https://github.com/babashka/sci.nrepl"
-   :git/sha "2f8a9ed2d39a1b09d2b4d34d95494b56468f4a23"}
+   :git/sha "75f379c685bbd58c3e23f531339eb144e104937d"}
   io.github.babashka/sci.configs
   #_{:local/root "/Users/borkdude/dev/sci.configs"}
   {:git/url "https://github.com/babashka/sci.configs"
-   :git/sha "ffa88d796a3a2fe0a0fce332c6bf56f36b7c5cd7"}}
+   :git/sha "aa84a1b4f1fe45735e5b748769309fc842f737c1"
+   :exclusions [org.babashka/sci]}
+  binaryage/devtools {:mvn/version "1.0.7"}}
  :aliases
  {:dev
   {:extra-paths ["dev"]

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.6.16`
+- `bb replace-version 0.6.16 0.7.27`
 - 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.6.16.1.0/g' -->
+<!-- rg '0.0.1' --files-with-matches | xargs sed -i '' 's/0.0.7.27.1.0/g' -->
 <!-- bb release -->
 <!-- cd gh-pages -->
-<!-- git checkout -b v0.6.16 -->
+<!-- git checkout -b v0.7.27 -->
-<!-- git push --set-upstream origin v0.6.16 -->
+<!-- git push --set-upstream origin v0.7.27 -->
 <!-- git checkout gh-pages -->
 <!-- cd .. -->
 <!-- ``` -->
 
-<!-- Then make a new release on Github with the `v0.6.16` tag. -->
+<!-- Then make a new release on Github with the `v0.7.27` tag. -->

doc/js-libraries.md

@@ -0,0 +1,49 @@
+# Loading JS libraries
+
+Since `v0.7.27` 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.27/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.27/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>
+```

doc/links.md

@@ -1,7 +1,20 @@
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.js
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.cljs-ajax.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.js-interop.js
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.reagent.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.cljs-ajax.js
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.re-frame.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.promesa.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.re-frame.js
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.pprint.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.replicant.js
-https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.nrepl.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.promesa.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.pprint.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.nrepl.js
+
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.js-interop.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.cljs-ajax.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.reagent.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.re-frame.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.replicant.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.promesa.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.pprint.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.nrepl.js
+https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/dev/scittle.cljs-devtools.js

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.6.16/dist/scittle.nrepl.js" type="application/javascript"></script>
+<script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.nrepl.js" type="application/javascript"></script>
 ```
 
 Also include the CLJS file that you want to evaluate with nREPL:
@@ -44,18 +44,6 @@ refreshes.
 
 ### CIDER
 
-Currently when connecting from CIDER, you need to use this snippet:
+Choose `cider-connect-cljs`, select port `1339`, followed by the `nbb` REPL
-
+type.  If you use multiple REPLs in your project, choose
-``` elisp
+`sesman-link-with-buffer` to choose the right REPL for the right buffer.
-(cider-register-cljs-repl-type 'sci-js "(+ 1 2 3)")
-
-(defun mm/cider-connected-hook ()
-  (when (eq 'sci-js cider-cljs-repl-type)
-    (setq-local cider-show-error-buffer nil)
-    (cider-set-repl-type 'cljs)))
-
-(add-hook 'cider-connected-hook #'mm/cider-connected-hook)
-```
-
-Then choose `cider-connect-cljs`, select port `1339`, followed by the `sci-js`
-REPL type.

doc/nrepl/bb.edn

@@ -1,5 +1,6 @@
 {:deps {io.github.babashka/sci.nrepl
-        {:git/sha "2f8a9ed2d39a1b09d2b4d34d95494b56468f4a23"}
+        #_{:local/root "/Users/borkdude/dev/sci.nrepl"}
+        {:git/sha "4f7f6d652a71b5bdc0c110313a4908d956e7a97d"}
         io.github.babashka/http-server
         {:git/sha "b38c1f16ad2c618adae2c3b102a5520c261a7dd3"}}
  :tasks {http-server {:doc "Starts http server for serving static files"

doc/nrepl/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.js" type="application/javascript"></script>
     <script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.nrepl.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.nrepl.js" type="application/javascript"></script>
     <script type="application/x-scittle" src="playground.cljs"></script>
   </head>
   <body>

doc/serviceworker.md

@@ -0,0 +1,26 @@
+# Scittle in a service worker
+
+You can use Scittle to bootstrap a ClojureScript based service worker.
+
+Put the following code into e.g. `scittle-sw.js` to create a JavaScript based service worker, load Scittle, then fetch your script and eval it.
+
+```javascript
+importScripts("scittle.min.js");
+
+const request = await fetch("sw.cljs");
+const text = await request.text();
+const result = scittle.core.eval_string(text);
+```
+
+Then load `scittle-sw.js` in your HTML:
+
+```html
+<script>
+  if('serviceWorker' in navigator)
+    navigator.serviceWorker.register('scittle-sw.js');
+</script>
+```
+
+This will load `sw.cljs` and eval it in the context of the service worker.
+
+A ready-made example can be found at [chr15m/scittle-template-serviceworker](https://github.com/chr15m/scittle-template-serviceworker).

package-lock.json

@@ -8,7 +8,7 @@
         "react": "17.0.1",
         "react-dom": "17.0.1"
       },
-      "version": "0.6.17"
+      "version": "0.7.27"
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -129,5 +129,5 @@
       }
     }
   },
-  "version": "0.6.17"
+  "version": "0.7.27"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scittle",
-  "version": "0.6.17",
+  "version": "0.7.27",
   "files": [
     "dist"
   ],

plugins/datascript/deps.edn

@@ -1,3 +1,4 @@
 {:deps
  {datascript/datascript {:mvn/version "1.3.12"}
-  io.github.babashka/sci.configs {:git/sha "33bd51e53700b224b4cb5bda59eb21b62f962745"}}}
+  io.github.babashka/sci.configs {:git/sha "aa84a1b4f1fe45735e5b748769309fc842f737c1"
+                                  :exclusions [org.babashka/sci]}}}

plugins/dataspex/deps.edn

@@ -0,0 +1,8 @@
+{:deps
+ {no.cjohansen/dataspex {:git/url "https://github.com/cjohansen/dataspex"
+                         :git/sha "02112200651c2bd932907bb69fba1ff50b881741"
+                         :exclusions [ring/ring-core 
+                                      ring/ring-jetty-adapter 
+                                      com.cognitect/transit-clj]}
+  io.github.babashka/sci.configs {:git/sha "aa84a1b4f1fe45735e5b748769309fc842f737c1" 
+                                  :exclusions [org.babashka/sci]}}}

plugins/dataspex/src/scittle/dataspex.cljs

@@ -0,0 +1,9 @@
+(ns scittle.dataspex
+  {:no-doc true}
+  (:require [sci.configs.cjohansen.dataspex :refer [config]]
+            [scittle.core :as scittle]))
+
+(defn init []
+  (scittle/register-plugin!
+   ::dataspex
+   config))

plugins/dataspex/src/scittle_plugin.edn

@@ -0,0 +1,8 @@
+[{:name scittle/dataspex
+  :namespaces [dataspex.core]
+  :js "./scittle.dataspex.js"
+  :shadow-config
+  {:modules   
+   {:scittle.dataspex {:init-fn scittle.dataspex/init
+                       :depends-on #{:scittle :scittle.datascript}
+                       :entries [dataspex.core]}}}}]

plugins/demo/bb.edn

@@ -1,6 +1,7 @@
 {:deps {io.github.babashka/scittle.build {:local/root "../../build"}
         ;; datascript plugin
         ; io.github.babashka/scittle.datascript {:local/root "../../plugins/datascript"}
+        io.github.babashka/scittle.dataspex {:local/root "../../plugins/dataspex"}
         io.github.babashka/scittle.javelin {:local/root "../../plugins/javelin"}
         io.github.babashka/scittle.hoplon {:local/root "../../plugins/hoplon"}
         io.github.babashka/http-server

plugins/hoplon/deps.edn

@@ -1,3 +1,4 @@
 {:deps
  {hoplon/hoplon {:mvn/version "7.5.0"}
-  io.github.babashka/sci.configs {:git/sha "08bab21643bc0c63a5b99c65193c9d24888270b7"}}}
+  io.github.babashka/sci.configs {:git/sha "aa84a1b4f1fe45735e5b748769309fc842f737c1"
+                                  :exclusions [org.babashka/sci]}}}

plugins/javelin/deps.edn

@@ -1,3 +1,4 @@
 {:deps
  {hoplon/javelin {:mvn/version "3.9.3"}
-  io.github.babashka/sci.configs {:git/sha "08bab21643bc0c63a5b99c65193c9d24888270b7"}}}
+  io.github.babashka/sci.configs {:git/sha "aa84a1b4f1fe45735e5b748769309fc842f737c1"
+                                  :exclusions [org.babashka/sci]}}}

resources/public/bookmarklet.html

@@ -4,9 +4,8 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="css/style.css">
     <script src="https://babashka.github.io/scittle/js/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://unpkg.com/react@17/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 crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
     <script src="https://babashka.github.io/scittle/js/scittle.reagent.js" type="application/javascript"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" type="text/javascript"></script>

resources/public/cljs/replicant_tictactoe/core.cljs

@@ -0,0 +1,33 @@
+;; COPIED FROM https://github.com/cjohansen/replicant-tic-tac-toe/blob/7a33fb12f0cd6658b2f555ff673dee031d4aa921/src/tic_tac_toe/core.cljs
+
+(ns replicant-tictactoe.core
+  (:require [replicant.dom :as r]
+            [replicant-tictactoe.game :as game]
+            [replicant-tictactoe.ui :as ui]))
+
+(defn start-new-game [store]
+  (reset! store (game/create-game {:size 3})))
+
+(defn main []
+  ;; Set up the atom
+  (let [store (atom nil)
+        el (js/document.getElementById "app")]
+
+    ;; Globally handle DOM events
+    (r/set-dispatch!
+     (fn [_ [action & args]]
+       (case action
+         :tic (apply swap! store game/tic args)
+         :reset (start-new-game store))))
+
+    ;; Render on every change
+    (add-watch store ::render
+               (fn [_ _ _ game]
+                 (->> (ui/game->ui-data game)
+                      ui/render-game
+                      (r/render el))))
+
+    ;; Trigger the first render by initializing the game.
+    (start-new-game store)))
+
+(main)

resources/public/cljs/replicant_tictactoe/game.cljs

@@ -0,0 +1,41 @@
+;; COPIED FROM https://github.com/cjohansen/replicant-tic-tac-toe/blob/7a33fb12f0cd6658b2f555ff673dee031d4aa921/src/tic_tac_toe/game.cljs
+
+(ns replicant-tictactoe.game)
+
+(defn create-game [{:keys [size]}]
+  {:next-player :x
+   :size size})
+
+(def next-player {:x :o, :o :x})
+
+(defn winner? [tics path]
+  (when (= 1 (count (set (map tics path))))
+    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))))))
+
+(defn maybe-conclude [game y x]
+  (if-let [path (get-winning-path game y x)]
+    (-> (dissoc game :next-player)
+        (assoc :over? true
+               :victory {:player (get-in game [:tics [y x]])
+                         :path path}))
+    (let [tie? (= (count (:tics game)) (* (:size game) (:size game)))]
+      (cond-> game
+        tie? (dissoc :next-player)
+        tie? (assoc :over? true)))))
+
+(defn tic [game y x]
+  (let [player (:next-player game)]
+    (if (or (get-in game [:tics [y x]])
+            (<= (:size game) x)
+            (<= (:size game) y))
+      game
+      (-> game
+          (assoc-in [:tics [y x]] player)
+          (assoc :next-player (next-player player))
+          (maybe-conclude y x)))))

resources/public/cljs/replicant_tictactoe/style.css

@@ -0,0 +1,50 @@
+/* COPIED from https://github.com/cjohansen/replicant-tic-tac-toe/blob/7a33fb12f0cd6658b2f555ff673dee031d4aa921/resources/public/styles.css */
+.cell {
+    aspect-ratio: 1 / 1;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 6%;
+    border: none;
+    display: block;
+    flex: 1 1 0%;
+    outline: none;
+    position: relative;
+    width: 100%;
+}
+
+.cell-content {
+    opacity: 1;
+    transition: opacity 0.25s;
+}
+
+.transparent {
+    opacity: 0;
+}
+
+.cell-dim {
+    background: rgba(249, 249, 240, 0.3);
+}
+
+.cell-highlight {
+    background: #fcfcf3;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.board {
+    --gap: 0.75rem;
+    background: #833ab4;
+    background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    padding: var(--gap);
+    max-width: 80vh;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap);
+}

resources/public/cljs/replicant_tictactoe/ui.cljs

@@ -0,0 +1,75 @@
+;; COPIED FROM https://github.com/cjohansen/replicant-tic-tac-toe/blob/7a33fb12f0cd6658b2f555ff673dee031d4aa921/src/tic_tac_toe/ui.cljs
+
+(ns replicant-tictactoe.ui)
+
+(def mark-x
+  [:svg {:xmlns "http://www.w3.org/2000/svg"
+         :viewBox "0 -10 108 100"}
+   [:path
+    {:fill "currentColor"
+     :d "m1.753 69.19.36-1.08q.35-1.09 1.92-2.97 1.58-1.87 3.85-3.84 2.29-1.97 4.6-3.54 2.31-1.57 4.93-3.24 2.62-1.66 4.65-2.9 2.04-1.23 3.91-2.27 1.87-1.05 3.98-2.31 2.11-1.27 4.12-2.5 2.01-1.24 4.33-2.51l4.6-2.52q2.27-1.25 4.84-2.86 2.56-1.62 5.03-3.09 2.47-1.47 4.5-2.88 2.03-1.4 3.82-2.82t3.81-3.47q2.01-2.06 3.7-3.51 1.69-1.46 3.47-3.03 1.77-1.57 4.01-3.69 2.24-2.11 4.13-3.7 1.89-1.58 3.93-2.97 2.04-1.39 4.05-2.49 2.01-1.11 5.26-2.54 3.24-1.44 4.48-1.46 1.24-.01 2.42.37 1.18.37 2.18 1.11 1 .74 1.71 1.75.71 1.02 1.06 2.21.34 1.19.3 2.43-.05 1.24-.5 2.39-.44 1.16-1.23 2.12-.79.95-1.84 1.61-1.05.65-2.26.94-1.21.28-2.44.16-1.23-.11-2.37-.62-1.13-.5-2.04-1.34-.91-.84-1.51-1.93-.6-1.08-.81-2.3-.22-1.22-.04-2.45.18-1.23.75-2.33.56-1.1 1.45-1.97.89-.86 2.01-1.4 1.11-.54 2.35-.69 1.23-.15 2.44.1t2.29.87q1.07.63 1.88 1.56.82.93 1.29 2.08.48 1.14.56 2.38.09 1.24-.23 2.44-.31 1.19-.99 2.23-.68 1.04-1.66 1.8-.98.76-2.15 1.18l-1.16.41-2.28 1.17q-2.28 1.18-4.38 2.7-2.1 1.51-4.2 3.44-2.1 1.92-4.18 3.7-2.08 1.77-3.9 3.44-1.81 1.68-3.41 3.13-1.6 1.46-3.38 3.09-1.79 1.62-3.44 2.97-1.66 1.34-3.53 2.4-1.88 1.06-4.17 2.65-2.3 1.6-4.79 2.74-2.48 1.14-4.98 2.71-2.5 1.57-4.51 2.47-2.01.9-3.99 1.87-1.98.97-3.88 2.02-1.91 1.05-4.38 2.34-2.46 1.28-4.94 2.53-2.47 1.25-4.48 2.38-2 1.12-3.96 2.14-1.95 1.01-3.83 1.99-1.89.98-4.37 2.05-2.48 1.06-2.96 2.01-.48.96-.78 1.49-.3.53-.71.97-.41.44-.92.77-.51.34-1.09.54-.57.2-1.17.25-.6.06-1.2-.03t-1.16-.32q-.56-.23-1.05-.59-.49-.35-.89-.82-.39-.46-.65-1.01-.27-.54-.4-1.14-.13-.59-.12-1.19.02-.6.18-1.19l.16-.59Z"}]
+   [:path
+    {:fill "currentColor"
+     :d "m28.099 4.991 2.69 1.97q2.69 1.96 4.5 3.22 1.8 1.28 4.54 3.46 2.74 2.18 4.57 3.89t3.38 3.72q1.54 2.02 2.88 4.3 1.34 2.28 2.83 4.46 1.48 2.18 2.63 4.14 1.15 1.96 2.74 4.07 1.59 2.1 3.59 4.19 1.99 2.08 4.23 4.48 2.24 2.4 3.7 4.04 1.47 1.64 2.91 3.23 1.44 1.59 3.08 3.58 1.64 1.99 3.51 4.08 1.87 2.09 3.55 3.77 1.69 1.68 4.1 3.51 2.42 1.83 3.9 2.58 1.48.74 2.14 1.34.66.6 1.15 1.33.5.74.8 1.57.31.84.4 1.72.1.88-.02 1.76-.12.88-.44 1.71-.33.82-.84 1.55-.51.72-1.19 1.3-.67.58-1.46.98-.79.41-1.65.61-.87.2-1.76.19-.88-.01-1.74-.24-.86-.22-1.64-.64-.78-.42-2.27-2.72-1.48-2.3-1.52-3.49-.03-1.19.31-2.33.35-1.14 1.04-2.11.69-.97 1.66-1.67.96-.7 2.1-1.05 1.14-.35 2.33-.32 1.19.02 2.31.43t2.05 1.15q.93.75 1.58 1.75.64 1 .93 2.15.29 1.16.2 2.35-.09 1.18-.56 2.28-.47 1.1-1.26 1.99-.79.88-1.83 1.47t-2.2.82q-1.17.23-2.35.07-1.19-.16-2.25-.68-1.07-.53-1.92-1.37-.84-.84-1.37-1.9-.54-1.07-.7-2.25-.17-1.18.06-2.35.22-1.17.8-2.21.58-1.04 1.47-1.84.88-.79 1.98-1.27 1.09-.47 2.28-.57 1.18-.1 2.34.18 1.16.29 2.16.93 1.01.63 1.76 1.56.74.93-.33-.26-1.07-1.18-.41-.58.66.59 1.15 1.33.5.74.8 1.57.31.83.4 1.72.1.88-.02 1.76-.12.88-.44 1.7-.33.83-.84 1.55-.51.73-1.19 1.31-.67.58-1.46.98-.79.41-1.65.61-.87.2-1.75.19-.89-.01-1.75-.24-.86-.22-1.64-.64-.78-.42-2.73-1.57-1.95-1.14-4.26-2.95-2.31-1.8-3.87-3.43-1.57-1.62-3.17-3.29-1.6-1.66-3.55-4.05-1.95-2.39-3.33-4.15-1.39-1.76-2.77-3.4-1.38-1.64-3.07-3.56-1.7-1.91-3.91-4.13-2.2-2.22-3.74-4.1-1.54-1.88-2.79-3.75-1.24-1.87-2.4-4.33t-2.39-4.46q-1.23-2.01-2.4-4.59-1.17-2.59-2.53-5.01-1.36-2.43-3.35-4.44-1.99-2.02-4.52-4.27-2.54-2.25-5.33-4.04-2.81-1.79-3.28-2.21-.47-.41-.83-.92-.35-.51-.58-1.1-.22-.58-.3-1.2-.08-.62-.01-1.23.08-.62.29-1.21.22-.58.58-1.1.35-.51.81-.93.47-.42 1.02-.71t1.16-.45q.61-.15 1.23-.15t1.22.14q.61.15 1.17.44l.55.28Z"}]])
+
+(def mark-o
+  [:svg {:xmlns "http://www.w3.org/2000/svg"
+         :viewBox "0 0 114 114"}
+   [:path
+    {:fill "none"
+     :stroke "currentColor"
+     :stroke-linecap "round"
+     :stroke-width "6"
+     :d "M74.616 8.935c7.73 2.38 15.96 9.34 21.58 16.04 5.63 6.69 10.57 15.46 12.18 24.11 1.6 8.65.74 19.67-2.53 27.77-3.27 8.11-10.12 15.37-17.09 20.88-6.98 5.51-16.07 10.81-24.76 12.17-8.7 1.35-19.32-.76-27.42-4.06-8.1-3.29-15.73-8.93-21.21-15.73-5.48-6.81-10.32-16.5-11.67-25.09-1.35-8.6.19-18.39 3.57-26.51 3.38-8.11 9.99-16.6 16.71-22.19 6.72-5.59 13.95-10.52 23.63-11.36 9.68-.84 28.04 4.34 34.45 6.32 6.42 1.97 4.37 4.6 4.04 5.55m-48.33-9.69c7.65-3.32 19.78-3.63 28.63-2.01 8.86 1.63 17.85 5.89 24.49 11.76 6.64 5.87 12.7 15.08 15.37 23.48 2.67 8.41 2.5 18.4.65 26.95-1.85 8.54-5.98 17.59-11.77 24.34-5.78 6.74-14.56 13.05-22.93 16.11-8.37 3.06-18.75 4.19-27.29 2.25-8.54-1.93-17.37-7.89-23.96-13.87-6.59-5.97-12.89-13.58-15.57-21.96-2.69-8.39-2.31-19.94-.56-28.34 1.75-8.4 5.21-15.74 11.06-22.09 5.85-6.35 19.92-13.32 24.04-16.01 4.12-2.7.37-1.1.67-.16"}]])
+
+(defn render-cell [{:keys [content on-click dim? highlight? clickable?]}]
+  [:button.cell
+   {:on {:click on-click}
+    :class (cond-> []
+             dim? (conj "cell-dim")
+             highlight? (conj "cell-highlight")
+             clickable? (conj "clickable"))}
+   (when content
+     [:div.cell-content
+      {:replicant/mounting {:class "transparent"}
+       :replicant/unmounting {:class "transparent"}}
+      content])])
+
+(defn render-board [{:keys [rows]}]
+  [:div.board
+   (for [row rows]
+     [:div.row
+      (for [cell row]
+        (render-cell cell))])])
+
+(defn render-game [{:keys [board button]}]
+  [:div
+   (render-board board)
+   (when button
+     [:button {:on {:click (:on-click button)}
+               :style {:margin-top 20
+                       :font-size 20}}
+      (:text button)])])
+
+(def player->mark
+  {:x mark-x
+   :o mark-o})
+
+(defn game->ui-data [{:keys [size tics victory over?]}]
+  (let [highlight? (set (:path victory))]
+    {:button (when over?
+               {:text "Start over"
+                :on-click [:reset]})
+     :board
+     {:rows
+      (for [y (range size)]
+        (for [x (range size)]
+          (if-let [player (get tics [y x])]
+            (let [victorious? (highlight? [y x])]
+              (cond-> {:content (player->mark player)}
+                victorious? (assoc :highlight? true)
+                (and over? (not victorious?)) (assoc :dim? true)))
+            (if over?
+              {:dim? true}
+              {:clickable? true
+               :on-click [:tic y x]}))))}}))

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.6.16/dist/scittle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.js"></script>
     <script>scittle.core.disable_auto_eval();</script>
-    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.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.6.16/dist/scittle.reagent.js">    </script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js">    </script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.re-frame.js">    </script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.re-frame.js">    </script>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.promesa.js">    </script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.promesa.js">    </script>
 
     <script type="importmap">
       {
@@ -24,6 +24,7 @@
           "@lezer/lr": "https://cdn.jsdelivr.net/npm/@lezer/lr/dist/index.js",
           "@lezer/common": "https://cdn.jsdelivr.net/npm/@lezer/common/dist/index.js",
           "@codemirror/language": "https://cdn.jsdelivr.net/npm/@codemirror/language/dist/index.js",
+          "@marijn/find-cluster-break": "https://cdn.jsdelivr.net/npm/@marijn/find-cluster-break",
           "@codemirror/state": "https://cdn.jsdelivr.net/npm/@codemirror/state/dist/index.js",
           "@codemirror/view": "https://cdn.jsdelivr.net/npm/@codemirror/view/dist/index.js",
           "style-mod": "https://cdn.jsdelivr.net/npm/style-mod/src/style-mod.js",

resources/public/html/cljs-ajax.html

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

resources/public/html/export.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.js" type="application/javascript"></script>
     <script type="application/x-scittle">
       (defn my-alert []
        (js/alert "You clicked!"))

resources/public/html/local.html

@@ -1,8 +1,8 @@
 <html>
   <head>
     <script src="../js/scittle.js" type="application/javascript"></script>
-    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
     <script src="../js/scittle.reagent.js" type="application/javascript"></script>
     <script type="application/x-scittle">
       (defn f [x]

resources/public/html/reagent.html

@@ -1,9 +1,9 @@
 <html>
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/scittle@0.6.16/dist/scittle.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.js" type="application/javascript"></script>
-    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.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.6.16/dist/scittle.reagent.js" type="application/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js" type="application/javascript"></script>
     <script type="application/x-scittle">
       (require '[reagent.core :as r]
            '[reagent.dom :as rdom])

resources/public/index.html

@@ -3,8 +3,8 @@
   <head>
     <link rel="stylesheet" href="css/style.css">
     <script src="js/scittle.js" type="application/javascript"></script>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
     <script src="js/scittle.reagent.js" type="application/javascript"></script>
     <!-- <script src="js/scittle.re-frame.js" type="application/javascript"></script> -->
     <script src="js/scittle.cljs-ajax.js" type="application/javascript"></script>
@@ -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.6.16">releases
+    the <a href="https://github.com/babashka/scittle/releases/tag/v0.7.27">releases
       page</a>.
 
     Include <tt>scittle.js</tt> and write a <tt>script</tt> tag
@@ -147,6 +147,25 @@
     addition to <tt>scittle.js</tt>, you need to
     include <tt>scittle.pprint.js</tt>.
 
+    <a name="reader-conditional"></a>
+    <h2><a href="#reader-conditional">Target :scittle in cljc</a></h2>
+    You can target scittle in .cljc files (use a script tag to include the cljc file) with the <code>:scittle</code> reader conditional like this:<br>
+
+    <pre><code class="clojure">
+    #?(:scittle
+       (js/console.log "In scittle")
+       :org.babashka/nbb
+       (js/console.log "In nbb")
+       :cljs
+       (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>
 
@@ -165,6 +184,7 @@
           Babashka + scittle implementation of the Luminus guestbook.
       </a></li>
       <li><a href="codemirror.html">Codemirror</a></li>
+      <li><a href="replicant_tictactoe.html">Tic-tac-toe with Replicant</a></li>      
     </ul>
 
   </body>

resources/public/index_text.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="js/scittle.js" type="application/javascript"></script>
+    <script src="js/scittle.cljs-devtools.js" type="application/javascript"></script>
+    <script type="application/x-scittle">
+      (js/console.log {:a 1})
+
+    </script>
+  </head>
+  <body>
+  </body>
+</html>

resources/public/replicant_tictactoe.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/scittle.js" type="application/javascript"></script>
+    <script src="js/scittle.replicant.js" type="application/javascript"></script>
+
+    <script type="application/x-scittle" src="cljs/replicant_tictactoe/ui.cljs"></script>
+    <script type="application/x-scittle" src="cljs/replicant_tictactoe/game.cljs"></script>
+    <script type="application/x-scittle" src="cljs/replicant_tictactoe/core.cljs"></script>
+    <link rel="stylesheet" href="cljs/replicant-tictactoe/style.css">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/clojure.min.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/zenburn.min.css" integrity="sha512-JPxjD2t82edI35nXydY/erE9jVPpqxEJ++6nYEoZEpX2TRsmp2FpZuQqZa+wBCen5U16QZOkMadGXHCfp+tUdg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  </head>
+  <body>
+    <h1>Scittle tic-tac-toe built with Replicant</h1>
+    <h2>What is Scittle?</h2>
+    <p>Read <a href="index.html">the main page</a> for more details.</p>
+    <h2>The game</h2>
+    <div id="app"></div>
+    <p>The following source was loaded and interpreted
+ from <a href="cljs/replicant_tictactoe/core.cljs"><tt>cljs/replicant_tictactoe/core.cljs</tt></a> using the
+ script tag:
+      <pre><code class="html">
+&lt;script type=&quot;application/x-scittle&quot; src=&quot;cljs/replicant_tictactoe/ui.cljs&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;application/x-scittle&quot; src=&quot;cljs/replicant_tictactoe/game.cljs&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;application/x-scittle&quot; src=&quot;cljs/replicant_tictactoe/core.cljs&quot;&gt;&lt;/script&gt;
+
+</code></pre>
+    </p>
+    <pre><code class="language-clojure" id="cljs"></code></pre>
+    <script type="application/x-scittle">
+      (defn set-text [progress-event]
+        (let [elt (.getElementById js/document "cljs")]
+          (set! (.-innerHTML elt) (.. progress-event -srcElement -responseText))
+          (.highlightAll js/hljs)))
+      (def oreq (js/XMLHttpRequest.))
+      (.addEventListener oreq "load" set-text)
+      (.open oreq "GET" "cljs/replicant_tictactoe/core.cljs")
+      (.send oreq)
+    </script>
+  </body>
+</html>

resources/public/test/codemirror.html

@@ -4,8 +4,8 @@
     <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.1/dist/es-module-shims.js"></script>
     <script src="/js/scittle.js"></script>
     <script>scittle.core.disable_auto_eval();</script>
-    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
     <script src="/js/scittle.reagent.js">    </script>
     <script src="/js/scittle.re-frame.js">    </script>
     <script src="/js/scittle.pprint.js">    </script>

resources/public/tictactoe.html

@@ -3,9 +3,8 @@
   <head>
     <link rel="stylesheet" href="css/style.css">
     <script src="js/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://unpkg.com/react@17/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 crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
     <script src="js/scittle.reagent.js" type="application/javascript"></script>
 
     <script type="application/x-scittle" src="cljs/tictactoe.cljs"></script>

script/changelog.clj

@@ -7,7 +7,7 @@
       replaced (str/replace changelog
                             #" #(\d+)"
                             (fn [[_ issue after]]
-                              (format " [#%s](https://github.com/babashka/babashka/issues/%s)%s"
+                              (format " [#%s](https://github.com/babashka/scittle/issues/%s)%s"
                                       issue issue (str after))))
       replaced (str/replace replaced
                             #"@([a-zA-Z0-9-_]+)([, \.)])"

script/release.clj

@@ -3,6 +3,8 @@
 (require '[babashka.fs :as fs]
          '[babashka.tasks :refer [shell]])
 
+(fs/create-dirs "gh-pages")
+
 (fs/copy "resources/public/index.html" "gh-pages"
          {:replace-existing true})
 
@@ -24,6 +26,9 @@
 (fs/copy "resources/public/codemirror.html" "gh-pages"
          {:replace-existing true})
 
+(fs/copy "resources/public/replicant_tictactoe.html" "gh-pages"
+        {:replace-existing true})
+
 (def html-source-dir (fs/file "resources" "public" "html"))
 (def html-target-dir (fs/file "gh-pages" "html"))
 (fs/create-dirs html-target-dir)
@@ -60,6 +65,9 @@
                  {:replace-existing true}))
       (fs/glob cljs-source-dir "*.cljs"))
 
+(println "Copying dir resources/public/cljs/replicant_tictactoe")
+(fs/copy-tree (fs/file cljs-source-dir "replicant_tictactoe") (fs/file cljs-target-dir "replicant_tictactoe") {:replace-existing true})
+
 (run! (fn [f]
         (println "Copying" (str f))
         (fs/copy f

shadow-cljs.edn

@@ -6,7 +6,11 @@
 
  :builds
  {:main
-  {:target     :browser
+  {;; for dev build
+   #_#_:compiler-options {:optimizations :simple
+                          :pretty-print true
+                          :pseudo-names true}
+   :target     :browser
    :js-options
    {:resolve {"react" {:target :global
                        :global "React"}
@@ -18,15 +22,19 @@
                     :depends-on #{:scittle}}
     :scittle.promesa {:entries [scittle.promesa]
                       :depends-on #{:scittle}}
+    :scittle.js-interop {:entries [scittle.js-interop]
+                        :depends-on #{:scittle}}
     :scittle.pprint {:entries [scittle.pprint]
                      :depends-on #{:scittle}}
     :scittle.reagent {:entries [scittle.reagent]
                       :depends-on #{:scittle}}
+    :scittle.replicant {:entries [scittle.replicant]
+                        :depends-on #{:scittle}}
     :scittle.re-frame {:entries [scittle.re-frame]
                        :depends-on #{:scittle.reagent
                                      :scittle}}
     :scittle.cljs-ajax {:entries [scittle.cljs-ajax]
                         :depends-on #{:scittle}}}
    :build-hooks [(shadow.cljs.build-report/hook)]
-   :output-dir "resources/public/js"
+   :output-dir "resources/public/js" ;; + "/dev" for dev build
    :devtools   {:repl-pprint true}}}}

src/scittle/cljs_devtools.cljs

@@ -0,0 +1,6 @@
+(ns scittle.cljs-devtools
+  (:require [devtools.core :as devtools]))
+
+(devtools/set-pref! :disable-advanced-mode-check true)
+
+(devtools/install!)

src/scittle/core.cljs

@@ -2,7 +2,8 @@
   (:refer-clojure :exclude [time])
   (:require [cljs.reader :refer [read-string]]
             [goog.object :as gobject]
-            [goog.string]
+            [goog.string :as gstring]
+            [goog.string.format]
             [sci.core :as sci]
             [sci.ctx-store :as store]
             [sci.impl.unrestrict]
@@ -46,16 +47,27 @@
     'abs (sci/copy-var abs cljns)}
    'goog.object {'set gobject/set
                  'get gobject/get}
+   'goog.string {'format gstring/format
+                 'htmlEscape gstring/htmlEscape}
+   'goog.string.format {} ;; For cljs compatibility
    '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)"))
 
 (def !last-ns (volatile! @sci/ns))
 
@@ -103,8 +115,14 @@
           (eval-script-tags* (rest script-tags)))
         (eval-script-tags* (rest script-tags))))))
 
-(defn ^:export eval-script-tags []
+(defn ^:export eval-script-tags [& [script-tags]]
-  (let [script-tags (.querySelectorAll doc "script[type='application/x-scittle']")]
+  (let [script-tags (or script-tags
+                        (.querySelectorAll
+                          doc "script[type='application/x-scittle']"))
+        script-tags (if (or (coll? script-tags)
+                            (aget script-tags "length"))
+                      script-tags
+                      [script-tags])]
     (eval-script-tags* script-tags)))
 
 (def auto-load-disabled? (volatile! false))

src/scittle/js_interop.cljs

@@ -0,0 +1,8 @@
+(ns scittle.js-interop
+  (:require
+   [sci.configs.applied-science.js-interop :as j]
+   [scittle.core :as scittle]))
+
+(scittle/register-plugin!
+  ::js-interop
+  j/config)

src/scittle/nrepl.cljs

@@ -1,75 +1,7 @@
 (ns scittle.nrepl
   (:require
    [clojure.edn :as edn]
-   [sci.ctx-store :as store]
+   [sci.nrepl.server :as nrepl-server]))
-   [sci.nrepl.completions :refer [completions]]
-   [sci.nrepl.info :refer [info]]
-   [scittle.core :refer [!last-ns eval-string]]))
-
-(defn nrepl-websocket []
-  (.-ws_nrepl js/window))
-
-(defn nrepl-reply [{:keys [id session]} {:keys [ns] :as payload}]
-  (.send (nrepl-websocket)
-         (str
-          (let [ns (or ns (str @!last-ns))]
-            (-> (assoc payload :id id :session session :ns ns)
-                (dissoc :ctx))))))
-
-(defn handle-nrepl-eval [{:keys [code] :as msg}]
-  (let [[kind val] (try [::success (eval-string code)]
-                        (catch :default e
-                          [::error (str e)]))]
-    (case kind
-      ::success
-      (do (nrepl-reply msg {:value (pr-str val)})
-          (nrepl-reply msg {:status ["done"]}))
-      ::error
-      (do
-        (nrepl-reply msg {:err (pr-str val)})
-        (nrepl-reply msg {:ex (pr-str val)
-                          :status ["error" "done"]})))))
-
-(defn handle-nrepl-info [msg]
-  (let [info (info (assoc msg :ctx (store/get-ctx)))]
-    (nrepl-reply msg info)))
-
-(declare ops)
-
-(defn
-  handle-describe
-  [msg]
-  (nrepl-reply
-   msg
-   {:versions {"scittle-nrepl" {"major" "0"
-                                "minor" "0"
-                                "incremental" "1"}}
-    :ops (zipmap
-          (map
-           name
-           (concat
-            (keys ops)
-            ;; sci.nrepl browser_server.clj handles:
-            #{:clone :load-file}
-            ;; we are lying about close?
-            #{"close"}))
-          (repeat {}))
-    :status ["done"]}))
-
-(def ops
-  "Operations supported by the nrepl server."
-  {:eval handle-nrepl-eval
-   :info handle-nrepl-info
-   :eldoc handle-nrepl-info
-   :lookup handle-nrepl-info
-   :describe handle-describe
-   :complete (fn [msg] (let [completions (completions (assoc msg :ctx (store/get-ctx)))]
-                         (nrepl-reply msg completions)))})
-
-(defn handle-nrepl-message [msg]
-  (if-let [handler (ops (:op msg))]
-    (handler msg)
-    (nrepl-reply msg (merge msg {:status ["error" "done"] :err "unkown-op"}))))
 
 (defn ws-url [host port path]
   (str "ws://" host ":" port "/" path))
@@ -78,11 +10,10 @@
   (set! (.-ws_nrepl js/window)
         (new js/WebSocket (ws-url (.-hostname (.-location js/window)) ws-port "_nrepl"))))
 
-(when-let [ws (nrepl-websocket)]
+(when-let [ws (nrepl-server/nrepl-websocket)]
-  (prn :ws ws)
   (set! (.-onmessage ws)
         (fn [event]
-          (handle-nrepl-message (edn/read-string (.-data event)))))
+          (nrepl-server/handle-nrepl-message (edn/read-string (.-data event)))))
   (set! (.-onerror ws)
         (fn [event]
           (js/console.log event))))

src/scittle/replicant.cljs

@@ -0,0 +1,8 @@
+(ns scittle.replicant
+  (:require
+   [sci.configs.cjohansen.replicant :refer [config]]
+   [scittle.core :as scittle]))
+
+(scittle/register-plugin!
+ ::replicant
+ config)