Compare commits

...

9 commits

Author SHA1 Message Date
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
16 changed files with 112 additions and 43 deletions

1
.gitignore vendored
View file

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

View file

@ -9,7 +9,14 @@
<!-- - Create Github release with updated links from `doc/links.md` --> <!-- - Create Github release with updated links from `doc/links.md` -->
<!-- - `bb gh-pages` --> <!-- - `bb gh-pages` -->
## v0.7.25 (2025-08-20) ## 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)) - [#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)) - [#118](https://github.com/babashka/scittle/issues/118): add `goog.string/format` ([@jeroenvandijk](https://github.com/jeroenvandijk))

View file

@ -3,7 +3,7 @@
{org.clojure/clojure {:mvn/version "1.11.1"} {org.clojure/clojure {:mvn/version "1.11.1"}
thheller/shadow-cljs {:mvn/version "3.1.8"} thheller/shadow-cljs {:mvn/version "3.1.8"}
org.babashka/sci {:git/url "https://github.com/babashka/sci" org.babashka/sci {:git/url "https://github.com/babashka/sci"
:git/sha "f8015f925f77ec5fd65c776d06345328eccf7e25"} :git/sha "756376056b32198d96dd5b272cee8fc483db60df"}
#_{:local/root "../babashka/sci"} #_{:local/root "../babashka/sci"}
reagent/reagent {:mvn/version "1.1.1"} reagent/reagent {:mvn/version "1.1.1"}
no.cjohansen/replicant {:mvn/version "2025.03.27"} no.cjohansen/replicant {:mvn/version "2025.03.27"}

View file

@ -90,20 +90,20 @@ To create a new NPM release:
- Prepare version `package.json`, except patch (if anything should change here) - 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 - 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.27`
- Create Github release with updated links from `doc/links.md` - Create Github release with updated links from `doc/links.md`
- `bb gh-pages` - `bb gh-pages`
<!-- To upgrade examples: --> <!-- 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.27.1.0/g' -->
<!-- bb release --> <!-- bb release -->
<!-- cd gh-pages --> <!-- cd gh-pages -->
<!-- git checkout -b v0.7.24 --> <!-- git checkout -b v0.7.27 -->
<!-- git push --set-upstream origin v0.7.24 --> <!-- git push --set-upstream origin v0.7.27 -->
<!-- git checkout gh-pages --> <!-- git checkout gh-pages -->
<!-- cd .. --> <!-- 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.27` tag. -->

49
doc/js-libraries.md Normal file
View file

@ -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>
```

View file

@ -1,20 +1,20 @@
https://cdn.jsdelivr.net/npm/scittle@0.7.24/dist/scittle.js https://cdn.jsdelivr.net/npm/scittle@0.7.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/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.27/dist/dev/scittle.cljs-devtools.js

View file

@ -21,7 +21,7 @@ the normal routine:
``` html ``` html
<script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</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.27/dist/scittle.nrepl.js" type="application/javascript"></script>
``` ```
Also include the CLJS file that you want to evaluate with nREPL: Also include the CLJS file that you want to evaluate with nREPL:

View file

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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.27/dist/scittle.js" type="application/javascript"></script>
<script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</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.27/dist/scittle.nrepl.js" type="application/javascript"></script>
<script type="application/x-scittle" src="playground.cljs"></script> <script type="application/x-scittle" src="playground.cljs"></script>
</head> </head>
<body> <body>

4
package-lock.json generated
View file

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

View file

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

View file

@ -1,13 +1,13 @@
<html> <html>
<head> <head>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.1/dist/es-module-shims.js"></script> <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.27/dist/scittle.js"></script>
<script>scittle.core.disable_auto_eval();</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@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 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.27/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.27/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.27/dist/scittle.promesa.js"> </script>
<script type="importmap"> <script type="importmap">
{ {

View file

@ -1,7 +1,7 @@
<html> <html>
<head> <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.27/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.27/dist/scittle.cljs-ajax.js" type="application/javascript"></script>
<script type="application/x-scittle"> <script type="application/x-scittle">
(require '[ajax.core :refer [GET]]) (require '[ajax.core :refer [GET]])

View file

@ -1,6 +1,6 @@
<html> <html>
<head> <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.27/dist/scittle.js" type="application/javascript"></script>
<script type="application/x-scittle"> <script type="application/x-scittle">
(defn my-alert [] (defn my-alert []
(js/alert "You clicked!")) (js/alert "You clicked!"))

View file

@ -1,9 +1,9 @@
<html> <html>
<head> <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.27/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@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 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.27/dist/scittle.reagent.js" type="application/javascript"></script>
<script type="application/x-scittle"> <script type="application/x-scittle">
(require '[reagent.core :as r] (require '[reagent.core :as r]
'[reagent.dom :as rdom]) '[reagent.dom :as rdom])

View file

@ -87,7 +87,7 @@
To embed scittle in your website, it is recommended to use the links To embed scittle in your website, it is recommended to use the links
published to 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.27">releases
page</a>. page</a>.
Include <tt>scittle.js</tt> and write a <tt>script</tt> tag Include <tt>scittle.js</tt> and write a <tt>script</tt> tag
@ -160,6 +160,12 @@
(js/console.log "In cljs")) (js/console.log "In cljs"))
</code></pre> </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> <a name="repl"></a>
<h2><a href="#nrepl">REPL</a></h2> <h2><a href="#nrepl">REPL</a></h2>

View file

@ -53,13 +53,19 @@
'sci.core {'stacktrace sci/stacktrace 'sci.core {'stacktrace sci/stacktrace
'format-stacktrace sci/format-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! (store/reset-ctx!
(sci/init {:namespaces namespaces (sci/init {:namespaces namespaces
:classes {'js js/globalThis :classes {'js js/globalThis
:allow :all :allow :all
'Math js/Math} 'Math js/Math}
:ns-aliases {'clojure.pprint 'cljs.pprint} :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)")) (unchecked-set js/globalThis "import" (js/eval "(x) => import(x)"))