simon/scittle
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add js lib docs

Browse source
This commit is contained in:
Michiel Borkent 2025-08-21 15:01:10 +02:00
parent 7aebb5bbb0
commit 3129a212b3
5 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

3
CHANGELOG.md
View file

@ -9,7 +9,10 @@
<!-- - Create Github release with updated links from `doc/links.md` -->
<!-- - `bb gh-pages` -->
## 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))
- Potentially breaking: `(.-foo-bar {})` now behaves as `{}.foo_bar`, i.e. the property or method name is munged.
## v0.7.26 (2025-08-20)

2
deps.edn
View file

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

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. Replace `js/scittle.js` with a CDN version
``` 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>
```

6
resources/public/index.html
View file

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