Clojurians Log v2
scittle
Is there any way to force a x-scittle section to run before the next script tag? I'm registering a function window.bla through scittle and would like to use it in another script section later (that script is also imported and makes a call to window.bla). However, it seems that the script calling the function is loaded before the x-scittle script completes and thus can't find the function.
script tags execute in the order that they appear in the page so it should work
maybe if you list your source here, I can see what's going on
or do you mean a next javascript script tag?
<html>
<head>
<script type="application/javascript"
src=""></script>
<script type="application/javascript"
src=""></script>
<script type="application/x-scittle">
(require
'[replicant.string :as s]
'[clojure.edn :as edn]
'[replicant.dom :as r])
(println "I'm loading myself")
(defn renderelm [elem hic]
(def el (js/document.getElementById elem))
(println elem)
(println el)
(r/render el (edn/read-string hic))
)
(set! (.-renderelem js/window) renderelm)
</script>
</head>
<body>
<div data-signals="{game_id: '', test_hiccup: '[:p "iiiiihiii"]'}"></div>
<section class="section">
<div class="container has-text-centered">
<div id="replicanttest" data-text="window.renderelem('replicanttest', $test_hiccup)"></div>
</div>
</section>
</body>
<script type="module" src=""></script>
</html> I'm registering renderelem in the head part. For safety I'm loading datastar after body. The data-text attribute gets triggered by datastar. Still it can't find window.renderelem
the issue here is that datastar is probably earlier in processing the stuff than scittle has loaded stuff
exactly. But how come as the x-scittle stuff is in the head
because scittle doesn't control your whole html page and your browser
it might also be a datastar problem (maybe it doesn't allow access to custom properties)
scittle tags are processed on DOMContentLoaded https://github.com/babashka/scittle/blob/5b3a3acb5433a80b0e7560b559b050693115e018/src/scittle/core.cljs#L139
but you can fire that thing earlier if you want to
that would be nice! My alternative route would be to include datastar in x-scittle by manipulating the dom
you can just call scittle.core.disable_autoeval or whatever it's called and then call scittle.core.eval_script_tags before you even load datastar in the next script tag
in a javascript tag
before the x-scittle tags
or after
since they must appear in the page first
so maybe first list the x-scittle tags to ensure they exists. then disable auto eval in a javascript tag. then load scittle. then call eval-script-tags
no sorry. you must first load scittle since you need scittle to stop auto-eval
so: • scittle load tag • disable auto eval • list x-scittle tags • call scittle.eval_script_tags
and then load datastar
note that eval_script_tags is async for src="foo.cljs"
you can also defer datastar maybe with defer=true
this may also work:
<script type="module">
await scittle.core.eval_script_tags();
await import("");
</script> trying that right now
this works, but the x-scittle is loaded twice (probably once again on dom loaded). I think I should be able to figure that out.
Probably just disable the auto-eval?
as I said earlier:
<script type="module">
scittle.core.disable_auto_eval();
await scittle.core.eval_script_tags();
await import("");
</script> Thanks a lot for your continuing help!
what you are seeing here is that datastar is setting the text of the replicant id element with the result of replicant.render (which is a dom element seemingly). interesting mix of technologies ;)
and doesn't work 🤣
well, it works, but probably not how you want it ;)
but what does work is to have another div which sets the target div content