Scripts the page loads for its islands: ES modules, such as the web component an island's elements are, or functions its expressions call.
defscript declares one, from a resource on the classpath. An island whose
elements need it takes it up with use, during its render:
(defscript outline
"The page's outline, which follows the reader as they scroll."
{:resource "app/outline.js"})
(defisland article-outline
[]
(script/use outline)
[:nav [:page-outline]])
How it loads:
path, named by its var, as
co.multiply.tropical.names shows it, and the hash of its content, by
ring/wrap-scripts. The URL changes with the
content, so the browser keeps a script as long as it likes, and loads a
changed one anew.tags, so they
load with the page (ring/handler's :scripts).What a script must know:
<script type="module">, deferred, and in
strict mode. It may import other modules by absolute URL.customElements.define won't redefine a
name, so a component changes on the next page load.In development, a script whose resource is a file is read again when the file changes, at most once a second, so a reload of the page picks up an edit.
Scripts the page loads for its islands: ES modules, such as the web component
an island's elements are, or functions its expressions call.
`defscript` declares one, from a resource on the classpath. An island whose
elements need it takes it up with `use`, during its render:
(defscript outline
"The page's outline, which follows the reader as they scroll."
{:resource "app/outline.js"})
(defisland article-outline
[]
(script/use outline)
[:nav [:page-outline]])
How it loads:
- A script is served at a URL of its own, under `path`, named by its var, as
`co.multiply.tropical.names` shows it, and the hash of its content, by
`ring/wrap-scripts`. The URL changes with the
content, so the browser keeps a script as long as it likes, and loads a
changed one anew.
- The page's own scripts are those the islands of its first frame declared:
the page puts them in its head, with the CSP nonce, through `tags`, so they
load with the page (`ring/handler`'s `:scripts`).
- Over the stream, the session sends each script once, appended to the
page's head, from the first frame in which an island declares it. Datastar
gives the tag the page's nonce. So a script loads whether its island is in
the first frame or patched in later, and in the first frame of a page that
left it out of its head, a little later.
- A module runs once per page, however many tags load it: the browser keeps a
module per URL for the life of the page.
What a script must know:
- It is an ES module: loaded as `<script type="module">`, deferred, and in
strict mode. It may import other modules by absolute URL.
- The island's morph matches an element's children to the server's: what a
script puts into an island's elements is undone by the next render. A web
component draws into a shadow root, which the morph doesn't reach.
- A module that fails to load, such as one blocked for want of the nonce,
stays failed for the page, under any later tag.
- A page keeps the version of a script it loaded first. A changed script
loads under its new URL, but `customElements.define` won't redefine a
name, so a component changes on the next page load.
In development, a script whose resource is a file is read again when the file
changes, at most once a second, so a reload of the page picks up an edit.(defscript script-name & decl)Defines a script: (defscript name doc? {:resource path}), an ES module read
from the resource path on the classpath. {:js string} gives its content
instead.
Defines a script: `(defscript name doc? {:resource path})`, an ES module read
from the resource `path` on the classpath. `{:js string}` gives its content
instead.Where scripts are served: <path><name>.<hash>.js.
Where scripts are served: `<path><name>.<hash>.js`.
(tags scripts nonce)The page's script tags for scripts, URLs as ring/handler gives the page
under :scripts, with the CSP nonce nonce: for the page's head. Given the
page's own, the stream doesn't send them again.
The page's script tags for `scripts`, URLs as `ring/handler` gives the page under `:scripts`, with the CSP nonce `nonce`: for the page's head. Given the page's own, the stream doesn't send them again.
(url script)The URL script is served at now.
The URL `script` is served at now.
(use script)Takes up script in this island: the page loads it, once, from the first
frame in which an island declares it. Returns its URL, for an expression that
imports it. A hook: call it during the render.
Takes up `script` in this island: the page loads it, once, from the first frame in which an island declares it. Returns its URL, for an expression that imports it. A hook: call it during the render.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |