Clojurians Log v2

@arohner next time, #scittle is the right channel for this, but I'll answer your question here. scittle doesn't let you load javascript files (as of now). I think to load an ESM JS file it's best to load it in a type="module" script tag, then globally define the module into a javascript var and then use the javascript var from the scittle code. It's not as convenient but this is the only thing that works currently I think

Sorry, I was in #sci and just assumed #scittle didn’t exist

nbb does a better job with loading ESM code. to make scittle do the same, I'll have to move to async SCI to load ESM modules, e.g. with (require ["https://..."])

no worries. you're in London right? are you coming over to reClojure on Monday?

I used to be in London. Moved back home to Austin, TX last August

I see

you could do something like this:

<script type="module">
  import { v4 as uuidv4 } from '';
  window.uuid = { v4: uuidv4 };
</script>

<script type="application/x-scittle">
(ns uuid.core)

(defn v4 [] (js/uuid.v4))
</script>

<script type="application/x-scittle">
(ns my-app
  (:require [uuid.core :as uuid]))

(js/setTimeout
  (fn []
    (js/console.log (uuid/v4)))
  1000)
</script>

multiple x-scittle tags can race, right? because each calls XMLHttpRequest, and there’s no ordering guarantee?

they are executed in order of the page

but type=module is probably executed async so that one can race which complicates things a little bit

there is a ordering guarantee of x-scittle script blocks though

(defn- eval-script-tags* [script-tags]
  (when-let [tag (first script-tags)]
    (if-let [src (.getAttribute tag "src")]
      (let [req (js/XMLHttpRequest.)
            _ (.open req "GET" src true)
            _ (gobject/set req "onload"
                           (fn [] (this-as this
                                    (let [response (gobject/get this "response")]
                                      (gobject/set tag "scittle_id" src)
                                      ;; save source for error messages
                                      (store/swap-ctx! assoc-in [:src src] response)
                                      (sci/binding [sci/file src]
                                        (eval-string response)))
                                    (eval-script-tags* (rest script-tags)))))]

because the network/browser controls when the response comes back?

because eval-script-tags* is called on the rest of the script tags only after the first one executes

so the recursion is done as part of the request callback

aha, thanks

I guess you could kick off eval-script tags manually in the async modue script tag

to ensure that's loaded

Hey @arohner - now there's finally a sane way of dealing with JS libs in scittle: https://github.com/babashka/scittle/blob/main/doc/js-libraries.md

Awesome, thank you!